How can I prevent users from pressing my web-page buttons before the page is fully loaded?
i.e. I have a button that opens a lightbox. The JS for the lightbox is loaded last in the page for quicker response time. So if the user presses the button before the page is fully loaded - he either gets a JS error or the lightbox data is opened on a blank page.
I'm using Javascript with MooTools.
Make your button disabled. After the page is loaded - make it enabled
Here is a JQuery(sorry for not being "clean" JavaScirpt example)
$('#yourButton').attr("disabled", false);
here's an example:
<body onload="document.getElementById('button1').disabled=false">
<button id="button1" disabled="1">
ok
</button>
<body>
If I understand correctly neither
<body onload="...">
nor
$('#yourButton')...
guarantees that the document has finished loading. The (jQuery) method that does:
$(document).ready(function() {
$('#yourButton').attr("disabled", false);
});
Example
<html>
<body onload="document.getElementById('submitButton').disabled=false">
........
........
<input type="button" name="Submit Me" id="submitButton" />
</body>