Style Sheet Switcher

**netkid** · Mar 6, 2005 14:41

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!

**netkid** · Mar 6, 2005 15:03

nvm i got it to work so far...

User Tag List

Thread: Style Sheet Switcher

Thread Tools

Display

Hybrid View

Style Sheet Switcher

Bookmarks

Bookmarks

Posting Permissions