//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.

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.

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.