Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums JavaScript Start/Stop Slider Interval problem

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #31795
    kurtma
    Member

    I’ve been tinkering around with Chris’s tutorial on the Start/Stop Slider. Initially, with just a few slides as in the example, it worked fine, but after adding a few more, I noticed some delay as the vertical movement seemed to be faster than the horizontal and the image was moving diagonally. After adding all the slides I wanted to display (17 total) it really went wonky, with the vertical movement bouncing up and down several times before each horizontal move. I then tried the same thing with the original demo code and the exact same thing happened. Reading through the forums I see a few other mentions of the problem, but no solutions. One suggested preloading the images, but that doesn’t appear to be the issue as I’m using tiny 8kb images and for testing I was using the same image on all slides.

    After further testing I discovered that if I push the delayLength out to 10 seconds the problem is not noticeable, but I don’t want to force that long of a pause on my visitors, and I suspect if I added enough slides the problem would return. If you click the stop button after each slide and then click start everything works exactly as expected.
    Any help would be appreciated.

    My HTML (I only included 2 of the

    blocks for brevity, but you can copy and paste them out to 10+ and see the problem.





    head1


    text1


    learn more



    head2


    text2


    learn more




    The CSS ( this is basically the same as the demo, except adjusted for my slider size)


    #slider { position: relative; background: url(images/contentgradient.png) repeat-x; height: 225px; overflow: hidden; margin: 0; }
    #mover { width: 10965px; position: relative; }
    .slide { float: left; position: relative; padding: 40px 30px; width: 585px; }
    .slide h1 { font-family: "Lucida Grande", arial, sans-serif; font-size: 2.2em; letter-spacing: -1px; color: #7d2912; font-weight: bold; }
    .slide p { color: #999; font-size: 1.6em; line-height: 1.4em; width: 200px; }
    .slide img { position: absolute; top: 20px; left: 350px; }
    #slider-stopper { position: absolute; bottom: 1px; right: 1px; background: #D0D0D0; color: white; padding: 3px 8px; font-size: 1em; text-transform: uppercase; z-index: 1000; text-decoration: none; }

    Here is the Javascript straight from the demo


    // SET VARIABLE FOR DELAY
    var delayLength = 4000;

    function doMove(panelWidth, tooFar) {
    var leftValue = $("#mover").css("left");

    //Fix for IE
    if (leftValue == "auto") { leftValue = 0; };

    var movement = parseFloat(leftValue, 10) - panelWidth;

    if (movement == tooFar) {
    $(".slide img").animate({
    "top": -200
    }, function() {
    $("#mover").animate({
    "left": 0
    }, function() {
    $(".slide img").animate({
    "top": 20
    });
    });
    });
    }
    else {
    $(".slide img").animate({
    "top": -200
    }, function() {
    $("#mover").animate({
    "left": movement
    }, function() {
    $(".slide img").animate({
    "top": 20
    });
    });
    });
    }
    }

    $(function(){
    var $slide1 = $("#slide-1");
    var panelWidth = $slide1.css("width");
    var panelPaddingLeft = $slide1.css("paddingLeft");
    var panelPaddingRight = $slide1.css("paddingRight");

    panelWidth = parseFloat(panelWidth, 10);
    panelPaddingLeft = parseFloat(panelPaddingLeft, 10);
    panelPaddingRight = parseFloat(panelPaddingRight, 10);

    panelWidth = panelWidth + panelPaddingLeft + panelPaddingRight;

    var numPanels = $(".slide").length;
    var tooFar = -(panelWidth * numPanels);
    var totalMoverWidth = numPanels * panelWidth;
    $("#mover").css("width", totalMoverWidth);

    $("#slider").append('Pause');

    sliderIntervalID = setInterval(function(){
    doMove(panelWidth, tooFar);
    }, delayLength);

    $("#slider-stopper").click(function(){
    if ($(this).text() == "Pause") {
    clearInterval(sliderIntervalID);
    $(this).text("Play");
    }
    else {
    sliderIntervalID = setInterval(function(){
    doMove(panelWidth, tooFar);
    }, delayLength);
    $(this).text("Pause");
    }
    });
    });
    #57930
    kurtma
    Member

    I think I found the problem, but I’m not sure how to fix it.
    The issue appears to be here:


    else {
    $(".slide img").animate({
    "top": -200
    }, function() {

    javascript:alert("breakpoint");

    $("#mover").animate({
    "left": movement
    }, function() {
    $(".slide img").animate({
    "top": 20
    });
    });
    });
    }

    I tucked the breakpoint in there to fire after the image slides up. I have to click OK on the alert exactly 17 times each time (which is the number of slides I have). If I add or remove slides the alert fires the same number of times as there are slides.
    Any ideas?

    #56918
    kurtma
    Member

    Really? Nobody has any ideas?

    #56093
    kurtma
    Member

    So I switched over to AnythingSlider. A lot more complicated, but at least it works with more than three slides. Not sure how to close this thread.

Viewing 4 posts - 1 through 4 (of 4 total)
  • The forum ‘JavaScript’ is closed to new topics and replies.