Styleswitch

import/link rel

[gulliver]

I've been using a style switcher for a while... nought complex - just to offer a larger font size (basic is12px) for those (like me) with tired eyes.

Now I'm using import for the base style (to hide from NN etc), I'm assuming I need to also import (rather than link rel) the alternates.

How?

And, if the alternates are on imports, are they only called when required and not automatically loaded as they would be with link rel - and thus offer reduction in initial load time?

[Span]

Old NN won't see your alternate CSS if I'm right (used ALA's styleswitcher a while ago) so there's no need to hide them.

And if you use your styleswitcher only for font-size, your alt CSS should only contain a few lines. The styleswitcher js adds much more to the page load time..

[gulliver]

Thanks - and a couple queries...

>Old NN won't see your alternate CSS...

Perhaps I'm misunderstanding - I think it reads a link rel unless it has a media value other than "screen".

>And if you use your styleswitcher only for font-size, your alt CSS should only contain a few lines.

Oh, I wish. With the various divs, headings, classes, forms etc the sheet is the same size as the original.

[gulliver]

Perhaps this moves it on...

i found an article which switches with import.

The (the options have been slightly adapted by me) html is

<select class="select2" onchange="var v=this.options[this.selectedIndex].value; if (v!= '') selectStyle('style', v);">
<option value="">-- select text size --</option>
<option value="small">small</option>
<option value="normal">normal</option>
<option value="larger">larger</option>
</select>

and the js...

function makeCookie(Name,Value,Expiry,Path,Domain,Secure){
if (Expiry!= null) {
var datenow = new Date();
datenow.setTime(datenow.getTime() + Math.round(86400000*Expiry));
Expiry = datenow.toGMTString();
}

Expiry = (Expiry!= null)? '; expires='+Expiry : '';
Path = (Path!= null)?'; path='+Path:'';
Domain = (Domain!= null)? '; domain='+Domain : '';
Secure = (Secure!= null)? '; secure' : '';

document.cookie = Name + '=' + escape(Value) + Expiry + Path + Domain + Secure;
}

function readCookie(Name) {
var cookies = document.cookie;
if (cookies.indexOf(Name + '=') == -1) return null;
var start = cookies.indexOf(Name + '=') + (Name.length + 1);
var finish = cookies.substring(start,cookies.length);
finish = (finish.indexOf(';') == -1)? cookies.length : start + finish.indexOf(';');
return unescape(cookies.substring(start,finish));
}

function selectStyle (vCookieName, vSelection) {
//WRITE COOKIE
makeCookie(vCookieName, vSelection, 90, '/');
//RELOAD THE CURRENT PAGE
self.location = self.location;
}

if (document.cookie.indexOf('style=')!=-1) {
css = readCookie('style');
//IMPORT SELECTED STYLE SHEET
document.write('<style type="text/css" media="screen">@import "' + css + '.css";</' + 'style>\n');
}

Tests so far suggest it works with even the default style on import.

I can't see any drawbacks - and it offers the advantages of hiding from NN and also not initially loading might-not-be-wanted alternate styles.

Anyone know of a way to change that drop-down to a series of clickable links?

[edited by: SuzyUK at 3:41 pm (utc) on June 30, 2004]
[edit reason] sorry no URLs see TOS #13 [webmasterworld.com] [/edit]

[createErrorMsg]

Use <ul> and <li>, styled with list-style: none and display: inline. Should give you a horizontal row of links that spiders and SEs read as a part of the page semantics.

[gulliver]

>Use <ul> and <li>, styled with list-style: none and display: inline. Should give you a horizontal row of links that spiders and SEs read as a part of the page semantics.

Thanks.

Despite various combinations, I couldn't get this to work.

Advice on where exactly to place the ul and li will be appreciated.