Suppose I have a link, which would fade out the entire page when link is clicked. The reason I fade out the page is because a next page is about to load, but it is not loaded yet. I can use pointer-events: none which will disable any mouse events until the next page is loaded.
Suppose it was done with the keyboard, I could use the following to prevent double-enter, or to cleanly disable all elements within, for example tab-enter would be disabled this way as well.
parent.onkeydown = fals
parent.onkeyup = fals
parent.onkeypress = fals
function fals() {return false}
This works well for short loads, but if it takes a long time to load, the user may notice the following difficulties.
Cannot tab away from the a tag.
Cannot use several of the keyboard shortcuts which would control the browser.
Able to tab into the disabled area from the address bar.
Is there a modern and slick way to prevent these 3 problems, other than setting an onfocus=blur for all of the child elements? I do not care about IE today.
I think the commonly accepted way of dealing with things like what you're talking about is to use Modal's, which is to say when they click that link, you pop up a box that says 'Processing' or something like that, and you create a fullscreen div with a z-index above everything else so the user can't click / interact with anything else on the screen until you're done doing whatever it is you are doing.
See http://twitter.github.com/bootstrap/javascript.html#modals for an example of what i'm talking about.
Related
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%;
Is it possible to capture the right click open in new window/tab or mouse wheel open in new window/tab event using jQuery?
UPDATE 1
Here is why I need it. I have codeigniter application which uses pagination class. I use this class to display a grid. The pagination links have been bind with a method that uses AJAX to load the next page in a container div. Now some one can right click and open the next page in new tab/window which I don't want. IMHO, the only way to handle this is to some how trap the (right click or mouse wheel button click) open in new window/tab event.
UPDATE 2
I just realised all my AJAX requests are being served by one CI controller which actually acts as a proxy to other classes/libs. In this controller I can look at the request and if it isn't an AJAX request I can redirect the user to another page.
A workaround solution is to replace all applicable <a> elements with buttons, where (obviously) the buttons would call JavaScript that does the appropriate navigation.
If you're really keen you can apply CSS to make the buttons look like <a> elements, though I don't recommend it because it confuses users who might try to treat them as standard links and right- or middle-click them.
(You could even get it to work for users that don't have JavaScript enabled by, e.g., making each button a submit button in its own little form.)
At the very least you can catch a right-click, using .mousedown() (or, presumably, mouseup()). See this StackOverflow answer about right clicks for more. And by catching it, you should be able to do a standard event.preventDefault() and then do as you like from there. That may be overkill, however, as it could prevent the user from doing other things you want to allow them to do.
I almost fixed a similar issue now for a page which I am working on. My fix was to do some changes in the page if that has been opened in a new window....
Assume that you open a page "B" from page "A" in a new window.
If you want to check the page "B" is opened in a new window from page "A", then follow the below steps..
If (document.referrer == "A" && window.history.length > 1) {
alert("I am page 'B' and opened from page 'A' in a new window");
}
If you don't want people to access link the usual way or fallback when the JS is disabled, then it shouldn't be a link. Just use any element you like (span, div, button, whatever you like) and style it like a link. Then bind the action using JS. Or you can use a link with href="#" or href="javascript: void(0)". That way if users right click it and choose to open in a new window, then they will end up in the same page they were before.
When the user clicks on an external iframe, all event listeners on my BODY tag stop working and I need to prompt the user to click outside to regain the "focus" on the body tag.
But knowing when the user clicks on an iframe is actually very hard.
I know of two ways to know when there is a click on an iframe:
1- Overlapping a transparent div on the iframe (with the downside that the user has to click twice to actually click the iframe).
2- A very rough workaround which is having an input autofocused all the time and detect when it loses focus. But it's just stupid to even consider implementing it.
Is there another way to know when the user "loses focus" of the main body by clicking on an external iframe?
This is super easy, but not necessarily effecient/ethical.
setTimeout(function(){
document.body.focus()
}, 100 );
I would in all honesty use option #2 with some jQuery.
$(el).focusout(function(){
$(this).focus();
})
The easiest method and the only one I'm aware of actually is to make an infinite loop that gets current focused element.id.
Then it's simply a matter of comparing that id with your iframes to know which has been clicked.
Note that you will only be able to know for sure the user clicked once in the iframe, but there is no way to count clicks afterwards. Also notes that iframes can focus themselves with this method will be indistinguishable from a click.
I'm trying to expand navigation options of the context menu on certain elements (specifically, h1 and h2 tags)
I want to prevent the browser's default action when right-clicking on those elements.
I found nice information at this page.
However, I couldn't find how to disable the context menu for certain elements. Does someone know how to do it?
I'm using prototype as my javascript API.
This will prevent the context menu from appearing on a particular element
$(it).observe("contextmenu", function(e){
e.stop();
});
So, for example stop all H1/H2 tags from showing a context menu
$$('h1, h2').each(function(it){
$(it).observe("contextmenu", function(e){
e.stop();
});
})
You can obfuscate it a bit, but ultimately your page is only a guest in the browser in, (and you can take that to mean in the same manner that a prisoner is a "guest" of the state, if you wish). Therefore the page must rely on the browser to play nice. If the user wants to run a browser that doesn't play nice, or customize their existing browser to do so, that is always their option. You can never force a browser to do anything. Nothing you can do will be able to stop the user from performing a given activity with their browser if they really want to, once they view a page on their local machine. More than that, most recent browsers have facilities already built in to make it very easy for the user to override the normal behavior when something seems out of the ordinary.