Sunday, 10 August 2014

How to Scroll Page Automatically by few pixels after every few seconds using JQuery in asp.net

scroll text using jquery

Description:-



in this example we explain that how to scroll page data automatically after every few second or using timer concept in asp.net using jquery. Or how to scroll page data or any part of the page automatically after every stetted time in asp.net.

suppose if you have note that we show many this type of functionality in News website like Divbhaskar.com or Gujaratsamachar.com etc.. in this website the news will be automatically scroll one by one from bottom to top or right to left as per website defined.

So to display this News type effect in our code you have to write the following code

How to Handle Concurrency in Linq to Sql Handle Concurrency in Linq to Sql


Read/Write Text File in Asp.Net with C# Example of Read/Write File



 Code.aspx:-

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default3.aspx.cs" Inherits="Default3" %>

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>How to Scroll Page Automatically same like in News website news in up by few
        pixels after every few seconds using JQuery </title>
    <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.4.min.js">
    </script>
    <script type="text/javascript" language="javascript">
        $(document).ready(function () {
            setInterval(function () {
                var ScrollDir = $(window).scrollTop();
                ScrollDir = ScrollDir + 200; // 200 pixels to scroll
                $('html, body').animate({
                    scrollTop: ScrollDir
                }, 2000);   //10000 is speed of scroll
            }, 2000);     //1000 Shows,after how many seconds we want to scroll
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <h4>
            How to Scroll Page Automatically same like in News website news in up by few pixels
            after every few seconds using JQuery</h4>
        <p>
            one</p>
        <p>
            two</p>
        <p>
            three</p>
        <p>
            four</p>
        <p>
            five</p>
        <p>
            six</p>
        <p>
            seven</p>
        <p>
            eight</p>
        <p>
            nine</p>
        <p>
            ten</p>
        <p>
            eleven</p>
        <p>
            twelve</p>
        <p>
            thirteen</p>
        <p>
            fourty</p>
        <p>
            fifteen</p>
        <p>
            sixty</p>
        <p>
            seventy</p>
        <p>
            eighteen</p>
        <p>
            ninteen</p>
        <p>
            twenty</p>
    </div>
    </form>
</body>
</html>


0 comments:

Post a Comment