jQuery: Alert which item was scrolled when done scrolling
I use the following code to trigger an alert when a visitor is done scrolling.
I want the alert to say which item the scrolling occurred on.
For example, "You are done scrolling item 1" or "You are done scrolling item 2"
I want the alert to say which item the scrolling occurred on.
For example, "You are done scrolling item 1" or "You are done scrolling item 2"
<!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}
h2{text-align:center; text-size: 13px; padding: 0; margin: 22px 0 5px 0;}
.pane {margin: 0 auto; width: 100px; height: 70px; overflow: auto; background: #eedddd; border: 1px solid #ddcccc;}
</style>
</head>
<body>
<h1>When you scroll an item, an alert should tell you which item was scrolled.</h1>
<h2>Item 0</h2>
<div class="pane">
DFdsfjk hdasjkf hdasjk fhdsakj hfdask hdaskj hdasjk adkslf jadslkj fadlks klFdsfjk hdasjkf hdasjk fhdsakj hfdask hdaskjl
</div>
<h2>Item 1</h2>
<div class="pane">
DFdsfjk hdasjkf hdasjk fhdsakj hfdask hdaskj hdasjk adkslf jadslkj fadlks klFdsfjk hdasjkf hdasjk fhdsakj hfdask hdaskjl
</div>
<h2>Item 2</h2>
<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 item ' + '?' ); },1000);
}
/*]]>*/
</script>
</body>
</html>ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Thanks, but please test this:
- Set the delay to 5 seconds.
- Scroll all three items.
With the code you provided, I only get an alert for the last item scrolled on. If a person quickly scrolls all three items, they only get one alert. They should get one alert for each item.
- Set the delay to 5 seconds.
- Scroll all three items.
With the code you provided, I only get an alert for the last item scrolled on. If a person quickly scrolls all three items, they only get one alert. They should get one alert for each item.
<!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}
h2{text-align:center; text-size: 13px; padding: 0; margin: 22px 0 5px 0;}
.pane {margin: 0 auto; width: 100px; height: 70px; overflow: auto; background: #eedddd; border: 1px solid #ddcccc;}
</style>
</head>
<body>
<h1>When you scroll an item, an alert should tell you which item was scrolled.</h1>
<h2>Item 0</h2>
<div class="pane">
DFdsfjk hdasjkf hdasjk fhdsakj hfdask hdaskj hdasjk adkslf jadslkj fadlks klFdsfjk hdasjkf hdasjk fhdsakj hfdask hdaskjl
</div>
<h2>Item 1</h2>
<div class="pane">
DFdsfjk hdasjkf hdasjk fhdsakj hfdask hdaskj hdasjk adkslf jadslkj fadlks klFdsfjk hdasjkf hdasjk fhdsakj hfdask hdaskjl
</div>
<h2>Item 2</h2>
<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(index);
});
});
var zxcTO;
function ScrollAlert(index)
{
clearTimeout(zxcTO);
zxcTO=setTimeout(function(){ alert('You are done scrolling item ' + index ); },5000);
}
/*]]>*/
</script>
</body>
</html>
Then you need to set the timeout to less - like 100 and not for the 5 seconds.
The ticking timer outputs the last message and on the other hand scroll function runs in a reatime so I doubt there is a direct way to do what you want.
The ticking timer outputs the last message and on the other hand scroll function runs in a reatime so I doubt there is a direct way to do what you want.
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Open in new window
then you just output the index in ScrollAlert function
The index is 0-based, so you would have to add +1