asked on

jQuery function callback

Hello Experts,

Below is my function. I am trying to add a callback but no luck.
The call back i am trying to add is at the end of the code. Where and how can I add the callback?

function scrollToID(id, speed) {
	var offSet = $(".header").height();
	var targetOffset = $(id).offset().top - offSet;
	$('html,body').stop().animate({scrollTop:targetOffset}, speed, "easeInOutExpo");
};

$(document).ready(function() {

    $('.scroll-link').on('click', function(event){				
	event.preventDefault();
	var sectionID = $(this).attr("data-id");
	$('#' + sectionID).show();			
	scrollToID('#' + sectionID, 1500);
	});
});

// this is the callback. and it should be right after scrollToID is completed.
$(".page-section").not('#' + sectionID).hide();

Open in new window

Gary

$('html,body').stop().animate({scrollTop:targetOffset}, speed, "easeInOutExpo",function(){
	$(".page-section").not('#' + sectionID).hide();
});

Open in new window

Ahmed Merghani

Try this code:

function scrollToID(id, speed) {
	var offSet = $(".header").height();
	var targetOffset = $(id).offset().top - offSet;
	$('html,body').stop().animate({scrollTop:targetOffset}, speed, "easeInOutExpo");
};

$(document).ready(function() {

    $('.scroll-link').on('click', function(event){				
	event.preventDefault();
	var sectionID = $(this).attr("data-id");
	$('#' + sectionID).show();			
	scrollToID('#' + sectionID, 1500);
        // this is the callback. and it should be right after scrollToID is completed.
        $(".page-section").not('#' + sectionID).hide();
	});
});

Open in new window

Refael

ASKER

Hi Gary

I tried it before and i get an error "ReferenceError: offset is not defined - var targetOffset = $(id).offset().top - offset;"

Refael

ASKER

Sorry Gary the error is "ReferenceError: sectionID is not defined - $(".page-section").not('#' + sectionID).hide();" and not the one i posted before.

ASKER CERTIFIED SOLUTION

Gary

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Refael

ASKER

Gary Thank you!

Still gives a strange error but when I removed the "#" it looks like it is working so...

"$(".page-section").not(id).hide();" can it be?

Gary in the code:

"var targetOffset = $(id).offset().top - offSet;"

How I can change it to a number, e.g. 50. I have tried:

"var targetOffset = $(id).offset().top = 50;"

But it did not work.....

Gary

Yeah, you are passing the # in the function param so not needed.

Gary

Not sure what you mean?
"var targetOffset = $(id).offset().top = 50;"

Take 50 away or make it 50?

Refael

ASKER

:-) make it 50

Gary

Then just

var targetOffset = 50;