grainspiritMy website is:
http://www.anishaacharya.com/w/
The above page uses 2 javascripts placed in the header.php as follows
<HEAD>
<script type="text/javascript">
<!-- Begin
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];
}
window.onload = function() {
HtinyScrolling.init(); scrollTips.init();
}
function gotoit(target){
HtinyScrolling.scrollToIt(target);
}
var HtinyScrolling = {
speed : 20, //set here the scroll speed: when this value increase, the speed decrease.
maxStep: 100, //set here the "uniform motion" step for long distances
brakeK: 5, //set here the coefficient of slowing down
hash:null,
currentBlock:null,
requestedX:0,
init: function() {
var lnks = document.getElementsByTagName('a');
for(var i = 0, lnk; lnk = lnks[i]; i++) {
if ((lnk.href && lnk.href.indexOf('#') != -1) && ( (lnk.pathname == location.pathname) ||
('/'+lnk.pathname == location.pathname) ) && (lnk.search == location.search)) {
addEvent(lnk,'click',HtinyScrolling.initScroll,false);
lnk.onclick=function(){return false;} // Safari
}
}
},
getTarget: function(target) {
while(target.tagName.toLowerCase() != 'a')
target = target.parentNode;
return target;
},
getElementXpos: function(el){
var x = 0;
while(el.offsetParent){
x += el.offsetLeft;
el = el.offsetParent;
} return x;
},
getScrollLeft: function(){
if(document.all) return (document.documentElement.scrollLeft) ? document.documentElement.scrollLeft : document.body.scrollLeft;
else return window.pageXOffset;
},
getWindowWidth: function(){
if (window.innerWidth) return window.innerWidth;
if(document.documentElement && document.documentElement.clientWidth) return document.documentElement.clientWidth;
},
getDocumentWidth: function(){
if (document.width) return document.width;
if(document.body.offsetWidth) return document.body.offsetWidth;
},
initScroll: function(e){
var targ;
if (!e) var e = window.event;
if (e.target) targ = e.target;
else if (e.srcElement) targ = e.srcElement;
targ = HtinyScrolling.getTarget(targ); //a fix by Skid X
HtinyScrolling.hash = targ.href.substr(targ.href.indexOf('#')+1,targ.href.length);
HtinyScrolling.currentBlock = document.getElementById(HtinyScrolling.hash);
if(!HtinyScrolling.currentBlock) return;
HtinyScrolling.requestedX = HtinyScrolling.getElementXpos(HtinyScrolling.currentBlock);
HtinyScrolling.scroll(targ);
return false;
},
scrollToIt: function(targ){ //thanks to Michael Ionita-Ganea
target = document.getElementById(targ);
HtinyScrolling.currentBlock = document.getElementById(targ);
if(!HtinyScrolling.currentBlock) return;
HtinyScrolling.requestedX = HtinyScrolling.getElementXpos(HtinyScrolling.currentBlock);
HtinyScrolling.scroll(target);
return false;
},
scroll: function(targ) {
var left = HtinyScrolling.getScrollLeft();
if(HtinyScrolling.requestedX > left) { //a fix by Michael Ionita-Ganea
var endDistance = Math.round((HtinyScrolling.getDocumentWidth() - (left + HtinyScrolling.getWindowWidth())) / HtinyScrolling.brakeK);
endDistance = Math.min(Math.round((HtinyScrolling.requestedX-left)/ HtinyScrolling.brakeK), endDistance);
var offset = Math.min(Math.abs(Math.round((HtinyScrolling.requestedX-left)/ HtinyScrolling.brakeK)), HtinyScrolling.maxStep);
}else {
var offset = - Math.min(Math.abs(Math.round((HtinyScrolling.requestedX-left)/ HtinyScrolling.brakeK)), HtinyScrolling.maxStep);
}
window.scrollTo(left + offset, 0);
if(Math.abs(left-HtinyScrolling.requestedX) <= 1 || HtinyScrolling.getScrollLeft() == left) {
HtinyScrolling.hash = null;
} else setTimeout(HtinyScrolling.scroll,HtinyScrolling.speed);
}
}
var scrollTips = {
dx : null,
init : function() {
if (window.addEventListener) {
window.addEventListener("DOMMouseScroll", this.mouseScroll, false);
} else document.attachEvent("onmousewheel", this.mouseScroll);
var left = document.getElementById('left');
addEvent(left,'mouseover', function() {this.dx=setInterval('scrollTips.arrowScroll(0)',100);return false;});
addEvent(left,'mouseout', function() { clearInterval(this.dx); return false;});
var right = document.getElementById('right');
addEvent(right,'mouseover', function() {this.dx=setInterval('scrollTips.arrowScroll(1)',100);return false;});
addEvent(right,'mouseout', function() { clearInterval(this.dx); return false;});
},
mouseScroll : function(e) {
if (!e) var e = window.event;
var scroll = e.detail ? e.detail * 20 : e.wheelDelta / -20;
if (scroll>=0 ){
window.scrollBy(100,0);
} else window.scrollBy(-100,0) ;
},
arrowScroll: function(val) {
if(val==1) {
window.scrollBy(100,0);
} else {
window.scrollBy(-100,0)
}
}
}
function addEvent( obj, type, fn ) {
if (obj.addEventListener)
obj.addEventListener( type, fn, false );
else if (obj.attachEvent) {
obj["e"+type+fn] = fn;
obj[type+fn] = function() { obj["e"+type+fn]( window.event ); }
obj.attachEvent( "on"+type, obj[type+fn] );
}
}
function removeEvent( obj, type, fn ) {
if (obj.removeEventListener)
obj.removeEventListener( type, fn, false );
else if (obj.detachEvent) {
obj.detachEvent( "on"+type, obj[type+fn] );
obj[type+fn] = null;
obj["e"+type+fn] = null;
}
}
// End -->
</script>
</head>
<body>
<div id="header">
</div>One script is to grab and drag the page. The other is to allow horizontal scroll upon mouse wheel scroll. What I have been desperately trying to achieve is:
1. To load both javascripts together. Now, 'grab and drag' works but 'mouse wheel scroll' works only after all the images have loaded.
2. Once I grab and drag, I would like to have a slight page glide, similar to the iphone scrolling. That is grab and move to displace page, but allow the page to be 'thrown' and hence it glides a bit.
Thanks for your time.
parmenti