Style Sheet Switcher (v1.1)

Thank you for this! (Again, I check at night and won't know if it succeeded until tomorrow.) I really appreciate you working on this, especially since I turned out to be a special case, and ESPECIALLY in the midst of the hurricane! I hope you're taking care and all is well!

The stylesheets need to be where they are because (deep breath, this is long and boring, I don't blame you if you don't read it) I inherited a legacy website with literally hundreds of pages going back to 1999. I'm a volunteer and not a professional webmaster, and have learned slowly over the years mostly by googling for info. When I took over in 2004, the site was already five years old - and in frames. I knew no CSS, just simple HTML. About 4 1/2 years ago, we did a redesign that took the site out of frames, and as this isn't a PHP-based site, the easiest thing to do to embed the menu across the site was to add it from a single file via server-side includes. The logical place for that, of course, is in the body (though I screwed up with some of the archival pages and put it in the head, geesh - but that's okay because the archival pages don't use the style switcher). It was a long, arduous job to insert the SSI code on every page and reupload all the HTML files on the site and I'm hoping to never do it again. (Yes, a text replacer was involved, but there was still a lot of manual checking to do.)

Anyway, we just redesigned again, and the new design is fixed-width rather than relative-width. So I created a menu with a plain-vanilla default style for the archival pages, which would then need to be overwritten with another style for the new root pages. I placed the default style at the top of the new menu file, and then, in the new root pages, placed another SSI with all the root-page stylesheets and the stylesheet switcher directly after it, because of course those styles needed to follow and supercede the default. Nice 'n' easy and it seemed to work. And does, other than the havoc its played in Safari 5 for Mac!

Turns out the hurricane wasn't nearly as severe, at least not in my immediate area as the government and news were saying. But we're not out of the woods. As they begin cleanup, we may still lose power as they work on restoring it to others. That's happened before with lesser storms.

Well, the script should work. I tested it on a local mockup of the page. The only problem was that it wasn't as fast as I'd like. The best way to fix that would be to organize the page properly, with all the stylesheet links in the head followed immediately by the script tag.

But this version seems to speed things up a bit. It moves the links to the head:

Code:

---

//Style Sheet Switcher version 1.1 Oct 10th, 2006
//Author: Dynamic Drive: http://www.dynamicdrive.com
//Usage terms: http://www.dynamicdrive.com/notice.htm

//Unofficial Update to fix Safari 5.1 glitch re: alternate stylesheets or the disabled property in regards to them
// See: http://www.dynamicdrive.com/forums/showthread.php?p=259199 for more info

var manual_or_random="random" //"manual" or "random"
var randomsetting="eachtime" //"eachtime", "sessiononly", or "x days (replace x with desired integer)". Only applicable if mode is random.

//////No need to edit beyond here//////////////
;(function(){
        var sheets = document.getElementsByTagName('link'), re = /stylesheet *$/i, i = 0,
        head = document.getElementsByTagName('head')[0];
        for(var i = 0; i < sheets.length; ++i){
                if(sheets[i].parentNode !== head && re.test(sheets[i].getAttribute('rel'))){
                        head.appendChild(sheets[i]);
                }
        }
})();
function getCookie(Name) {
var re=new RegExp(Name+"=[^;]+", "i"); //construct RE to search for target name/value pair
if (document.cookie.match(re)) //if cookie found
return document.cookie.match(re)[0].split("=")[1] //return its value
return null
}

function setCookie(name, value, days) {
var expireDate = new Date()
//set "expstring" to either future or past date, to set or delete cookie, respectively
var expstring=(typeof days!="undefined")? expireDate.setDate(expireDate.getDate()+parseInt(days)) : expireDate.setDate(expireDate.getDate()-5)
document.cookie = name+"="+value+"; expires="+expireDate.toGMTString()+"; path=/";
}

function deleteCookie(name){
setCookie(name, "moot")
}


function setStylesheet(title, randomize){ //Main stylesheet switcher function. Second parameter if defined causes a random alternate stylesheet (including none) to be enabled
var i, cacheobj, altsheets=[""];
if(setStylesheet.chosen)
try{
document.getElementsByTagName('head')[0].removeChild(setStylesheet.chosen);
}catch(e){}
for(i=0; (cacheobj=document.getElementsByTagName("link")[i]); i++) {
if(cacheobj.getAttribute("rel").toLowerCase()=="alternate stylesheet" && cacheobj.getAttribute("title")) { //if this is an alternate stylesheet with title
cacheobj.disabled = true
altsheets.push(cacheobj) //store reference to alt stylesheets inside array
if(cacheobj.getAttribute("title") == title){ //enable alternate stylesheet with title that matches parameter
cacheobj.disabled = false //enable chosen style sheet
setStylesheet.chosen = document.createElement('link');//cloneNode(false);
setStylesheet.chosen.rel = 'stylesheet';
setStylesheet.chosen.type = 'text/css';
if(cacheobj.media)
setStylesheet.chosen.media = cacheobj.media;
setStylesheet.chosen.href = cacheobj.href;
document.getElementsByTagName('head')[0].appendChild(setStylesheet.chosen);
}
}
}
if (typeof randomize!="undefined"){ //if second paramter is defined, randomly enable an alt style sheet (includes non)
var randomnumber=Math.floor(Math.random()*altsheets.length)
setStylesheet((selectedtitle = altsheets[randomnumber].title));
//altsheets[randomnumber].disabled=false
}
return (typeof randomize!="undefined" && altsheets[randomnumber]!="")? altsheets[randomnumber].getAttribute("title") : "" //if in "random" mode, return "title" of randomly enabled alt stylesheet
}



function chooseStyle(styletitle, days){ //Interface function to switch style sheets plus save "title" attr of selected stylesheet to cookie
if (document.getElementById){
setStylesheet(styletitle)
setCookie("mysheet", styletitle, days)
}
}

function indicateSelected(element){ //Optional function that shows which style sheet is currently selected within group of radio buttons or select menu
if (selectedtitle!=null && (element.type==undefined || element.type=="select-one")){ //if element is a radio button or select menu
var element=(element.type=="select-one") ? element.options : element
for (var i=0; i<element.length; i++){
if (element[i].value==selectedtitle){ //if match found between form element value and cookie value
if (element[i].tagName=="OPTION") //if this is a select menu
element[i].selected=true
else{ //else if it's a radio button
element[i].checked=true
}
break
}
}
}
}

if (manual_or_random=="manual"){ //IF MANUAL MODE
var selectedtitle=getCookie("mysheet")
if (document.getElementById && selectedtitle!=null) //load user chosen style sheet from cookie if there is one stored
setStylesheet(selectedtitle)
}
else if (manual_or_random=="random"){ //IF AUTO RANDOM MODE
if (randomsetting=="eachtime")
setStylesheet("", "random")
else if (randomsetting=="sessiononly"){ //if "sessiononly" setting
if (getCookie("mysheet_s")==null) //if "mysheet_s" session cookie is empty
document.cookie="mysheet_s="+setStylesheet("", "random")+"; path=/" //activate random alt stylesheet while remembering its "title" value
else
setStylesheet(getCookie("mysheet_s")) //just activate random alt stylesheet stored in cookie
}
else if (randomsetting.search(/^[1-9]+ days/i)!=-1){ //if "x days" setting
if (getCookie("mysheet_r")==null || parseInt(getCookie("mysheet_r_days"))!=parseInt(randomsetting)){ //if "mysheet_r" cookie is empty or admin has changed number of days to persist in "x days" variable
setCookie("mysheet_r", setStylesheet("", "random"), parseInt(randomsetting)) //activate random alt stylesheet while remembering its "title" value
setCookie("mysheet_r_days", randomsetting, parseInt(randomsetting)) //Also remember the number of days to persist per the "x days" variable
}
else
setStylesheet(getCookie("mysheet_r")) //just activate random alt stylesheet stored in cookie
}
}

---

Only one person has gotten back to me (with Safari 5.0.6) and he sez it's still not working. But it does run noticeably faster in all my PC browsers now, so there's that. :)

I think unless you're really having fun working on this that we can probably let it go and just hope Safari clears up this bug themselves before too long. The site looks and works fine without the multiple styles, it's just a nice extra.

Thanks again!

That one person may be viewing the page with a previously cached version of the script.

All I can say for sure is that it wasn't working on Safari 5.1 before, and that it is working on it now.

You could have them test the script itself:

http://home.comcast.net/~jscheuer1/s...m_eachtime.htm

to see if it's the script or the page you have it on.

Just heard back from a friend with 5.1 and it's working now! I also had the opportunity to check 5.0.3 today for myself, and that worked as well.

Anyway, thanks so much! Do you have an internet tip jar anywhere? I can't give more than a few bucks, but I appreciate the time you took to solve my very specific problem!

Internet Tip Jar:

http://home.comcast.net/~jscheuer1/side/donate.htm

Ok.. this script works good on PC / Mac, in Firefox, Safari.... But for some reason in chrome it doesn't save the cookie.

Any idea?

Thanks,
Case

Yes sorry!

here you go: http://www.teamteasers.com/test_index.html

I've checked in my Chrome cookies settings and they are set to:
Allow local data to be set (recommended)

If I close it or navigate away, it just comes back to the default. (orange and blue at this time)

Thanks for looking!!
Case

Quote:

---

Originally Posted by casenote

Ok.. this script works good on PC / Mac, in Firefox, Safari.... But for some reason in chrome it doesn't save the cookie.

Any idea?

Thanks,
Case

---

Cookies for this only work live in Chrome. Or you could test it on an intranet/server sandbox. But just locally on your computer it doesn't appear to work.

Live demo:

http://home.comcast.net/~jscheuer1/side/style_switch/

I got it to work on my site too. Well, at least better than it did before.

My problem is that every time I refresh the site or click a link, it goes back to the default style. It doesn't seem to keep/update the cookie.

This is the site in question alexiacob.com/photo

Thank you for the script by the way!

Silviu

later edit:

I found the cookie and these are the saved values:

name: lastvisit
content: expires+in+60+minutes
....
and it expires in 60 minutes