Scrolling large image inside a div - javascript

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/

Related

how to scroll top and bottom

$(document).ready(function() {
$("#Wrapper").click(function () {
var th = $(this);
if (!th.hasClass('down')) {
console.log("ret");
th.addClass('down').stop(true).animate({
"top": "50px"
}, 1000, function() {
$('body').scrollTop(th.height());
});
} else {
console.log("sdffsdsff");
th.removeClass('down').stop(true).animate({
"top": "-400px"
}, 1000, function() {
$('body').scrollTop(th.scrollTop());
});
}
});
});
I have this jquery code for scroll from top to bottom and bottom to top when click on wrapper. this code works but i want this should scroll slowly from top top bottom and bottom to top when click on "wrapper" div
this is my original fiddle
http://jsfiddle.net/HtTXB/17/
how to do that? Thank you
Try this:
$("#Wrapper").click(function () {
var h= $(this).height(),
top= $(window).scrollTop(),
pos= top > h/2 ? 0 : h;
$('html, body').stop().animate({
scrollTop: pos
},1000);
});
scrollTop is set to 0 when the window is scrolled more than half-way, and it's set to the height of Wrapper when scrolled less than half-way.
Working Fiddle

Animate easing for scrollTop

How to animate easing for scrollTop? I'm using scrollTop to move div element when site is scrolled. I want div element to move smoothly not jumping so sharply.
Here is the code:
jQuery(window).scroll(function() {
if (jQuery(window).scrollTop() > 20 ) {
jQuery('.topBar').css({
'position':'fixed',
'top':-40,
'bottom':""
});
}
else {
jQuery('.topBar').css({
'position':'fixed',
'top':0,
'bottom':""
});
}
});
did you try animating the topBar tag then?
jQuery(window).scroll(function () {
if (jQuery(window).scrollTop() > 20) {
jQuery('.topBar').animate({
top: "40"
}, 300, function () {
jQuery(this).addClass('scrolled');
});
} else {
jQuery('.topBar').animate({
top: "0"
}, 300, function () {
jQuery(this).removeClass('scrolled');
});
}
});
I've created following fiddle to illustrate what i mean:
http://jsfiddle.net/2d3mxm5a/

JQuery ScrollTop in the middle of an animation?

I have 2 containers whose widths change. Inside them, I have clickable elements. When a container is clicked, it resizes in an animation. I want to make it so that when a clickable element is clicked, its container resizes and scrolls to the clicked element. Here's a fiddle that shows this: http://jsfiddle.net/w7H3M/1/
However, it scrolls to the wrong position because of the resizing. Here's the event handler for the click:
<div id=left>...</div>
<div id=right>...</div>
$('#left').on('click', 'a', function () {
var node = $(this);
$('#left').animate({
width: 0.75 * $(document).width()
}, 800);
$('#right').animate({
width: 0.25 * $(document).width()
}, 800);
$('body').animate({
scrollTop: node.offset().top
}, 800);
});
$('#right').on('click', 'a', function () {
var node = $(this);
$('#left').animate({
width: 0.25 * $(document).width()
}, 800);
$('#right').animate({
width: 0.75 * $(document).width()
}, 800);
$('body').animate({
scrollTop: node.offset().top
}, 800);
});
Effectively, it does not work correctly because of the animation. The offset of the node you want to show at the top of the screen will change when the div expands. To achieve what you want, you need to set the scrollTop property when the animation completes. You can achieve this using the complete handler of jQuery.animate(). I've forked your jsfiddle to show you it. The only problem is that the two animationw now play one after the other instead of simultaneously.
$(document).ready(function () {
// generate content
var str = '';
for (i = 1; i < 100; i++) {
str += '<p>' + x100(i) + '</p>';
}
$('#left').html(str);
$('#right').html(str);
// end generate content
$('#left').on('click', 'p', function () {
var node = $(this);
$('#left').animate({
width: 0.75 * $(document).width(),
}, 800, 'swing', function() {
$('body, html').animate({scrollTop: node.offset().top}, 800);
});
$('#right').animate({
width: 0.25 * $(document).width()
}, 800);
});
$('#right').on('click', 'p', function () {
var node = $(this);
$('#left').animate({
width: 0.25 * $(document).width()
}, 800);
$('#right').animate({
width: 0.75 * $(document).width()
}, 800, 'swing', function() {
$('body, html').animate({scrollTop: node.offset().top}, 800);
});
});
});

The function starting too early

I'm building a contact system usin jQuery ajax. form's div has a height, so I thought that it will be nice if when you click on the input (OnFocus), the div will become bigger and when you will scroll up or down the div will return to it's regular height. The problem is that after clicking, the div become bigger and then immediately returns to it's regular height. here is my code:
var big = false,
lastpalce = "",
position = "";
function contectboxreturn() {
if (big) {
$("#contact").animate({
"height": "515px"
}, 400);
$("#showclosebutton").hide(fast);
big = false;
}
}
function contectboxresize() {
if (!big) {
big = true;
lastpalce = $(this).scrollTop();
position = $("#contact").offset();
$("html, body").animate({
scrollTop: position.top + "px"
}, 400);
$("#contact").animate({
"height": "100%"
}, 400);
$("#showclosebutton").show(fast);
$(function () {
$(window).scroll(function () {
if (position.top != $(this).scrollTop()) {
contectboxreturn();
}
});
});
}
}
Set Big to TRUE as a callback of your animation. Like so.
$("#contact").animate({
"height": "100%"
}, 400, function(){
big = true;
});
updated fiddle
Try placing your scroll event OUTSIDE your contectboxresize() function like this:
var big = false,
lastpalce = "",
position = "";
$(function () {
$(window).scroll(function () {
if (position.top != $(this).scrollTop()) {
contectboxreturn();
}
});
});
function contectboxreturn() {
if (big) {
$("#contact").animate({
"height": "515px"
}, 400);
$("#showclosebutton").hide(fast);
big = false;
}
}
function contectboxresize() {
if (!big) {
big = true;
lastpalce = $(this).scrollTop();
position = $("#contact").offset();
$("html, body").animate({
scrollTop: position.top + "px"
}, 400);
$("#contact").animate({
"height": "100%"
}, 400);
$("#showclosebutton").show(fast);
}
}

JQUERY slider mad

the site is http://www.quadrifoglio4.it/index.php/quadrifoglio4/gallery.html
the slide when slide 12 or 13 pics, not work fine, the left value of animate set to 0 and to good position.. the code is:
ogreGalleryStart = window.setInterval(function(){
var ogreGalleryRailCurrentPosition = __jQuery__('#ogreRail').position();
__jQuery__('.preloadThis').css('display','none');
__jQuery__('#ogreRail').animate({
left: eval(ogreGalleryRailCurrentPosition.left-__jQuery__('#ogreRail > .ogreDrawer').eq(0).outerWidth(true))+'px'
}, 500, function(){
var ogreGalleryRailCurrentPosition = __jQuery__('#ogreRail').position();
if (ogreGalleryRailCurrentPosition.left <= -eval(__jQuery__('#ogreRail').outerWidth(true)-__jQuery__('#ogreRail > .ogreDrawer').eq(0).outerWidth(true))) {
__jQuery__(this).css({
'left': '0px'
});
}
});
}, 4000);
why?

Categories