Welcome to WebmasterWorld Guest from 54.227.125.200

Forum Moderators: not2easy

Message Too Old, No Replies

CSS with Javascript

Change CSS based on a link

     

treeleaf20

2:36 pm on Jun 30, 2004 (gmt 0)

10+ Year Member



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

3:34 pm on Jun 30, 2004 (gmt 0)

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



Welcome to WebmasterWorld

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

TheBlueEyz

6:59 pm on Jun 30, 2004 (gmt 0)

10+ Year Member



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

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

SethCall

12:49 am on Jul 1, 2004 (gmt 0)

10+ Year Member




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

1:02 am on Jul 1, 2004 (gmt 0)

10+ Year Member



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

4:41 pm on Jul 4, 2004 (gmt 0)

10+ Year Member



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

Featured Threads

Hot Threads This Week

Hot Threads This Month