Solved

jQuery function callback

Posted on 2014-12-05
10
174 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 5
  • 4
10 Comments
 
LVL 58

Expert Comment

by:Gary
ID: 40483598
$('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
ID: 40483611
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
ID: 40483625
Hi Gary

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

Containers are an incredibly powerful technology that can provide you and/or your engineering team with huge productivity gains. Using containers, you can deploy, back up, replicate, and move apps and their dependencies quickly and easily.

 

Author Comment

by:Refael
ID: 40483642
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
ID: 40483658
$('html,body').stop().animate({scrollTop:targetOffset}, speed, "easeInOutExpo",function(){
	$(".page-section").not('#' + id).hide();
});

Open in new window

0
 

Author Comment

by:Refael
ID: 40483683
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
ID: 40483693
Yeah, you are passing the # in the function param so not needed.
0
 
LVL 58

Expert Comment

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

Take 50 away or make it 50?
0
 

Author Comment

by:Refael
ID: 40483697
:-) make it 50
0
 
LVL 58

Expert Comment

by:Gary
ID: 40483718
Then just

var targetOffset = 50;
0

Featured Post

How Do You Stack Up Against Your Peers?

With today’s modern enterprise so dependent on digital infrastructures, the impact of major incidents has increased dramatically. Grab the report now to gain insight into how your organization ranks against your peers and learn best-in-class strategies to resolve incidents.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction Knockoutjs (Knockout) is a JavaScript framework (Model View ViewModel or MVVM framework).   The main ideology behind Knockout is to control from JavaScript how a page looks whilst creating an engaging user experience in the least …
Introduction JSON is an acronym for JavaScript Object Notation.  It is a text-string data transport mechanism, capable of representing simple or complex data structures in a consistent and easy-to-read manner.  Similar in concept to XML, but more e…
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…

728 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