The look of this page will change dynamically, without reloading, when the stylesheet is changed. The chosen style is automatically applied when the page is revisited, as it is stored and remembered in a cookie which expires in 90 days time.
Four stylesheets are included in the document <head>, the first containing basic rules which are applied to the page regardless of the chosen option, and the other three, introduced as alternate stylesheet, each suggesting their own variations for some properties.
<link href="/web/style.css" rel="stylesheet" type="text/css" title="style-default"/> <link href="style-black.css" rel="alternate stylesheet" type="text/css" title="style-black"/> <link href="style-green.css" rel="alternate stylesheet" type="text/css" title="style-green"/> <link href="style-peach.css" rel="alternate stylesheet" type="text/css" title="style-peach"/>
To present the available styles and allow the user to communicate his choices, a very suitable element seems an old-fashioned <select> list. It can be hardcoded in the source or inserted by the Javascript in many ways, as long as its onchange event fires in the right direction:
<form action="" style="font:message-box;"> <fieldset><legend>Style selector</legend> <label for="styles">Please indicate your preference:</label> <select id="styles" onchange="setstyle( this ); "> <option value="" selected="selected" class="sd">Styles</option> <option value="style-black">Black Attack</option> <option value="style-green">Green sheen</option> <option value="style-peach">Peach ‘n’ punk</option> </select></fieldset> </form>
The Javascript functions and statements, should all be pretty self-explicatory. If the values of the <option>s match the titles of the alternate stylesheets, it should all come together in the end.
function setcookie( name, value, expiry, path ) {
if(expiry) {
var now = new Date();
now.setTime( now.getTime() + Math.round(86400000*expiry) );
expiry = now.toGMTString();
}
expiry = expiry ? '; expires=' + expiry : '';
path = path ?'; path=' + path:'';
document.cookie = name + '=' + escape(value) + expiry + path;
}
function getcookie( name ) {
var cookie = document.cookie;
if( cookie.indexOf( name + '=' ) < 0 ) { return null; }
var start = cookie.indexOf( name + '=' ) + name.length + 1;
var finish = cookie.substring( start, cookie.length );
finish = ( finish.indexOf( ';' ) < 0 ) ? cookie.length : start + finish.indexOf( ';' );
return unescape( cookie.substring( start, finish ) );
}
function setsheet( name ) {
var l = document.getElementsByTagName( 'link' ), i, o, t;
for( i=0; (o = l[i]); i++ ) {
if( 'alternate stylesheet'===o.getAttribute( 'rel' ) && ( t = o.getAttribute( 'title' ) ) ) {
o.disabled = true; // browser bug: will not enable on next line otherwise
o.disabled = ( t !== name );
} } }
function setstyle( list ) {
var name;
if( ( name = list.options[ list.selectedIndex ].value ) ) {
setcookie( 'style', name, 90, '/' );
setsheet( name );
} }
// do this before the <body> opening tag and the user will see no flickering
if( ( name = getcookie( 'style' ) ) ) {
setsheet( name );
}