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.
Related
Question #1:
I am working on a chrome extension where it requires an inspector like tool to let user hover on a webpage. And to show outline on hover on a DOM element.
When user clicks on any element, I need to show a popup besides the element.
But at the same time that elements click event must not execute. It is very similar to developer consoles inspector tool. Can you please help how to do this ?
Question #2:
Can you please suggest why Chrome developer console's inspector tool does not work in this case ?
To reproduce:
1. Go to https://www.google.co.in/url?sa=t&rct=j&q=&esrc=s&source=web&cd=1&cad=rja&uact=8&ved=0ahUKEwjQ377A-8vQAhUHQY8KHUHxCv0QFggaMAA&url=https%3A%2F%2Fconsole.developers.google.com%2F&usg=AFQjCNF0eH059mv86nMIlRmfsf42kde-wA&bvm=bv.139782543,d.c2I
2. Click on "products & services" menu (3 horizontal lines icon) in left top. A slide menu will open.
3. Start developer console (click F12).
4. Select anything on this menu.
Actual result: Side menu closes.
Expected result: Side menu should not have closed and developer console should have shown its html.
I got a solution to this. I created a div (of size 4x4 px). I move
this div with the mouse move event. I set the div coordinates so
that mouse tip is exactly at the middle of the div.
Div background is kept transparent, so that it is not visible to
users. So when user clicks on element, he is actually clicking on
the div.
And inside the div mouse down event, I stop event propagation.
Please let me know if anyone reading need any more pointers.
You may have tried this already, but I'd suggest adding a click listener to any clickable items, by adding these lines:
$(document).click(function() {
event.stopPropagation();
event.preventDefault();
});
Though because of the way things bubble up in the DOM, events attached to children may still fire, depending on the browser.
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.
I have an element that fires some javascript on click.
Partially covering the element is a mostly-transparent graphic, which passes all events to that element. This way, regardless of if the overlay or the element is clicked, the element gets the events.
I'm trying to write a test in selenium that clicks the element under test and verifies the behavior, however the chrome webdriver tells me it can't click the element because the overlay will get the click event.
That is fine, though... How do I tell selenium that I don't care, to click anyways? I don't want to specifically click the overlay (in this test), the overlay is just eye-candy so the test should still work even if I remove the overlay.
edit:
To make clear... I want it to click in wherever it would have, if the overlay wasn't there. this way it'll click the element if there is no overlay, but click the overlay if covered.
You will not be able to click on the object under the overlay as Selenium has been written to only access what a user can access. If a manual user cannot click through then neither can Selenium.
You could either fire JavaScript directly on that object via the javascript_executor method, or alternatively, perform the interaction which will remove the overlay in your test
I could resolve this issue: In my application top header was visible and i clicked on one of the top elements (which was visible) and could continue with rest of the script execution
I solved this issue by clicking the coordinates of the close button.
Check out this answer. I showed how to click on the little "x" there, without needing to know the name of the actual button. Sometimes its easier to find the class of the image, for example.
Worst case, find the closest element to the button and change the last method to move_to_element_with_offset(element,x, y) to go from the element you found to the coordinates of the button on screen.
Once you do that, the overlay disappears and you can click as normal.
When using a HTML <button> whenever you press the button it moves a little. A small animation to show it's actually a button.
I'm looking for a way to have it stay exactly the way it is, and force my animation using mouse Events.
I started off just placing an <img> and use mouse events to swap the picture. This worked fine, except that it has some side effects I can't seem to get rid of. For starters, pictures can be dragged, which just looks odd if just press the button - hold - and decide you want to leave the button. I can turn off "draggable" but then it will show a blue square selection box, which is very unwanted.
My solution was to place it on a <button> element instead (with hidden background and border). This solves all the problems, except that it's slightly wiggling to the side.
I tried disabling it, but that also disables the javascript events.
How can I force a button to stay in place even if it's clicked?
So you have to use another tag than button (for instance span) and manipulate it's behaviour with javascript.
Throughout our application, we use styled input buttons for submitting forms. For some reason you have to precisely click them in order for the click to be registered. Over half the time, it looks like the button is clicked (i.e. changes on mousedown/mouseup), but nothing happens and we have to click again. If we simply remove the css styling, the button works fine all the time.
Example:
Our users really like the look of the styled buttons, but are a bit annoyed by not knowing if the click event went through. Any easy way to solve this?
Update
I was finally able to neatly reproduce this in jsfiddle: http://jsfiddle.net/xRK4C/3/ . You can see the behavior if you click on the upper left few pixels of the button with the rounded corner. I'm thinking it's because the button moves when being clicked, which causes the mouse to be outside the button on mouse-up. Our users wanted this though, so is there any good way to keep the 3d effect without sacrificing click area?
I believe it's the relative positioning on :active. I guess the moving of the button gets the mouse events confused. I'd suggest to changing the margins instead.
EDIT: Margins don't work either, neither a CSS 2 translation.
You need to somehow move the "image" of the button without moving the button (thus the area that is clicked on) itself, but I can't think of anything right now.
Went to the JSFiddle site and played around with the styling there.
I noticed the hover was successful on the edge of the button, but the click was not.
So, I changed the left:2px; top:2px; to left:0px; top:0px; and the hover, of course, still worked, but the click was successful on the edge of the button.