CodingForums.com - Help with Jquery mouse wheel

CodingForums.com (http://www.codingforums.com/index.php)

- JavaScript frameworks (http://www.codingforums.com/forumdisplay.php?f=62)

- - Help with Jquery mouse wheel (http://www.codingforums.com/showthread.php?t=224501)

Help with Jquery mouse wheel

Hi guys,

I have this piece of code and i cannot get it to work, Would someone please take a look and see if they can see anything wrong in the code, thanks in advance.

Code:

<script type="text/javascript">

$(document).ready(function()

{

   // get slider height

   var sliderHeight = $('#jQuerySlider2').height();



   // get total height of slider content

   var scrollHeight = $("#HOME-LAYER").outerHeight();



   // create content wrapper , required for scrolling 

   $('#HOME-LAYER').wrapInner('<div style="position:relative;float:left" class="layer-content-1" />');



   // make layer the same size as the slider

   //$('#HOME-LAYER').css("height", sliderHeight);



   // hide overflow

   $('#HOME-LAYER').css('overflow', 'hidden');



   // expand content

   $('.layer-content-1').css("height", scrollHeight);



   // set max value for slider

   $('#jQuerySlider2').slider("option", "min", -(scrollHeight - sliderHeight));

   $('#jQuerySlider2').slider("option", "max", 0);

   $('#jQuerySlider2').slider("option", "value", 0);



   // mousewheel settings

   var speed = 5;//set the speed of the scroll

   var sliderVal = $("#jQuerySlider2").slider("value");//read current value of the slider

                

   sliderVal += (delta*speed);//increment the current value

 

   $("#jQuerySlider2").slider("value", sliderVal);//and set the new value of the slider

                

   var topValue = -((100-sliderVal)*difference/100);//calculate the content top from the slider position

                

   if (topValue>0) topValue = 0;//stop the content scrolling down too much

   if (Math.abs(topValue)>difference) topValue = (-1)*difference;//stop the content scrolling up too much

                

   $("#HOME-LAYER").css({top:topValue});//move the content to the new position



   event.preventDefault();//stop any default behaviour



});</script>

*The slider works fine, I just cant get the mouse wheel effect to work with it, i have the jquery mousewheel js file but it wont scroll with the mouse.

Cheers,
paffley

That code looks oddly familiar....;)

You aren't calling the mousewheel function - I'm assuming you're using Brandon Aaron's plugin? Your code needs to be within a function like this:

Code:

$('#mydiv').mousewheel(function(event,delta){



...your code....



});

Hi SB65! thanks for the reply, SB as in simonbattersby.com? if it is then its nice to meet ya, Am learning jquery at the moment and learnt alot from your site, thank you! Yeh im trying to implement the mousescroll into what I had already from the jquery slider.

Ive added the function, i totally forgot about that part! i read it on the website too! doh!

I still cant seem to get it to work, the slider works but still no mouse scroll this is what I have below:

Code:

<script type="text/javascript">

$(document).ready(function()

{



  // get slider height

   var sliderHeight = $('#jQuerySlider2').height();



   // get total height of slider content

   var scrollHeight = $("#HOME-LAYER").outerHeight();



   // create content wrapper , required for scrolling 

   $('#HOME-LAYER').wrapInner('<div style="position:relative;float:left" class="layer-content-1" />');



   // make layer the same size as the slider

   //$('#HOME-LAYER').css("height", sliderHeight);



   // hide overflow

   $('#HOME-LAYER').css('overflow', 'hidden');



   // expand content

   $('.layer-content-1').css("height", scrollHeight);



   // set max value for slider

   $('#jQuerySlider2').slider("option", "min", -(scrollHeight - sliderHeight));

   $('#jQuerySlider2').slider("option", "max", 0);

   $('#jQuerySlider2').slider("option", "value", 0);



});



   // mousewheel settings

   $('#HOME-LAYER').mousewheel(function(event,delta){



   var speed = 5;//set the speed of the scroll

   var sliderVal = $("#jQuerySlider2").slider("value");//read current value of the slider

                

   sliderVal += (delta*speed);//increment the current value

 

   $("#jQuerySlider2").slider("value", sliderVal);//and set the new value of the slider

                

   var topValue = -((100-sliderVal)*difference/100);//calculate the content top from the slider position

                

   if (topValue>0) topValue = 0;//stop the content scrolling down too much

   if (Math.abs(topValue)>difference) topValue = (-1)*difference;//stop the content scrolling up too much

                

   $("#HOME-LAYER").css({top:topValue});//move the content to the new position



   event.preventDefault();//stop any default behaviour



});

</script>

I must have something named wrong but cant see anything, any help is hugely appreciated :)

Cheers,
paffley

Almost, but now you don't have the mousewheel function included within $(document).ready - so currently it never gets called.

Quote:

Originally Posted by SB65 (Post 1079864)

Almost, but now you don't have the mousewheel function included within $(document).ready - so currently it never gets called.

K thanks SB, do I add it into the $(document).ready line or can it be inserted on a seperate line?

Im proper stuck now :P

Cheers,
paffley

You just need it within the document.ready, so the document ready function includes both the slider code and the mousewheel code:

Code:

<script type="text/javascript">

$(document).ready(function()

{



  // get slider height

   var sliderHeight = $('#jQuerySlider2').height();



   // get total height of slider content

   var scrollHeight = $("#HOME-LAYER").outerHeight();



   // create content wrapper , required for scrolling 

   $('#HOME-LAYER').wrapInner('<div style="position:relative;float:left" class="layer-content-1" />');



   // make layer the same size as the slider

   //$('#HOME-LAYER').css("height", sliderHeight);



   // hide overflow

   $('#HOME-LAYER').css('overflow', 'hidden');



   // expand content

   $('.layer-content-1').css("height", scrollHeight);



   // set max value for slider

   $('#jQuerySlider2').slider("option", "min", -(scrollHeight - sliderHeight));

   $('#jQuerySlider2').slider("option", "max", 0);

   $('#jQuerySlider2').slider("option", "value", 0);



//});move the closing bracket for document-ready from here...



   // mousewheel settings

   $('#HOME-LAYER').mousewheel(function(event,delta){



   var speed = 5;//set the speed of the scroll

   var sliderVal = $("#jQuerySlider2").slider("value");//read current value of the slider

                

   sliderVal += (delta*speed);//increment the current value

 

   $("#jQuerySlider2").slider("value", sliderVal);//and set the new value of the slider

                

   var topValue = -((100-sliderVal)*difference/100);//calculate the content top from the slider position

                

   if (topValue>0) topValue = 0;//stop the content scrolling down too much

   if (Math.abs(topValue)>difference) topValue = (-1)*difference;//stop the content scrolling up too much

                

   $("#HOME-LAYER").css({top:topValue});//move the content to the new position



   event.preventDefault();//stop any default behaviour



});



})//to here...

</script>

hi SB, im still having problems with it, not sure what it is as ive set everything out the same etc.....

cheers,
paffley

Can you give a link to your page?