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
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.
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 am a beginner and apologize if I do not use the correct terms. (I think that may be why I can't find an answer despite hours of searching and trying things out.)
I have finally figured out how to create a video link that has the video pop-up in a new, smaller window. But I would like this new window to stay on top of the main window, so that I can watch the video while I'm scrolling through and reading the contents of the main window.
I have seen it done in very simple HTML code with a moving box of text, but I can't for the life of me figure out how to make the new pop-up video link work.
Here is the code I'm using for the new smaller window, just with a different video source:
Click Here to open video in a new window
I read in forum entries that it is not possible to make a pop-up window stay on top, so I'm open to other options, such as creating an iframe that will then move as I scroll down in the main window. Not sure if this is possible, though.
I don't know why, but when my page loads, i get scrolled in the middle, but i don't have any anchor aiming on this point...
Now i have to put a <a href='MY-URL#top'></a> anchor in every page for not getting scrolled on the middle...(Firefox don't even get them :0, -webkit browsers do...)
I have many anchor aiming on id's, and a JQuery script for smooth scrolling, but no one for the middle scrolling of pages on load.
You can see that here :
http://www.groupae.be/ediser/2.0/nos_produits.php
What would fire that scrolling on load?
If the page is long enough to have scroll and if you set focus on some element (for example for accessibility features), browser scrolls page in such way that focused element is in the middle of the screen (if scrolls allows to do it, if not it will be scrolled as far as possible).
its ok i found why i was getting scrolled, just the autofocus in the footer form... :/
I have a webpage that shows an image gallery for the current week, and I have a top bar navigation "prev" and "next" links to cycle through the galleries. Currently clicking on the links causes a whole page refresh. I think the user experience would be smoother if, when we click "next" we animate a slide-in of the next page content from right to left, and vice versa, if we click "prev" we animate the previous week of results from left to right (similar to how page transitions work in a mobile app when you swipe). Note, I do not need to detect actual swipe gestures and I think jquery mobile markup is overkill.
To preload the data that will be sliding in I can make an ajax call, or even have the data preloaded in json for me to construct the replacement html off screen. I will use html5 window history push state to change the url to the actual location we will be navigating to. The only thing I haven't been able to find is to do the actual animation. I have looked into carousels, but none of them quite do what I want. Is there an existing library that handles just the animation of page transition, having that slight recoil bounce effect?
Thanks.
EDIT: I just found jquery.animate which I think might do the trick.
There are any number of jQUery based image gallery libraries that you might want to choose from. If you can't find one to transition between different galleries teh way you want to, it should not be a problem to use jQuery to asynchronously load new galleries and then animate them into place.