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?