• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 421
  • Last Modified:

jQuery: Alert when done scrolling

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

0
hankknight
Asked:
hankknight
  • 2
1 Solution
 
Mrugesh1Commented:
Try this...

 
<!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'); },1000);
}
/*]]>*/
</script>

</body>
</html>

Open in new window

0
 
Mrugesh1Commented:
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

0

Featured Post

[Webinar] Cloud and Mobile-First Strategy

Maybe you’ve fully adopted the cloud since the beginning. Or maybe you started with on-prem resources but are pursuing a “cloud and mobile first” strategy. Getting to that end state has its challenges. Discover how to build out a 100% cloud and mobile IT strategy in this webinar.

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now