Jquery crossfade light plugin :: Why this code not working in IE6+7?

Question

Why this code not working in IE6+7?(my code)

I check on ie 6+7 - not working after I check that the code working in Firefox + ie8.

This simple jquery light plugin that switch pictures by cross-fade effect.

   (function( $ ){

        $(document).ready(function() {
         $('.sliderBox').CrossFadeSlider();
        });


     $.fn. CrossFadeSlider=function(options){
         //default settinfs
         var settings={
          pagingWrapperClass: 'controls',
          slideWrapperClass:'slider',
          pagingWrapperElement:$('.controls'),
          slideWrapperElement:$('.slider'),
          slideTag: "li",
          pagingTag:"li",
          width:'790px',
          height:'286px',
          slideInterval:4000,//Timer speed in milliseconds (3 seconds)
          autoplay:true
         };

         $.extend(settings, options);
         //set slide size
         this.css('width',settings.width).css('height',settings.height);
         //Add Default classes or it can be dome manually in code.
         settings.pagingWrapperElement.addClass(settings.pagingWrapperClass);
         settings.slideWrapperElement.addClass(settings.slideWrapperClass);
         //create paging
         var strPaging='';
         settings.slideWrapperElement.children().each(
            function(i,el){
               strPaging=strPaging+'<'+settings.pagingTag+'><a href="#'+$(this).attr("id")+'">'+(i+1)+'</a></'+settings.pagingTag+'>';
            }
       );

         settings.pagingWrapperElement.append(strPaging);

         //Set Default State of paging
         $("."+settings.pagingWrapperClass).show();
         $("."+settings.pagingWrapperClass+" "+settings.pagingTag+":first").addClass("active");
         var active = $('.'+settings.pagingWrapperClass+" "+settings.pagingTag+'.active');
         var activeBefore = active;
         //Set Default State of slides
         $("."+settings.slideWrapperClass+" "+settings.slideTag).css('display','none');
         $("."+settings.slideWrapperClass+" "+settings.slideTag+":first").css('display','block');
         $("."+settings.slideWrapperClass+" "+settings.slideTag).css("background-color", "transparent");
         $("."+settings.slideWrapperClass+" "+settings.slideTag+" img").css("background-color", "transparent");

         //Paging + Slider Function
         var rotate = function(){

             activeBefore.removeClass('active'); //Remove all active class
             active.addClass('active'); //Add active class (the $active is declared in the rotateSwitch function)

             $(activeBefore.find('a').attr('href')).fadeOut('slow',function(){
                 $(this).css('display','none');
             });

             $(active.find('a').attr('href')).fadeIn('normal',function(){
                 //$(this).css('display','block');
             });
         };

         //Rotation + Timing Event
         var rotateSwitch = function(){
             play = setInterval(function(){ //Set timer - this will repeat itself every 3 seconds
                 activeBefore=$('.'+settings.pagingWrapperClass+" "+settings.pagingTag+'.active');
                 active = activeBefore.next();
                 if ( active.length === 0) { //If paging reaches the end...
                     active = $('.'+settings.pagingWrapperClass+" "+settings.pagingTag+':first'); //go back to first
                 }
                 rotate(); //Trigger the paging and slider function
             }, settings.slideInterval); //Timer speed in milliseconds (3 seconds)
         };

         rotateSwitch(); //Run function on launch

         //On Hover
         $("."+settings.slideWrapperClass+" "+settings.slideTag).hover(function() {
             clearInterval(play); //Stop the rotation
         }, function() {
             rotateSwitch(); //Resume rotation
         });

         //On Click
         $("."+settings.pagingWrapperClass+" "+settings.pagingTag).click(function() {
             active = $(this); //Activate the clicked paging
             activeBefore=$("."+settings.pagingWrapperClass+" "+settings.pagingTag+'.active');
             //not doing nothing if active button pressed.
             if(active.get(0)===activeBefore.get(0)){return false;}
             //Reset Timer
             clearInterval(play); //Stop the rotation
             rotate(); //Trigger rotation immediately
             rotateSwitch(); // Resume rotation
             return false; //Prevent browser jump to link anchor
         });
     };
     })( jQuery );

Answer 1

This is a problem with the way IE implements the href attribute. Instead of returning the actual href value you want, which is something like #slide3, it's returning the absolute path like http://mysite.com/#slide3. The easy way to deal with this is the split the string and just extract the actual anchor tag you want, which works in all browsers. Here is what I changed your rotate javascript function to:

                 var rotate = function () {

                     activeBefore.removeClass('active'); 
                     active.addClass('active');
                     var href = activeBefore.find('a').attr('href');
                     href = href.split('#');
                     $('#' + href[href.length-1]).fadeOut('slow',function(){
                     $(this).css('display','none');
                 });

                    href = active.find('a').attr('href');
                    href = href.split('#');
                    $('#' + href[href.length -1]).fadeIn('normal',function(){
                     //$(this).css('display','block');
                 });

                 };

Here it is on jsfiddle: http://jsfiddle.net/eLBPE/3/