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

This site is best viewed in a modern browser with JavaScript enabled.

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

grainspirit

This is Newbie speaking..

I have a horizontal website made up of only images placed next to one another. I want the user clicking anywhere on the screen and displacing or moving it in whichever direction. So mostly, they'd click on the right of the screen and pull the screen towards the left and control what they see. There will be no auto-animation/scroll or mouse-over function.

I have sourced the following script:
http://javascript.internet.com/page-details/grab-and-scroll-page.html

However I can only get it to work on Internet Explorer. Is there any way I can achieve cross-browser compatibility?

Thank you very much!

nazzy

firefox and other browsers uses e.pageX and e.pageY or event.pageX for x positon and event.pageY for y position

function onMove(event)
{
event = event || window.event;

if(event.pageX || event.pageY)
{
return { x:event.pageX, y:event.pageY }

}
return {
x:event.clientX + document.body.scrollLeft - document.body.clientLeft,
y:event.clientY + document.body.scrollTop - document.body.clientTop
}

}

rnd_me

nazzy;1032089 wrote:
firefox and other browsers uses e.pageX and e.pageY or event.pageX for x positon and event.pageY for y position

function onMove(event)
{
event = event || window.event;

if(event.pageX || event.pageY)
{
return { x:event.pageX, y:event.pageY }

}
return {
x:event.clientX + document.body.scrollLeft - document.body.clientLeft,
y:event.clientY + document.body.scrollTop - document.body.clientTop
}

}

does that code work "below the fold" ?

nazzy

it works together with other functions to make any object draggable. that code only gets the the x and y mouse position of any object

grainspirit

Thank you so much Nazzy. Sincere apologies for the late reply. Please bear with one more extreme newbie question now. I have no other source of help on this one.

So I add the script you posted between
<script type="text/javascript">

</script>

grainspirit

I actually did try the above and it doesn't seem to be working. I would really appreciate it if anybody could suggest the correct way of using the code posted by Nazzy. Thank you.

vwphillips

<!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>

<!-- TWO STEPS TO INSTALL GRAB AND SCROLL PAGE:

  1.  Copy the coding into the HEAD of your HTML document
  2.  Add the style element into the BODY tag  -->

<!-- STEP ONE: Paste this code into the HEAD of your HTML document  -->

<HEAD>

<script type="text/javascript">
<!-- Begin
/* This script and many more are available free online at
The JavaScript Source!! http://javascript.internet.com
Created by: Abraham Joffe :: http://www.abrahamjoffe.com.au/ */
document.onmousedown = function(){
  var e=arguments[0]||event;
  var x=zxcWWHS()[2]+e.clientX;
  var y=zxcWWHS()[3]+e.clientY;
  document.onmousemove=function(){
  var e=arguments[0]||event;
    window.scroll(x-e.clientX, y-e.clientY);
    return false;
  }
  document.onmouseup=function(){
    document.onmousemove=null;
  }
  return false;
}

function zxcWWHS(){
 if (window.innerHeight) return [window.innerWidth-10,window.innerHeight-10,window.pageXOffset,window.pageYOffset];
 else if (document.documentElement.clientHeight) return [document.documentElement.clientWidth-10,document.documentElement.clientHeight-10,document.documentElement.scrollLeft,document.documentElement.scrollTop];
 return [document.body.clientWidth,document.body.clientHeight,document.body.scrollLeft,document.body.scrollTop];
}


// End -->
</script>


<!-- STEP TWO: Insert the style element into your BODY tag  -->

<BODY style="cursor: move">
<div style="width:2000px;height:2000px;" ></div>
<p><center>
<font face="arial, helvetica" size"-2">Free JavaScripts provided<br>
by <a href="http://javascriptsource.com">The JavaScript Source</a></font>
</center><p>

<!-- Script Size:  1.01 KB -->
</body>

</html>

grainspirit

Omg!!! Thank you so much Vic. Really! I cannot thank you enough. I have been searching and trying random things for ten days now. You made my month.

Love and respect.

grainspirit

Dear Vic/anybody out there...

My issue was resolved however I now have a new issue as a part of finetuning my website. I am able to successfully grab and drag my horizontal website.

I now want a slight animation when I drag the page. The experience would emulate iphone scroll I realise. Can I integrate code for this animation in the code above posted by Vic?

Thanks...

vwphillips

<!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>

<!-- TWO STEPS TO INSTALL GRAB AND SCROLL PAGE:

  1.  Copy the coding into the HEAD of your HTML document
  2.  Add the style element into the BODY tag  -->

<!-- STEP ONE: Paste this code into the HEAD of your HTML document  -->

<HEAD>

<script  type="text/javascript">
/*<![CDATA[*/
var scroll={

 init:function(){
  var oop=this
//document.Show.Show0.value=vic++;
  document.onmousedown = function(){ oop.down(); }
  document.onmouseup = function(){ oop.up(); }
 },

 down:function(){
  var e=arguments[0]||event;
  this.x=e.clientX;
  this.y=e.clientY;
 },

 up:function(){
  var e=arguments[0]||event;
  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];
 }

}

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><center>
<font face="arial, helvetica" size"-2">Free JavaScripts provided<br>
by <a href="http://javascriptsource.com">The JavaScript Source</a></font>
</center><p>
</body>

</html>

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.

vwphillips

the posted script scrolls the window

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

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.

grainspirit

I don't expect you to help me with all of them. I just stated them in case you would like to help. I'm grateful for any help.

grainspirit

Hi again. Sorry, I know this is pushy but I just wanted to know if I should hang around and wait or if this is difficult and I should forget about it. It would just make me move on..Thank you and sorry about spamming you!

vwphillips

I thought I posted this

<!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

grainspirit;1043262 wrote:
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.

vwphillips;1043294 wrote:
the posted script scrolls the window

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

grainspirit;1043370 wrote:
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

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

thanks,
dan