Scroll down animation js - javascript

I built a kind of chat in JS and then I wanted that when I got new message the chat automatically scrolled down (with animation...). Everything worked beautifully, but after the animation stopped the user couldn't scroll by himself; the chat automatically scrolled to the end.
So this is the code :
<!-- language:lang-js -->
var height = 1;
window.setInterval(function() {
var elem = document.getElementById('chat');
elem.scrollTop = height;
if (elem.scrollheight < height) {
clearInterval(this);
}
height += 2;
}, 50);

the clearInterval function expects a number. Using that should make it work correctly. You also have many syntax errors.
var intervalReference = window.setInterval(function() {
var elem = document.getElementById('chat');
elem.scrollTop = height;
if (elem.scrollHeight < height) {
clearInterval(intervalReference);
}
height += 2;
}, 50);

you should make a var holding the interval like this :
var height = 1;
var interval = window.setInterval( animate, 50 );
function animate() {
var elem = document.getElementById('chat');
elem.scrollTop = height;
if (elem.scrollHeight < height) {
clearInterval( interval );
}
height += 2;
}
this should work fine

Related

Pure JavaScript - Timed Animation - Consistent height?

I have created a script that animates the height of an element in 500ms.
The timer works fine but I am struggling to make the height increase consistently.
How do I animate the height smoothly within the time period? It jumps at the moment.
I want to replace the following with something smarter:
self.startHeight + 5
I imagine it has something to do with the speed and elapsed time?
https://jsfiddle.net/zrm7xena/1/
(function () {
'use strict';
var animator = {};
animator.endHeight = 200; //The end height
animator.interval = null; //Create a variable to hold our interval
animator.speed = 500; //500ms
animator.startHeight = 0; //The start height
animator.animate = function (el) {
var self = this,
startTime = Date.now(); //Get the start time
this.interval = setInterval(function () {
var elapsed = Date.now() - startTime, //Work out the elapsed time
maxHeight = self.maxHeight; //Cache the max height
//If the elapsed time is less than the speed (500ms)
if (elapsed < self.speed) {
console.log('Still in the timeframe');
//If the client height is less than the max height (200px)
if (el.clientHeight < self.endHeight) {
self.startHeight = self.startHeight + 5; //Adjust the height
el.style.height = self.startHeight + 'px'; //Animate the height
}
} else {
console.log('Stop and clear the interval');
el.style.height = self.endHeight + 'px';
clearInterval(self.interval);
}
}, 16); //60FPS
};
animator.animate(document.getElementById('box'));
}());
Thanks in advance!
Carorus gave a great answer below. I have updated my jsfiddle so you can see the final code working:
https://jsfiddle.net/zrm7xena/8/
Typhoon posted a great link in relation to the browser FPS:
How to determine the best "framerate" (setInterval delay) to use in a JavaScript animation loop?
I would probably use request animation frame instead of a setInterval:
http://www.paulirish.com/2011/requestanimationframe-for-smart-animating/
Cheers all!
The harcoded 5 that you are using for the height increment doesn't allow the animation to complete the entire final height (200) in the time that you are setting (500ms), you need to calculate the height increment based on the final height, the animation time and the interval to make it consistent:
(function () {
'use strict';
var animator = {};
animator.endHeight = 200; //The end height
animator.interval = null; //Create a variable to hold our interval
animator.speed = 500; //500ms
animator.startHeight = 0; //The start height
animator.interval = 16;
animator.animate = function (el) {
var self = this,
startTime = Date.now(); //Get the start time
//calculating height variation
self.deltaHeight = (animator.endHeight / animator.speed) * animator.interval;
this.intervalId = setInterval(function () {
var elapsed = Date.now() - startTime, //Work out the elapsed time
maxHeight = self.maxHeight; //Cache the max height
//If the elapsed time is less than the speed (500ms)
if (elapsed < self.speed) {
console.log('Still in the timeframe');
//If the client height is less than the max height (200px)
if (el.clientHeight < self.endHeight) {
self.startHeight = self.startHeight + self.deltaHeight; //Adjust the height
el.style.height = self.startHeight + 'px'; //Animate the height
}
} else {
console.log('Stop and clear the interval');
el.style.height = self.endHeight + 'px';
clearInterval(self.intervalId);
}
}, animator.interval); //60FPS
};
animator.animate(document.getElementById('box'));
}());

Javascript - setInterval for 2 auto slide on the same page

I was trying to create a auto slide for the slider using setInterval. It works like a charm when there's only one slider.
When there are 2 slider, the first slider wont work, and the second slider will slide faster, because there will be 2 setInterval and both are sliding the second slider. Anyway to make sure each setInterval slide their own slider?
var autoSlideTimer = 5;
var autoslide = setInterval(function () {
if (autoSlideTimer == 0) {
var slideMargin = offsetMarginLeft - width;
if (-slideMargin == (width * totalImages)) {
offsetMarginLeft = width;
displayImage = 0;
}
slider.style.marginLeft = (offsetMarginLeft - width) + 'px';
displayImage += 1;
pagination = element.getElementsByTagName('ul')[0];
pagination.innerHTML = paginate;
pagination.getElementsByTagName('li')[displayImage - 1].setAttribute("class", "displayed");
slider = element.getElementsByTagName('div')[0];
offsetMarginLeft = parseInt(slider.style.marginLeft.replace('px', ''));
autoSlideTimer = 5;
} else {
autoSlideTimer--;
}
}, 1000);
thanks
I work it out with another way, although is working but doesnt seems to be the perfect way
var event = new Event('build');
// Listen for the event.
element.addEventListener('build', function (e) {
function timeoutLoop()
{
setTimeout(function(){
if(autoSlideTimer == 0)
{
var slideMargin = offsetMarginLeft - width;
if(-slideMargin == (width * totalImages))
{
offsetMarginLeft = width;
displayImage = 0;
}
slider.style.marginLeft = (offsetMarginLeft - width) + 'px';
displayImage += 1;
pagination = element.getElementsByTagName('ul')[0];
pagination.innerHTML = paginate;
pagination.getElementsByTagName('li')[displayImage - 1].setAttribute("class", "displayed");
offsetMarginLeft = parseInt(slider.style.marginLeft.replace('px', ''));
autoSlideTimer = 5;
}else
{
autoSlideTimer--;
}
timeoutLoop();
},1000);
}
timeoutLoop();
}, false);
// Dispatch the event.
element.dispatchEvent(event);
At first, I used setInterval inside, yet the slider will be overwritten. But setTimeout is ok.

javascript, slide div down on button click?

i am trying to get a div to slide down about 200px down a page using javascript when the user clicks another div which acts as a close button.
can someone please show me how i would do this?
<script>
$('.chat_close').click(function(e){
$('.chat_box').slideDown();
});
</script>
Someone already asked the same question a while ago. Avinash replied:
var minheight = 20;
var maxheight = 100;
var time = 1000;
var timer = null;
var toggled = false;
window.onload = function() {
var controler = document.getElementById('slide');
var slider = document.getElementById('slider');
slider.style.height = minheight + 'px'; //not so imp,just for my example
controler.onclick = function() {
clearInterval(timer);
var instanceheight = parseInt(slider.style.height); // Current height
var init = (new Date()).getTime(); //start time
var height = (toggled = !toggled) ? maxheight: minheight; //if toggled
var disp = height - parseInt(slider.style.height);
timer = setInterval(function() {
var instance = (new Date()).getTime() - init; //animating time
if(instance <= time ) { //0 -> time seconds
var pos = instanceheight + Math.floor(disp * instance / time);
slider.style.height = pos + 'px';
}else {
slider.style.height = height + 'px'; //safety side ^^
clearInterval(timer);
}
},1);
};
};
You can see it here at this URL:
http://jsbin.com/azewi5
Use animate
Also, use .on
<script type="text/javascript">
$('.chat_close').on('click', function(e){
$('.chat_box').animate({"top": "200px");
});
</script>
HTML:
<div class="chat_close">
</div>

JS/jQuery delay loop to get desire result (delay() not working)

I'm trying to create an loading icon by moving the css 'background-position' of an image in a loop:
$('#LoginButton').click(function () {
var i = 1, h = 0, top;
for (i = 0; i <= 12; i++) {
h = i * 40;
top = h + 'px';
$('#ajaxLoading').css('background-position', '0 -' + top).delay(800);
}
});
The problem here is that it runs to fast so I don't se the 'animation' of the moving background.
So I added jquerys delay(), but:
delay(800) is not working because delay() only works in jquery animation effects and .css() is not one of those.
How to delay this loop?
I'd suggest using jQuery timer plugin: http://jquery.offput.ca/js/jquery.timers.js
$('#LoginButton').click(function () {
var times = 13;
var delay = 300;
var h = 0, top;
$(document).everyTime(delay, function(i) {
top = h + 'px';
$('#ajaxLoading').css('background-position', '0 -' + top);
h += 40;
}, times);
});
In case you don't want any plugins, use setInterva/clearInterval:
$('#LoginButton').click(function () {
var delay = 300;
var times = 13;
var i = 0, h = 0, top;
doMove = function() {
top = h + 'px';
$('#ajaxLoading').css('background-position', '0 -' + top);
h += 40;
++i;
if( i >= times ) {
clearInterval( interval ) ;
}
}
var interval = setInterval ( "doMove()", delay );
});
Have you looked at using animate() instead of css()? I'm not 100% sure I understand what you're trying to accomplish, so this is kinda a shot in the dark.
http://api.jquery.com/animate/
Chrome, Safari and IE3+ should support background-position-y, so if you're targeting these specific browser, using jquery you could just make a timed animation() on backgroundPositionY property - http://snook.ca/archives/html_and_css/background-position-x-y
(On Firefox the effect won't work)
You can use setTimeout() and clearTimeout() functions in order to accomplish that.
IE:
var GLOBAL_i = 0;
function doAnimation() {
var h = GLOBAL_i * 40;
var top = h + 'px';
$('#ajaxLoading').css('background-position', '0 -' + top);
if (GLOBAL_i < 12) {
GLOBAL_i++;
t=setTimeout(doAnimation, 800);
}
}
$('#LoginButton').click(function () {
doAnimation()
});

javascript toggle animation issue

I am doing a small javascript animation. this is my code :
window.onload = function () {
var heading = document.getElementsByTagName('h1')[0];
heading.onclick = function () {
var divHeight = 250;
var speed = 10;
var myInterval = 0;
alert(divHeight);
slide();
function slide() {
if (divHeight == 250) {
myInterval = setInterval(slideUp, 30);
} else {
myInterval = setInterval(slideDwn, 30);
alert('i am called as slide down')
}
}
function slideUp() {
var anima = document.getElementById('anima');
if (divHeight <= 0) {
divHeight = 0;
anima.style.height = '0px';
clearInterval(myInterval);
} else {
divHeight -= speed;
if (divHeight < 0) divHeight = 0;
anima.style.height = divHeight + 'px';
}
}
function slideDwn() {
var anima = document.getElementById('anima');
if (divHeight >= 250) {
divHeight = 250;
clearInterval(myInterval);
} else {
divHeight += speed;
anima.style.height = divHeight + 'px';
}
}
}
}
i am using above code for simple animation. i need to get the result 250 on the first click, as well second click i has to get 0 value. but it showing the 250 with unchanged. but i am assigning the value to set '0', once the div height reached to '0'.
what is the issue with my code? any one help me?
Everytime you click on the div the divHeight variable is reset to 250, thus your code never calls slideDwn. Moving the divHeight declaration outside the event handler should do the trick.
Also, your div wont have the correct size when any of the 2 animations end. You're setting the divHeight variable to 250 or 0 correctly, but never actually setting anima.style.height after that.
I've rewritten your code into something simpler and lighter. The main difference here is that we're using a single slide() function here, and that the height of the div in question is stored in a variable beforehand to ensure that the element slides into the correct position.
Note that this is a very simplistic implementation and assumes that the div carries no padding. (The code uses ele.clientHeight and ele.style.height interchangeably, which admittedly, is a pretty bad choice, but is done here to keep the code simple)
var heading = document.getElementsByTagName('h1')[0],
anima = document.getElementById('anima'),
divHeight = anima.clientHeight,
speed = 10,
myInterval = 0,
animating = false;
function slide(speed, goal) {
if(Math.abs(anima.clientHeight - goal) <= speed){
anima.style.height = goal + 'px';
animating = false;
clearInterval(myInterval);
} else if(anima.clientHeight - goal > 0){
anima.style.height = (anima.clientHeight - speed) + 'px';
} else {
anima.style.height = (anima.clientHeight + speed) + 'px';
}
}
heading.onclick = function() {
if(!animating) {
animating = true;
var goal = (anima.clientHeight >= divHeight) ? 0 : divHeight;
myInterval = setInterval(slide, 13, speed, goal);
}
}
See http://www.jsfiddle.net/yijiang/dWJgG/2/ for a simple demo.
I've corrected your code a bit (See working demo)
window.onload = function () {
var heading = document.getElementsByTagName('h1')[0];
var anima = document.getElementById('anima');
var divHeight = 250;
heading.onclick = function () {
var speed = 10;
var myInterval = 0;
function slideUp() {
divHeight -= speed;
if (divHeight <= 0) {
divHeight = 0;
clearInterval(myInterval);
}
anima.style.height = divHeight + 'px';
}
function slideDwn() {
divHeight += speed;
if (divHeight >= 250) {
divHeight = 250;
clearInterval(myInterval);
}
anima.style.height = divHeight + 'px';
}
function slide() {
console.log(divHeight )
if (divHeight == 250) {
myInterval = setInterval(slideUp, 30);
} else {
myInterval = setInterval(slideDwn, 30);
}
}
slide();
}
}​

Categories