Page 2 of 3 FirstFirst 123 LastLast
Results 11 to 20 of 28

Thread: Style Sheet Switcher (v1.1)

  1. #11
    Join Date
    Aug 2011
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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!
    Last edited by cklemow; 08-28-2011 at 11:59 AM.

  2. #12
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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
    } 
    }
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #13
    Join Date
    Aug 2011
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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!

  4. #14
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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.
    Last edited by jscheuer1; 08-29-2011 at 02:51 PM. Reason: add - You could have them test . . .
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  5. #15
    Join Date
    Aug 2011
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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!

  6. #16
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  7. #17
    Join Date
    Sep 2011
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    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

  8. #18
    Join Date
    Sep 2011
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    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

  9. #19
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Quote Originally Posted by casenote View Post
    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/
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  10. The Following 2 Users Say Thank You to jscheuer1 For This Useful Post:

    casenote (11-03-2011),silviu6482 (10-22-2011)

  11. #20
    Join Date
    Oct 2011
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    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
    Last edited by silviu6482; 10-22-2011 at 10:27 PM.

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •