homepage Welcome to WebmasterWorld Guest from 54.205.241.107
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

    
Interesting - Changing link/style sheet href more than once?
Very basic style sheet switcher only works first iteration in all browsers,
JAB Creations

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



 
Msg#: 4369517 posted 2:05 pm on Oct 1, 2011 (gmt 0)

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

 

penders

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



 
Msg#: 4369517 posted 2:40 pm on Oct 1, 2011 (gmt 0)

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?

JAB Creations

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



 
Msg#: 4369517 posted 2:52 pm on Oct 1, 2011 (gmt 0)

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

JAB Creations

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



 
Msg#: 4369517 posted 3:55 pm on Oct 1, 2011 (gmt 0)

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

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved