draggable background image

saunders1989

07-27-2011, 12:24 PM

I am trying to recreate this functionality on my website where you can drag a background image around and when you get ot the edges of the image it bounces back to the edge of that corrosponding side. have a look at the site in question - http://irrland.sonntagskunst.de/#

so far i have recreated the top left and right edges using

var window_width = $(window).width();
var window_height = $(document).height();
var image_height = $("#background").height(); (2914px)
var image_width = $("#background").width(); (3920px)

$("#background").draggable({
scroll: false,
stop: function (event, ui) {
var animate_to = {};
var window_width_resized = $(window).width();

if (ui.position.left > 0) {
animate_to.left = '0px';
}
if (ui.position.top > 0) {
animate_to.top = '0px';
}

//initial size for width
var image_width_gap = window_width - (image_width + ui.position.left);
if (image_width_gap > 0) {
animate_to.left = (0 - (image_width - window_width)) + 'px';
}

//after window gets resized for width
var image_width_gap_resized = window_width_resized - (image_width + ui.position.left);
if (image_width_gap_resized > 0) {
animate_to.left = (0 - (image_width - window_width_resized)) + 'px';
}

$("#background").animate(animate_to, { duration: 1000, easing: "easeOutElastic" });

then i am using the same logic to do the bottom edge but it doesnt work any ideas

here is how i thought the bottom would work

//initial size for height
var image_height_gap = window_height - (image_height + ui.position.top);
if (image_height_gap > 0) {
// animate_to.top = (0 - (image_height - window_height)) + 'px';
}

help would be greatly appreciated

fixed.. my bg image was infact smaller

vwphillips

07-27-2011, 04:16 PM

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title></title>
<style type="text/css">
/*<![CDATA[*/
.parent {

position: absolute;
top: 0;
left: 0;
width: 100%;
height: 500px;
overflow: hidden;
}

div#map {
position: absolute;
top: 0;
left: 0;
width: 3300px;
height: 3700px;
overflow: hidden;
background: url(http://irrland.sonntagskunst.de/imgs/bg_map_route.png) left top no-repeat;
cursor: url(http://irrland.sonntagskunst.de/imgs/openhand.gif), url(http://irrland.sonntagskunst.de/imgs/openhand.cur), default;
}

/*]]>*/
</style></head>

<body>

<div class="parent" >
<div id="map" ></div>
</div>

<script type="text/javascript">
/*<![CDATA[*/
// Drag Map (27-July-2011)
// by Vic Phillips http://www.vicsjavascripts.org.uk/

function zxcDragMap(o){
var obj=document.getElementById(o.ID),p=obj.parentNode;
this.obj=obj;
this.p=obj.parentNode;
this.resize();
this.addevt(obj,'mousedown','down');
this.addevt(document,'mousemove','move');
this.addevt(document,'mouseup','up');
this.addevt(window,'resize','resize');
}

zxcDragMap.prototype={

down:function(e){
document.onselectstart=function(event){ window.event.returnValue=false; }
this.lastXY=[e.clientX,e.clientY];
this.drag=true;
if (!window.event){
e.preventDefault();
}
return false;
},

move:function(e){
if (this.drag){
var mse=[e.clientX,e.clientY];
this.obj.style.left=Math.min(Math.max(this.style(this.obj,'left')+mse[0]-this.lastXY[0],this.minX),0)+'px';
this.obj.style.top=Math.min(Math.max(this.style(this.obj,'top')+mse[1]-this.lastXY[1],this.minY),0)+'px';
this.lastXY=mse;
}
if (!window.event){
e.preventDefault();
}
return false;
},

up:function(){
if (this.drag){
this.drag=false;
document.onselectstart=null;
}
},

resize:function(o,t,f,p){
this.p.style.height=this.wwhs()[1]+'px';
this.minX=-this.style(this.obj,'width')+this.p.offsetWidth;
this.minY=-this.style(this.obj,'height')+this.style(this.p,'height');
},

addevt:function(o,t,f,p){
var oop=this;
if (o.addEventListener) o.addEventListener(t,function(e){ return oop[f](e,p);}, false);
else if (o.attachEvent) o.attachEvent('on'+t,function(e){ return oop[f](e,p); });
},

wwhs:function(){
if (window.innerHeight) return [window.innerWidth-0,window.innerHeight-0,window.pageXOffset,window.pageYOffset];
else if (document.documentElement.clientHeight) return [document.documentElement.clientWidth-0,document.documentElement.clientHeight-0,document.documentElement.scrollLeft,document.documentElement.scrollTop];
return [document.body.clientWidth,document.body.clientHeight,document.body.scrollLeft,document.body.scrollTo p];
},

style:function(obj,p){
if (obj.currentStyle) return parseInt(obj.currentStyle[p.replace(/-/g,'')]);
return parseInt(document.defaultView.getComputedStyle(obj,null).getPropertyValue(p));
}

}

new zxcDragMap({
ID:'map'
});

/*]]>*/
</script>

</body>

</html>

saunders1989

07-27-2011, 05:15 PM

thanks for the response. i figured out that my image height wasnt the correct number and my logic was correct