www.webdeveloper.com
Page 2 of 2 FirstFirst 12
Results 16 to 18 of 18

Thread: Can this javascript for 'Click/Grab and Drag' work on Firefox?

  1. #16
    Join Date
    Jun 2004
    Location
    Portsmouth UK
    Posts
    2,674
    I thought I posted this

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
        "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <head>
      <title></title>
    </head>
    
    <body>
    
    
    <HEAD>
    
    <script  type="text/javascript">
    /*<![CDATA[*/
    
    
     var scroll={
    
     init:function(){
      var oop=this
      this.addevt(document,'mousedown','down');
      this.addevt(document,'mouseup','up');
     },
    
     down:function(e){
      this.x=e.clientX;
      this.y=e.clientY;
     },
    
     up:function(e){
      var x=e.clientX;
      var y=e.clientY;
      this.slide(this.x-x,this.y-y);
    },
    
     slide:function(x,y){
      this.xsf=[this.ws()[0],this.ws()[0]+x];
      this.ysf=[this.ws()[1],this.ws()[1]+y];
      clearTimeout(this.to);
      this.mS=1000;
      this.inc=Math.PI/(2*this.mS);
      this.srttime=new Date().getTime();
      this.cng();
     },
    
     cng:function(){
      var ms=new Date().getTime()-this.srttime;
      window.scrollTo(Math.floor((this.xsf[1]-this.xsf[0])*Math.sin(this.inc*ms)+this.xsf[0]),Math.floor((this.ysf[1]-this.ysf[0])*Math.sin(this.inc*ms)+this.ysf[0]));
      if (ms<this.mS) this.to=setTimeout(function(oop){return function(){oop.cng();}}(this),10);
      else {
       window.scrollTo(this.xsf[1],this.ysf[1]);
      }
     },
    
     ws:function(){
      if (window.innerHeight) return [window.pageXOffset,window.pageYOffset];
      else if (document.documentElement.clientHeight) return [document.documentElement.scrollLeft,document.documentElement.scrollTop];
      return [document.body.scrollLeft,document.body.scrollTop];
     },
    
     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); });
      else {
       var prev=o['on'+t];
       if (prev) o['on'+t]=function(e){ prev(e); oop[f](e,p); };
       else o['on'+t]=o[f];
      }
     }
    }
    
    scroll.init();
    
    /*]]>*/
    </script>
    
    
    <!-- STEP TWO: Insert the style element into your BODY tag  -->
    
    <BODY style="cursor: move">
    <div style="width:2000px;height:2000px;border:solid black 1px" ></div>
    <p>
    </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/

  2. #17
    Join Date
    Aug 2009
    Posts
    20
    Quote Originally Posted by grainspirit View Post
    Thank you Vic. This appears to be working perfect. Except, I have to drag the background instead of the content (images) to achieve interaction. Earlier, I was able to click the images and drag the horizontal gallery.
    Quote Originally Posted by vwphillips View Post
    the posted script scrolls the window

    post a link to your page so i can see what you want
    Quote Originally Posted by grainspirit View Post
    Here it is!
    http://www.anishaacharya.com/w/
    In fact all the problems I have now are:
    1. The grab and drag gets too cumbersome eventually..A slick slide after the drag might add a good touch to the interactivity
    2. The mouse scroll gets active only after all the images load.
    3. I need the images to vertically align in the center.

    I cannot thank you enough for investing any time in this! Btw this is with the old javascript. With the new one, I have to drag the background instead of the images like now.
    Thanks Vic, you did post the new js but it only works for the background. I updated the new code and you can look at the results on http://www.anishaacharya.com/w/

  3. #18
    Join Date
    Mar 2009
    Posts
    17
    Hate to bring an old post to the service, but any idea to add easing to this script ???

    thanks,
    dan

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

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



Recent Articles