homepage Welcome to WebmasterWorld Guest from 54.197.110.151
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 / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
CSS with Javascript
Change CSS based on a link
treeleaf20

10+ Year Member



 
Msg#: 4003 posted 2:36 pm on Jun 30, 2004 (gmt 0)

I want to change change the style sheet for each page based on a selection by a user. The problem is that I need to change the whole style sheet for the page not just certain elements on the page. I tried to use this code but it doesn't like the eval() function. Please help if you can:
<script type="text/javascript">
function switchstyles(style)
{
//<link rel="STYLESHEET" id="default" type="text/css" href="http://www.test.com/includes/style.css">
if (style == 'HC')
{
alert('Test');
}
if (style == 'Default')
{
alert('TestDefault');
}else{
alert('Call Function');
eval("\<link rel='STYLESHEET' type='text\/css' href='http:\/\/www.test.com\/health\/includes\/style_hc.css'\>");
//<link rel="STYLESHEET" type="text/css" href="http://www.test.com/includes/style.css">
}
}
</script>
The reason for this is everytime a link is clicked I want to pass the value of the link to the switchsytles() and have it load that stylesheet instead of the default one. Thanks for all the help in advance!

 

DrDoc

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



 
Msg#: 4003 posted 3:34 pm on Jun 30, 2004 (gmt 0)

Welcome to WebmasterWorld

Have you looked into session management at all? Are you using Perl/PHP/ASP?

TheBlueEyz

10+ Year Member



 
Msg#: 4003 posted 6:59 pm on Jun 30, 2004 (gmt 0)

Yes, my template switcher that does this uses PHP sessions.

:/ I think it's the only easy way to do it.

SethCall

10+ Year Member



 
Msg#: 4003 posted 12:49 am on Jul 1, 2004 (gmt 0)


if you aren't worried about permenance (like a session), then you should be able to just do this:

function something(){

document.styleSheets[0].href = "style2.css";

}

hum... this isn't working in mozilla. It complains that href is not changable.

SethCall

10+ Year Member



 
Msg#: 4003 posted 1:02 am on Jul 1, 2004 (gmt 0)

Oh...
href is *supposed* to be readonly.

So, I would suggest adding as many style sheets as you want as the page loads with <link> 's, and then disabling all but one, and enabling different ones when the user selects a new style.

*Not tested*

For instance...

function Load()
{
// disables 2nd stylesheet
document.styleSheets[1].disabled = true;
}

function Switch()
{
document.styleSheets[0].disabled = true;
document.styleSheets[1].disabled = false;
}

ktwilight

10+ Year Member



 
Msg#: 4003 posted 4:41 pm on Jul 4, 2004 (gmt 0)

I'm very interested in this. Would it be possible if someone provide a good tutorial link using php? Thanks. :D

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
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