Help with Jquery mouse wheel

[paffley]

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.

<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

[SB65]

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:

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

...your code....

});

[paffley]

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:

<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

[SB65]

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

[paffley]

Originally Posted by SB65

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

[SB65]

You just need it within the document.ready, so the document ready function includes both the slider code and the mousewheel 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>

[paffley]

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




cheers,
paffley

[SB65]

Can you give a link to your page?