Submit Button Enabling
"Enabling" you ask? Yes. We all know how to disable the submit upon form submission and the reasons for doing so, but what about re-enabling the submit button after an allotted amount of time. After all, what if the user presses the "stop" button immediately after submitting the form? They'd be screwed. Why not re-enable the submit button after an allotted amount of time so that the user may re-submit?
The MooTools JavaScript
window.addEvent('domready',function() {
var subber = $('submit');
subber.addEvent('click',function() {
subber.set('value','Submitting...').disabled = true;
(function() { subber.disabled = false; subber.set('value','Resubmit'); }).delay(10000); // how much time? 10 seconds
});
});
Of course, this isn't ideal in all situations. It is, however, a nice touch if your system can accommodate for it.
Update: Upon submission, the button's message changes to "submitting..." and once enabled, the message changes to "Resubmit." Thank you to Facundo Corradini for the suggestion!
![CSS Animations Between Media Queries]()
CSS animations are right up there with sliced bread. CSS animations are efficient because they can be hardware accelerated, they require no JavaScript overhead, and they are composed of very little CSS code. Quite often we add CSS transforms to elements via CSS during...
![Creating Scrolling Parallax Effects with CSS]()
Introduction
For quite a long time now websites with the so called "parallax" effect have been really popular.
In case you have not heard of this effect, it basically includes different layers of images that are moving in different directions or with different speed. This leads to a...
![Animated Progress Bars Using MooTools: dwProgressBar]()
I love progress bars. It's important that I know roughly what percentage of a task is complete. I've created a highly customizable MooTools progress bar class that animates to the desired percentage.
The Moo-Generated XHTML
This DIV structure is extremely simple and can be controlled...
![Morphing Elements Using MooTools and CSS]()
Morphing an element between CSS classes is another great trick the MooTools JavaScript library enables you to do. Morphing isn't the most practical use of MooTools, but it's still a trick at your disposal.
Step 1: The XHTML
The block of content that will change is...
