Help with template/style changer

Im using this code for a style changer


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


In my head section i have this
<link rel="stylesheet" type="text/css" href="tcw.css" title="default"/>
<link rel="alternate stylesheet" type="text/css" href="tcw1.css" title="tcw1"/>

Im supposed to be using HREF's to make this work.
<a href="#"
onclick="setActiveStyleSheet('default');
return false;">change style to default</a><a href="#"
onclick="setActiveStyleSheet('tcw1');
return false;">change style to paul</a>

and it does work. However, how do i convert these to use DROPDOWN's instead of hrefs?

Your JavaScript is notoriously inefficient. Get the getElementsByTagName calls out of the loop conditions!

Code:

---

<select onchange="setActiveStyleSheet(this.options[this.selectedIndex].value)">
<option value="default">Default</option>
<option value="tcw1">TCW1</option>
</select>

---

It works thanks! Why is it ineffecient. Whats wrong with those tags being in the loop? Thanks CornedBEe :)

Oh, also...I have this

Code:

---

<select class="dropdown" onchange="setActiveStyleSheet(this.options[this.selectedIndex].value)">
                          <option>- -Select A Style- -</option>
                        <option value="New V1">- -New V1- -</option>
                        <option value="Original_White">- -Original w/White- -</option>
                        <option value="Original_Gold">- -Original w/Gold- -</option>
                        </select>

---

and it works perfect, except for when you select the --Select a style-- option, my site turns into nothing but a printable version. all the css stuff is gone. its weird. Is there a way to set that option so that NOTHING happens when it is selected??

I modified setActiveStyleSheet so that it doesn't react to empty names. I also removed the inefficiency.

Code:

---

function setActiveStyleSheet(title) {
  var i, a, main, links;
  if(!title) {
    return;
  }
  links = document.getElementsByTagName("link");
  for(i=0; (a = links[i]); i++) {
    if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title")) {
      a.disabled = true;
      if(a.getAttribute("title") == title) {
        a.disabled = false;
      }
    }
  }
}

---

The big inefficiency is that you were calling getElementsByTagName EVERY loop iteration. Since it has to traverse the complete DOM tree, it's quite slow.
The change retrieves the nodes ONCE and stores them.
You should make the same change to getPreferredStyleSheet.

wow ..ok.. ill have to study that one. That was a tremendous help to me.

:wave:

Cornedbee Is this about right?

Code:

---

function getPreferredStyleSheet() {
  var i, a, links;
 
links = document.getElementsByTagName("link");

  for(i=0; (a = links[i]); i++) {
    if(a.getAttribute("rel").indexOf("style") != -1
      && a.getAttribute("rel").indexOf("alt") == -1
      && a.getAttribute("title")
      ) return a.getAttribute("title");
  }
  return null;
}

---

Also in Opera the template changer doesnt work very well. If u seleect a template, and hit the RELOAD button at the top of opera, it keeps the default template. Whats that all about?

Function looks right now.

I assume Opera isn't happy with the script trying to set cookies. If the script can't do that, it can't remember the style sheet. That's life. Maybe you can lower your security settings.