Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New Coder
    Join Date
    Sep 2010
    Posts
    88
    Thanks
    24
    Thanked 0 Times in 0 Posts

    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

  • #2
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,954
    Thanks
    9
    Thanked 725 Times in 719 Posts
    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....
    
    });
    Last edited by SB65; 04-18-2011 at 06:28 PM.

  • #3
    New Coder
    Join Date
    Sep 2010
    Posts
    88
    Thanks
    24
    Thanked 0 Times in 0 Posts
    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

  • #4
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,954
    Thanks
    9
    Thanked 725 Times in 719 Posts
    Almost, but now you don't have the mousewheel function included within $(document).ready - so currently it never gets called.

  • #5
    New Coder
    Join Date
    Sep 2010
    Posts
    88
    Thanks
    24
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by SB65 View Post
    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

  • #6
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,954
    Thanks
    9
    Thanked 725 Times in 719 Posts
    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>

  • #7
    New Coder
    Join Date
    Sep 2010
    Posts
    88
    Thanks
    24
    Thanked 0 Times in 0 Posts
    hi SB, im still having problems with it, not sure what it is as ive set everything out the same etc.....




    cheers,
    paffley

  • #8
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,954
    Thanks
    9
    Thanked 725 Times in 719 Posts
    Can you give a link to your page?


  •  

    Posting Permissions

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