So, I've probably stumbled upon the strangest bug/feature I've ever seen. I've developed a website which helps you read foreign books. See this book (or any book on the website, it doesn't matter): https://anylang.net/en/books/de/heaven-has-no-favorites/read.
Try to quickly move your mouse hovering on words/sentences, maybe click on something etc. Everything should work pretty smooth.
On mouseover a word quickly becomes orange, on click the translation quickly appears etc.
Now click on the login button:
The first input should become focused.
Then close the modal and try the first step again. Everything becomes very laggy. The lags won't disappear no matter what you do, except:
Click on the page number:
Lags disappear. Completely.
The same result (lags) can be achieved by:
Clicking on a word inside a translation tooltip
It has a contenteditable attribute, so the behaviour is exactly the same as in the first case.
Click anywhere outside the tooltip, closing it and causing the lags.
Lags still disappear if you click on a page number (or, probably, any input[type="text"] on the page (but not in modals))
Some things to consider:
The effect doesn't disappear if you lose focuse in a modal and then close it.
The same effect can be achieved by focusing in a modal and then manually removing a modal from dom. So javascript is not the problem.
If you don't remove a modal from dom but apply "display: none" to it instead, everything is ok, no lags.
My guess is that the browser gives higher priority to elements where input[type="text"] is focused and doesn't respect it when an element with the input is removed from dom. Any other ideas? This thing really boggles my mind.
If you do a performance profile of your site while going through this process, you'll see that your memory allocation continues to climb as you interact with the page. You'll also notice that the more text you hover over the worse the lag eventually becomes.
This is indicative of a memory leak in your code - possibly caused by event listeners that aren't being cleaned up properly.
Without an in-depth review of your code it's unlikely anyone here is going to be able to pinpoint where the exact problem is, but hopefully I've pointed you in the right direction!
Related
Please understand that it will be difficult for me to post snippets of code, but the problem is easy to summarize.
A modal becomes visible.
I click anywhere OUTSIDE of the modal (we are still in the modal here, and experiencing zero lag).
The modal is closed.
Suddenly everything is very laggy, until I click on any element that IS NOT bound to a .click listener, after which the lag is completely gone.
Because of step #4, it seems to behave similarly to a recursive function. When I finally click on something not listening for a click, it returns all the way back up and all is well. Until then, I just burrow deeper into the rabbit hole.
Notes:
This applies to all modals in the DOM.
If a modal is closed using ESC or the 'Close' button, there is no lag. The issue only arises when I click outside of the modal.
I'm not dynamically creating anything here, not even the modals, so I don't have a straightforward idea of why memory usage would be increasing.
There is never more than one modal open at a time (tested via extensive logging).
I happen to have 'data-background="static"' set so that the modals don't auto-close when you click outside of them, but this doesn't have any effect on the issue. With or without it, the same issue crops up.
This might be a little interesting for people who know front-end in depth.
This doesn't make sense, try it yourself:
Open a link with href + target="_blank"
Close the opened tab and go back to the original
The link state is now :focus
That is fine. But what is wrong with this?
Open a link with window.open() on click event
Close the opened tab and go back to the original
The link state is now :hover, even though it's not really hovered. And you can't do anything about it unless you start moving cursor. trigger('mouseout') doesn't help and nothing really does.
Here's a JSFiddle – I've added a console.log() output for each event and made states different colors, so you can see better.
Browser keeps :hoverstatus until the mouse passes over other thing, if the mouse remained in the same position when you open the new window/tab, it will keep the :hover. When you return the focus to the page the :hover will remove as soon you pass the mouse over something else. That behavior could be buggy in some computers(not necessarily browser fault) and will stay until you click in another place.
EDIT:
A colleague worked out what was wrong. It was because the aside element had z-index: 2. Although it is fixed now, I'm not sure why that z-index: 2 was causing these issues in the first place. If anybody knows why, I'd like to know.
I'm having a rather odd issue on a website i'm working on. When on the architecture section, I click on one of the blocks to open the project, and it works. Almost. When one of the projects is open, the aside on the left does not scroll correctly. It distorts and splits up. Here is a screenshot:
But the odd thing is, the interiors section, which uses the same code, works fine. I have just recently finished re-coding the news section with a new design and more features, so it could be something to do with that. But, so far, I have found no connection with other sections on the page.
There are other errors on that specific page too. The Close button and next button hover events don't seem to be firing. However, if I open Dev tools and set the width of the close button to 29px, the hover event works, and the cross goes orange.
You can access the site at http://dev.guyhollaway.co.uk/
If anybody has any ideas, I'd be very thankful.
This happens on Google Chrome on both Windows and OS X.
Thanks in advance.
I want to pop up a window.alert() if the user mouses out of an area when they haven't saved changes yet (for structural reasons, there are several forms and a common problem I've seen in other apps is making changes in multiple areas, submitting one and losing the rest) and automatically close the alert when they mouse back into the area. To do that, I need the id of the window that pops up, but I'm not sure how to get it.
The window does not have an id, and you cannot close it from Javascript. It is not a part of the DOM.
You can only open an alert() box, and then wait till the user closes it. Nothing else.
No alert() please :)
Actually an alert() will block further code execution anyway so even if you COULD close it programatically it would never actually execute that dialog-closing code.
You need something you can access through the DOM (like every other response here says).
Make your Javascript track the mouse location and upon leaving the area you overlay a dark translucent background or do a modal dialog
Techniques on creating modal dialogs
I would also advise adding a pointer-events: none; and position: fixed to the underlying content to prevent further action until the user actually goes back where they should be.
If you want real specifics on how to code this let me know. I'm hoping you'll travel down the rabbit hole and discover the wonders on your own, though. Much more satisfying.
I am trying to make a page COMPLETELY UNCLICKABLE (both right click and left click) and to display a message when someone clicks. Since I know that this will raise lots of questions such as
"why would anyone ever want to do this...this is stupid...then nobody
can navigate the site...and it doesn't protect your content
anyway...etc"
here is the explanation of my purpose. I have a page that is at the moment only a graphic mockup of what the finished website will eventually look like. No matter how many times I explain that the mockup is ONLY AN IMAGE and not a real navigable website, they still email me to say that they cannot click on the menus and links. Since it is a single page mockup, I want to pop up an alert() message (can't use a modal because you can't click to dismiss it if clicking is disabled) to let them know that they have clicked something non-functional. I am trying to do this in as few lines of code as possible, and have the following working at the moment:
<script>
$('html').mousedown(function(event) {
event.preventDefault();//To prevent following the link
alert('Demo Graphic Only...clicking on stuff will NOT work at this point.');
});
</script>
The issue is that when using .mousedown I capture the user trying to click on the browser scroll-bar to scroll down. I was surprised by this since it is not part of the actual PAGE CONTENT but rather a part of the BROWSER...but it is catching it nonetheless. I tried using .click in place of .mousedown however only seem to catch a normal (left) click in that case... Does anyone know how to easily (minimal lines of code if possible) capture the left AND right click event, but allow user interaction with the browser scrollbar?
Try this :
$(document).click(function(event) {
event.preventDefault();//To prevent following the link
console.log('Demo Graphic Only...clicking on stuff will NOT work at this point.');
});
This Function will be called when click is made on the page , not on the Scrollbars
Try to use
event.stopPropagation();
or
event.stopImmediatePropagation()
For people who come across this question, an alternative approach, good especially if you need to prevent mousedown specifically:
Put the scrolling content in a wrapper element and prevent mousedown only on the inner element. Set the wrapper element to overflow: auto; height: 100%;