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

**vwphillips** · 10-26-2009 04:52 AM

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>

**grainspirit** · 10-26-2009 05:20 AM

Originally Posted by grainspirit

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.

Originally Posted by vwphillips

the posted script scrolls the window

post a link to your page so i can see what you want

Originally Posted by grainspirit

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/

**dgsmigliani** · 03-11-2010 01:18 AM

Hate to bring an old post to the service, but any idea to add easing to this script ???

thanks,
dan

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

Thread Tools

Display

Thread Information

Users Browsing this Thread

Tags for this Thread

Bookmarks

Bookmarks

Posting Permissions