getElementById("blah").classname = "whatever" Not working

Question

Heya, I've got some code that I think ought to be working (though I really am fumbling around in the dark here) - I'm just trying to dynamically change a class name on a div tag.

I'm trying to change the div class on id "slider" from "visible" to "hidden". Everything else about this code works just fine, but the class won't change. What am I doing wrong?

I've tried checking to see if the browser was correctly evaluating for IE 6 - it is. The code in the first part of the if statement that initializes slider when it's not IE6 works. And if I replace document.getElementById with something else, that code works too. So it must be a problem with the way I'm calling getElementbyId? It's just doing nothing in IE6.

Here's what I've got:

<script type="text/javascript">


$(window).load(function() {
var isIE6 = false;
        if(/MSIE 6/i.test(navigator.userAgent)) {
          isIE6 = true;
        }

    if(!isIE6)
    {

 $('#slider').nivoSlider({
  effect:'fade', 
  slices:1,
  animSpeed:500,
  pauseTime:3000,
  startSlide:0, 
  directionNav:false,
  directionNavHide:true, 
  controlNav:true,
  controlNavThumbs:false,
      controlNavThumbsFromRel:false, 
  controlNavThumbsSearch: '.jpg', 
  controlNavThumbsReplace: '_thumb.jpg', 
  keyboardNav:true, 
  pauseOnHover:true, 
  manualAdvance:false, 
  captionOpacity:0.8
 });
 }
 else 
 {
 document.getElementById('slider').className = "hidden"; 
 }
});
</script>



<div id="slider" class="visible">
  <img src="/img/nivoslider/slide1.jpg" />
  <img src="/img/nivoslider/slide2.jpg" />
  <img src="/img/nivoslider/slide3.jpg"  />
</div><!-- end slider -->

Answer 1

If you're using jQuery, which it looks like you are, why not do it this way:

$('#slider').addClass('hidden').removeClass('visible')

This also begs the question: why not use $('#slider').toggle() or $('#slider').hide()and $('#slider').show() as appropriate?

Answer 2

Just a question: How do you know the classname isn't changing? Have you set the CSS styles to match the hidden class.

On top of that, if the only purpose of the class is to change the visibility, why not just change that directly?

document.getElementById('slider').visibility = "hidden";

If all that doesn't work, and since you are already using jQuery, try using

$("#slider").hide();

Answer 3

If you want to ensure that you are chaning the class so you don't have to do an add/remove and just want to do a replace using jquery you could do:

$('#slider').attr('class', 'hidden');

or

$('#slider').attr('class', 'visible');

This way you can never get out of synch at least, it will always be just one of those values.