Jump to content


Check out our Community Blogs

Register and join over 40,000 other developers!


Recent Status Updates

View All Updates

Photo
- - - - -

Jquery! Mousewheel, Scrolling, Slider For Ie?

jQuery jquery

  • Please log in to reply
2 replies to this topic

#1 Stasonix

Stasonix

    CC Addict

  • Advanced Member
  • PipPipPipPipPip
  • 115 posts
  • Programming Language:C++, PHP, JavaScript, Delphi/Object Pascal, Pascal
  • Learning:C++, PHP, JavaScript, Delphi/Object Pascal

Posted 19 April 2012 - 02:05 PM

hi, I need help, 'caz I'm seems realy stucked, I'm trying to make a slider that works on scroll event, when the user scrolled the function must slide to anchor, anchor it's a simple id of element.

[ This slider is only for IE, I tested on IE 8 version only, but that's enough for me. ]

!important: I can't hide a scroll and use simple animation [ it will not work in phones, I already tested. ]


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="underscore-min.js"></script>
<script type="text/javascript">

$(document).ready(function(){


var tempScrollTop,currentScrollTop = 0;

var way = "default";

// array of the anchors
var jak = new Array("jak1","jak2","jak3","jak4");
i = 0;

// scroll to id
function goToByScroll(id)
{  
$('html,body').animate({scrollTop: $("#"+id).offset().top},"fast"); 
}

$(window).scroll(function()
{

currentScrollTop = $(window).scrollTop();

if (tempScrollTop < currentScrollTop)
{ 
way= "down";
i++;
} 
else if (tempScrollTop > currentScrollTop)
{
way= "up";
i--;
}

tempScrollTop = currentScrollTop;

if (i<0) { ++i; }
if (i>=4){ --i; } 

// so, we go the current anchor
goToByScroll(jak[i]); 

});

});
</script>
</head>
<body>
<style>
html,body { width: 100%; height: 100%;}
div { margin: 0 auto; border: 1px solid; width: 500px; height: 100%; text-align: center; }
</style>
<div id="jak1">1</div>
<div id="jak2">2</div>
<div id="jak3">3</div>
<div id="jak4">4</div>
</body>
</html>

This is how I imagine a situation, but the slider works very weird.

Hope on some help or an advises. Thanks.
  • 0

#2 BlackRabbit

BlackRabbit

    CodeCall Legend

  • Expert Member
  • PipPipPipPipPipPipPipPip
  • 3871 posts
  • Location:Argentina
  • Programming Language:C, C++, C#, PHP, JavaScript, Transact-SQL, Bash, Others
  • Learning:Java, Others

Posted 19 April 2012 - 08:07 PM

I am working on it, and it is really weird, it is as if the mousewheel never stops moving then there is a constant scroll state, i will get back to you soon
  • 0

#3 BlackRabbit

BlackRabbit

    CodeCall Legend

  • Expert Member
  • PipPipPipPipPipPipPipPip
  • 3871 posts
  • Location:Argentina
  • Programming Language:C, C++, C#, PHP, JavaScript, Transact-SQL, Bash, Others
  • Learning:Java, Others

Posted 19 April 2012 - 09:52 PM

Well, bad news and good news, there is an issue with the window.scroll for IE8, so after find that as the source of your trouble i did one slider based on mousewheel as follows :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="underscore-min.js"></script>
<script type="text/javascript">

var page=0;
var jak = new Array("jak1","jak2","jak3","jak4");
var i = 0;
var InBetweeFramesMilliSeconds =1000;
var MinMouseDelta =380;

var d = new Date();
var segundos =  d.getTime();

function handle(delta)
{
       d = null;
        d = new Date();
    
        if ( d.getTime() < (segundos + InBetweeFramesMilliSeconds) ) { return;} ;
 
    if (delta > 0)
        {
              i--;
        }
    else
        {
         i++;
        }
        
        if(i<0){ i=0;}
        if( i>3){i=3;}
        
   goToByScroll( jak[i] );

       d = null;
        d = new Date();    
     segundos = d.getTime();
}

function wheel(event)
{
	    var delta = 0;
	    if (!event) /* For IE. */
			    event = window.event;
                                
	    if (event.wheelDelta)
                { /* IE/Opera. */
			    delta = event.wheelDelta/MinMouseDelta;
//			    delta = event.wheelDelta;
	    } else if (event.detail) { /** Mozilla case. */
			    /** In Mozilla, sign of delta is different than in IE.
				 * Also, delta is multiple of 3.
				 */
			    delta = -event.detail/3;
	    }
                
	    /** If delta is nonzero, handle it.
		 * Basically, delta is now positive if wheel was scrolled up,
		 * and negative, if wheel was scrolled down.
		 */
                
	    if (  delta!=0 ) handle(delta);
                                
	    /** Prevent default actions caused by mouse wheel.
		 * That might be ugly, but we handle scrolls somehow
		 * anyway, so don't bother here..
		 */
                
	    if (event.preventDefault)
			    event.preventDefault();
                                
    event.returnValue = false;
}

if (window.addEventListener)
    window.addEventListener('DOMMouseScroll', wheel, false);
window.onmousewheel = document.onmousewheel = wheel;

// scroll to id
function goToByScroll(id)
{
$('html,body').animate({scrollTop: $("#"+id).offset().top},"fast");
}



</script>
</head>
<body>
<style>
html,body { width: 100%; height: 100%;}
div { margin: 0 auto; border: 1px solid; width: 500px; height: 100%; text-align: center; }
</style>
<div id="jak1">1</div>
<div id="jak2">2</div>
<div id="jak3">3</div>
<div id="jak4">4</div>
</body>
</html>

This is not the solution, its a start, you will have to calibrate the following paramters :

var InBetweeFramesMilliSeconds =1000;
var MinMouseDelta = 380;

First one works on how many minimun milliseconds should pass in between animations and the mouse wheel sensibility cause the wheel fires up an event ( for both, scroll and wheel any time you move it, even a little bit and any time it comes back to its position, lets say you move it 5 times forward it will have a little backward step or two, most of mouses wheels are like that )

i will take a better look at this later cause i am still not yet happy with it, but i don't want to leave you without a hint to play with, just for you getting familiarized start working with those 2 parameters and see how when the less milliseconds and delta you give the less controllable the sliding becomes.

Happy coding, this not gonna be easy, mouse wheel is quite the betrayer :D
  • 0





Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download