Archive for February, 2006

Just thought I’d say hello to other AJAX developers.

I did this in the summer of 2004, before the word “AJAX” was around, and also before FireFox gained more ground. Therefore this is just in IE only (haven’t take the time to port it over properly.)
Still, I thought it would be fun to show the community here: | Read the rest »

Via Ajaxian:

David Schontzler came up with a quick and useful bookmarklet, ReCSS.

It reloads all the stylesheets pulled in via links by adding a query string argument to the end of the URL. Quite handy for applying CSS tweaks to dynamic apps.

Tested in Firefox, IE, and Safari.

At the bottom of the prototype tutorial I just posted is this great article on Encytemedia.com that digs into the Enumerable and Hash functions of the library in greater detail. There’s a lot of great stuff in here.

each and friends

I used to find myself writing a lot of for loops. Although, Prototype doesn’t by any means eliminate the need to do for loops, it does give you access to what I consider to be a cleaner, easier to read method in each.

for(var i = 0; i < F.Numbers.length; i++) {
  logger.info(F.Numbers[i]);
}

each allows us to iterate over these objects Ruby style.

F.Numbers.each(function(num) {
  logger.info(num);
});

//Output
0
1
4
5
98
32
12
9

each takes one argument, the iterator or block in Ruby terms. This iterator is invoked once for every item in the array, and that item along with the optional index is passed to the iterator. So if we also needed the index we could do something like the code below.

F.Numbers.each(function(num, index) {
  logger.info(index + ": " + num);
});

//Output
0: 0
1: 1
2: 4
3: 5
4: 98
5: 32
6: 12
7: 9

I read through about half of this so far and it’s great. Lots of info on how to make use of prototype’s powerful scripting shortcuts and plenty of best-practices examples. via Ajaxian: | Read the rest »

Bill Graham was asking me about where to put javascript events today. window.onload? At the bottom of the html document? Attached to the onload event of an image somewhere in the page?

Here’s an article by Dean Edwards on an interesting solution that works for IE and Firefox.

For the life of me, I can’t find the article that I read a week or so ago on this topic that outlined numerous strategies on dealing with window.onload issues, but one option to consider is using event monitoring in prototype to monitor the browser for an element to be present before performing an action on it.

Check out this post on this crafty lightbox + moo.fx combination.

While Lightbox is really excellent, the sudden transition from page to image is a little bit jolting. I decided that integrating a Javascript effects library (in this case, my preferred option, the super-lightweight Moo.FX) into Lightbox would provide a more gentle transition from page to image and back again.

So what I’m wondering is if we could also use this kind of tech to prompt users for information. The standard popup window is less than beloved by developers and users. We’ve been using overlib for popups but maybe this kind of faded layover would allow us to highlight the importance of the message more effectively.

Another snippet via Ajaxian:

A Javascript tip from Chris Heilmann, who reckons the object literal is “pretty close to sliced bread”. Replace:

var commonSense=null;
var standardsCompliance=“50%”;
function init(){
// code
}
function doStuff(){
// code
}
function doMoreStuff(){
// code
}

with the object literal form:

awesome={
commonSense:null,
standardsCompliance:“50%”,
init:function(){
// code
},
doStuff:function(){
// code
},
doMoreStuff:function(){
// code
}
}

| Read the rest »

via Ajaxian:

Jonathan Snook has posted some graphics (”cheat sheets”) over on his blog today - various sized disections of the popular Prototype Javascript framework. | Read the rest »

Via Ajaxian:

Over on SitePoint today, in the DHTML & CSS blog section, Kevin Yank has a new post that talks about some of the Javascript libraries, including the new Yahoo offerings.

JavaScript is hard, but it could be a lot harder. These days, choosing your tools can actually be most of the work.

Today, the poster children of web application success consist of numerous beefy and interdependent JavaScript files with a light dusting of HTML and CSS. With JavaScript codebases easily outweighing markup and style sheets, should most of the sensitive, new age web developer’s time be spent scripting?

Well, unless you’re trying to solve a problem that no one has tackled before, the answer is ‘probably not’

The post goes on to look at four of the more popular Javascript libraries out there - Dojo, Prototype, AjaxTK, and, of course, the Yahoo UI Library. There’s a brief summary for each of them, focusing mainly on what it offers and where it fits into the Javascript community.

He also finishes the post off with a brief look at design patterns in Javascript, specifically mentioning the Yahoo design pattern library they’re now offering as well. There’s links to some of the current patterns you’ll find as well as some other references to get a hold of to read up on patterns themselves.

Thank you Microsoft!
Microsoft’s lame attachEvent protocol (instead of the standard addEventListener) doesn’t pass along the element that caught the event. So if you use attachEvent to attach something to, say, onclick, and then the user clicks that object, then the function you attached can’t do something like “this.id” because “this” isn’t defined. INSTEAD it’s part of the window.event object (there’s only one). this function returns the right object. Call it like so:
| Read the rest »