I have implemented a slider in my page and it works great until someone holds down the mouse and scrolls outside of the window. I have tested it on Firefox 2(.0.0.3) and IE 7. It doesn't seem to happen in IE.
The problem only seems to happen in FF and when the browser is not the full screen. I have even tried it in the online examples and it happened there too. If you grab the drag handle and pull it up/down/left/right past the end of the track, it will scroll the page.
The reason why this is a big issue in my application is because I have set the page to not show scroll bars. Once the page scrolls, it moves the content off the page and the user can't get it back unless they drag the handle the opposite way past the end of the track.
I don't think I will need to post code with this one because it happens with the example.
Shawn
The problem only seems to happen in FF and when the browser is not the full screen. I have even tried it in the online examples and it happened there too. If you grab the drag handle and pull it up/down/left/right past the end of the track, it will scroll the page.
The reason why this is a big issue in my application is because I have set the page to not show scroll bars. Once the page scrolls, it moves the content off the page and the user can't get it back unless they drag the handle the opposite way past the end of the track.
I don't think I will need to post code with this one because it happens with the example.
Shawn
4 Answers, 1 is accepted
0
hacker
Top achievements
Rank 1
Rank 1
answered on 09 May 2007, 11:28 AM
I just had it happen in IE7, so I guess it does affect that browser too.
0
Hi Shawn,
Due to the specifics about how the slider works it will be hard to avoid this behavior. It is the same as if you try to drag a normal image in your browser.
As a workaround you can set the following definitions in the <BODY tag:
<body scroll="no" style="overflow:hidden" ...
Hope this helps. Let us know how it goes.
Sincerely yours,
Valentin.Stoychev
the Telerik team
Instantly find answers to your questions at the new Telerik Support Center
Due to the specifics about how the slider works it will be hard to avoid this behavior. It is the same as if you try to drag a normal image in your browser.
As a workaround you can set the following definitions in the <BODY tag:
<body scroll="no" style="overflow:hidden" ...
Hope this helps. Let us know how it goes.
Sincerely yours,
Valentin.Stoychev
the Telerik team
Instantly find answers to your questions at the new Telerik Support Center
0
hacker
Top achievements
Rank 1
Rank 1
answered on 10 May 2007, 03:58 PM
I had the overflow:hidden already set, but the scoll="no" seemed to help.
It will still allow the page to be dragged, but when the visitor releases the mouse button, it pops back to the original screen position. I can live with this.
One more thing...
Is there any way to increase the width of the clickable area on the track? I noticed that when you are clicking on the track to move the drag bar to a specific location, you have to be right in the centre of the graphic. It would be nice to have a wider area that a visitor can click.
Shawn
It will still allow the page to be dragged, but when the visitor releases the mouse button, it pops back to the original screen position. I can live with this.
One more thing...
Is there any way to increase the width of the clickable area on the track? I noticed that when you are clicking on the track to move the drag bar to a specific location, you have to be right in the centre of the graphic. It would be nice to have a wider area that a visitor can click.
Shawn
0
Hi soatley,
To increase the height of the clickable are you should modofy the skin of the slider or to overwrite the .track selector
and set the appropriate height
This is the style definition which should be changed:
Hope that helps.
Sincerely yours,
Valentin.Stoychev
the Telerik team
Instantly find answers to your questions at the new Telerik Support Center
To increase the height of the clickable are you should modofy the skin of the slider or to overwrite the .track selector
and set the appropriate height
This is the style definition which should be changed:
| .RadSlider_Default.horizontal .track |
| { |
| left: 11px; top: 0; |
| height: 2px; |
| margin-top: 9px; |
| background: #fff url(<%=WebResource("Telerik.Web.UI.Skins.Default.Slider.TrackBgr.gif') repeat-x left bottom; |
| border-top: solid 1px #dfdfdf; |
| border-bottom: solid 1px #bbb; |
| } |
Hope that helps.
Sincerely yours,
Valentin.Stoychev
the Telerik team
Instantly find answers to your questions at the new Telerik Support Center