homepage Welcome to WebmasterWorld Guest from 54.227.40.166
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

    
Killing a timeout in another function
andrewsmd




msg:4529333
 2:34 pm on Dec 18, 2012 (gmt 0)

I have a banner that fades in and out different divs on a timer. I want to add arrows so you can click through them if you'd like. I can call the proper part to fade in the next div, but the problem is, my time is still running so it still fades in a div at a given time. How would I go about just stopping or resetting the timer to the proper one, on one of the arrow clicks? Here is my function

(function ($) {

$.fn.extend({

//plugin name - rotaterator

rotaterator: function (options) {



var defaults = {

fadeSpeed: 4000,

pauseSpeed: 100,

child: null

};



var options = $.extend(defaults, options);



return this.each(function () {

var o = options;

var obj = $(this);

var items = $(obj.children(), obj);

items.each(function () { $(this).hide(); })

if (!o.child) {
var next = $(obj).children(':first');

} else {
var next = o.child;

}

$(next).fadeIn(o.fadeSpeed, function () {

$(next).delay(o.pauseSpeed).fadeOut(o.fadeSpeed, function () {

var next = $(this).next();

if (next.length == 0) {

next = $(obj).children(':first');

}

$(obj).rotaterator({ child: next, fadeSpeed: o.fadeSpeed, pauseSpeed: o.pauseSpeed });

})

});

});

}

});

})(jQuery);


And then I start it like so
$(document).ready(function () {

$('#rotate').rotaterator({ fadeSpeed: 1200, pauseSpeed: 4000 });

});

Now, I can make it rotate by calling this line onclick
$(obj).rotaterator({ child: next, fadeSpeed: o.fadeSpeed, pauseSpeed: o.pauseSpeed });

And as long as I define what the obj is and what I want the child to be, it will go to the proper div. The problem is, like I said, the timer is still set. And so then it will fade to a different div at it's alotted time. How would I stop that? I've seen where I can use clearTimeout(instance) but I don't know how I would store that instance so it's global. Can I just define a variable outside of my document.ready function and set it equal to the rotate line? I'm not very clear on how variables and scope work in JS

 

daveVk




msg:4529451
 11:13 pm on Dec 18, 2012 (gmt 0)

try $(obj).stop(true);

[api.jquery.com...]

Best done at start of rotaterator function ?

andrewsmd




msg:4529454
 11:47 pm on Dec 18, 2012 (gmt 0)

Not sure I understand what you meant by that but doing
function myRotate() {
var obj = $("#rotate");
var next = $("#rotate2");
$('#rotate').rotaterator({ fadeSpeed: 1200, pauseSpeed: 6000 });
$('#rotate').stop(true);

}

Will rotate, but doesn't stop the timer

daveVk




msg:4529476
 1:35 am on Dec 19, 2012 (gmt 0)

Need to call stop() on object currently being animated, try following that calls it on all objects in animation set.

function myRotate() {
var obj = $("#rotate");
obj.children().stop(); // set of objects being animated I hope
var next = $("#rotate2");
// what is this for ?
obj.rotaterator({ fadeSpeed: 1200, pauseSpeed: 6000 });

}

andrewsmd




msg:4529482
 1:59 am on Dec 19, 2012 (gmt 0)

So I ended up just searching online for something. I ended up finding a really cool script that's pretty easy to use.

I tried posting it, but it said my post was to large. I'd link to it, but I think that's against the policies. If anyone want's it, pm me and I'll send it to you.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved