SitePoint Sponsor

User Tag List

Results 1 to 2 of 2

Hybrid View

  1. #1
    SitePoint Wizard bronze trophy
    Join Date
    Oct 2001
    Location
    Vancouver BC Canada
    Posts
    2,030
    Mentioned
    5 Post(s)
    Tagged
    0 Thread(s)

    jQuery crossfading div's Win XP IE 8 issue

    I'm trying to figure out an IE issue with an ultra simple jQuery block of code that fades a stack of divs that are basic information banners.

    Here's the basic premise:
    1) Each information banner is a absolutely positioned (0,0) div with a background image, headline (h2), info paragraph (p), and a foreground image. The banner divs are of the class .views-row and also have a unique class applied to them like views-row-1, views-row-2, etc...

    2) All of the banners get loaded via a content management system into a container (#banner) and I use CSS to make them display:none.

    3) Then I use jQuery to check if there are any banner and if so fadeIn the first banner and then use setInterval() to call a function to fade the existing one out and the next one in line in; views-row-1, views-row-2, etc...

    This works just fine and dandy in anything on the Mac and not bad in Win Vista/7 however in IE 8 on Windows XP the fading is extremely clunky and text parts seem to hang before completely fading out.

    Code:
    HTML Code:
    <script type="text/javascript">
        $(function () {
            var timeout = 15000; // 15 Seconds 
            var bannernum = $('#banner .views-row').length;
            var currentnumber;
            var nextnumber;
            var intervalID;
                
            // If the are any banners to show, fade the first banner in and call the myslider function
            if(bannernum > 0) {
                currentnumber = 1;
                $('#banner .views-row-first').fadeIn(500);
                intervalID = setInterval(myslider, timeout);
            }
            
            function myslider(direction){
                if(!direction) {
                    if(currentnumber < bannernum) {
                        nextnumber = currentnumber+1;
                    } else {
                        nextnumber = 1;
                    }
                } else {
                    if(currentnumber > 1) {
                        nextnumber = currentnumber-1;
                    } else {
                        nextnumber = bannernum;
                    }
                }
    
                currentclass = '#banner .views-row-' + currentnumber;
                nextclass = '#banner .views-row-' + nextnumber;
                $(nextclass).fadeIn(2500);
                $(currentclass).fadeOut(2500);
    
                currentnumber = nextnumber;
    
            }
            
    
            /** 
             * Next and previous buttons for cycling through the banners manually
             */
    
            // Next Banner
            $("a.nextlink").click(function () {
                if(intervalID) {                            
                    clearInterval(intervalID);
                }
                myslider();
                intervalID = setInterval(myslider, timeout);
            });
            
            // Previous Banner
            $("a.prelink").click(function () {
                if(intervalID) {                            
                    clearInterval(intervalID);
                }
                myslider('previous');
                intervalID = setInterval(myslider, timeout);
            });
        
          });
    </script>
    Any obvious ideas?

    Thanks,
    Andrew
    Andrew Wasson | www.lunadesign.org
    Principal / Internet Development

  2. #2
    SitePoint Wizard bronze trophy
    Join Date
    Oct 2001
    Location
    Vancouver BC Canada
    Posts
    2,030
    Mentioned
    5 Post(s)
    Tagged
    0 Thread(s)
    Update: I sort of resolved it by making the banner that is being faded in a higher z-index than the one being faded out but it's still a bit clunky so I'm open to suggestions.

    The fix:
    HTML Code:
            function myslider(direction){
                if(!direction) {
                    if(currentnumber < bannernum) {
                        nextnumber = currentnumber+1;
                    } else {
                        nextnumber = 1;
                    }
                } else {
                    if(currentnumber > 1) {
                        nextnumber = currentnumber-1;
                    } else {
                        nextnumber = bannernum;
                    }
                }
                currentclass = '#banner .views-row-' + currentnumber;
                nextclass = '#banner .views-row-' + nextnumber;
                $(nextclass).css({zIndex:99}).fadeIn("slow");
                $(currentclass).css({zIndex:92}).fadeOut("slow");
                currentnumber = nextnumber;
            }
    Andrew Wasson | www.lunadesign.org
    Principal / Internet Development


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
  •