Fast jQuery each when you need $(this)

Most of the time you use the jQuery $.fn.each function you end up doing $(this) inside the function that is getting looped.  You want access the jQuery magic in your loop.  It’s always seemed weird to me that $.fn.each didn’t pass your function a jQuery version of the element, since you already selected it in order to do the $.fn.each call.  Well James Padolsey started playing and created a quickEach plugin that passes in a jQueryized version of this.  Then Ben Alman started playing with it and ended up with a $.fn.each2 plugin. It is optimize just for the case where you need a jQueryized version of this in the loop, it is slower then the built in $.fn.each function when you don’t.

// jQuery each2 plugin usage:
$('a').each2(function( i, jq ){
this; // DOM element
i; // DOM element index
jq; // jQuery object
});

// jQuery core .each method usage:
$('a').each(function( i, elem ){
this; // DOM element ( this === elem )
i; // DOM element index
$(this); // jQuery object
});

Event listener add remove add remove . . . .

Something I have seen in many people have problems with on Stack Overflow, jquery’s google group, and forums is people who are assigning an event listener and then because something happens, normally because the thing is being animated, they kill the event listener and then once the animation is finished they add it back. You end up mucking with the element far more then you really need to.

Example of what I am seeing:

var doclick = function(){
    $(this).animate({'left':200},function(){
        $(this).bind('click',doclick);
    }).unbind('click');
};
$('li').bind('click',doclick);

You have duplicated code and will get very messy very quickly as more functionality gets added.

It would be much better to check if the thing is animated and if so just exit:

var doclick = function(){
    if ($(this).is(':animated')) return false;
    $(this).animate({'left':200});
};
$('li').bind('click',doclick);

No adding and removing the event listeners just decide if you really care if was clicked.
It doesn’t event need to be if its animated you can just use a flag to decide:

var flag = false;
var doclick = function(){
    if (flag) return false;
    $(this).animate({'left':200});
};
$('li').bind('click',doclick);
$('div.stopclicks').bind('click',function(){
    flag = true;
});

Think about your users first before getting out the paint brush

I am working on slicing up a pretty large site that a group of 3 designers have been working on. They are creating psd files for almost every page to define the layout and modules used on each page. After looking over the designs I started seeing things that look very “pretty” but make it so the user has to think or do something that is not what they naturally would do.

On the news section of the site the page has a list of the different news articles that have been published. When you click on an article to read it a “lightbox” type popup will open up with the article content. Having the article open up in a lightbox type of popup in the page is new and different but I don’t know if I would call it bad. It does let make it very quick and easy to get back to the list but it I don’t know if its that much better then loading new content in the page and then clicking the back button rather then a close button.

If that news article is longer then the defined height of the “lightbox” the designers wanted the article to be split up in to pages and to add the slick looking page buttons at the bottom. Wait, you want the user to click a button and have what they are currently reading removed and replaced with the next “page” of content, making it so they can’t look back at the rest of the article.  How many people are just going to decide that the rest of the article isn’t worth it and just close the “lightbox”?

The user is going to get to the bottom of the first “page” of the article and spin the mouse wheel a few times, when that doesn’t work he is going to look for a scroll bar. After he finds that there isn’t a scroll bar he is going to re-read that last sentence and make sure he really was right in thinking that there is more content. Then he is going to finally see those slick looking page buttons and click on the next arrow.

The design makes the user have to think multiple time just to read the content that we are trying so hard to get him to read.  Yes there are times when making a user learn something new makes the usability better, but it has to be worth the users time to spend learning.  When you are trying to get a user to read your content you want it to be as simple and easy for him to do that, not make him think about why he just spend 30 seconds trying to figure out how to get more content.