Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7

Thread: Auto Scroll

  1. #1
    New to the CF scene
    Join Date
    Mar 2013
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Auto Scroll

    Hello, i am new here an i hope that you can help me..

    I would like to auto scroll a div-tag in my HTML.. In this tag there is an Excel-File, converted into .htm. Because the file is to big for the frame it should auto scroll, subsequently up again.

    Sorry for my english hope you understand my problem..

    I have already this script in the <head> my HTML-File
    Code:
    <script language="JavaScript">
    <!--
    function AutomatischScrollen()
    {
        window.scrollBy(0,1);
        Scrollen();
    }
    
    function Scrollen()
    {
        GescrollteZeit = window.setTimeout("AutomatischScrollen()", 30);
    }
    //-->
    </script>
    Then i have to add:
    Code:
    <body onload="AutomatischScrollen();">
    I only want to use this in my div tag, not for the hole site.. But the "onload" function doesn`t work in "div"-tags..


    My div-tag:
    Code:
    <div id="scroll" class="col-6">
      <h3>Frame 2</h3>
      <object data="Tabelle.htm" width="546" height="882"></object>
    </div>
    Hope that you can help me with my problem...

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,609
    Thanks
    24
    Thanked 647 Times in 646 Posts
    I don't know what you mean by "it should auto scroll, subsequently up again."

    This will scroll down to line 500. It will go back to the top if you uncomment the next line.
    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <style>
    div {
    	height: 500px;
    	width: 300px;
    	margin:10px;
    	padding:5px;
    	border:2px solid #666;
    	overflow:scroll;
    }
    </style>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    
    </head>
    <body>
    <div id="mine">
    Lorem ipsum ei noster fabulas mei, nihil congue dolores no sed. Sit atqui dolorem et. Sed hinc dicant splendide ne, vim legimus tincidunt efficiantur id. Animal laboramus id vix, percipit pertinax praesent ad ius. Nam atqui quaestio ut, cum eu minim tibique accusamus, in qui mutat oportere interpretaris. In cum quas deleniti, essent intellegat mea an.
    Sit legendos consequat no, diam dicunt ei qui. His ut errem omittam, ei mea latine dolores. Mei ut amet esse, sea an laoreet iudicabit vituperata, nostrum honestatis persequeris cum at. Iusto nusquam eam te, ut amet solum posse vis, has iisque sanctus deseruisse ut. Eu cum movet intellegebat, sed alii habeo at.
    Nec no blandit molestie, eu eos elitr integre postulant, vim dicam antiopam no. Usu mutat eirmod eu, te eum assum graece voluptua. Vim verear accusata definitiones eu. In minimum moderatius nec, an ullum summo phaedrum mea. Nisl definitiones eu sit. Mea zzril petentium adolescens id, prima quodsi ex mei.
    Ornatus euripidis te vel, pro autem laoreet democritum in, eu vis animal sententiae. At atqui alterum legendos eos, ius euismod convenire honestatis in. Cu vix mediocrem prodesset adolescens, eum ex populo dolores salutatus, nam veniam consequat ei. Tota solet facilisis eu ius. Ut volumus antiopam est, pro ea nusquam legendos. Primis feugait urbanitas quo id.
    Ut aeterno similique vix. Pro ne etiam takimata necessitatibus. Tale utinam ea nec, nisl ridens vim no. Mea percipit expetenda eu, ornatus assentior eos ut. Quis dicunt dolorem ne vix. Duo cu mazim lobortis salutatus, volumus rationibus est ut. Duo posse etiam aperiam no, vis ea nisl volutpat suscipiantur.
    Prima denique incorrupte vel id, ut sonet dolores appellantur his, an nam vitae invidunt. Nisl tation adversarium eos ut, mea dico aliquam mandamus ad. Sed ne nobis dissentiunt, quo ubique veritus nostrum ei. Et mucius signiferumque qui, ad appareat probatus convenire vim. Possit percipitur appellantur at has, ea duo minim veniam.
    Debet melius vel eu. Est libris prodesset deseruisse ea. Vero splendide pro cu, scripta eripuit id mea. Etiam nulla affert ei per, dolores postulant mea id, vix te animal torquatos. Ut usu ullum menandri singulis, ei nec noluisse suscipiantur signiferumque.
    Cu putent tincidunt est, duo an ridens denique. Mei libris nominavi mediocritatem eu. Cu eos fastidii adipisci disputationi. Est an persequeris neglegentur, mel veritus voluptua copiosae id, quaeque graecis placerat et has. Ei tota nominati signiferumque vis, vel at consul iriure complectitur.
    Vis ut illum rationibus definitionem, eum cibo impedit no, his an minimum inimicus. At nam idque copiosae iudicabit. Oratio option te eum, liber theophrastus an per, ne latine incorrupte repudiandae eam. Id reque appellantur vis. Mei ne doming aliquid. Zzril fabulas molestiae te duo. Est eu molestiae rationibus, sint meliore incorrupte quo ut.
    Mea docendi praesent at, pro ei electram maiestatis, sint sanctus percipit eu nec. Mollis lucilius comprehensam sea ne. Magna dicat salutandi at mel, usu malis delicatissimi id, cu probo delectus vis. Ea mel habeo ubique singulis, graeci graecis signiferumque ut sea. Duo ei liber regione salutandi, eu viderer eligendi sed, est ex omnis putent nusquam.
    </div>
    
    <script>
    	$("div#mine").scrollTop(500);
    	//$("div#mine").scrollTop(0);
    </script>
    </body>
    </html>

  • #3
    New to the CF scene
    Join Date
    Mar 2013
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by sunfighter View Post
    I don't know what you mean by "it should auto scroll, subsequently up again."
    i mean that the div-frame should scroll down automatically. If it reached the end of the frame it should jump to the top and scroll down again..

    With the script i have posted only the whole site scrolls.

    With the Script you have posted it don't work, too

  • #4
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,609
    Thanks
    24
    Thanked 647 Times in 646 Posts
    With the script I posted the div scrolls, not the window. And it should be easy to figure out what you want. Try adding this to scroll down:
    Code:
    $('#myDiv').animate({
        scrollTop: $('#myDiv').get(0).scrollHeight
    }, 1500);

  • #5
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,609
    Thanks
    24
    Thanked 647 Times in 646 Posts
    If you haven't done it by now, set your javascript to this:
    Code:
    <script>
    $('div#mine').animate({scrollTop: $('div#mine').get(0).scrollHeight}, 7000);
    $("div#mine").animate({scrollTop: 0}, 10000);
    </script>

  • #6
    New to the CF scene
    Join Date
    Mar 2013
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by sunfighter View Post
    If you haven't done it by now, set your javascript to this:
    Code:
    <script>
    $('div#mine').animate({scrollTop: $('div#mine').get(0).scrollHeight}, 7000);
    $("div#mine").animate({scrollTop: 0}, 10000);
    </script>
    Great, it works

    But i have some further questions:
    My div-tag height is 612px. The scrolling only works if i set the height of the <iframe> much higher, for example
    Code:
    <div id="mine" class="col-6" align="center">
       <iframe src="Tabelle.htm" width="1198" height="888"></iframe>
       </div>
    How can i change it that is scrolls every time without reference to the height of the <iframe>??
    (Tabelle.htm is a converted Excel File)

    Second question:
    It scrolls down very fast and up very slow, what i have to do to change the speed??

    Third question:
    And the scrolling will never end, it should work in a loop, what i have to do for it?

    Additional Code:
    Code:
    #page4 .col-6 {
    	float:left;
    	/*display:inline;
    	position:relative;*/
    	width:1208px;
    	height: 612px;
    	/*background-image: url(../images/bg-13.png);*/
    	background-color:#FFF;
    	margin-top: 20px;
    	margin-right: 40px;
    	margin-bottom: 20px;
    	margin-left: 20px;
    	overflow: scroll;
    	padding-bottom:10px;
    Thanks
    Last edited by tobihro; 03-05-2013 at 08:03 PM.

  • #7
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,609
    Thanks
    24
    Thanked 647 Times in 646 Posts
    Timing
    $('div#mine').animate({scrollTop: $('div#mine').get(0).scrollHeight}, 7000);
    $("div#mine").animate({scrollTop: 0}, 10000);


    LOOPING
    You want the setInterval() Method read this http://www.w3schools.com/js/js_timing.asp

    How can i change it that is scrolls every time without reference to the height of the <iframe>??
    It does not reference the <iframe>. Can't see your code so can't answer this. Fix the others first and then try again.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •