Question

I’m using some jQuery code to create tabs in which the page’s content is broken up into (navigable from the top of the tab block) and am looking to do the following when a “next” or “previous” link (placed at the bottom of each tab’s content) is clicked:

1. The page to scroll up to the top of the tab block (successfully implemented using “.scrollTo” plugin) over 750ms
2. Once scrolled, the tab to change to the corresponding “previous” or “next” tab (identified by a hashtag url) – 250ms later.

Using the following code:

$(".external_link").click(function() {
$.scrollTo(515, 750, {easing:'easeInOutQuad'});
setTimeout(changeTab($(this).attr("href")), 1000);
return false;
});

the two happen at the same time at the mo. If anyone could shed some light on what I’m doing wrong I’d be really appreciative.

The code in full:

$(document).ready(function() {

$(".tab_content").hide();
$("ul.content_tabs li:first").addClass("active").show();
$(".tab_content:first").show();

$('.content_tabs li').each(function(i) {
var thisId = $(this).find("a").attr("href");
thisId = thisId.substring(1,thisId.length) + '_top';
$(this).attr("id",thisId);
});

function changeTab(activeTab) {

$("ul.content_tabs li").removeClass("active");
$(activeTab + '_top').addClass("active");

$(".tab_content").hide();
$(activeTab).fadeIn();

}

//check to see if a tab is called onload
if (location.hash!=""){changeTab(location.hash);}
//if you call the page and want to show a tab other than the first, for instance     index.html#tab4

$("ul.content_tabs li").click(function() {
if ($(this).hasClass("active"))
return false;

changeTab($(this).find("a").attr("href"));
return false;
});


$(".external_link").click(function() {
$.scrollTo(515, 750, {easing:'easeInOutQuad'});
setTimeout(changeTab($(this).attr("href")), 1000);
return false;
});
});

Am I right to be attempting to do this with setTimeout? My knowledge is incredibly limited.

Answer 1

setTimeout(changeTab($(this).attr("href")), 1000); 

That’s the wrong one, you have to put in a function, not the result of executing a function, and 250 ms makes more sense. changeTab is a function, changeTab(argument) is executing a function. So try

var that = $(this);
setTimeout(function() {changeTab(that.attr("href"))}, 250); 

I think the reason they execute at the same time is because you call the changeTab-function directly when you set the timeout, and the previous function waits for 750ms before proceding.