Automatically move through anchors

I need a way to automatically/programmatically move through anchors on the homepage of a WordPress site. The anchor’s I want to move through are the tabs in the middle.

For example: page loads, waits specified time, tab 2 opens, waits specified time, tab 3 opens, waits specified time, tab 4 opens, and then keeps repeating. Once it gets to the end, I want it to go back to the beginning. Ideally it would stop on hover if mouse, but I haven’t tried to implement that yet.

Read More

I have tried to create a JavaScript program in the “text” part of the post showing on the homepage, but it doesn’t seem to work. I see the "Test" alert, but never see the "Hello" alert.

<script type="text/javascript">
function scrollTo(hash) {
    location.hash = "#" + hash;
    alert('Hello');
}
function tabSlider() {
    delay = 2000; //2 second delay
    setTimeout(function() {scrollTo(ert_pane1-1);},delay);
    setTimeout(function() {scrollTo(ert_pane1-2);},delay*2);
    setTimeout(function() {scrollTo(ert_pane1-3);},delay*3);
    setTimeout(function() {scrollTo(ert_pane1-4);},delay*4);
    setTimeout(function() {scrollTo(ert_pane1-0);},delay*5);
    tabSlider();
    alert('Test');
}
window.onload = tabSlider();
//-->
</script>

The plugin for the tabs is Easy Responsive Tabs.

Thanks to brasofilo, here is the final working code:

<script type="text/javascript">
function scrollTo(hash) {
    location.hash = "#" + hash;
    jQuery( "a[href='#" + hash + "']" ).click(); // finds <a> with href==hash and clicks
}
function tabSlider() {
    delay = 3000; //2 second delay
    setTimeout(function() {scrollTo('ert_pane1-1');},delay);
    setTimeout(function() {scrollTo('ert_pane1-2');},delay*2);
    setTimeout(function() {scrollTo('ert_pane1-3');},delay*3);
    setTimeout(function() {scrollTo('ert_pane1-4');},delay*4);
    setTimeout(function() { scrollTo('ert_pane1-0'); tabSlider(); }, delay*5 );
}
window.onload = tabSlider();
//-->
</script>

EDIT For those who want to know how I did my hover, I just used jQuery to prevent the click:

var hovering = 0;
jQuery ("#primary").hover(function() { hovering = 1; },
                  function() { hovering = 0; });
function scrollTo(hash) {
    if (hovering==1) {
    //Do nothing
    } else {
    location.hash = "#" + hash;
    jQuery( "a[href='#" + hash + "']" ).click(); // finds <a> with href==hash and clicks
    }
}

Related posts

Leave a Reply

1 comment

  1. The location.hash will only add the hash to the URL, it doesn’t actually navigates to the hash.

    As you’re already loading jQuery on the site, it’s just a matter of forcing a click on the anchor:

    function scrollTo(hash) {
        location.hash = "#" + hash;
        jQuery( "a[href='#" + hash + "']" ).click(); // finds <a> with href==hash and clicks
    }
    

    Your tabSlider function has two problems:

    • scrollTo(value) needs to send a string, you’re sending an inexistant “variable”.
      If you had var ert_pane1 = 'hash-value';, then scrollTo(ert_pane1) would work.
      As that’s not the case you need: scrollTo('ert_pane1').

    • the next call to tabSlider() has to be inside the last timeout, this way it produces the desired loop.

    function tabSlider() {
        delay = 2000;
        setTimeout(function() { scrollTo('ert_pane1-1'); }, delay );
        setTimeout(function() { scrollTo('ert_pane1-2'); }, delay*2 );
        setTimeout(function() { scrollTo('ert_pane1-3'); }, delay*3 );
        setTimeout(function() { scrollTo('ert_pane1-4'); }, delay*4 );
        setTimeout(function() { scrollTo('ert_pane1-0'); tabSlider(); }, delay*5 );
    }
    tabSlider();