Using Jquery to disable the enter key
There are times that you do not want a form to automatically submit when a user hits the enter key. Or if you want to do some validation via javascript before you allow the submit to go through.
//Bind this keypress function to all of the input tags $("input").keypress(function (evt) { //Deterime where our character code is coming from within the event var charCode = evt.charCode || evt.keyCode; if (charCode == 13) { //Enter key's keycode return false; } });
By returning false in the keypress function it tells the browser not to allow the enter key event.
JQuery is the best javascript library out there
I officially declare JQuery to be the best javascript library out there. So much documentation, so many plugins, so many interesting things you can DO with that library. I just lost 7-8 hours, implementing a prototype of a feature for my discussion site, Apparatus Complex. In particular it's a meta-game that I'm developing so that users can compete with each other in a role-playing game while they wait for the site to update itself with content from other people.
So I had a crazy idea of using jquery and ajax to let people drag and drop equipment into slots, and then dynamically update what that piece of equipment would do to their statistics. Doing this in flash is really easy, I first got the drag and drop implemented (so easy with the Jquery UI), then I set the restrictions on which column each orb could belong in, and then I added the automatic update of the statistics just moments later. It was simply brilliant and it was pretty darn efficient. If you want to play around with this, it's located right here. The equipment orbs are generated randomly and so are the names.
By the way, MooTools and Prototype and Scriptalicious are okay as well. I'm just really impressed with JQuery right now.
Adding a delay to JQuery Functions
Recently I was working on a few functions that I didn't want to have activated immediately after hovered over a div. I neededthe functions to activate after a half a second of hovering by the user. To do this I created this this piece of code.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | var display_timeout = 0; $(".orb_space").hover(function () { if(display_timeout != 0) { clearTimeout(display_timeout); } // save a reference to 'this' so we can use it in timeout function var this_element = this; display_timeout = setTimeout(function() { display_timeout = 0; // perform things with this_element here buy referencing it like $(this_element) if (!$(this_element).hasClass('magic')) { performRollinMagic(); } }, 500); }, function () { if(display_timeout != 0) { clearTimeout(display_timeout); } performRolloutStuff(); } ); |
Let's go through line by line to see what's happening here.
Lines 2: The JQuery hover function has two parameters. The first parameter is for the function to call when the user hovers onto the element, and the second one is for when the user hovers out. Lines 4-16 consist of the first function and lines 19-24 consist of the second.
Lines 4-6: So if we happen to flash our mouse over the element very fast twice, this will make sure that we only have one timeout function happening.
Line 9: When we in the setTimeout function we need to remember a reference to our current element so that we don't have to do some tricky DOM navigation to get the hover activated element with the setTimeout event. It's just easier to just make a variable to remember the element.
Lines 11-15: First we reset the display_timeout variable, and then we can perform our necessary hover actions in this setTimeout function. The 500 indicates that we want this function to occur after 500ms.
Lines 20-23: This looks very familiar doesn't it? It's the same thing from lines 4-6. This is so that if the user rolls out of the hover element, the timer countdown will immediately stop and the hoverin functions will not occur.