Attaching JavaScript Handlers to Scroll Events = BAD!

It’s a very, very, bad idea to attach JavaScript handlers to the window scroll event. Instead, use this technique Twitter uses.

Check out John Resig’s most excellent article, Learning from Twitter for an in-depth explanation why is is a bad idea and why the alternative below works better.

It’s a very, very, bad idea to attach handlers to the window scroll event.

The Wrong Way

Depending upon the browser the scroll event can fire a lot and putting code in the scroll callback will slow down any attempts to scroll the page (not a good idea). Any performance degradation in the scroll handler(s) as a result will only compound the performance of scrolling overall.

$( window ).scroll( function() {
  // Do your thang!
});

The Correct Way

It’s much better to use some form of a timer to check every X milliseconds OR to attach a scroll event and only run your code after a delay (or even after a given number of executions – and then a delay).

var scrolling = false;

$( window ).scroll( function() {
  scrolling = true;
});

setInterval( function() {
  if ( scrolling ) {
    scrolling = false;
    // Do your thang!
  }
}, 250 );

Hope this helps to clear things up and provides some good advice for future infinitely-scrolling-page developers!

jQuery Slider Menu

Tired of those standard click ‘n drop menus? Need something with a little more pazazz? Yes & yes! Here’s the answer to your prayers, the jQuery Slider Menu.

Tired of those standard click ‘n drop menus? Need something with a little more pazazz? Yes and yes! Here’s the answer to your prayers, the jQuery Slider Menu based of off the Agile WordPress theme.

See Demo | Fork on GitHub Continue reading “jQuery Slider Menu”

GA Custom Dimensions & Custom Reports

Learn to track page performance, user behaviors, personas and more with the power of GA Custom Dimensions.

Creating audience segments is one of the most important things you can do with an analytics tool. When segmentation rules do a good job of highlighting motivations of visitors, behaviors of each segment help make sites become more relevant to each group. This will increase the likelihood that your site will deliver on your goals.

GA already lets you segment more than 130 dimensions. With Universal Analytics, Custom Dimensions (aka. Custom Variables) can be used to track even more. Once you know how to use them, they’ll become a powerful tool in your analytic arsenal. Continue reading “GA Custom Dimensions & Custom Reports”

Simple Drupal 7 AJAX Implementation

Boost the performance of your Drupal 7 website, improve usability and help with SEO by making content load via AJAX in just a few steps.

Drupal AJAX is a cinch to implement—as it should be since core is loaded with it. In just a few of steps I’ll show you how to use jQuery and Drupal’s hook_menu() function to quickly build a AJAX function to return anything from HTML to a JSON array.

Continue reading “Simple Drupal 7 AJAX Implementation”

Responsive IFrames — The Right Way!

Building responsive IFrames can be frustrating. Don’t let an IFrame break your beautifully laid out responsive site. Learn how to build responsive IFrames the right way with just a few lines of CSS.

You’ve spent countless hours designing and building the perfect responsive site. One problem — iframes. Proportionally resizing (aka. responsive iframes) these pesky little windows to another world can be frustrating. It’s easy enough to make an iframe’s width span 100% of its container. Rather, making the height resize accordingly can be tricky.

So how do you keep from blowing your top trying to make responsive iframes?

Responsive IFrames

Most implementations I’ve seen require the use of JS, like Pym.js. This can cause unexpected behavior depending on the device and browser version — Pym.js only goes back to IE9. Wouldn’t it be nice if there was a way to make responsive iframes without using a dirty little code snippet? There is! It’s name is the CSS intrinsic ratio technique — or what I like to call, ‘Magic iframes!’. Continue reading “Responsive IFrames — The Right Way!”