• Welcome to The Cave of Dragonflies forums, where the smallest bugs live alongside the strongest dragons.

    Guests are not able to post messages or even read certain areas of the forums. Now, that's boring, don't you think? Registration, on the other hand, is simple, completely free of charge, and does not require you to give out any personal information at all. As soon as you register, you can take part in some of the happy fun things at the forums such as posting messages, voting in polls, sending private messages to people and being told that this is where we drink tea and eat cod.

    Of course I'm not forcing you to do anything if you don't want to, but seriously, what have you got to lose? Five seconds of your life?

About Styleswitchers....

Dinru

Dinru

Powered by lesbianism!
I'm planing on making one using this tutorial, but I have one question: How does one program it so that when someone switches to a style, the stylesheet replaces only the parts you want it to? Is there a specific spot it already replaces or what? I wouldn't want someone to change the style only to have it basically be a large line of text, after all! Thank you in advance.
 
I'm kinda confused, but from what I know, even if you wanted two different styles to have a similar attribute, you'd have to put it in the CSS for both of them.
Of course I'm not really sure if that's what you mean.
 
I was basically asking if someone switched styles, what parts of the code would it override, exactly? Is there any way to specify which parts are replaced? Thank you all for your help, anyway. Sorry it wasn't exactly worded well <^^;
 
When you switch styles, the stylesheet is completely replaced on the page. The previous stylesheet doesn't affect the new one.
 
Lucas755 said:
When you switch styles, the stylesheet is completely replaced on the page. The previous stylesheet doesn't affect the new one.
Click to expand...
This isn't true at all.

If one element is absent from one style (say, Style 1) but present on another (Style 2), then anyone switching from Style 2 to Style 1 will still see traces of Style 2 in Style 1, because elements are missing from the stylesheet so Style 2 is used where there is no style information.

(Well, this only applies with JavaScript styleswitchers such as the one the OP linked to originally. I'm not entirely sure about anything else.)
 
Last edited:
I didn't know that, but it's still generally better and more complete to code everything in it, rather than rely on this "transparency."
 
Retsu said:
This isn't true at all.

If one element is absent from one style (say, Style 1) but present on another (Style 2), then anyone switching from Style 2 to Style 1 will still see traces of Style 2 in Style 1, because elements are missing from the stylesheet so Style 2 is used where there is no style information.

(Well, this only applies with JavaScript styleswitchers such as the one the OP linked to originally. I'm not entirely sure about anything else.)
Click to expand...

...where did you get this from?
 
Well, yeah, but that's because Cave style actually was always there. As in it was what was entered in Invisionfree's "CSS" thingy, and the stylesheets for the other styles were just added on top to overwrite all the values for Cave Style that needed to be overwritten. A normal implementation of that Javascript styleswitcher won't have that problem.
 
Umm... I think I know what you mean, Dinru.
If you want a generic style (different than the browser default) and then want different styles to overwrite some (but not all at the same time, and possibly different ones), I think I know what you mean.
Let's take a look at the main site's HTML for a prime example of this.
Somewhere nestled in the deep jungles of the <head> and </head> tags, this little magic snippet exists:
Code: 
<link href="styles/global.css" rel="stylesheet" type="text/css" />
<link href="styles/torkoal-style.css" rel="stylesheet" type="text/css" />
Analyzing this, we can see there are actually two stylesheets; one containing the global stylesheet (obviously called global.css) and the other can be any of the myriad stylesheets Butterfree has to offer (in this case torkoal-style.css).
If you leave the global stylesheet be and create a script to change only the other stylesheet, you can create your own defaults and have the new stylesheets overwrite them on demand.
 
Also if you have a persistent stylesheet, then everything that doesn't change between styles can be on that and everything that does change is on other stylesheets.
 
Thank you everyone! I think I have it figured out now... but now I have a different problem. I have it set up so that a visitor clicks a link to change styles, but the links do not work. Since you probably need by codes to help me, so here they are:

My Styleswitcher Function (styleswitcher.js)
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);
The (relevant) stuff between the <head> tags on the page the switcher's on:
Code: 
<link rel="stylesheet" 
type="text/css" href="classic.css" 
title="default" />

<link rel="alternate stylesheet" 
type="text/css" href="xmas08.css"
title="style1" />

<script type="text/javascript" 
src="styleswitcher.js"></script>
The links themselves:
Code: 
<li><a href="#" onclick="setActiveStyleSheet('default'); return false;">Classic</a><br>

<li><a href="#" onclick="setActiveStyleSheet('style1'); return false;">Christmas</a>
This is all put together on this page. (It's not up all over the site just yet, since it's not done)

I don't think the problem is with the stylesheets themselves, since my browser is picking up the alternate stylesheet just fine. Any help at all would be appreciated, thank you!
 
Huh, works fine for me too. Probably some weird security thing. Even though you have javascript enabled, it might be high-security or something.
 
You must log in or register to reply here.
Back
Top Bottom