6 Replies - 1449 Views - Last Post: 23 April 2011 - 12:44 PM

#1 miniheyd  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 4
  • Joined: 17-April 11

custom page scrolling is not smooth enough and glitches

Posted 17 April 2011 - 02:49 PM

You can view the site at www.highdwellercreative.com/colife. This site is based around the concept the the city will grow as the company grows and we wanted a different feeling then scrolling with the scroll bars provided. I have been working on a keypad style of navigation that consists of four directional arrows (up, down, left, right).

I am currently using setInterval() function to loop the scrollTo Plugin on mousedown() and the clearInterval() function to end the loop on mouseup(). I have tried the serialScroll son to scrollTo but could not get it to do anything. My code is almost there i feel but i can not get over this last little hump of making it smoother.

I have also set the interval to repeat at 1 millisecond to achieve smooth scrolling. I have included the code that makes what I have accomplished so far work but it is still a bit rough, especially in Firefox 4. So far this does work in all browsers, including IE, but it could stand to be smoother and I am at a loss of how to accomplish this. Also if you click on one of the navigation buttons and immediately do a right click on it, the page gets stuck scrolling in that direction. Any help on how to improve this would be greatly appreciated.

//BEGIN PageScroll
	
	
	var rightId;
	
	$('span#right').mousedown(function() {
    
   		rightId = setInterval(function(){$.scrollTo('+=5px', {axis:'x'})}, 1);
	
	}).mouseup(function() {
    
    	clearInterval(rightId);
	
	});
	
	var leftId;
	
	$('span#left').mousedown(function() {
	
		leftId = setInterval(function(){$.scrollTo('-=5px', {axis:'x'})}, 1);
	
	}).mouseup(function() {
    
    	clearInterval(leftId);
	
	});
	
	var upId;
	
	$('span#up').mousedown(function() {
    
   		upId = setInterval(function(){$.scrollTo('-=5px', {axis:'y'})}, 1);
	
	}).mouseup(function() {
    
    	clearInterval(upId);
	
	});
	
	var downId;
	
	$('span#down').mousedown(function() {
    
   		downId = setInterval(function(){$.scrollTo('+=5px', {axis:'y'})}, 1);
	
	}).mouseup(function() {
    
    	clearInterval(downId);
	
	});



Is This A Good Question/Topic? 0
  • +

Replies To: custom page scrolling is not smooth enough and glitches

#2 Prototypical  Icon User is offline

  • D.I.C Head

Reputation: 39
  • View blog
  • Posts: 137
  • Joined: 20-April 11

Re: custom page scrolling is not smooth enough and glitches

Posted 22 April 2011 - 10:06 PM

check into this jquery plugin if you haven't already :
SmoothDivScroll

and in terms of the right click, here's a way to disable the right-click -- if that's acceptable given your requirements :

disable right click

As to why it's happening, i'm not sure - unless you have some kind of right click code that I can't see now, I don't know what might be causing it.
Was This Post Helpful? 0
  • +
  • -

#3 Prototypical  Icon User is offline

  • D.I.C Head

Reputation: 39
  • View blog
  • Posts: 137
  • Joined: 20-April 11

Re: custom page scrolling is not smooth enough and glitches

Posted 22 April 2011 - 10:33 PM

Ok, I think I understand what is going on with that bug. What is happening is that the mouseup function is not getting hit and so the interval never gets cleared -- so therefore it will continue to move in that direction.

I've discovered that the issue is not at all the right click, but can be recreated by holding down mouse button and then moving across the screen and then releasing. So, something about this behavior is causing the mouseup function to not fire.

Here is a link to something that can help you solve it :

mouseup not firing after mousemove complete

and in case you don't understand about the .one bind and how this works ---

.one()

and this code here is a better example than the first link as you need to bind the mouseup each time --


$(document).mousedown(mouseUpAfterDrag);

function mouseUpAfterDrag(e) {

    /* You can record the starting position with */
    var start_x = e.pageX;
    var start_y = e.pageY;

    $().mousemove(function(e) {
        /* And you can get the distance moved by */
        var offset_x = e.pageX - start_x;
        var offset_y = e.pageY - start_y;
    });

    $().one('mouseup', function() {
        alert("This will show after mousemove and mouse released.");
        $().unbind();
        $(document).mousedown(mouseUpAfterDrag);
    });

    // Using return false prevents browser's default,
    // often unwanted mousemove actions (drag & drop)
    return false;
}

This post has been edited by Prototypical: 22 April 2011 - 10:48 PM

Was This Post Helpful? 1
  • +
  • -

#4 miniheyd  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 4
  • Joined: 17-April 11

Re: custom page scrolling is not smooth enough and glitches

Posted 23 April 2011 - 10:10 AM

Thanks man worked perfectly!
Was This Post Helpful? 0
  • +
  • -

#5 Prototypical  Icon User is offline

  • D.I.C Head

Reputation: 39
  • View blog
  • Posts: 137
  • Joined: 20-April 11

Re: custom page scrolling is not smooth enough and glitches

Posted 23 April 2011 - 10:36 AM

Hey, great! Looking forward to seeing the town grow! Hopefully there'll be some animated characters walking around soon. Looks like a ghost town right now! :)
Was This Post Helpful? 0
  • +
  • -

#6 miniheyd  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 4
  • Joined: 17-April 11

Re: custom page scrolling is not smooth enough and glitches

Posted 23 April 2011 - 11:20 AM

View PostPrototypical, on 23 April 2011 - 10:36 AM, said:

Hey, great! Looking forward to seeing the town grow! Hopefully there'll be some animated characters walking around soon. Looks like a ghost town right now! :)


at the moment it does look like a ghost town but characters and animations will be coming soon...hopefully.
Was This Post Helpful? 0
  • +
  • -

#7 miniheyd  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 4
  • Joined: 17-April 11

Re: custom page scrolling is not smooth enough and glitches

Posted 23 April 2011 - 12:44 PM

So i just tested this in Internet Explorer and there are some major issues. I have been trying to fix them all day today but to no avail. I am testing it in IE8 (doesnt even function at all in IE7). I am fairly new to coding and am not sure how to fix the issues that IE presents.

problem one is a glitch with the info/quick link box.
I am pretty sure that part of this problem is due to the mousemove events used to position the info/quick links box. I have tried taking the mousemove out completely and transferring its functions to the mouseup event but that didnt work.

problem two is with the clearInterval.
The clearInterval(moving); is not being fired. I tried removing the .one() that calls the mouseup and adding a mouseup event to the window that would clear that interval but that did not work.

I have tried quite a few things to fix these issues but nothing has worked so far...can you provide any more help?
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1