The Original Jelani Harris The one and only

15Jul/080

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.

14Jul/088

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.

Tagged as: 8 Comments