Results 1 to 6 of 6

Thread: Using JS to change a CSS class name in IE6

  1. #1
    Join Date
    Dec 2009
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default Using JS to change a CSS class name in IE6

    I'm trying to create a JS function that will change the name of a CSS class.
    It's working in IE8, and although IE6 does pick up the name change it DOES NOT seem to apply the actual changes. It's driving me crazy.

    Here's my JS function:

    Code:
    function resizeContent() {
    
      var c = document.getElementById('content');
      var dV;
      if (window.getComputedStyle)
      {
    	dV = window.getComputedStyle(e,null).getPropertyValue('display'); // CSS 2 Method
      }
      else if (e.currentStyle)
      {
    	dV = eval('e.currentStyle.display'); //IE's method
      }
    
      if( dV == "block" )
      {
    	c.setAttribute('class','withnav');
    	c.setAttribute('className','withnav');
    	c.className = 'withnav';
    	alert('set to class ' + c.getAttribute('class') + ' and classname ' + c.getAttribute('className'));
      } 
      else 
      { 
    	c.setAttribute('class','nonav');
    	c.setAttribute('className','nonav');
    	c.className = 'nonav';
    	alert('set to class ' + c.getAttribute('class') + ' and classname ' + c.getAttribute('className'));
      }
    }
    The above will detect if the side menu is showing (dV == 'block') and adjust the css class accordingly. I need to use class names instead of individual style attributes, since I want the same class in the main stylesheet to show one width, and a different width when the print stylesheet is used for displaying the same class and HTML.

    It seems to be working, in that my test alerts display the correct class names, but in IE6 the 'nonav' class doesn't actually get applied so you can't see the changes. withnav is displayed by default.

    My HTML is very straightforward.
    <a href="javascript:toggleDisplay('rhNav'),resizeContent();"><img src="/images/hdr_ico_toggle.gif" alt="Toggle the display of the right hand navigation bar" width="11" height="16" border="0">&nbsp;Toggle Navigation Bar</a>
    <div id="content" class="withnav">
    ...
    </div>
    is displayed initially with the class name changing dynamically.

    I've been googling this for several hours with no luck. Anyone have any ideas?
    Last edited by jscheuer1; 12-21-2009 at 05:35 AM. Reason: format code

  2. #2
    Join Date
    May 2007
    Location
    Boston,ma
    Posts
    2,127
    Thanks
    173
    Thanked 207 Times in 205 Posts

    Default

    If the class is going into the element than it's probably a css browser specific issue. You'll probably need to post your css up as well or a link. I don't have any IE's so I won't be able to help but this will probably increase a response from someone that can.

  3. The Following User Says Thank You to bluewalrus For This Useful Post:

    jobatkin (12-21-2009)

  4. #3
    Join Date
    Dec 2009
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    Good point - forgot to include my css.
    Here's the relevant classes:

    Code:
    #content.withnav
    {
    	width: 400px;
    	border: 1px solid red;
    }
    #content.nonav
    {
    	width: 500px;
    	border: 1px solid green;
    }
    The main thing I'm trying to do is change the width, but no matter what else I put in as well (eg. borders, font size changes) IE6 will not display it. IE8 does.
    Last edited by jscheuer1; 12-21-2009 at 05:45 AM. Reason: format code

  5. #4
    Join Date
    Dec 2009
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    Still trying to fix this but no luck so far. I've condensed all the relevant code into one downloadable HTML snippet for easier testing:

    Code:
    <html>
    <head>
    <script>
    function resizeContent() {
    
      var c = document.getElementById('content');
    
      if( c.getAttribute('className') == 'nonav' || c.getAttribute('class') == 'nonav' )
      {
    	c.setAttribute('class','withnav');
    	c.setAttribute('className','withnav');
    	c.className = 'withnav';
    	alert('set to class ' + c.getAttribute('class') + ' and classname ' + c.getAttribute('className'));
      }
      else
      {
    	c.setAttribute('class','nonav');
    	c.setAttribute('className','nonav');
    	c.className = 'nonav';
    	alert('set to class ' + c.getAttribute('class') + ' and classname ' + c.getAttribute('className'));
      }
    }
    </script>
    <style>
    #content.withnav
    {
    width: 400px;
    border: 1px solid red;
    }
    #content.nonav
    {
    width: 500px;
    border: 1px solid green;
    }
    </style>
    </head>
    <body>
    <a href="javascript:resizeContent();"><img src="/images/hdr_ico_toggle.gif" alt="Toggle the display of the right hand navigation bar" width="11" height="16" border="0">&nbsp;Toggle Navigation Bar</a>
    <div id="content" class="withnav">
    <p>first paragraph is fairly short</p>
    <p>next one is a bit longer with some extra text in it to push the width out a bit longer</p>
    <p>third one is the longest yet and should be long enough in most screen widths to show some wrapping so we can see if the width restriction is being applied correctly with the javascript change in css class name.</p>
    </div>
    </body>
    </html>
    When you click on the toggle link the first time in IE6 it seems to remove all of the CSS rules from the div completely, while still updating the class name correctly (according to my alerts).

    Baffled.
    Last edited by jscheuer1; 12-21-2009 at 05:38 AM. Reason: format code

  6. #5
    Join Date
    Dec 2009
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    Figured it out!
    IE6 doesn't like classes applied to IDs, e.g. #content.nonav

    I'll have to maybe add another div for my styles and keep the id="content" one separate.

  7. #6
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,023
    Thanks
    44
    Thanked 3,208 Times in 3,170 Posts
    Blog Entries
    12

    Default

    You shouldn't have to use:

    Code:
    #content.withnav
    Using:

    Code:
    .withnav
    should be sufficient. The class definitions in the stylesheet should come after the id definitions, otherwise the id definitions might override them. Using the !important keyword for the class definitions will probably help if there is still a problem, ex:

    Code:
    .withnav {
    width: 400px!important;
    border: 1px solid red!important;
    }
    Also, all this crud (and similar):

    Code:
    	c.setAttribute('class','withnav');
    	c.setAttribute('className','withnav');
    	c.className = 'withnav';
    can be replaced with, like:

    Code:
    	c.className = 'withnav';
    All browsers support that method.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

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
  •