Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    Jan 2010
    Posts
    69
    Thanks
    12
    Thanked 0 Times in 0 Posts

    draggable background image

    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
    Code:
    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

    Code:
    //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
    Last edited by saunders1989; 07-27-2011 at 01:42 PM.

  • #2
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,536
    Thanks
    3
    Thanked 513 Times in 500 Posts
    Code:
    <!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.scrollTop];
     },
    
     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>
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #3
    New Coder
    Join Date
    Jan 2010
    Posts
    69
    Thanks
    12
    Thanked 0 Times in 0 Posts
    thanks for the response. i figured out that my image height wasnt the correct number and my logic was correct


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •