[SOLVED] Loading a different CSS file using javascript

Deagle · #1 May 17th, 2008, 17:59

Hello

Hopefully this is the right section for this problem. How can i load a different .css file by clicking a button? I have 3 css files. I can load the first one just fine through the <head> tags but how can i load the other 2 when i click two buttons on my html page?

I have been searching for example but i couldnt find any. I will appreciate any help.

welshstew · #2 May 17th, 2008, 19:07

you just need a style switcher...

add the following to a javascript file and call it something logical (styleswitch for instance)

Code: Select all

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);

then add it to your page in the head section

Code: Select all

<head>
<script type="text/javascript" src="styleswitch.js"></script>
</head>

you then need to add you stylesheets:

Code: Select all

<head>
<link rel="stylesheet" type="text/css" href="default.css" title="default" />
<link rel="alternate stylesheet" type="text/css" href="one.css" title="one" />
<link rel="alternate stylesheet" type="text/css" href="two.css" title="two" />
<script type="text/javascript" src="styleswitcher.js"></script>
</head>

then add the options to your content to switch the styles

Code: Select all

<body>
<a name="top"></a>
<a href="#top" onclick="setActiveStyleSheet('default'); return true;">
default style</a>

<a href="#top" onclick="setActiveStyleSheet('one'); return true;">
style one</a>

<a href="#top" onclick="setActiveStyleSheet('two'); return true;">
style two</a>
</body>

give that a go and let us know how you get on.

Deagle · #3 May 18th, 2008, 05:36

Thank you welshstew. That worked like a charm.

welshstew · #4 May 18th, 2008, 08:39

glad to have helped

Deagle · #5 May 18th, 2008, 12:36

Hello welshstew

How can i write that javascript so that it works even if javascript is disabled?

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
flash file background loading	strebes	Flash & Multimedia Forum	2	Aug 30th, 2007 20:44
Why is my Flash File not loading?	BlackReef	Flash & Multimedia Forum	2	Jul 17th, 2007 19:04
load javascript file	VanHype	JavaScript Forum	7	Apr 27th, 2007 15:00
swf not loading on html file	Christom	Flash & Multimedia Forum	2	Mar 31st, 2005 09:51
Loading a mp3 and wav file...	courtjester	Flash & Multimedia Forum	4	Jun 14th, 2004 04:18

		Webforumz.com > Main Forums > Program Your Website > JavaScript Forum
[SOLVED] Loading a different CSS file using javascript