Monday, May 20, 2024
 Popular · Latest · Hot · Upcoming
122
rated 0 times [  126] [ 4]  / answers: 1 / hits: 29426  / 9 Years ago, sat, april 18, 2015, 12:00:00

I have written a fiddle that scrolls a div up and down automatically which is working fine. But there is an issue when it scrolls down, it doesn't show the last row (String4 in this case). can anybody help me to sort this out please.



<div class=container>
<div class=content>
<p>string1</p>
<p>string</p>
<p>string</p>
<p>string</p>
<p>string</p>
<p>string</p>
<p>string0</p>
<p>string1</p>
<p>string2</p>
<p>string3</p>
<p>string4</p>
<p> </p>
</div>




and js stuff:



   $(document).ready(function() {

if ($('.content').height() > $('.container').height()) {
setInterval(function () {

start();
}, 3000);

}
});

function animateContent(direction) {
var animationOffset = $('.container').height() - $('.content').height();
if (direction == 'up') {
animationOffset = 0;
}

console.log(animationOffset:+animationOffset);
$('.content').animate({ marginTop: (animationOffset)+ px }, 5000);
}

function up(){
animateContent(up)
}
function down(){
animateContent(down)
}

function start(){
setTimeout(function () {
down();
}, 2000);
setTimeout(function () {
up();
}, 2000);
setTimeout(function () {
console.log(wait...);
}, 5000);
}

More From » jquery

 Answers
4

Here is good solution



check here only





$(document).ready(function() {

if ($('.content').height() > $('.container').height()) {
setInterval(function () {

start();
}, 3000);

}
});

function animateContent(direction) {
var animationOffset = $('.container').height() - $('.content').height()-30;
if (direction == 'up') {
animationOffset = 0;
}

console.log(animationOffset:+animationOffset);
$('.content').animate({ marginTop: (animationOffset)+ px }, 5000);
}

function up(){
animateContent(up)
}
function down(){
animateContent(down)
}

function start(){
setTimeout(function () {
down();
}, 2000);
setTimeout(function () {
up();
}, 2000);
setTimeout(function () {
console.log(wait...);
}, 5000);
}

.container { height:250px; background:red; padding:0 10px; overflow:hidden; }
.content { background:#eee; }

<script src=https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js></script>
<div class=container>
<div class=content>
<p>string1</p>
<p>string</p>
<p>string</p>
<p>string</p>
<p>string</p>
<p>string</p>
<p>string0</p>
<p>string1</p>
<p>string2</p>
<p>string3</p>
<p>string4</p>
</div>
</div>





make



var animationOffset = $('.container').height() - $('.content').height()-30;


as may be padding interrupts your height.



I have removed your empty p tag.



here is the Fiddle


[#67024] Thursday, April 16, 2015, 9 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
josuea

Total Points: 609
Total Questions: 121
Total Answers: 104

Location: South Georgia
Member since Fri, Nov 13, 2020
4 Years ago
josuea questions
;