Solved

jQuery function callback

Posted on 2014-12-05
10
162 Views
Last Modified: 2014-12-05
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

0
Comment
Question by:Refael
  • 5
  • 4
10 Comments
 
LVL 58

Expert Comment

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

Open in new window

0
 
LVL 8

Expert Comment

by:Ahmed Merghani
Comment Utility
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

0
 

Author Comment

by:Refael
Comment Utility
Hi Gary

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

Author Comment

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

Accepted Solution

by:
Gary earned 500 total points
Comment Utility
$('html,body').stop().animate({scrollTop:targetOffset}, speed, "easeInOutExpo",function(){
	$(".page-section").not('#' + id).hide();
});

Open in new window

0
Why You Should Analyze Threat Actor TTPs

After years of analyzing threat actor behavior, it’s become clear that at any given time there are specific tactics, techniques, and procedures (TTPs) that are particularly prevalent. By analyzing and understanding these TTPs, you can dramatically enhance your security program.

 

Author Comment

by:Refael
Comment Utility
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.....
0
 
LVL 58

Expert Comment

by:Gary
Comment Utility
Yeah, you are passing the # in the function param so not needed.
0
 
LVL 58

Expert Comment

by:Gary
Comment Utility
Not sure what you mean?
"var targetOffset = $(id).offset().top = 50;"

Take 50 away or make it 50?
0
 

Author Comment

by:Refael
Comment Utility
:-) make it 50
0
 
LVL 58

Expert Comment

by:Gary
Comment Utility
Then just

var targetOffset = 50;
0

Featured Post

Highfive + Dolby Voice = No More Audio Complaints!

Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

Join & Write a Comment

Introduction HyperText Transfer Protocol (http://www.ietf.org/rfc/rfc2616.txt) or "HTTP" is the underpinning of internet communication.  As a teacher of web development I have heard many questions, mostly from my younger students who have come to t…
I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

763 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

8 Experts available now in Live!

Get 1:1 Help Now