SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    Who turned the lights out !! Mandes's Avatar
    Join Date
    May 2005
    Location
    S.W. France
    Posts
    2,496
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    using scrollTo wihin a div

    Hi

    Need a few pointers please

    I want to have a div center page 400x300px with an image inside the div, the image will be larger than the div ie so the div only shows a portion of the image. The image could even be applied as a background image to the div. So far so good.

    Now I need a javascript so that when I mouseover the div the image drags (effectively the div scrolls) to show a different part of the image, so moving the mouse to the right will drag the picture to the left etc.

    Ive had success on a full screen layout with using scrollTo but cant seem to get this to work for div contents.

    The final objective is to have it so the javascript returns the exact coordonates of the place on the map clicked, which can then be used to take them to another more detailed picture.

    Any advice appreciated ?


    My sinmple code for the fullscreen that works well

    Code:
    <body onmousemove='window.scrollTo(x=event.x*4-500,y=event.y*4-200)'>
    <img src='http://www.ezilon.com/maps/images/world-physical-map.gif' style='width:300%;'>
    </body>
    A Little Knowledge Is A Very Dangerous Thing.......
    That Makes Me A Lethal Weapon !!!!!!!!

    Contract PHP Programming

  2. #2
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Portsmouth UK
    Posts
    1,488
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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>
    </head>
    
    <body>
    <div id="p1" style="position:relative;width:400px;height:300px;border:solid red 1px;" >
    <img src='http://www.ezilon.com/maps/images/world-physical-map.gif' style="width:300%;">
    </div>
    
    <script type="text/javascript">
    /*<![CDATA[*/
    
    var zxcPan={
    
     init:function(id){
      var p=document.getElementById(id),img=p.getElementsByTagName('IMG')[0],obj;
      p.style.overflow='hidden';
      img.style.position='absolute';
      obj={
       p:p,
       img:img
      }
      this.addevt(p,'mousemove','pan',obj);
     },
    
     pan:function(e,obj){
      var m=this.mse(e),p=this.pos(obj.p),x=m[0]-p[0],y=m[1]-p[1];
      obj.img.style.left=-x/(obj.p.offsetWidth/(obj.img.width-obj.p.offsetWidth))+'px';
      obj.img.style.top=-y/(obj.p.offsetHeight/(obj.img.height-obj.p.offsetHeight))+'px';
     },
    
     pos:function(obj){
      var rtn=[0,0];
      while(obj){
       rtn[0]+=obj.offsetLeft;
       rtn[1]+=obj.offsetTop;
       obj=obj.offsetParent;
      }
      return rtn;
     },
    
     mse:function(e){
      if (window.event){
       var docs=[document.body.scrollLeft,document.body.scrollTop];
       if (!document.body.scrollTop){
        docs=[document.documentElement.scrollLeft,document.documentElement.scrollTop];
       }
       return [e.clientX+docs[0],e.clientY+docs[1]];
      }
      return [e.pageX,e.pageY];
     },
    
     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); });
     }
    
    }
    
    zxcPan.init('p1');
    /*]]>*/
    </script>
    </body>
    
    </html>

  3. #3
    Who turned the lights out !! Mandes's Avatar
    Join Date
    May 2005
    Location
    S.W. France
    Posts
    2,496
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Wow... thanks Vic, that works great.

    Ive modified to show the position of the mouse on the image, but Im having trouble adding an OOP onClick event that works with your script so I can AJAX the coordinates of the click back to the server. Im only a basic javascripter, php is my bag

    Heres what Ive got so far, but your eventlistener coding (where Im guessing I need to put the onClick listener?) is well beyond my capability.

    Thanks again

    Code:
    <script type="text/javascript">
    /*<![CDATA[*/
    var zxcPan={
     init:function(id){
      var p=document.getElementById(id),img=p.getElementsByTagName('IMG')[0],obj;
      p.style.overflow='hidden';
      img.style.position='absolute';
      obj={
       p:p,
       img:img
      }
      this.addevt(p,'mousemove','pan',obj);
     },
     pan:function(e,obj){
      var m=this.mse(e),p=this.pos(obj.p),x=m[0]-p[0],y=m[1]-p[1],scrollx,scrolly;
      scrollx = x/(obj.p.offsetWidth/(obj.img.width-obj.p.offsetWidth));
      scrolly = y/(obj.p.offsetHeight/(obj.img.height-obj.p.offsetHeight));
      obj.img.style.left=-scrollx+'px';
      obj.img.style.top=-scrolly+'px';
      document.getElementById('xytext').innerHTML = Math.round(scrollx+x) +' , '+ Math.round(scrolly+y);
     },
     pos:function(obj){
      var rtn=[0,0];
      while(obj){
       rtn[0]+=obj.offsetLeft;
       rtn[1]+=obj.offsetTop;
       obj=obj.offsetParent;
      }
      return rtn;
     },
     mse:function(e){
      if (window.event){
       var docs=[document.body.scrollLeft,document.body.scrollTop];
       if (!document.body.scrollTop){
        docs=[document.documentElement.scrollLeft,document.documentElement.scrollTop];
       }
       return [e.clientX+docs[0],e.clientY+docs[1]];
      }
      return [e.pageX,e.pageY];
     },
     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); });
     }
    }
    zxcPan.init('p1');
    /*]]>*/
    </script>
    A Little Knowledge Is A Very Dangerous Thing.......
    That Makes Me A Lethal Weapon !!!!!!!!

    Contract PHP Programming

  4. #4
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Portsmouth UK
    Posts
    1,488
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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>
    </head>
    
    <body>
    <div id="p1" style="position:relative;width:400px;height:300px;border:solid red 1px;" >
    <img src='http://www.ezilon.com/maps/images/world-physical-map.gif' style="width:300%;">
    </div>
    
    <script type="text/javascript">
    /*<![CDATA[*/
    
    var zxcPan={
    
     init:function(id){
      var p=document.getElementById(id),img=p.getElementsByTagName('IMG')[0],obj;
      p.style.overflow='hidden';
      img.style.position='absolute';
      obj={
       p:p,
       img:img
      }
      this.addevt(p,'mousemove','pan',obj);
      this.addevt(p,'mouseup','rtrn',obj);
     },
    
     rtrn:function(e,obj){
      alert('image x = '+obj.img.style.left+'\nimage y = '+obj.img.style.top);
      alert('mouse position = '+obj.xy);
     },
    
     pan:function(e,obj){
      var m=this.mse(e),p=this.pos(obj.p),x=m[0]-p[0],y=m[1]-p[1];
      obj.img.style.left=-x/(obj.p.offsetWidth/(obj.img.width-obj.p.offsetWidth))+'px';
      obj.img.style.top=-y/(obj.p.offsetHeight/(obj.img.height-obj.p.offsetHeight))+'px';
      obj.xy=[x,y];
     },
    
     pos:function(obj){
      var rtn=[0,0];
      while(obj){
       rtn[0]+=obj.offsetLeft;
       rtn[1]+=obj.offsetTop;
       obj=obj.offsetParent;
      }
      return rtn;
     },
    
     mse:function(e){
      if (window.event){
       var docs=[document.body.scrollLeft,document.body.scrollTop];
       if (!document.body.scrollTop){
        docs=[document.documentElement.scrollLeft,document.documentElement.scrollTop];
       }
       return [e.clientX+docs[0],e.clientY+docs[1]];
      }
      return [e.pageX,e.pageY];
     },
    
     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); });
     }
    
    }
    
    zxcPan.init('p1');
    /*]]>*/
    </script>
    </body>
    
    </html>

  5. #5
    Who turned the lights out !! Mandes's Avatar
    Join Date
    May 2005
    Location
    S.W. France
    Posts
    2,496
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Thanks again Vic that works great.
    A Little Knowledge Is A Very Dangerous Thing.......
    That Makes Me A Lethal Weapon !!!!!!!!

    Contract PHP Programming


Bookmarks

Posting Permissions

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