www.webdeveloper.com
Results 1 to 7 of 7

Thread: Mouse-wheel scrolling not working until site loads completely

  1. #1
    Join Date
    Aug 2009
    Posts
    20

    Mouse-wheel scrolling not working until site loads completely

    I have a horizontal website that uses this code:
    http://www.centralscrutinizer.it/en/...nyscrolling.js

    This code allows the website to scroll to the right when the mouse wheel is scrolled down and left when scrolled up. HOWEVER, this works only after all the images in my website have loaded.

    How can I allow this mouse-wheel scrolling while my site is loading?

    Thank you..

  2. #2
    Join Date
    Jul 2008
    Location
    urbana, il
    Posts
    2,787
    change "window.onload" (at the top) to "window.scroller", and then add this after the last line of the script file:

    Code:
    window.scroller();
    move the script tag that points to this new file to the end of the body, just before </body> .

  3. #3
    Join Date
    Aug 2009
    Posts
    20
    Thank you rnd me. It doesn't seem to be working. Could the reason be that I have two javascripts for the same page? Is there any fix so both scripts can run together?

    (I can't code. I'm absolutely new to this. Thank you for helping..)

  4. #4
    Join Date
    Jul 2008
    Location
    urbana, il
    Posts
    2,787
    Quote Originally Posted by grainspirit View Post
    Thank you rnd me. It doesn't seem to be working. Could the reason be that I have two javascripts for the same page? Is there any fix so both scripts can run together?

    (I can't code. I'm absolutely new to this. Thank you for helping..)
    yes, if one needs the other, then they must load in the correct order.
    i didn't see an actual page, so i didn't know you had more going on.
    sound like the mouse wheel script is missed or misses someone else.

    the performance problem is that your script waits for an event before it runs.
    in this case, it's window.onload(), which happens only after all the images arrive. jQuery provides a load event that fires much sooner, .ready().

    there are ways to do that without jQuery.
    i offered you the simplest, and perhaps most naive.
    i'm not sure of your exact situation and script dependencies, so i can't generically say "do this" and expect it to work.

    i can help a lot more if you let me know what other script is running, and better yet, post the HTML page that links to both scripts.

  5. #5
    Join Date
    Aug 2009
    Posts
    20
    I'm working on wordpress. Attached is exactly all the script I'm working with..It's a horizontal website (like a showcase of only images). The user has the option to grab and drag the page OR use the mouse wheel to scroll the page.

    Code:
    <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>
    
    </head>

  6. #6
    Join Date
    Jul 2008
    Location
    urbana, il
    Posts
    2,787
    i think you might actually have to wait for the images with that script.
    it needs the total size of the body (including images) to calculate positions.
    since images tend to reflow the page, trying to run the script early could have unpredictable results.

    if every image tag has hard-coded widths and heights, and you set a certain, absolute, pixel-specified width to the body, you might be able to prevent reflow to the point where it would work.


    you might try adding jQuery and a couple plugins to replace the scripts you already have. two plugins would have a lot better chance of both playing nice together and being able to run before the images come in.

    the jQuery site has a nice plug gallery where you can browse, try live demos, and read instructions. most of them can be virtually cut and pasted into your page:

    http://plugins.jquery.com/project/Plugins/category/48

    i'd like to help more, but i can't really rewrite a bunch of code without seeing the document it need to work on.

  7. #7
    Join Date
    Aug 2009
    Posts
    20
    Thank you rnd me. I will look into the jquery site you posted. However, I confess I fear ending up at square one due to my pathetic knowledge of the basics. One more question however: you mentioned...

    if every image tag has hard-coded widths and heights, and you set a certain, absolute, pixel-specified width to the body, you might be able to prevent reflow to the point where it would work.
    Does it help that all my images are of the same size - 1000px X 600 px and my gallery width is fixed - 29000px. If you would be kind enough to help further, I am willing to provide you all the information you need to advice. This is my design portfolio and I have no other help. I'm working within the wordpress editor with the stylesheet n header.php file.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles