Home Tutorial Jquery Display message on scroll Event

 
 

Share on Google+Share on Google+
Display message on scroll Event
Posted on: August 5, 2010 at 12:00 AM
Advertisement
In this tutorial, we will discuss about how to display message on scrolling of text area using jQuery scroll event.

Display message on scroll Event

In this tutorial, we will discuss about how to display message on scrolling of text area using jQuery scroll event. In this example, a text area with scroll bars are given , when we scroll any one of it on time, it will display a message. Each time you scroll up/down it will show a message.

appendOnScroll.html

<!DOCTYPE html>
<html>
<head>
<script src="jquery-1.4.2.js"></script>
</head>
<body>
<div id="target" style="overflow: scroll; width: 300px; height: 300px;">
India, officially the Republic of India is a country in South Asia. It is the
 seventh-largest country by geographical area, the second-most populous
country with over 1.18 billion people, and the most populous
democracy in the world.[16][17] Mainland India is bounded by the Indian
Ocean on the south, the Arabian Sea on the west, and the Bay of Bengal on
 the east; and it is bordered by Pakistan to the west;[note] China, Nepal, and
 Bhutan to the north; and Bangladesh and Burma to the east. India is in the
vicinity of Sri Lanka, and the Maldives in the Indian Ocean, its Andaman and
Nicobar Islands are also in the vicinity of the Indonesian island of Sumatra in the
 Andaman Sea, and in the Andaman Sea India also shares a maritime border with
Thailand.[18] India has a coastline of 7,517 kilometres (4,700 mi).[19]
</div>
<div id="other">
Trigger the handler
</div>
<div id="log"></div>
<script>
$('#target').scroll(function() {
$('#log').append('<div>Handler for .scroll() called.</div>');
});
</script>

</body>
</html>

OUTPUT

When we scroll down five times :

Download Source Code

Click here to see demo

Advertisement

Related Tags for Display message on scroll Event:


Follow us on Twitter, or add us on Facebook or Google Plus to keep you updated with the recent trends of Java and other open source platforms.

Posted on: August 5, 2010

Recommend the tutorial

Advertisements Advertisements
 

 

 

DMCA.com