Solved

jQuery function callback

Posted on 2014-12-05
10
166 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
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
How our DevOps Teams Maximize Uptime

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us. Read the use case whitepaper.

 

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

Free Tool: Postgres Monitoring System

A PHP and Perl based system to collect and display usage statistics from PostgreSQL databases.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Add shadow behind div 5 25
Setting up JqueryUI with MVC 5 in Visual Studio 5 27
HTML Anchor Link Problem 3 36
dynamic created check uncheck boxes 6 22
Introduction Chart.js, used properly, can visually add a difference to your charting applications. It engages your visitors and allows them to interact with data they otherwise wouldn't be able to without expensive and complicated systems. For this…
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 …
The viewer will learn how to dynamically set the form action using jQuery.
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…

838 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