Scrolling Sticks when Mousing over

[Chris]

Hi,

I'm trying to use the rotator in a few sites but the one common feedback I get back is that the users do not like how the scrolling with the mouse wheel sticks and stops their ability to continue scrolling down the page.

I know that the mouse wheel is trying to scroll through images, but I couldn't find anything that would simply stop the sticking.  I don't need the mouse wheel scrolling the images, I would like the mouse wheel to operate as normal and continue scrolling down the page.

You can see an example here: http://www.entertheworshipcircle.com

Your feedback would be appreciated!

Thanks,
Chris

[Slav]

Hi Chris,

The mouse wheel scrolling is disabled when the pointer is over the RadRotator when using Chrome or Safari, because there was an unexpected behavior, involving the position of the items of the rotator control, under the specified conditions.

In order to enable mouse wheel under the listed WebKit browsers, please override the _mouseWheelHandler client method of the RadRotator by placing the code sample, presented below, under the ScriptManager on your page:

<script type="text/javascript">
    Telerik.Web.UI.RadRotator.prototype._mouseWheelHandler = function(e) {
        e.preventDefault();
        var delta = event.wheelDelta;
        yDirection = (delta < 0) ? 1 : -1;
        window.scrollBy(0, yDirection * 100);
    }
</script>

I hope the provided solution meets your requirements. Feel free to contact us again if you encounter additional problems.

Greetings,
Slav
the Telerik team

[Chris]

Hi Slav,

This did not work for me.

I have put the snippet underneath my RadScriptManager reference:

<telerik:RadScriptManager ID="rsm" CdnSettings-TelerikCdn="Enabled" runat="server">
            <Scripts>
               <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />
               <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />
           </Scripts>
        </telerik:RadScriptManager>
<script type="text/javascript">
    Telerik.Web.UI.RadRotator.prototype._mouseWheelHandler = function(e) {
        e.preventDefault();
        vardelta = event.wheelDelta;
        yDirection = (delta < 0) ? 1 : -1;
        window.scrollBy(0, yDirection * 100);
    }
</script>

And it still sticks on the slideshow.

You can see it in action at entertheworshipcircle.com.

Your feedback is appreciated!

[Slav]

Hi Chris,

Please, accept my apologies for misleading you. The script that I provided should be placed at the end of your page to ensure that it will be parsed last and that the client scripts of the RadRotator will be overridden successfully.

I am looking forward to your update on the case.

Regards,
Slav
the Telerik team

[Chris]

Hi Slav,

This still doesn't work for me.  I tried with it inside and outside of the form tag at the bottom of the page.

Do you have any other suggestions?  Again, I left it at entertheworshipcircle.com for you to check..

[Chris]

Hi Slav,

Can you give me any more feedback on this?  I added a request on the PITS system.  

It would be great to get this resolved soon since I do have production sites that need this fixed on, or i'm going to have to go with a different solution.

[Slav]

Hi Chris,

Excuse me for not noticing this the first time I examined your code.  It seems that the sample I provided was copied incorrectly on your page and more specifically the line

vardelta = event.wheelDelta;

which should be as shown below:

var delta = event.wheelDelta;

After applying this change in your project the script should be overridden successfully. I have attached a sample project, demonstrating the suggested solution. Please use it as a reference to ensure that the client script is applied correctly.

Kind regards,
Slav
the Telerik team

[Chris]

Hi Slav,

Thanks for this info!  I'm sorry to waste your time, I should have at least looked at the code before I pasted it in.  :(

Thanks for getting me this workaround though.  I really appreciate it.  Will you all be rolling this into a property on the control?  I would think with more mobile devices and for the way much web layout is going, this would be something many people would want to set, probably by default.  I don't know anyone who wants to use the mousewheel on slideshows in real-life because it has to load the images and it just takes too long given the speed of a mousewheel delta.  That being said, I know the rotator is used for much more than how I'm using it.

Anyway, thanks again!

[Slav]

Hello Chris,

I am glad that the issue is now resolved!

Before implementing the functionality that you are suggesting we need to test it thoroughly in order to ensure that it will be applicable in various scenarios and that it won't break the control in any of them. Also, we will investigate the incorrect behavior under Chrome and Safari further to determine the root of the problem and to try resolving it as this will be a much effective solution than providing a fix for it. However, currently I cannot give an exact estimate when this case will be inspected and when a solution will be available.

Regards,
Slav
the Telerik team