HiI have a webpage where i am loading the content of external website into a div and it is working perfectlyplease find below the code i am using for loading the web page example urlhttpwwww3schoolscom ltDOCTYPE htmlgtlthtml xmlns34httpwwww3org1999xhtml34gtlthead runat34server34gt lttitlegtlttitlegt ltscript src34httpajaxgoogleapiscomajaxlibsjquery1102jqueryminjs34gt ltscriptgt ltscriptgt

This way ltscript type34textjavascript34 src34httpsajaxgoogleapiscomajaxlibsjquery183jqueryminjs34gtltscriptgt ltscript type 34textjavascript34gt function var interval setIntervalfunction if 34div134scrollTop 39div1390scrollHeight 34div134scrollTop34div134scrollTop 10 else clearIntervalinterval 1000 ltscriptgt ltdiv id 34div134 style 34height100pxwidth200pxborder1px solid cccoverflowauto34gt This is a DIVltbr gt This is a DIVltbr gt This is a DIVltbr gt This is a DIVltbr gt This is a DIVltbr gt This is a DIVltbr gt This is a DIVltbr gt This is a DIVltbr gt This is a DIVltbr gt

Automatically Scroll DIV after 1 second periodically using jQuery

rakeshbs...

SOLVED CLOSED ACTIVE ANSWERED
User: rakeshbs.sit
Posted: on Jan 10, 2014 03:27 AM
Forum: jQuery and jQuery Plugins
Answer: 1
Views: 16006

Hi,

I have a webpage where i am loading the content of external website into a div and it is working perfectly.

please find below the code i am using for loading the web page( example url-http://www.w3schools.com/)

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
    </script>
    <script>
        $(document).ready(function () {
            $("#siteloader").html('<object height="1000px" width="1000px" data="http://www.w3schools.com/">')                  
             
               
            });
     
    </script>
</head>
<body>

    <form id="form1" runat="server">

        <div id="siteloader"></div>   <%--div to load site--%> 
       
</body>
</html>

Since the page content is overflowing ,the div will introduce 'scroll bars'.I would like to implement auto scroll feature to this div where it will scroll down for every 10 sec by some length and scroll up back to the top on reaching the end.

I have implemented auto refresh every 1 minute and it is working fine,but i am unable to implement this.

Is it possible to implement the same using jQuery or JavaScript ??

Thanks

Mudassar

0 1

Reply
ANSWER
User: Mudassar
Replied: on Jan 10, 2014 03:27 AM
Modified: on Jan 10, 2014 03:28 AM
Report

This way

    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type = "text/javascript">
        $(function () {
            var interval = setInterval(function () {
                if ($("#div1").scrollTop() != $('#div1')[0].scrollHeight) {
                    $("#div1").scrollTop($("#div1").scrollTop() + 10);
                } else {
                    clearInterval(interval);
                }
            }, 1000);
        });
    </script>
    <div id = "div1" style = "height:100px;width:200px;border:1px solid #ccc;overflow:auto">
        This is a DIV<br />
        This is a DIV<br />
        This is a DIV<br />
        This is a DIV<br />
        This is a DIV<br />
        This is a DIV<br />
        This is a DIV<br />
        This is a DIV<br />
        This is a DIV<br />
        This is a DIV<br />
        This is a DIV<br />
        This is a DIV<br />
        This is a DIV<br />
        This is a DIV<br />
        This is a DIV<br />
        This is a DIV<br />
        This is a DIV<br />
        This is a DIV<br />
        This is a DIV<br />
        This is a DIV<br />
        This is a DIV<br />
        This is a DIV<br />
        This is a DIV<br />
        This is a DIV<br />
        This is a DIV<br />
        This is a DIV<br />
        This is a DIV<br />
    </div>

Demo

Automatically Scroll DIV after 1 second periodically using jQuery

Company

Explore

Follow us

Contact Us