JQuery Scroll Event method using Visual Studio 2010 in VB.NET

JQuery scroll event plugin method used to scroll events within the specified element in Visual Studio 2010.
  • 1972
Download Files:
 

 

JQuery Scroll () event method triggers the scroll event when user scrolls in the specified element and also specifies number of times a scroll event occurs if the function parameter is set. 

Statement to count the occurrence of scroll event.

$("div").scroll(function ()
 {
     $("span").text(x += 1);
 });


Let us see an example for catching scroll method in jquery. In the below example we have a small div that moves up and down on user specifications. Following is the source code.

Example

<html>
<
head>
<
title>JQuery Scroll Event</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
    x = 0;
    $(document).ready(function () {
        $("div").scroll(function () {
            $("span").text(x += 1);
        });
    });
</script>
    <style type="text/css">
        .style1
        {
            color: #BC3F3F;
        }
        .style2
        {
            color: #C40000;
        }
        .style3
        {
            color: #000000;
        }
    </style>
</head>
<
body bgcolor="#e1e1e1">
 <p class="style2" style="font-family: Verdana; font-size: small; font-weight: bold">
     JQuery Event Scroll () Method</p>
   <div style="width:378px; height:219px; overflow:scroll; font-family: Verdana; font-size: small; 
      background-color: #FFFFFF;">
     Global warming is the increase in the average temperature of Earth's near-surface air and 
     oceans since the mid-20th century and its projected continuation.
   <br /><br />
     It happens when greenhouse gases (carbon dioxide, water vapor, nitrous oxide, and methane)
     trap heat and light from the sun in the earth's atmosphere, which increases the temperature. 
     This hurts many people, animals, and plants.  Many cannot take the change, so they die.
   </div>
 <
p class="style3" style="font-family: Verdana; font-size: small">Number of times 
     scroll is used for an element:</p>
 <p style="font-family: Verdana; font-size: small">Scrolled <span class="style1">
     <strong>0</strong></span> times.</p>
</body>
</
html>
 
Output
scroll.gif

Categories

More Articles

© 2019 DotNetHeaven. All rights reserved.