SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Member
    Join Date
    Sep 2002
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    interactive css selector with javascript

    i hope someone can help me with this problem. the idea was to allow users to toggle between css and non css versions of the site using radio buttons. even with limited js experience i thought it would be easy... here's the code, i'll tell you the weird results in a bit.

    (in the head section)
    <script type="text/javascript" language="javascript">
    <!--
    var rego;
    function init() {
    rego = 1;
    }
    function toggleTextOnly() {
    rego = document.toggle.reg.value;
    }
    if(rego == 1) {
    if(document.layers){ // Netscape 4.x
    document.write("<link rel='stylesheet' href='css/N4_style.css' type='text/css' />");
    }
    else if(document.all || document.getElementById) { // IE and Netscape 6
    document.write("<link rel='stylesheet' href='css/style.css' type='text/css' />");
    }
    }

    (in the body section)
    <body onLoad="init()" />

    (the form)
    <form name="toggle" method="post" action="index.php" onSubmit="toggleTextOnly()" />
    <input type="hidden" name="message" />
    <input type="radio" name="reg" value="1" />
    <input type="radio" name="reg" value="0" />
    <input type="submit" value="go" />
    </form>

    now what happens is that in iexplorer all i get is the stylesheet - no html
    in firefox all i get is the non stylesheet version.
    i think i am going blind for looking for the bug.
    please help someone!
    thanks

  2. #2
    SitePoint Addict
    Join Date
    May 2004
    Location
    Europe
    Posts
    216
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry to be blunt, but that code is garbage. You can't use document.write after the page has finished loading, document.toggle.reg does not have a value and your toggleTextOnly function doesn't do anything useful. And if you still need a separate stylesheet for Netscape 4, use the good old @import hack.

    Here's some rough code to get you started:
    Code:
    <style>
    body { background-color: red; font-size: 300%; }
    </style>
    <script>
    
    function toggleTextOnly() {
        if (!document.styleSheets || !document.styleSheets[0])
    	return;
    	
        var newDisabledStatus = !document.styleSheets[0].disabled;
        for (var i=0; i < document.styleSheets.length; ++i) {
    	document.styleSheets[i].disabled = newDisabledStatus;
        }
    }
    </script>
    
    <button type="button" onclick="toggleTextOnly()">Toggle stylesheets</button>
    <p>Stylesheets test


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •