SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Evangelist netkid's Avatar
    Join Date
    Jun 2003
    Location
    USA
    Posts
    563
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Style Sheet Switcher

    My page w/ a switcher does not seem to switch properly.

    Index: (layout.css is the default I want when the user opens the page)
    Code:
    <?php echo "<?xml version=\"1.0\" encoding=\"iso-8859-1\"?".">"; ?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>River Hill High School &lt;Home&gt;</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    
    <link title="default"  href="layout.css" rel="stylesheet" type="text/css" />
    <link title="yellow" href="yellow.css" rel="alternate stylesheet" type="text/css" />
    <script language="JavaScript" src="styleswitcher.js" type="text/javascript"></script>
    </head>
    
    <body>
    	<div id="container">
    		
      <div id="banner">
        <div id="header_img" align="center"></div>
      </div>
    		
    		
    			
    <div id="navcontainer">
    	<ul id="navlist">
    	<li><a href="index.php" title="Home">Home</a></li>
    	<li><a href="bplan.php" title="Business Plan">Business Plan</a></li>
    	<li><a href="about.php" title="About Us">Gallery</a></li>
    	<li><a href="partners.php" title="Partners">Partners</a></li>
    	<li><a href="/forum/" title="Forum">Forum</a></li>
    	<li><a href="links.php" title="Links">Links</a></li>
    	<li><a href="contact.php" title="Contact Us">Contact Us</a></li>
    	</ul>
    </div>
    		
    	<div id="sidebar-a">    
        <p onclick="setActiveStyleSheet('yellow'); return false"  onkeypress="setActiveStyleSheet('yellow'); return false"><a href="#">Yellow</a></p>
      </div>	
    		<div id="content">
    		
        <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
          tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
          quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
          consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse 
          cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat 
          non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    		
    		</div>
    
    		
      <div id="footer">&copy; 2005 FBLA. All Rights Reserved.</div>
    
    	</div>
    </body>
    </html>
    styleswitcher.js:
    HTML Code:
    function setActiveStyleSheet(title) {
      var i, a, main;
      for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
        if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title")) {
          a.disabled = true;
          if(a.getAttribute("title") == title) a.disabled = false;
        }
      }
    }
    
    function getActiveStyleSheet() {
      var i, a;
      for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
        if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title") && !a.disabled) return a.getAttribute("title");
      }
      return null;
    }
    
    function getPreferredStyleSheet() {
      var i, a;
      for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
        if(a.getAttribute("rel").indexOf("style") != -1
           && a.getAttribute("rel").indexOf("alt") == -1
           && a.getAttribute("title")
           ) return a.getAttribute("title");
      }
      return null;
    }
    
    function createCookie(name,value,days) {
      if (days) {
        var date = new Date();
        date.setTime(date.getTime()+(days*24*60*60*1000));
        var expires = "; expires="+date.toGMTString();
      }
      else expires = "";
      document.cookie = name+"="+value+expires+"; path=/";
    }
    
    function readCookie(name) {
      var nameEQ = name + "=";
      var ca = document.cookie.split(';');
      for(var i=0;i < ca.length;i++) {
        var c = ca[i];
        while (c.charAt(0)==' ') c = c.substring(1,c.length);
        if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
      }
      return null;
    }
    
    window.onload = function(e) {
      var cookie = readCookie("style");
      var title = cookie ? cookie : getPreferredStyleSheet();
      setActiveStyleSheet(title);
    }
    
    window.onunload = function(e) {
      var title = getActiveStyleSheet();
      createCookie("style", title, 365);
    }
    
    var cookie = readCookie("style");
    var title = cookie ? cookie : getPreferredStyleSheet();
    setActiveStyleSheet(title);
    layout.css:
    Code:
    		body {
    			background: #e4e4e4;
    			font: 11px Verdana, sans-serif;
    			color: #000;
    			text-align: center;
    		}
    		
    		#container {
    			width: 600px;
    			\width: 620px;
    			w\idth: 600px;
    			border: 0px solid gray;
    			margin: 10px;
    			margin-left: auto;
    			margin-right: auto;
    			padding: 10px;
    			background-color: #fff;
    		}
    
    		#banner {
    			padding: 0px;
    			margin-bottom: 5px;
    			
    
    		}
    
    		#content {
    			padding: 5px;
    			margin-right: 215px;
    			border-bottom: 1px solid gray;
    		}
    
    		#sidebar-a {
    			float: right;
    			width: 200px;
    			\width: 210px;
    			w\idth: 200px;
    			margin: 0;
    			margin-left: 5px;
    			padding: 0px;
    			border-bottom: 1px solid gray;
    		}
    
    		#footer {
    			clear: both;
    			padding: 5px;
    			margin-top: 5px;
    		}
    		
    		#header_img {
    			img-align:center;
    		}
    		
    		 #navlist ul
    {
    margin-left: 0;
    padding-left: 0;
    white-space: nowrap;
    }
    
    #navlist li
    {
    display: inline;
    list-style-type: none;
    }
    
    #navlist a { padding: 3px 10px; }
    
    #navlist a:link, #navlist a:visited
    {
    color: #fff;
    background-color: #036;
    text-decoration: none;
    }
    
    #navlist a:hover
    {
    color: #fff;
    background-color: #369;
    text-decoration: none;
    }
    yellow.css:
    Code:
    		body {
    			background: #fff;
    			font: 11px Verdana, sans-serif;
    			color: #000;
    			text-align: center;
    		}
    		
    		#container {
    			width: 600px;
    			\width: 620px;
    			w\idth: 600px;
    			border: 0px solid gray;
    			margin: 10px;
    			margin-left: auto;
    			margin-right: auto;
    			padding: 10px;
    			background-color: #fff;
    		}
    
    		#banner {
    			padding: 0px;
    			margin-bottom: 5px;
    			background-image: url(header1.png);
    
    		}
    
    		#content {
    			padding: 5px;
    			margin-right: 215px;
    			border-bottom: 1px solid gray;
    		}
    
    		#sidebar-a {
    			float: right;
    			width: 200px;
    			\width: 210px;
    			w\idth: 200px;
    			margin: 0;
    			margin-left: 5px;
    			padding: 0px;
    			border-bottom: 1px solid gray;
    			background-image: url(bg.png);
    		}
    
    		#footer {
    			clear: both;
    			padding: 5px;
    			margin-top: 5px;
    		}
    		
    		#header_img {
    			img-align:center;
    		}
    		
    	 #navlist ul
    {
    margin-left: 0;
    padding-left: 0;
    white-space: nowrap;
    }
    
    #navlist li
    {
    display: inline;
    list-style-type: none;
    }
    
    #navlist a { padding: 3px 10px; }
    
    #navlist a:link, #navlist a:visited
    {
    color: #fff;
    background-color: #036;
    text-decoration: none;
    }
    
    #navlist a:hover
    {
    color: #fff;
    background-color: #369;
    text-decoration: none;
    }
    Thanks in advance!

    Santosh Sankar
    Bullish Bankers

  2. #2
    SitePoint Evangelist netkid's Avatar
    Join Date
    Jun 2003
    Location
    USA
    Posts
    563
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    nvm i got it to work so far...

    Santosh Sankar
    Bullish Bankers


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
  •