SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Addict
    Join Date
    Nov 2002
    Location
    Maryland
    Posts
    307
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Slideshow Not Working Correctly in IE8

    The following slideshow displays a white screen after every image rotation in IE8 and IE7. Its not happening in Firefox.

    Here is link to where its happening:
    http://vik2.herrmanneasyedit.com/

    Any idea what the problem could be?

    Thanks.

    Here is the code for the slidewhow:
    Code:
    slidePrefix            = "slide-";
    slideControlPrefix     = "slide-control-";
    slideHighlightClass    = "highlight";
    slidesContainerID      = "slides";
    //slidesControlsID       = "slides-controls";
    slideDelay             = 8000;
    slideAnimationInterval = 20;
    slideTransitionSteps   = 10;
    
    function setUpSlideShow()
    {
        // collect the slides and the controls
        slidesCollection = document.getElementById(slidesContainerID).children;
        //slidesControllersCollection = document.getElementById(slidesControlsID).children;
     
        totalSlides = slidesCollection.length;
     
        if (totalSlides < 2) return;
     
        //go through all slides
        for (var i=0; i < slidesCollection.length; i++)
        {
            // give IDs to slides and controls
            slidesCollection[i].id = slidePrefix+(i+1);
            //slidesControllersCollection[i].id = slideControlPrefix+(i+1);
     
            // attach onclick handlers to controls, highlight the first control
            //slidesControllersCollection[i].onclick = function(){clickSlide(this);};
     
            //hide all slides except the first
            if (i > 0)
                slidesCollection[i].style.display = "none";
            //else
                //slidesControllersCollection[i].className = slideHighlightClass;
        }
     
        // initialize vars
        slideTransStep= 0;
        transTimeout  = 0;
        crtSlideIndex = 1;
     
        // show the next slide
        showSlide(2);
    }
    
    function showSlide(slideNo, immediate)
    {
        // don't do any action while a transition is in progress
        if (slideTransStep != 0 || slideNo == crtSlideIndex)
            return;
     
        clearTimeout(transTimeout);
     
        // get references to the current slide and to the one to be shown next
        nextSlideIndex = slideNo;
        crtSlide = document.getElementById(slidePrefix + crtSlideIndex);
        nextSlide = document.getElementById(slidePrefix + nextSlideIndex);
        slideTransStep = 0;
     
        // start the transition now upon request or after a delay (default)
        if (immediate == true)
            transSlide();
        else
            transTimeout = setTimeout("transSlide()", slideDelay);
    }
    
    function clickSlide(control)
    {
        showSlide(Number(control.id.substr(control.id.lastIndexOf("-")+1)),true);
    }
    
    
     
    function transSlide()
    {
        // make sure the next slide is visible (albeit transparent)
        nextSlide.style.display = "block";
     
        // calculate opacity
        var opacity = slideTransStep / slideTransitionSteps;
     
        // fade out the current slide
        crtSlide.style.opacity = "" + (1 - opacity);
        crtSlide.style.filter = "alpha(opacity=" + (100 - opacity*100) + ")";
     
        // fade in the next slide
        nextSlide.style.opacity = "" + opacity;
        nextSlide.style.filter = "alpha(opacity=" + (opacity*100) + ")";
     
        // if not completed, do this step again after a short delay
        if (++slideTransStep <= slideTransitionSteps)
            transTimeout = setTimeout("transSlide()", slideAnimationInterval);
        else
        {
            // complete
            crtSlide.style.display = "none";
            transComplete();
        }
    }
    
    function transComplete()
    {
        slideTransStep = 0;
        crtSlideIndex = nextSlideIndex;
     
        // for IE filters, removing filters reenables cleartype
        if (nextSlide.style.removeAttribute)
            nextSlide.style.removeAttribute("filter");
     
        // show next slide
        showSlide((crtSlideIndex >= totalSlides) ? 1 : crtSlideIndex + 1);
     
        //unhighlight all controls
        //for (var i=0; i < slidesControllersCollection.length; i++)
        //    slidesControllersCollection[i].className = "";
     
        // highlight the control for the next slide
        //document.getElementById("slide-control-" + crtSlideIndex).className = slideHighlightClass;
    }
    
    
    window.onload = function () {
        setUpSlideShow();
    }

  2. #2
    SitePoint Enthusiast
    Join Date
    Aug 2010
    Location
    Perundurai, Tamilnadu, India
    Posts
    66
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    In IE7 and IE8, when you use children, it will return "<!-- START slide 1 -->" also as one child.
    Here is common code to avoid comment child nodes.

    Code:
        // collect the slides and the controls
        var tempCollection = document.getElementById(slidesContainerID).children;
        var slidesCollection = [];
        for(var i = 0; i < tempCollection.length; i++)
        {
        	if (tempCollection[i].tagName != "DIV") continue;
        	slidesCollection.push(tempCollection[i]);
        }
        
        totalSlides = slidesCollection.length;

  3. #3
    SitePoint Addict
    Join Date
    Nov 2002
    Location
    Maryland
    Posts
    307
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Tamilsuresh, Thank for the response. I removed the comments and it worked!


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
  •