I have two javascripts in my header.php file - one for 'grab and drag' and the other for 'mouse-wheel scrolling. My site is www.anishaacharya.com/w/ The problem is that while one can 'grab and drag' the page, one is unable to use mouse wheel scroll until all the images have loaded. My code in the header.php is as: <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]; } 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> Code (markup): The second javascript begins at window.onload. I don't know any javascript. This is borrowed code. Thanks!
It doesn't look like you can do anything about this. The part of the script set to perform at onLoad() time does so because it needs the document to be complete in order to work properly.
I see. Does it help if my gallery size is fixed i.e. the width? Also, another person 'rnd me' said this: Would you advise me to use these plugins as well? Do you think that will help? Do you have any other advise or workaround? Thank you much..