Announcement

**Vladdy** · Feb 28, 2004, 06:39 PM

There are two different approaches to style switching, each with its own pros and cons.
1. Client side: real time, not very good browser support
2. Server side: requires reloading a page, does not rely on browser.

Which type are you interested in.

**qwertyuiop** · Feb 28, 2004, 06:57 PM

uh...?

Im not really sure which one i need, but the kind i need is like the one on A List Apart. The only problem im having is getting the script to work. Did I forget to add some code? Are there special requirements?
For some reason, the style switcher worked before i uploaded it on the internet (on my computer...locally?). What seems to be the matter?

**mindlessLemming** · Feb 28, 2004, 07:15 PM

Geocities might be the matter....
Seriously dodgy hosting, so many ads...

**Willy Duitt** · Feb 28, 2004, 07:18 PM

What's all this doing in your external javascript file?

Content-Disposition: form-data; name="userfile"; filename="C:\WINDOWS\Desktop\SFX\sfx_css.html"
Content-Type: text/html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
<head>
<title>skill fx</title>

<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<meta http-equiv="imagetoolbar" content="no" />

<link rel="shortcut icon" href="http://e.domaindlx.com/allewun/sfxfavicon.ico" />
<link rel="stylesheet" type="text/css" href="sfxcss.css" media="screen" title="classic" />
<link rel="alternate stylesheet" type="text/css" href="sfxmatrix.css" media="screen" title="matrix" />

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

</head>

<body bgcolor="#292929">
.............................................................
............................................................
</html>

.....Willy

**qwertyuiop** · Feb 28, 2004, 07:29 PM

whoa

I had no idea that was in the js file...Never even put it there, never even looked at the code...weird. Maybe geocities put it in, hope not though.
EDIT: hooray! it works! im still confused about that js stuff, whered it come from

Oh well, thanks guys!

**qwertyuiop** · Feb 29, 2004, 05:42 PM

I realized that the cookie feature doesn't work. The script: script (from www.alistapart.com) has some cookie stuff in it, but i...have no javascript experience (i know how to make alerts!

)...therefore, I can't fix the problem. It's supposed to keep the style the user last clicked on, but when i exit the page, and return, the setting is gone!

**shlagish** · Feb 29, 2004, 07:30 PM

maybe you disabled cookies on your browser..

**Willy Duitt** · Feb 29, 2004, 08:20 PM

This is just a guess. But I wouldn't doubt if Geocities is using popup codes both onload and onunload which are conflicting with these same functions of your script.

To confirm this. You will need to source Geocities banner codes and see if you find any instances of the window.onload or window.onunload event handlers.

FWIW: Here is your external javascript.

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

[color=red]window.onload[/color] = function(e) {
  var cookie = readCookie("style");
  var title = cookie ? cookie : getPreferredStyleSheet();
  setActiveStyleSheet(title);
}

[color=red]window.onunload[/color] = function(e) {
  var title = getActiveStyleSheet();
  createCookie("style", title, 365);
}

var cookie = readCookie("style");
var title = cookie ? cookie : getPreferredStyleSheet();
setActiveStyleSheet(title);

.....Willy

**qwertyuiop** · Mar 1, 2004, 12:24 AM

Well, i didn't see any window on(un)load things. heres the geocities code anyway:

Code:

<!-- text below generated by server. PLEASE REMOVE --></object></layer></div></span></style></noscript></table></script></applet>
<script language="JavaScript">var PUpage="76001072"; var PUprop="geocities"; </script><script language="JavaScript" src="http://www.geocities.com/js_source/pu5geo.js"></script><script language="JavaScript" src="http://www.geocities.com/js_source/ygIELib9.js?v3"></script><script language="JavaScript">yvSM=0;yvVP=0;var yviContents='http://us.toto.geo.yahoo.com/toto?s=76001072&l=NE&b=1&t=1078118041';yviR='us';yfiEA(0);</script><script language="JavaScript" src="http://us.i1.yimg.com/us.yimg.com/i/mc/mc.js"></script><script language="JavaScript" src="http://geocities.com/js_source/geov2.js"></script><script language="javascript">geovisit();</script><noscript><img src="http://visit.webhosting.yahoo.com/visit.gif?us1078118041" alt="setstats" border="0" width="1" height="1"></noscript>
<IMG SRC="http://geo.yahoo.com/serv?s=76001072&t=1078118041" ALT=1 WIDTH=1 HEIGHT=1>
<!-- w31.geo.scd.yahoo.com compressed/chunked Sun Feb 29 21:14:01 PST 2004 -->

so if i use the external javascript you gave me (willy), the cookie stuff should work? Thanks for all your help! And no, cookies work fine on my browser... the script probably doesn't bake the cookies well...

**Willy Duitt** · Mar 1, 2004, 06:44 AM

No;

The codes I posted are the codes which are already in your external javascript file. I did not provide anything that you do not already have. It was posted as a courtesy for any other members which may be interested in looking at your code.

And you need to source all of Geocities external javascript files. The codes you posted points to at least five files. Heck there may even be more than that on your page or referenced within one or more of the files themselves.

As I said, I'm only guessing. However, I know for sure that your cookie is not being set. But sorry, I'm not inclined to start searching thru all of Geocities external javascript files. You will need to do that for yourself.

FWIW: I recently posted my own style switcher codes which including the cookie script is only 12 lines long. You can try searching the forums for that post. Additionally, I believe Glenngv, Vladdy and Liorean have also posted their own style switcher codes. Try looking for one which is not using window events because it is a good bet that their is a conflict problem.

.....Willy

**qwertyuiop** · Mar 3, 2004, 06:00 PM

do you know the thread subject that has your style switcher? I've tried searching for it but couldn't find it.

i think the reason the cookie part of the script didn't work was becuase of an unload in the geocities code. Ive seen this tutorial http://www.wsabstract.com/javatutors/multiplejava.shtml but i don't think it'll work, because i don't have access to the geocities code...if theres a way, let me know!

**Willy Duitt** · Mar 3, 2004, 11:35 PM

Hi qwertyuiop;

You can try my script:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<HEAD>
<BASE HREF="http://www.codelifter.com/main/javascript/">

<link rel="stylesheet" type="text/css" href="style_1.css">
<link rel="stylesheet" type="text/css" href="style_2.css">
<link rel="stylesheet" type="text/css" href="style_3.css">
<link rel="stylesheet" type="text/css" href="style_4.css">

<script type="text/javascript">
 <!--//
  function setStyle(num){
   var duitt = new Date();
       duitt.setTime(duitt.getTime() + 365*24*60*60*1000);
       var expString = '; expires='+duitt.toGMTString();     
       document.cookie = 'My_Style=style_'+num+expString;
       chkStyle(num);
  }

  function chkStyle(num){
    for(var i=0;i<document.styleSheets.length;i++){
       if(/My_Style=style_(\d*)/.test(document.cookie))
         {num = RegExp.$1*1} else {num = num}
          if(i!==(num-1)){document.styleSheets[i].disabled=true}
            else {document.styleSheets[i].disabled=false}
      }   
  }    
  chkStyle(1);
  //-->
</script>
</HEAD>

<BODY>
<div id="Layer1" style="position:absolute; left:8px; top:50px; width:95px; height:350px; z-index:1">
<a name="style_1" href="javascript&#58;setStyle(1)">style one</a><br /><br />
<a name="style_2" href="javascript&#58;setStyle(2)">style two</a><br /><br />
<a name="style_3" href="javascript&#58;setStyle(3)">style three</a><br /><br />
<a name="style_4" href="javascript&#58;setStyle(4)">style three</a><br /><br />
</div>

<div style="position:absolute; left:108px; top:50px; z-index:2;" >Lorem
ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero
eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit
amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam
et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur
sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore
magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo
dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est
Lorem ipsum dolor sit amet.</div>

</body>
</html>

And, if you continue to have problems and need to define the domain and path of the cookie.
You can try looking here for additional info.

...Willy

**qwertyuiop** · Mar 5, 2004, 05:29 PM

WOW! it works! thanks willy!

how can i set the text of the current style to be bold? lets say you set style2. when you return to the page, the words: style2 are bold, how can this be achieved? Anyone?

Announcement

style switcher

style switcher

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment