Skip to content

Switch CSS

October 25, 2006

<link rel=”stylesheet” href=”main.css” mce_href=”main.css” type=”text/css” />
<link rel=”alternate stylesheet” title=”Higher Contrast” href=”contrast.css” mce_href=”contrast.css” type=”text/css” />
<link rel=”alternate stylesheet” title=”Gratuitous CSS” href=”hot.css” mce_href=”hot.css” type=”text/css” />

<div id=”switcher”>
  <ul>
    <li id=”style-default”><a href=”styleswitch.html” mce_href=”styleswitch.html”>Default style</a></li>
    <li id=”style-contrast”><a href=”styleswitch.html” mce_href=”styleswitch.html”>Higher Contrast</a></li>
    <li id=”style-hot”><a href=”styleswitch.html” mce_href=”styleswitch.html”>Gratuitous CSS</a></li>
  </ul>
</div>

/* switcher styles */
#switcher ul {
  text-align: right;
  list-style: none;
}

#switcher ul li {
  border-left: 1px solid;
  list-style: none;
  display: inline;
  padding: 0 0 0 1em;
  margin: 0 1em 0 0;
}

#switcher #style-default {
  border-left: 0;
  padding-left: 0;
}

#switcher ul a.now {
  color: #000;
  font-weight: bold;
  text-decoration: none;
}
/* END switcher styles */

<js>
// activeCSS: Set the active stylesheet
function activeCSS(title) {
  var i, oneLink;
  for (i = 0; (oneLink = document.getElementsByTagName(“link”)[i]); i++) {
    if (oneLink.getAttribute(“title”) && findWord(“stylesheet”, oneLink.getAttribute(“rel”))) {
      oneLink.disabled = true;
      if (oneLink.getAttribute(“title”) == title) {
        oneLink.disabled = false;
      }
    }
  }
}

// findWord: Used to find a full word (needle) in a string (haystack)
function findWord(needle, haystack) {
  return haystack.match(needle + “\\b“);
}
</js>
<div id=”switcher”>
 <ul>
  <li id=”style-default”><a href=”styleswitch.html” mce_href=”styleswitch.html” onclick=”activeCSS(‘default’); return false”>Default style</a></li>
  <li id=”style-contrast”><a href=”styleswitch.html” mce_href=”styleswitch.html” onclick=”activeCSS(‘Higher Contrast’); return false”>Higher Contrast</a></li>
<li id=”style-hot”><a href=”styleswitch.html” mce_href=”styleswitch.html” onclick=”activeCSS(‘Gratuitous CSS’); return false”>Gratuitous CSS</a></li>
 </ul>
</div>
<cookie js>

// Set the cookie
function setCookie(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+”;”;
}

And now, in our original activeCSS() function, we can add a single line to store our user’s preferences in a cookie on the user’s computer:
// Set the active stylesheet
function activeCSS(title) {
  var i, oneLink;
  for (i = 0; (oneLink = document.getElementsByTagName(“link”)[i]); i++) {
    if (oneLink.getAttribute(“title”) && findWord(“stylesheet”, oneLink.getAttribute(“rel”))) {
 oneLink.disabled = true;
      if (oneLink.getAttribute(“title”) == title) {
         oneLink.disabled = false;
      }
    }
 }
 setCookie(“mystyle”, title, 365);
}
</cookie js>

window.onload = initCSS;
// initCSS: If there’s a “mystyle” cookie, set the active stylesheet when the page loads
function initCSS() {
 var style = readCookie(“mystyle”);
 if (style) {
   activeCSS(style);
 }
}
// Read the cookie
function readCookie(name) {
 var needle = name + “=”;
 var cookieArray = document.cookie.split(‘;’);
 for(var i=0;i < cookieArray.length;i++) {
   var pair = cookieArray[i];
   while (pair.charAt(0)==’ ‘) {
     pair = pair.substring(1, pair.length);
   }
   if (pair.indexOf(needle) == 0) {
     return pair.substring(needle.length, pair.length);
   }
 }
 return null;
}
/*
 Onload
*/
window.onload = initCSS;
// initCSS: If there’s a “mystyle” cookie, set the active stylesheet when the page loads
function initCSS() {
 var style = readCookie(“mystyle”);
 if (style) {
 activeCSS(style);
 }
}
/*
 Switcher functions
*/
// activeCSS: Set the active stylesheet
function activeCSS(title) {
 var i, oneLink;
 for (i = 0; (oneLink = document.getElementsByTagName(“link”)[i]); i++) {
 if (oneLink.getAttribute(“title”) && findWord(“stylesheet”, oneLink.getAttribute(“rel”))) {
 oneLink.disabled = true;
 if (oneLink.getAttribute(“title”) == title) {
 oneLink.disabled = false;
 }
 }
 }
 setCookie(“mystyle”, title, 365);
}
// findWord: Used to find a full word (needle) in a string (haystack)
function findWord(needle, haystack) {
 var init = needle + “\\b“;
 return haystack.match(needle + “\\b“);
}
/*
 Cookie functions
*/
// Set the cookie
function setCookie(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+”;”;
}
// Read the cookie
function readCookie(name) {
 var needle = name + “=”;
 var cookieArray = document.cookie.split(‘;’);
 for(var i=0;i < cookieArray.length;i++) {
 var pair = cookieArray[i];
 while (pair.charAt(0)==’ ‘) {
 pair = pair.substring(1, pair.length);
 }
 if (pair.indexOf(needle) == 0) {
 return pair.substring(needle.length, pair.length);
 }
 }
 return null;
}
<ul>
 <li id=”style-default”><a href=”switch.php?style=” mce_href=”switch.php?style=”>Default style</a></li>
 <li id=”style-contrast”><a href=”switch.php?style=contrast” mce_href=”switch.php?style=contrast”>Higher Contrast</a></li>
 <li id=”style-hot”><a href=”switch.php?style=hot” mce_href=”switch.php?style=hot”>Gratuitous CSS</a></li>
</ul>

file.name?name=value
switch.php?style=contrast
<?php
$domain = “my-site-here.com”;
if (stristr($_SERVER[‘HTTP_REFERER’], $domain)) {
 $bounce_url = $_SERVER[‘HTTP_REFERER’];
} else {
 $bounce_url = “http://$domain/“;
}
setcookie(‘mystyle’, $_GET[‘style’], time() + 31536000);
header(“Location: $bounce_url”);
?>
<link rel=”stylesheet” href=”main.css” mce_href=”main.css” type=”text/css” />
<?php
if ($_COOKIE[‘mystyle’]) {
?>
<link rel=”stylesheet” href=”<?= $_COOKIE[‘mystyle’]; ?>.css” type=”text/css” media=”screen” />
<?php
}
?>
<link rel=”alternate stylesheet” title=”Higher Contrast” href=”contrast.css” mce_href=”contrast.css” type=”text/css” />
<link rel=”alternate stylesheet” title=”Gratuitous CSS” href=”hot.css” mce_href=”hot.css” type=”text/css” />
//print css
body {
 background: #FFF;
 color: #000;
 font: 12pt/1.4em Georgia, Garamond, “Times New Roman”, Times, serif;
}
h1, h2 {
 font-weight: normal;
 margin: 1em 0;
 padding: 0;
 text-transform: small-caps;
}
img.portrait, #switcher {
 display: none;
}
#blurb {
 background: #CCC;
 border: 1px solid #999;
 float: right;
 font: 16pt/1.5em Helvetica, Arial, Geneva, Verdana, sans-serif;
 margin: 0 0 1em 1em;
 padding: 1em;
 text-align: right;
 text-transform: small-caps;
 width: 10em;
}
<link rel=”stylesheet” href=”main.css” mce_href=”main.css” type=”text/css” media=”screen” />
<link rel=”stylesheet” href=”print.css” mce_href=”print.css” type=”text/css” media=”print” />
<link rel=”alternate stylesheet” title=”Higher Contrast” href=”contrast.css” mce_href=”contrast.css” type=”text/css” media=”screen” />
<link rel=”alternate stylesheet” title=”Gratuitous CSS” href=”hot.css” mce_href=”hot.css” type=”text/css” media=”screen” />

2 Comments leave one →
  1. July 22, 2008 4:14 pm

    I86THw gfb07yvt9d6t94wbtx63bgq7d

  2. April 26, 2011 10:33 am

    Ene hichele yg ydag ali ali hesguud ni ygad bga eniigee ymar nertei ymar orgotgoltoi file bolgoj hadgalahaa bugdiig ni oilgomjtoi hiigeechee. !!!!!!!!!!! ym higieed bgaan bol hiisen shig hiigeechee

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: