- This topic is empty.
-
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
head2
text2
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");
}
});
});
- The forum ‘JavaScript’ is closed to new topics and replies.
