<?xml version="1.0" encoding="utf-8"?>
<?xml-stylesheet type="text/css" href="#inline" media="all"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>Essential's Demo</title>
<style id="inline" type="text/css" media="all">
body { background-color: #00F; color: #FFF; }
</style>
<script type="text/javascript">
/* (c) Copyright 2008-2009 Essential Works. All rights reserved. ~
Permission granted for the use of this script, as long as all credits ramain as is.
This code has been tested and before released and working 100% with OP8 and IE */
function setCookie(name, value, expires, path, domain, secure) {
expires = expires ? '; expires=' + expires.toGMTString() : '';
path = path ? '; path=' + path : '';
domain = domain ? '; domain=' + domain : '';
secure = secure ? '; secure' : '';
var cookies = name + '=' + escape(value) + expires + path + domain + secure;
document.cookie = cookies;
}
function getCookie(name) {
var thisName = name + '=';
var firstIndex = document.cookie.indexOf(thisName);
if (firstIndex == -1) { return null; }
var lastIndex = document.cookie.indexOf(';',firstIndex + thisName.length);
if (lastIndex == -1) { lastIndex = document.cookie.length;
return unescape(document.cookie.substring(firstIndex + thisName.length, lastIndex)); }
}
function deleteCookie(name, path, domain) {
if (getCookie(name)) {
document.cookie = name +"=" + path + domain +
"; expires=Thu, 01-Jan-10 00:00:01 GMT"
} }
function cookieDate(date) {
var thisDate = new Date(0);
var refDate = thisDate.getTime();
if ( refDate > 0 ) { date.setTime(date.getTime() - refDate); }
}
function saved() {
var now = new Date();
cookieDate(now)
var lists = document.all ? document.all.frm : document.forms['frm'];
now.setTime(now.getTime() + (31 * 24 * 60 * 60 * 1000));
var name = getCookie('name');
name = lists.lst.options[lists.lst.selectedIndex].value;
setCookie('name', name, now);
}
function themes() {
var loadStyle = document.all ? document.all.inline : document.getElementById('inline');
/* There are alot of ways to this, just keep those mind workin. Here's the basic of it and i hope you appreciate this. */
var form = document.all ? document.all.frm : document.forms['frm'];
/* Ok, let's say (for example you have this two style sheets, named as "black.css" and the other one is "white.css")
Now all you need to do is to - apply specific rules on this css documents, which is the "black.css" and "white.css"
*/
switch(getCookie(name)) {
case 'black.css' : form.lst.selectedIndex = 1; break;
case 'white.css' : form.lst.selectedIndex = 2; break;
default : alert('Please select a theme on the list!'); }
loadStyle.innerHTML = '@import "' + getCookie(name) + '";'; }
if (window.addEventListener)
window.addEventListener('load',themes,false);
else if (window.attachEvent)
window.attachEvent('onload',themes);
else if (document.getElementById)
window.onload = theme;
</script>
</head>
<body>
<h1>Essential Works</h1>
<form id="frm" action="javascript:void(0);">
<div>
<select name="lst" size="1" onchange="saved();">
<option value="none" selected="selected">Select Your Theme</option>
<!-- Path or filename of your CSS must be declared from the value of this OPTION ~
black.css is the default -->
<option value="black.css">Black Theme</option>
<!-- Same process must be applied on this OPTION ~
default is white.css -->
<option value="white.css">White Theme</option>
</select>
</div>
</form>
</body>
</html>