Welcome to WebmasterWorld Guest from 54.145.246.183

Forum Moderators: open

Interesting - Changing link/style sheet href more than once?

Very basic style sheet switcher only works first iteration in all browsers,

   
2:05 pm on Oct 1, 2011 (gmt 0)

WebmasterWorld Senior Member jab_creations is a WebmasterWorld Top Contributor of All Time 10+ Year Member



I threw together a very basic style sheet switcher that basically just scans for style sheets and replaces the href attribute's value; the base element's href attribute's value is used in conjunction hence the split.

For some reason this only works the first time, no errors or warnings from any of the browsers are given on the second or later iteration, it simply does not work. I've also noticed that changing the link element's title attribute's value disables styling altogether. Thoughts please?

- John

//usage
change_theme('classic');

function change_theme(t)
{
var l = document.getElementsByTagName('link');
var le = l.length - 1;

for (var i = 0; i <= le; i++)
{
if (l[i].rel=='stylesheet')
{
if (l[i].title==theme)
{
var b = unescape(l[i].href).split(unescape(document.getElementsByTagName('base')[0].href));
l[i].href = b[1].replace(theme,t);
}
}
}
theme = t;
}
2:40 pm on Oct 1, 2011 (gmt 0)

WebmasterWorld Senior Member penders is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month



Your function argument is t, but you are using theme in your code (which is presumably undefined, unless it is defined globally somewhere?) so will only work when the title attribute is also undefined?

You do, however, assign t to theme - but at the end of your function?
2:52 pm on Oct 1, 2011 (gmt 0)

WebmasterWorld Senior Member jab_creations is a WebmasterWorld Top Contributor of All Time 10+ Year Member



theme is a global variable (assigned by a PHP session variable). The arguement (l[ i ].title==theme) is checking for the theme to change and then at the end I update the global variable (in order for that to be repeated).

- John
3:55 pm on Oct 1, 2011 (gmt 0)

WebmasterWorld Senior Member jab_creations is a WebmasterWorld Top Contributor of All Time 10+ Year Member



I decided to try a moderation of the first attempt; I essentially create a replacement link element, enable it and delete the previous link element. The key thing to make this work was to set .disabled = false. I tried using that line in the first iteration of the function I posted earlier and it had no effect.

The great thing about this script is that it will retain all the (X)HTML (even the whitespace!) so you don't have to worry about people on slower connections downloading alternative styles, the slightly extra bandwidth of having those link elements on the page, etc. This works beautiful on my site and I plan on replacing the current PHP/redirect implementation. :)

- John

function change_theme2(t)
{
var l = document.getElementsByTagName('link');
var le = l.length - 1;

for (var i = 0; i <= le; i++)
{
if (l[i].rel=='stylesheet')
{
if (l[i].title==theme)
{
var b = unescape(l[i].href).split(unescape(document.getElementsByTagName('base')[0].href));
b = b[1].replace(theme,t);

var n = document.createElement('link');
n.setAttribute('href',b);
n.setAttribute('media','screen');
n.setAttribute('rel','stylesheet');
n.setAttribute('title',t);
n.setAttribute('type','text/css');

l[i].parentNode.insertBefore(n,l[i].nextSibling);
document.getElementsByTagName('head')[0].removeChild(document.getElementsByTagName('link')[i]);
l[i].disabled = false;
}
}
}
theme = t;
}
 

Featured Threads

My Threads

Hot Threads This Week

Hot Threads This Month