We Keep Coding

Jquery image scroller slow and jerky

So I built this image scroller with little thumbnail images at the bottom, I wanted the thumbnails to scroll left and right when you hover over an indicated area and stop when the last one comes into view ( and the same with the first one for the other direction) The code that I came up with works for a little while on the page but after a while it starts to get slow and jerky so I was wondering if there was a cleaner way to accomplish the same thing.
The code is:
var licount = $('.hs_cos_flex-slides-thumb li').length; //counts rows in list
var thumbwidth = licount * 210; //gets width of all rows
var viewwidth = $(".hs-cos-flex-slider-control-panel").width(); //gets width of sarounding div
var scrollwidth = thumbwidth - viewwidth; //gets width where last row is visible
var intervalId = window.setInterval;
$( ".thumb-for" ).hover(
function() {
var scrollposition = $(".hs_cos_flex-slides-thumb").position().left; //calculates how far left it has moved
var absposition = Math.abs(scrollposition); //gets absolute value of left movement
var shover = true;
if ( scrollwidth > (absposition + 209) ){
$('.hs_cos_flex-slides-thumb').animate({
right: '+=210px'
}, 1500, 'linear');
absposition+=210;
}
intervalId = window.setInterval(moveticker, 1500)
function moveticker() {
if ( scrollwidth > (absposition + 209) ){
$('.hs_cos_flex-slides-thumb').animate({
right: '+=210px'
}, 1500, 'linear');
absposition+=210;
}
};
}, function() {
window.clearInterval(intervalId);
}
);
$( ".thumb-back" ).hover(
function() {
var scrollposition = $(".hs_cos_flex-slides-thumb").position().left; //calculates how far left it has moved
var absposition = Math.abs(scrollposition); //gets absolute value of left movement
var shover = true;
if ( scrollposition < 0 ){
$('.hs_cos_flex-slides-thumb').animate({
right: '-=210px'
}, 1500, 'linear');
scrollposition+=210;
}
intervalId = window.setInterval(moveticker, 1500)
function moveticker() {
if ( scrollposition < 0 ){
$('.hs_cos_flex-slides-thumb').animate({
right: '-=210px'
}, 1500, 'linear');
scrollposition+=210;
}
};
}, function() {
window.clearInterval(intervalId);
}
);

How to make slow the Scroll-Top Speed

ScrollTop is a jquery plugin (go to top of page), trying to make slow Scroll Speed, but not working. I have changed scrollSpeed : 'fast', to scrollSpeed : 'slow', but it still fast, nothing change.
JS:
$.fn.extend({
addScrollTop: function(options) {
var defaults = {
useObjWindow : false,
scrollSpeed : 'fast',
zIndex: '99'
}
var options = $.extend(defaults, options);
if($('body').find('.scrollTop-btn').length == 0) {
$('body').append('<div class="scrollTop-btn" style="display:none;"><i class="fa fa-chevron-up"></i></div>');
}
if(options.useObjWindow) {
var parentWindow = this;
var scrollWindow = this;
}
else {
var parentWindow = window;
var scrollWindow = 'html, body';
}
$(document).ready(function() {
$('.scrollTop-btn').on('click', function() {
$(scrollWindow).animate({scrollTop:0}, options.scrollSpeed);
});
$(parentWindow).scroll(function() {
$('.scrollTop-btn').hide();
var aTop = $('.scrollTop-btn').height() + 20;
if($(this).scrollTop() >= (aTop + 20)) {
$('.scrollTop-btn').css('z-index', options.zIndex);
$('.scrollTop-btn').show();
}
else {
if($('.scrollTop-btn').is(":visible")) {
$('.scrollTop-btn').hide();
}
}
});
});
}
});
Call:
jQuery(document).ready(function() {
jQuery("body").addScrollTop();
});
How to make it slower or smoother, when it go to top?

use jquery animate()
$('html,body').animate({ scrollTop: 0 }, 'slow');
refer this stack overflow question

Only with CSS:
html {
scroll-behavior: smooth;
}

Using jQuery
If you want you can customize how much time you would like the "scrolling" to last. Or do something else when scroll effect is finished.
I have a: <a href="#" class="scrollToTop">
And want to scroll to an element with class "beginning"
$('.scrollToTop').on('click', function(event){
event.preventDefault();
$('html, body').stop().animate({scrollTop: $('.beginning').offset().top}, 500);
});
The last part where you have the 500. You can set there how much time you want the effect to last. In milliseconds.
http://api.jquery.com/animate/

Replace 'slow' with - Ex. 1000, 5000, 10000
$('html,body').animate({ scrollTop: 0 }, <milliseconds>);
// Scroll 2 sec
$('html,body').animate({ scrollTop: 0 }, 2000);
// Scroll 5 sec
$('html,body').animate({ scrollTop: 0 }, 5000);

how to stop animation when mouseover

I am using this script for an automatic scrolling sidebar when scrolling on the page. This works fine, but I also want to achieve 2 things more:
when mouseover over the sidebar, the animation must stop (moving up or down). How can I make this possible?
the sidebar should start moving after 2 seconds when scrolling ( so a delay of 2 seconds before moving up or down)
$(function() {
var offset = $("aside.page-sidebar").offset();
var topPadding = 15;
$(window).scroll(function() {
if ($(window).scrollTop() > offset.top) {
$("aside.page-sidebar").stop().animate({
marginTop: $(window).scrollTop() - offset.top + topPadding
},{
duration: 5000
});
} else {
$("aside.page-sidebar").stop().animate({
marginTop: 0
},{
duration: 5000
});
};
});
});

try:
$('#element').hover(function(e){
e.preventDefault();
$("aside.page-sidebar").stop(true,true);
});

Scrolling large image inside a div

I have an large image inside a small div. Inside that div there are 4 arrows to control the movement, right, bottom, left and top. The arrows are used to move the image inside that smaller div.
This is the JS code
$('.slide-right').click(function() {
$('.inner img').animate({ "right": "+=50px" }, "slow" );
});
$('.slide-bottom').click(function() {
$('.inner img').animate({ "bottom": "+=50px" }, "slow" );
});
$('.slide-left').click(function() {
$('.inner img').animate({ "left": "+=50px" }, "slow" );
});
$('.slide-top').click(function() {
$('.inner img').animate({ "top": "+=50px" }, "slow" );
});
And this is the html:
<div id="content">
<div class="image-box">
<div class="inner"><img alt="" src="http://s15.postimg.org/5phzr2off/img.jpg" id="image" /></div>
<div id="arrow-up"><img alt="" src="http://s24.postimg.org/gr2uv14d1/arrow_top.png" /></div>
<div id="arrow-right"><img alt="" src="http://s24.postimg.org/ruda95avp/arrow_right.png" /></div>
<div id="arrow-bottom"><img alt="" src="http://s10.postimg.org/n8hv0166x/arrow_bottom.png" /></div>
<div id="arrow-left"><img alt="" src="http://s2.postimg.org/qrpm662u1/arrow_left.png" /></div>
</div>
</div>
Demo: http://jsfiddle.net/john_bale96/C26rV/
I would like to make the animation to stop when the edge of the image is reached. Can someone give me some clues on how to do this ?

You have to consider that, at the beginning, your image is left:0px and top:0px.
So you already have your left and top limite.
$('.slide-left').click(function () {
if ($('.inner img').position().left + 50 < 0) {
$('.inner img').animate({
"left": "+=50px"
}, "slow");
}
});
$('.slide-top').click(function () {
if ($('.inner img').position().top + 50 < 0) {
$('.inner img').animate({
"top": "+=50px"
}, "slow");
}
});
Then, you can get the right and bottom limite. This is your image size.
var limiteRight = 0 - $('.inner img').width() + $('.image-box').width();
var limiteBottom = 0 - $('.inner img').height() + $('.image-box').height();
$('.slide-right').click(function () {
if ($('.inner img').position().left - 50 > limiteRight) {
$('.inner img').animate({
"left": "-=50px"
}, "slow");
}
});
$('.slide-bottom').click(function () {
if ($('.inner img').position().top - 50 > limiteBottom) {
$('.inner img').animate({
"top": "-=50px"
}, "slow");
}
});
And you finnaly have to check if your desired new position is within this container. If not, just go to the limite.
$('.slide-right').click(function () {
if ($('.inner img').position().left - 50 > limiteRight) {
$('.inner img').animate({
"left": "-=50px"
}, "slow");
} else {
$('.inner img').animate({
"left": limiteRight
}, "slow");
}
});
FIDDLE with full exemple.

The basic approach would be to compare the image position with the containing div position:
var inner = $(".inner").first();
var divTop = inner.offset().top;
var divLeft = inner.offset().left;
var divRight = divLeft + inner.width();
var divBottom = divTop + inner.height();
function getImagePosition() {
var image = $("#image");
var imageTop = image.offset().top;
var imageLeft = image.offset().left;
return {
top: imageTop,
left: imageLeft,
right: imageLeft + image.width(),
bottom: imageTop + image.height()
}
}
function scrollTop() {
var imagePosition = getImagePosition();
var nextImageTop = imagePosition.top + 50;
if (nextImageTop <= divTop) {
$('.slide-top').off("click");
$('.inner img').animate({
"top": "+=50px"
}, "slow", function () {
$('.slide-top').click(scrollTop);
});
}
}
$('.slide-top').click(scrollTop);
You should also unbind the arrow scrolling events while the animation happens, otherwise if the user clicks multiple times while the animation is happening, it can still scroll the image outside of the div constraints.
See this fiddle (I only implemented the rebinding for top):
http://jsfiddle.net/lhoeppner/puLDd/

Another suggestion, using jQuery UI draggable.
http://jqueryui.com/draggable/
http://jsfiddle.net/kimgysen/3twxS/1/
$("#inner").draggable({
containment: $('#content')
});

Don't change all 4 top right bottom left, as you'll end up with stuff like right:1000px; left:1000px; etc... and it'll probably break the thing.
Focus on using just 2 of them instead, i'd recommend just using top and left
So to go right, you'd do left += 50px to go left you'd do left -= 50px
A simple way to resolve this solution would be to simply manually plot the contraints like this:
$('.slide-right').click(function() {
if (parseInt($('.inner img').css('left')) >= -700) {
$('.inner img').finish().animate({ "left": "-=50px" }, "slow" );
}
});
$('.slide-bottom').click(function() {
if (parseInt($('.inner img').css('top')) >= -249) {
$('.inner img').finish().animate({ "top": "-=50px" }, "slow" );
}
});
$('.slide-left').click(function() {
if (parseInt($('.inner img').css('left')) < -49) {
$('.inner img').finish().animate({ "left": "+=50px" }, "slow" );
}
});
$('.slide-top').click(function() {
if (parseInt($('.inner img').css('top')) < -49) {
$('.inner img').finish().animate({ "top": "+=50px" }, "slow" );
}
});
http://jsfiddle.net/C26rV/4/
But ideally you could do something better which would determine the dimensions of the image itself allowing it to work with any image size automatically.
Edit:
Just as a side note (It doesn't have constraints) you can use considerably less jQuery by handling sliding like this:
$('.slide').click(function () {
var sliding = {}
sliding[$(this).data('direction')] = $(this).data('movement');
$('.inner img').animate(sliding,"slow");
});
http://jsfiddle.net/C26rV/2/

jQuery gallery with setInterval() method does not work correctly when page loses focus

I create jQuery code for listing images every 5 sec - when the focus is on the button which is located on the picture, it must stop changing. I have a problem when my page is lost focus - when I back it dose not work correctly for some time because the coordinates of pictures are not correct!
Here is my SavasSript code:
var displayTimeout = 5000;
var bannerCurrentImgIndex = 0;
var timer;
var link;
function bannerDoWork() {
var bannerImages = $("#myGallery .main_pic");
var bannerImagesCount = bannerImages.length;
if (bannerCurrentImgIndex == bannerImagesCount - 1) {
bannerImages.eq(bannerCurrentImgIndex).animate({ 'left': '-725px' }, 'slow');
bannerImages.eq(0).animate({ 'left': '0' }, 'slow');
bannerImages.eq(bannerCurrentImgIndex - 1).css({ 'position': 'absolute', 'left': '725px' });
bannerCurrentImgIndex = 0;
}
else {
bannerImages.eq(bannerCurrentImgIndex).animate({ 'left': '-725px' }, 'slow');
bannerImages.eq(bannerCurrentImgIndex + 1).animate({ 'left': '0' }, 'slow');
bannerImages.eq(bannerCurrentImgIndex - 1).css({ 'position': 'absolute', 'left': '725px' });
bannerCurrentImgIndex = bannerCurrentImgIndex + 1;
}
}
$(document).ready(function () {
timer = setInterval(function () { bannerDoWork(); }, displayTimeout);
link = $("#myGallery .main_pic_btn");
link.hover(function () { timer = clearInterval(timer); },
function () {
if (timer == null)
timer = setInterval(function () { bannerDoWork(); }, displayTimeout);
});
});

I find answer! I set animate parameter queue=false - and now it works great!
Example:
firstPic.animate({ left: 0, top: 0 }, { queue: false, duration: "slow" });