I would like to put in my own graphics instead of the OS dependent boring scrollbars for the website I'm building. Is there a way to do this in GWT?
The best solution i found is to create my own scroll panel. The scroll bar is wrapped around a Focus panel. I've added Mousedown, mousemove and mouseout handlers to the focus panel. Recording the mouse movements and moving the contents accordingly.
I agree with Slaks. Best bet is to use the Jquery plugin JScrollpane.
http://www.kelvinluck.com/assets/jquery/jScrollPane/jScrollPane.html
I have posted my answer in fallowing link GWT CustomScrollPanel example. But this won't work for IE just like gmail.
Related
I am using phonegap to build an application. On the page, there are a link A and a div. Take a look at the illustrative picture.
The div overlaps the link, we cannot see the link. But if I click on the the div at the location of the link, a click event fired on the link. Is this a phonegap bug? How to resolve it?
I've been banging my head around this for a while...
The problem is not phonegap, it's the jquery mobile's VCLICK-event See the yellow warning here: http://api.jquerymobile.com/vclick/
Webkit based browsers synthesize mousedown, mouseup, and click events
roughly 300ms after the touchend event is dispatched.
I suppose, you handle the "vclick", then in 300ms the overlapping DIV disappears and the "click" is passed to the LINK.
Solution Simply don't use the 'vclick' event on overlapping elements. Or when the DOM is being modified (and becomes different in 300ms)
I am using a Mac Trackpad on a Google Map.
If I two-finger swipe down or up, the map zooms in or out (like it should), but then the entire page scrolls up or down.
I think it has to do with the Trackpad momentum (probably the same on a Magic Mouse).
When I use a normal mouse with a scroll wheel, I don't have the same problem.
I have tried doing things like e.preventDefault() in the scroll listener of the map element, but no luck.
To see an example, just zoom in or out really fast on Google's own demo page: https://developers.google.com/maps/documentation/javascript/examples/map-simple
How do I prevent the entire page from scrolling when I am only trying to zoom the map?
Thank you!
With jQuery try this:
$("#idOfMap").on("wheel mousewheel DOMMouseScroll", function(e){
e.preventDefault();
});
When using jQuery prior 1.7 use bind() instead of on().
Worked fine for me, try downloading MagicPrefs for your trackpad, it gives you much greater preferences regarding the way your trackpad works.
http://magicprefs.com/
I simply cannot find a way to get a ScrollViewer to share manipulation events. As soon as I put something inside a ScrollViewer and then set that items ManipulationMode, the ScrollViewer stops working
I have read that the ScrollViewer handles all of these events and stops them bubbling up, but there MUST be a way to get around this without disabling the ScrollViewer's scrolling behaviour.
I am very simply trying to implement a horizontal swipe feature on items in an ItemsControl, which is inside a ScrollViewer. (I have disabled the ScrollViewer's Horizontal scrolling mechanisms to no avail)
Without the ScrollViewer wrapped around it, everything works fine.
Any ideas anyone ? I cannot believe that this simple UI gesture cannot be implemented.
Many thanks
Dean
You can use a ListView to get the built-in cross-slide/swipe behavior if that's what you need. Otherwise - the last time I had to implement dragging out of a list - I put a rectangle in front of the ScrollViewer and captured all input events and then manually handled ScrollViewer scrolling. It's a bad idea, but there is no better choice yet.
I'm encountering a problem while attempting to add functionality like pinch-zoom to an application that features an Image control inside of a ScrollView, which is inside a FlipView. The Image control and ScrollView control are in the ItemTemplate of the FlipView.
The idea is that if the user pinch-zooms on the Image it will activate code which will create and display an enlarged version of the image in the Image control. (The Image control in this case contains a PDF page, so we want a bigger version of the PDF page, instead of just an enlarged and fuzzier view of the PDF page).
If I attach a ManipulationDelta event handler to the Image, it will catch ManipulationDelta events produced by the pinch-zoom gesture, which I can then use to create the PDF zoom effect. However...now it will not catch scroll (drag?) gestures. Or rather, these too get caught by the ManipulationDelta event handler. I'd rather avoid having to implement code at this point to handle scrolling programmatically. Do I have any options for somehow bubbling up (or "over"?) the ManipulationDelta events to whatever would handle the scrolling? I would think this would happen already, the event would bubble up to the ScrollView which would then handle scrolling. But it appears to not be happening that way.
I have e.Handled set to false in the ManipulationDelta event handler. And the ManipulationMode on the IMage control is set to "All". I've tried "Scale" but this didn't help.
Thank you!
The ScrollViewer in WinRT is optimized for performance and uses DirectManpulation under the hood. That's why it's tricky to have both scrolling from the ScrollViewer and gestures inside it.
This blog post from Rob Caplan (MS employee) gives more information:
http://blogs.msdn.com/b/wsdevsol/archive/2013/02/16/where-did-all-my-gestures-go.aspx
Unfortunately there is no good solution if the app needs both scrolling and gestures (for example, to detect CrossSlides against the scrolling). In this case the only option to get the Pointer messages everywhere is to disable Direct Manipulation everywhere, but that disables scrolling as well. To get that back the app will need to detect the scrolling gestures itself and then navigate the ScrollViewer to the new location with ScrollToHorizontalOffset or ScrollToVerticalOffset or by updating the SelectedIndex. This is tricky and will be noticeably slower than letting the ScrollViewer do its thing. It should be avoided if at all possible.
Hope this helps
Is there any possibility to tell Firefox to use the mousewheel für scrolling through the select element. In firefox after selecting another value the select element looeses its focus, and in IE it doest loose its focus, so if i use my wheel the onchange event is fired.
Try here.
Is there any solution?
Thank you
There's a tutorial on how to act on mousewheel events at http://www.switchonthecode.com/tutorials/javascript-tutorial-the-scroll-wheel.
Mootools is a good way of engaging this as well: see the tutorial at http://demos.mootools.net/CustomEvents
But, I'd recommend against using Javascript to change how a browser behaves. Firefox users (whether they're aware of it or not) learn to expect certain behaviors, so changing that would make your site harder to use. Jakob Nielsens comment on 'the scroll wheel's revenge' comes immediately to mind.
There is this really cool jQuery Mouse Wheel Extension
Adds mouse wheel support for your application! Just call mousewheel to add the event and call unmousewheel to remove the event.
Example