Can this javascript for 'Click/Grab and Drag' work on Firefox?
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.
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">
<!-- Begin
.
.
.
// End -->
</script>
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.
<!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>
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?
<!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>
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.
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.
Last edited by grainspirit; 10-23-2009 at 10:07 AM.
Reason: addition
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!
Reply With Quote
Originally Posted by nazzy
Bookmarks