homepage Welcome to WebmasterWorld Guest from 54.242.241.20
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

    
Let the user change the CSS document
How do I do it?
Trenton

10+ Year Member



 
Msg#: 1360 posted 6:15 pm on Mar 1, 2004 (gmt 0)

Hi

I've been hunting around on the web for ages looking for this - please help! I want to do two things:

1. Have a link to a text-only version (i.e. switch CSS) on the main graphical version, and a link to the graphical version when users are in the text-only version (switch CSS back).

2. Have the web pages automatically load up the text-only version CSS for IE 4 and Netscape 4 and lower, and not provide the option to change. (The CSS I'm using doesn't doesn't make the page look very good in these browsers)

Any JavaScript geniuses out there who know the answer?

 

HocusPocus

10+ Year Member



 
Msg#: 1360 posted 9:57 am on Mar 2, 2004 (gmt 0)

I'll attempt the first one.

Off the top of my head not tested, something like

function toggleCS()
{
cs=true;
if(document.styleSheets.length>0)
{
cs=!document.styleSheets[0].disabled;
for(i=0;i<document.styleSheets.length;i++)
{document.styleSheets[i].disabled=cs;}
}
}
</SCRIPT>

<A href="javascript:toggleCS()">CSS Toggle</a>

Switches off/on linked style sheets

-M

ricfink

10+ Year Member



 
Msg#: 1360 posted 4:36 am on Mar 5, 2004 (gmt 0)

I your link tag looks like this:

<link rel="stylesheet" id="styletag" type="text/css" media="screen" href="graphical.css">

You can just change the value of the href attribute and the browser will load the other stylesheet and the appearance of the page will change accordingly.

javascript function to do this would be:

function modifyStyle(newfile) {
var x = document.getElementById('styletag');
x.setAttribute('href',newfile);

You would call it from, presumably, a button like this:

<input type="button" value="Text Only" onclick="modifyStyle('textonly.css');">

to revert back to graphical stylesheet, make another button with:
onclick="modifyStyle('graphical.css');

Hope this helps.

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