views:

325

answers:

2

Hello, I have created a jQuery script (with help) that works great however I need it to automate/animate itself without using the click function, I just want to know is this possible and if so, how? Similar to a slide-show.

Basically the code allows me to click on an image and hide/show a DIV, while changing a list of elements such as class/id name.

Here's my code:

JQUERY:

jQuery(document).ready(function(){
    //if this is not the first tab, hide it
    jQuery(".imgs:not(:first)").hide();
    //to fix u know who
    jQuery(".imgs:first").show();
    //when we click one of the tabs
    jQuery(".img_selection a").click(function(){
        //get the ID of the element we need to show
        stringref = jQuery(this).attr("href").split('#')[1];

        // adjust css on tabs to show active tab
        $('.img_selection a').removeAttr('id'); // remove all ids
        $(this).attr('id', this.className + "_on") // create class+_on as this id.
        //hide the tabs that doesn't match the ID
        jQuery('.imgs:not(#'+stringref+')').hide();
        //fix
        if (jQuery.browser.msie && jQuery.browser.version.substr(0,3) == "6.0") {
            jQuery('.imgs#' + stringref).show();
        } else
            //display our tab fading it in
            jQuery('.imgs#' + stringref).show();
        //stay with me
        return false;
    });
});
+1  A: 

Time-limiting a function execution is not possible in Javascript.

But, HTML5 brings along web-workers, which are basically background worker threads. It is possible to suspend a web-worker after a certain time.

N 1.1
+1  A: 

This should do it. It gets all "tabs" and clicks im in circular order with a pause of 2 seconds (2000ms) between each click

var tabs = jQuery(".img_selection a");
var len = tabs.size();
var index = 1;
function automate() {
    tabs.eq((index%len)).trigger('click');
    index++;
}
var robot = setInterval(automate, 2000);

//if at some point you want to stop the automation just call
clearInterval(robot);

Made a demo

http://jsbin.com/urulo/2/ (http://jsbin.com/urulo/2/edit for the code)

jitter
@jitter: I added this to my code but it doesn't work, I could be placing it in the wrong spot. Any ideas? Sorry I'm definitely a beginner with jquery/js.
iamtheratio
Check link in expanded answer. Made a demo for you and optimized your code a bit too
jitter
This works great man, but I only see one issue. Since it loads on tab1, then the animation starts on tab1, so it loads that one twice. Is there a way to have the animate start on tab2 ? so on page load it loads 1, then it animates to tab 2?
iamtheratio
Also, how can I stop the animation when I click on one of the tabs? Is that possible?Sorry for the all the questions, I've tried a bunch of things but they don't work, so I'm asking. :) thank you for all the help though, its greatly appreciated.
iamtheratio
For the first question. Just change `var index=0;` to `var index=1;`
jitter
For the second question. I already had the needed line inside the code (of course commented out). Check the changed answer (provided new links for adapted demo)
jitter
I figured out index = 1, thank you for that, I'm looking at the code now to stop it. I'm learning so much by this website and everyone, so I really do appreciate it
iamtheratio
@jitter: by adding clearInterval(robot); to the top part after (".imgs").hide().. it doesn't stop when I click on the tabs, any idea?
iamtheratio