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.
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
}
}
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:
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';
, thenscrollTo(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.