In my GWT application I use a DialogBox like this:
DialogBox dialog = new DialogBox(autoHide, true);
dialog.setText("Hello GWT DialogBox");
dialog.setGlassEnabled(true);
dialog.center();
dialog.show();
My whole page is very long and it scrolls vertically.
This works fine, the dialog pops up and the rest of the page is darkened. When scrolling (with mouse wheel) outside the dialog box nothing happens, which is fine. But when scrolling inside of the dialog box, the whole page scrolls away including the dialog box itself. This feels very wrong.
It is even possible to use scrolling inside the dialog box to scroll the dialog box out of the visible area and then there is no way to scroll it back, because scrolling outside of the dialog box does not do anything.
How to prevent the page from scrolling when using the mouse wheel inside the dialog box?
dialog.setModal(true);
might work. This discards all the events that do not affect the DialogBox, aka scroll that is affecting the underlying page.
WAIT NEVER MIND, DOESN'T WORK
The Page will still scroll if the mouse is within the DialogBox.
Found this though:
https://www.mail-archive.com/google-web-toolkit#googlegroups.com/msg62527.html
Might be useful.
Related
I'm trying to figure out how to prevent a popup image from poping up and down repeatedly (forever) when the user moves the mouse to a location on the page.
See https://codesandbox.io/s/jitterbug-on-popup-25kp4 to illustrate the problem. Hover over the text Mouse over this and the Jitter Image will appear to see the jitter problem.
EDIT: Since this was originally posted, I incorporated the solution into the code showing the problem, and now it also shows a solution.
Details
What follows is a text description of the problem, but the code does illustrates the problem as well (and with a lot less text).
On a web page, that has a vertical scroll bar,
The user moves the mouse over a div which has a MouseEnter javascript handler.
the on MouseEnter event fires which causes an image to pop up.
The popup causes the scroll bar to scroll the content. So now, the mouse is no longer hovering over the hover item so the MouseLeave event fires which causes the image to pop down.
With the image no longer being displayed, the scroll bar moves the content back to where it was prior to the popup and viola, the mouse is overtop of the div and the MouseEnter event fires again to pop up the image.
Steps 2-4 repeat forever at the speed at which the browser can keep up.
Or when the user moves the mouse to stop the popup/popdown from happening.
I've seen this happen on some other websites and now that it's happening to me, I want to fix it but I'm not sure how to.
I've searched for a solution but haven't found one yet. Here are some links I found:
https://css-tricks.com/content-jumping-avoid/ - This was good but suggests using min-height which doesn't work in my situation.
I've also tried using overflow: hidden which does prevent the jitter effect described above but leaves the user with no way to see the rest of the popup image. This, however, is a better solution than the jitter effect described above.
I'm using AngularJS and JQuery if that affects the answer.
position:absolute on the image, will solve this as it won't change the current flow when you display the image and the scroll bar will remain in it current position.
I am using this library to scroll the page at certain points in my app. Everything was working well until I added this line that should happen at the same time as the page scroll.
this.myInput.first.nativeElement.focus()
This caused the focus() to race the page scroll. Since I am giving the page scroll call a pageScrollDuration and the focus() apparently scrolls with a duration of 0, the page jumps to the input instead of smoothly scrolling there.
How do I make sure the page scroll smoothly scrolls to the element while still focusing on it?
The solution I was able to find was to wrap the
this.myInput.first.nativeElement.focus()
with the following:
setTimeout(() => {
this.myInput.first.nativeElement.focus()
}, 0)
This causes the page scroll to happen smoothly.
I have a website using enjin.com website builder, and I have a page where you can go to play my game that is a .swf, but its html form, and the game requires mouse scrolling for some features and when I test it, the page also moves up and down, how can I disable mouse scrolling only on that specific page? I want the scroll bar on right of screen to still function as it does regularly though, so users can scroll if they really need to.
You can use this css property:
pointer-events:none
For more detail: https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events
I have a google autocomplete on a modal and is working (Like this example) but I have an issue. The modal jquery plugin that I'm using set overflow hidden to "html" when opened and if modal height is greater then document height the scroll that appears is from overlay (or backdrop whatever you call it). When autocomplete appears I think they are appended to html, so when I scroll modal the autocomplete stay fixed, looks like they are being appended to html.
The same happens with Jquery UI Autocomplete, but they have an option called "appendTo", and I just point it to a div inside modal and works perfectly.
I would to know if Google Place Autocomplete have an option like that.
When I scroll
I just faced this issue. I working around the problem. I will hide the scrollbars when the focus is in the input field and show the scroll bars when the focus is lost from the input field. So the user cannot scroll around when they are choosing
My apps pops up a dialog. Users usually want to switch back and forth between this dialog and the application window for a period of time. I want this dialog to stay on top, so that it doesn't get hidden behind the main application window. But at the same time I want the dialog to have a minimize button so that it can get out of the way if it's not needed for a while.
Here is what I've tried:
use a modeless JDialog - the dialog stays in front nicely, but it doesn't not have a minimize button, and it doesn't have its own taskbar button either
use a JFrame - the dialog now has a minimize button and its own taskbar button, but when the main window gets focus the dialog is hidden behind it.
use a JFrame and add WindowListener.windowDeactivated() { this.toFront() } on the dialog. The problem with this is that toFront() also sets the focus, so that you get a weird focus flickering effect.
use a JFrame with setAlwaysOnTop - this is the neaerest solution, but now the window will stay on top of all other applications, not just my application.
It would be easy if toFront just brought the JFrame to the front without changing the focus, but unfortunately that is not the case. Is there another way to change JFrame Z-order?
edit: It just occurred to me that if there were an easy way to "roll-up" a JDialog, i.e. minimize it but not to the taskbar, that would solve my problem too.
Why not listen for the focusGained event in the frame and then use setZOrder/toFront on the dialog at that point? (Not sure this will work but worth a shot).