21 June 2010

How to stop AnythingSlider from code

I covered this as part of a post on HTML5 video, but wanted to give it its own article here because a lot of folks have run into the issue: How do you stop the AnythingSlider by using JavaScript? The answer isn't as intuitive as it should be.

A somewhat related question on StackOverflow.com provided a part of the answer:
$("div.anythingSlider a#start-stop").trigger("click");
However, that solution toggles the current state of the "start-stop" by triggering the click action. Here's a complete solution. Assuming that the startText has been set to "Go", this function will stop the AnythingSlider:
function stopSlider(){
// This is a way to "cache" the element and not have
// to fetch it again and again.
var el = $("div.anythingSlider a#start-stop");
// Loop while triggering the click action on the element.
while (1 == 1){
el.trigger("click");
// If the HTML of the element contains "Go", then
// it's stopped and we can break out of the loop.
if (el.html().indexOf("Go") != -1) break;
}
}
The code triggers the "click" on the "start-stop" element, checking after each click to see if the HTML of the element contains the word "Go"; if it does, it break out of the loop. Of course, you'll have to modify it if you're using text other than "Go" on the "start-stop" anchor tag.

No comments: