Archive

Archive for the ‘jquery’ Category

Infinite Scroll 1.4 is out. Twitter-style now supported!

November 30th, 2009

I just released version 1.4 of the jQuery Infinite Scroll plugin. Along with that comes a new release of the wordpres plugin. A few small bugs were fixed in the wordpress code, improving compatibility with other plugins and themes.

I've also added the ability to manually trigger loading in new content. This allows you to do a twitter or facebook style of interaction where the user must click an element for the new data to come in.

A demo showing that functionality. The documentation of how to use this style is on the documentation page.

2010.05.04 : I've released v1.5. Additionally, the project is now on github! changelog here.

jquery

Introducing yayQuery – A jQuery podcast

November 6th, 2009

A few friends of mine got together to put together a new podcast we're calling…

yayQuery!

2009.11.13. Now visit the podcast at:
http://yayquery.com

In our inaugural episode I'm joined by Rebecca Murphey, Alex Sexton (of goto.js fame), and Adam Sontag (ajpiano). We talk about…

  • Underscore.js – a great utility belt (very handy for Ruby/Python folks), comes with John Resig's microtemplating script and lots more
  • Thickbox – Rest in peace. Also alternatives: Colorbox, jQuery UI Dialog
  • jQuery on mobile. Phonegap, XUI, jQTouch, going it alone
  • Anti-Pattern of the week: css(key,val)
  • $var and Hungarian notation
  • … and dancing

Moar?

We hope to do this again (and again) and make things better. We're also working on proper podcast feeds and a site.

But really this is an experiment, for now. We'd love any and all feedback.

… and follow us on twitter to get your fix!! @yayquery

jquery

jQuery Conference 2009

September 13th, 2009

Currently rounding up the last day of #jqcon and it's one of the best events I've been too. Crazy to see jQuery's annual meetup double in size each year and scale with talent and organization just as nicely. I somehow tricked the attendees into voting two talk proposals up (thanks!), so I got to discuss two things this weekend.

I'd love to any feedback you may have and plan to write on these topics in more detail, but for now.. my slides:

jQuery Anti-Patterns for Performance & Compression

Employing Custom Fonts… Now!

jquery

jQuery Anti-Patterns for Performance

September 11th, 2009

Debounced resize() jQuery plugin

August 11th, 2009

If you've ever attached an event handler to the window's resize event, you have probably noticed that while Firefox fires the event slow and sensibly, IE and Webkit go totally spastic.

PPK lays it out like this:

  • In IE, Safari, and Chrome many resize events fire as long as the user continues resizing the window.
  • Opera uses as many resize events, but fires them all at the end of the resizing.
  • Firefox fires one resize event at the end of the resizing.

When I first saw John Hann's debounce post, this use case is what I immediately thought of.

This isn't exactly throttling, but it's close. Basically debouncing will fire your function after a threshold of time (e.g. 100ms) has elapsed since the last time it's tried to fire. Throttling would withhold subsequent firings, but debouncing waits for the last one and runs that.

Take a look at the difference on the demo.

The code for smartresize:

(function($,sr){
 
  // debouncing function from John Hann
  // http://unscriptable.com/index.php/2009/03/20/debouncing-javascript-methods/
  var debounce = function (func, threshold, execAsap) {
      var timeout;
 
      return function debounced () {
          var obj = this, args = arguments;
          function delayed () {
              if (!execAsap)
                  func.apply(obj, args);
              timeout = null; 
          };
 
          if (timeout)
              clearTimeout(timeout);
          else if (execAsap)
              func.apply(obj, args);
 
          timeout = setTimeout(delayed, threshold || 100); 
      };
  }
	// smartresize 
	jQuery.fn[sr] = function(fn){  return fn ? this.bind('resize', debounce(fn)) : this.trigger(sr); };
 
})(jQuery,'smartresize');
 
 
// usage:
$(window).smartresize(function(){  
  // code that takes it easy...
});

Pretty straightforward stuff. What else do you think would be an appropriate use of debounce()?

jquery