CODEWITHSUNDEEP
javascripthtmljquerycss
Dan Cooper
Dan Cooper

Reputation: 21

Auto Scrolling & looping Content DIV

I found this script that enables auto-scroll and looping perfectly. But I want this to occur in a fixed height div. When I change the .inner & .outer in the CSS to fix height the looping only runs (looks like twice) then jumps and starts again. The first snippet is the working one the second is with a fixed height of 200px.

function autoScrollDown(){
    $(".inner").css({top:-$(".outer").outerHeight()}) // jump back
               .animate({top:0},5000,"linear", autoScrollDown); // and animate
}
function autoScrollUp(){
    $(".inner").css({top:0}) // jump back
               .animate({top:-$(".outer").outerHeight()},5000,"linear", autoScrollUp); // and animate
}
// fix hight of outer:
$('.outer').css({maxHeight: $('.inner').height()});
// duplicate content of inner:
$('.inner').html($('.inner').html() + $('.inner').html());
autoScrollUp();
*{
    margin:0;
    padding:0;
}
.inner{
   
    position:relative;
    top:0px;
}
.outer{

    overflow:hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="outer">
    <div class="inner">
        <h3>Scrolling down... line 1</h3>
        <h3>Scrolling down... line 2</h3> 
        <h3> Scrolling down... line 3 </h3> 
        <h3> Scrolling down... line 4 </h3> 
        <h3> Scrolling down... line 5 </h3> 
        <h3> Scrolling down... line 6 </h3> 
        <h3> Scrolling down... line 7 </h3> 
        <h3> Scrolling down... line 8 </h3> 
        <h3> Scrolling down... line 9 </h3> 
        <h3> Scrolling down... line 10 </h3>
        <h3> Scrolling down... line 11 </h3> 
        <h3> Scrolling down... line 12</h3> 
        <h3> Scrolling down... line 13</h3> 
        <h3> Scrolling down... line 14</h3> 
        <h3> Scrolling down... line 15 </h3> 
    </div>

function autoScrollDown(){
    $(".inner").css({top:-$(".outer").outerHeight()}) // jump back
               .animate({top:0},5000,"linear", autoScrollDown); // and animate
}
function autoScrollUp(){
    $(".inner").css({top:0}) // jump back
               .animate({top:-$(".outer").outerHeight()},5000,"linear", autoScrollUp); // and animate
}
// fix hight of outer:
$('.outer').css({maxHeight: $('.inner').height()});
// duplicate content of inner:
$('.inner').html($('.inner').html() + $('.inner').html());
autoScrollUp();
*{
    margin:0;
    padding:0;
}
.inner{
  height:200px;
    position:relative;
    top:0px;
}
.outer{
  height:200px;
    overflow:hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="outer">
    <div class="inner">
        <h3>Scrolling down... line 1</h3>
        <h3>Scrolling down... line 2</h3> 
        <h3> Scrolling down... line 3 </h3> 
        <h3> Scrolling down... line 4 </h3> 
        <h3> Scrolling down... line 5 </h3> 
        <h3> Scrolling down... line 6 </h3> 
        <h3> Scrolling down... line 7 </h3> 
        <h3> Scrolling down... line 8 </h3> 
        <h3> Scrolling down... line 9 </h3> 
        <h3> Scrolling down... line 10 </h3>
        <h3> Scrolling down... line 11 </h3> 
        <h3> Scrolling down... line 12</h3> 
        <h3> Scrolling down... line 13</h3> 
        <h3> Scrolling down... line 14</h3> 
        <h3> Scrolling down... line 15 </h3> 
    </div>
</div>

Upvotes: 2

Views: 625

Answers (1)

Florian
Florian

Reputation: 51

You must calculate the total height with the hidden part.

function autoScrollUp(){
    $(".inner").css({top:0}) // jump back
               .animate({top:calcHeight}, 5000,"linear", autoScrollUp); // and animate
}

// fix hight of outer:
$('.outer').css({maxHeight: $('.inner').height()});
// duplicate content of inner:
$('.inner').html($('.inner').html() + $('.inner').html());
// total height / 2
var calcHeight = ( $(".outer")[0].scrollHeight / 2 ) * -1
autoScrollUp();

Regards

Upvotes: 1

Related Questions