Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 1 of 1
  1. #1
    New to the CF scene
    Join Date
    Aug 2008
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Javascraipt stylesheet switcher help to improve

    Hiya, I was wondering if you could give me a few tips/ideas. I have a stylesheet switcher on my website which works ok, the problem is refining it as there are a couple of things that aren't so great...

    First of all, once the stylesheet has been changed to one that is not the default, when I click on another page or refresh, the default styles load first and then change to the new stylesheet that's been set. I think this has to do with the order the page is loading in. Ideally I'd obviously want the new set style to kick in right away on each page so there's a smooth transition between pages. My other concern is that once I have changed to another stylesheet and I change back to the default, if I go onto another page or click refresh it goes back to the previous non-default stylesheet instead of sticking to the default one I've just changed it to.

    Any ideas would be greatly appreciated, thanks for your time!



    Javascript

    Code:
    <script type="text/javascript">
    
    function changeStyleSheet(title) {
       var links = document.getElementsByTagName("link");
    	for(var i = 0; i < links.length; i++) {
    		if(links[i].getAttribute("title")) links[i].disabled = true;
    		if(links[i].getAttribute("title") == title) {
    			links[i].disabled = false;
    			var expires = new Date();
    			expires.setTime(expires.getTime() + (30*24*60*60*1000));
    			document.cookie = "stylesheet="+title+";expires="+expires.toGMTString()+";path=/";
    		}
    	}
    }
    
    function getStylesheetFromCookie() {
    	var cookie = document.cookie.split(";");
    	for(var i = 0; i < cookie.length; i++) {
    		var values = cookie[i].split("=");
    		if (values[0] == "stylesheet") changeStyleSheet(values[1]);
    	}
    }
    
    </script>


    HTML

    Code:
    <head>
    
    ...
    
    <link type="text/css" rel="stylesheet" href="default.css" />
    <link type="text/css" rel="alternate stylesheet" href="alt.css" title="alt" />
    
    </head>
    
    
    <body onload="getStylesheetFromCookie()">
    
    <ul>
      <li><a href="#" onclick="changeStyleSheet('default')" title="default">default</a></li>
      <li><a href="#" onclick="changeStyleSheet('alt')" title="alt">alt</a></li>
    </ul>
    
    ...
    Last edited by gammblodder; 07-27-2009 at 05:49 PM.


 

Tags for this Thread

Posting Permissions

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