|
I'm kind of baffled here. This is a script that came in a customer project. I thought I fixed it, but when I run it, the slide counter goes 0 then 3 then 2 instead of 0 1 2
$(document).ready(function () {
var slideContainer = $('[id*="_slideshow_container"]');
var slidesHolder = $(slideContainer).children();
var slideWidth = $(slideContainer).width();
var slides = $(slidesHolder).children();
var slidePos = 0;
var slideTotal = slides.length;
var currentSlide = 0;
var delay = 5000;
var slideTime = 1000;
$(slideContainer).css({
"overflow": "hidden",
"position": "relative"
});
$(slidesHolder).css({
"position": "absolute",
"top": "0px",
"left": "0px"
});
for (var i = 0; i < slides.length; i++) {
$(slides[i]).css({
"position": "absolute",
"top": "0",
"left": slidePos + "px"
});
slidePos = slidePos + slideWidth;
}
$(slidesHolder).css('width', slidePos + slideWidth);
$(slides).first().clone().css({
"left": slidePos + "px"
}).appendTo(slidesHolder);
animate();
function animate() {
$('[id*="_lbl_SS_Collapse"]').text(currentSlide);
$(slidesHolder).delay(delay).animate({
left: "-=" + slideWidth
}, slideTime, function () {
if (currentSlide < slideTotal) {
currentSlide++;
animate();
}
else {
$(slidesHolder).css({
"left": "0px"
});
currentSlide = 0;
animate();
}
});
}
});
|
|
|
|
|
OK I get it now. The Javascript runs full speed until complete, but the delay in the animation function drags behind the execution of the code, so You can never really detect the end of the animation loop.
So for now, I'll just loop through some marketing messages, and then stop
I put a for loop in the function instead
function animate() {
for (var i = 0; i < slideTotal - 1; i++) {
$(slidesHolder).css({
'left': '0px'
});
$(slidesHolder).delay(delay).animate({
"left": "-=" + slideWidth
}, slideTime, 'swing', function () {
});
}
}
|
|
|
|
|
So this takes all the div and makes a filmstrip out of them, and moves each cell left, and then rewinds and starts again. I think it's simple in design. Feel free to comment on it.
$(document).ready(function () {
load_DisplayAdvertising_Horizontal();
});
function load_DisplayAdvertising_Horizontal() {
var view_Width = 980;
var view_Height = 250;
var view_Time = 4000;
var ease_Time = 1400;
var child_Count = parseInt($('[id*="_slide_container"]').children().length);
$('[id*="_slide_container"]').css({
"position": "relative",
"width": view_Width + "px",
"height": view_Height + "px",
"overflow": "hidden"
});
var fsWidth = 0;
var fsHeight = 0;
$('[id*="_slide_container"]').find("._slide_child").css({
"display": "inline",
"position": "relative",
"float": "left",
"top": "0px",
"left": "0px"
}).each(function (index) {
fsWidth = fsWidth + parseInt($(this).css("width"));
if (fsHeight < parseInt($(this).css("height"))) {
fsHeight = parseInt($(this).css("height"));
}
})
var div_filmStrip = document.createElement("div");
div_filmStrip.style.textAlign = "left";
div_filmStrip.style.width = fsWidth + "px";
div_filmStrip.style.height = fsHeight + "px";
div_filmStrip.style.position = "relative";
div_filmStrip.style.left = "0px";
div_filmStrip.style.top = "0px";
var temp_InnerHTML = $('[id*="_slide_container"]').html();
div_filmStrip.innerHTML = temp_InnerHTML;
$('[id*="_slide_container"]').empty();
$('[id*="_slide_container"]').append(div_filmStrip);
run_DisplayAdvertising_Horizontal(
div_filmStrip,
fsWidth,
view_Width,
child_Count,
view_Time,
ease_Time
);
}
function run_DisplayAdvertising_Horizontal(obj, cW, vW, cC, vT, eT) {
if (cC > 0)
{
var fsWidth = parseInt(cW - vW);
var fsRewind = parseInt(vT / cC);
for (var i = 0; i < cC-1; i++)
{
$(obj).delay(vT).animate({
left: '-=' + vW
}, eT, "linear", function () {
var fsPosition = parseInt($(obj).css("left"));
if (fsPosition == -fsWidth) {
$(obj).delay(vT).animate({
left: '0px'
}, fsRewind, "linear", function () {
run_DisplayAdvertising_Horizontal(obj, cW, vW, cC, vT, eT);
});
}
});
}
}
}
The HTML Side
<div id="_slide_container" style="width: 980px; height: 254px; text-align: center; margin: 0px auto; display: block;">
<div id="slideChild_0" class="_slide_child" style="width: 980px; height: 250px; display: block;">
<asp:Image ID="img_slideshow_child_0" runat="server"
ImageUrl="~/EN-US/images/SlideShows/SS_StrategyPlanning_980x250.png" />
</div>
<div id="slideChild_1" class="_slide_child" style="width: 980px; height: 250px; display: none;">
<asp:Image ID="img_slideshow_child_1" runat="server"
ImageUrl="~/EN-US/images/SlideShows/SS_WebDesign_980x250.png" />
</div>
<div id="slideChild_2" class="_slide_child" style="width: 980px; height: 250px; display: none;">
<asp:Image ID="img_slideshow_child_2" runat="server"
ImageUrl="~/EN-US/images/SlideShows/SS_WebDevelopment_980x250.png" />
</div>
<div id="slideChild_3" class="_slide_child" style="width: 980px; height: 250px; display: none;">
<asp:Image ID="img_slideshow_child_3" runat="server"
ImageUrl="~/EN-US/images/SlideShows/SS_HKB_Project_2_980x250.png" />
</div>
<div id="slideChild_4" class="_slide_child" style="width: 980px; height: 250px; display: none;">
<asp:Image ID="img_slideshow_child_4" runat="server"
ImageUrl="~/EN-US/images/SlideShows/SS_InternetCommerceEngine-5_980x250.png" />
</div>
</div>
|
|
|
|
|
With a bit more detailed description this would be worth posting[^] as a Tip/Trick. It will soon get lost here, whereas Tips & Tricks and Articles can be searched and browsed quite easily.
One of these days I'm going to think of a really clever signature.
|
|
|
|
|
I thought about that last night, but sure if it was worthy of it, or if the code was clean enough. But based on the quality I usually see here, I should not doubt myself.
Thanks, this will be my first publish here on CJ
|
|
|
|
|
jkirkerx wrote: if it was worthy of it Only one way to find out.
One of these days I'm going to think of a really clever signature.
|
|
|
|