We help IT Professionals succeed at work.

Check out our new AWS podcast with Certified Expert, Phil Phillips! Listen to "How to Execute a Seamless AWS Migration" on EE or on your favorite podcast platform. Listen Now

x

jQuery: Alert when done scrolling

hankknight
hankknight asked
on
Medium Priority
497 Views
Last Modified: 2012-05-11
I want an alert to be triggered when a person is done scrolling.  

The problem with my code is that if a person scrolls down, they get lots of alerts.

Instead, they should only get an alert when they have stopped scrolling and have not done any scrolling for at least one second.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Demo</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<style type="text/css">
h1{text-align:center}
.pane {margin: 20px auto; width: 100px; height: 70px; overflow: auto; background: #eedddd; border: 1px solid #ddcccc;}
</style>
</head>
<body>

<h1>There should be an alert when a person is done scrolling.</h1>

<div class="pane">
DFdsfjk hdasjkf hdasjk fhdsakj hfdask hdaskj hdasjk adkslf jadslkj fadlks klFdsfjk hdasjkf hdasjk fhdsakj hfdask hdaskjl
</div>

<div class="pane">
DFdsfjk hdasjkf hdasjk fhdsakj hfdask hdaskj hdasjk adkslf jadslkj fadlks klFdsfjk hdasjkf hdasjk fhdsakj hfdask hdaskjl
</div>

<div class="pane">
DFdsfjk hdasjkf hdasjk fhdsakj hfdask hdaskj hdasjk adkslf jadslkj fadlks klFdsfjk hdasjkf hdasjk fhdsakj hfdask hdaskjl
</div>

<script type="text/javascript">
/*<![CDATA[*/

$('.pane').each(function(index) {
	$(this).scroll(function () { 
	       alert('You are done scrolling');
	});
});

/*]]>*/
</script>

</body>
</html>

Open in new window

Comment
Watch Question

Commented:
Unlock this solution and get a sample of our free trial.
(No credit card required)
UNLOCK SOLUTION

Commented:
More improved....
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Demo</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<style type="text/css">
h1{text-align:center}
.pane {margin: 20px auto; width: 100px; height: 70px; overflow: auto; background: #eedddd; border: 1px solid #ddcccc;}
</style>
</head>
<body>

<h1>There should be an alert when a person is done scrolling.</h1>

<div class="pane">
DFdsfjk hdasjkf hdasjk fhdsakj hfdask hdaskj hdasjk adkslf jadslkj fadlks klFdsfjk hdasjkf hdasjk fhdsakj hfdask hdaskjl
</div>

<div class="pane">
DFdsfjk hdasjkf hdasjk fhdsakj hfdask hdaskj hdasjk adkslf jadslkj fadlks klFdsfjk hdasjkf hdasjk fhdsakj hfdask hdaskjl
</div>

<div class="pane">
DFdsfjk hdasjkf hdasjk fhdsakj hfdask hdaskj hdasjk adkslf jadslkj fadlks klFdsfjk hdasjkf hdasjk fhdsakj hfdask hdaskjl
</div>

<script type="text/javascript">
/*<![CDATA[*/

$('.pane').each(function(index) {
	$(this).scroll(function () {
		ScrollAlert();
	});	
});
var zxcTO;
function ScrollAlert()
{
	clearTimeout(zxcTO);
	zxcTO=setTimeout(function(){ alert('You are done scrolling'); },300);
}
/*]]>*/
</script>

</body>
</html>

Open in new window

Unlock the solution to this question.
Thanks for using Experts Exchange.

Please provide your email to receive a sample view!

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.