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 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!”

JavaScript Module Design Pattern

Moving beyond adding simple JavaScript enhancements to your website to developing full-blown client-side applications is going to require organization. In this article, we’ll take a look at JavaScript Module Design Patterns and how to use them in your development.

I’m a huge fan of the JavaScript Module Design Pattern so thought it would be worthwhile for other developers to explain some use cases, the differences and why they’re important. The Module Pattern is what we’d call a “design pattern” and it’s extremely useful for a vast amount of reasons. The biggest reason I’m a fan — it makes scoping a breeze and doesn’t overcomplicate program design.

Great design is a product of care and attention applied to areas that matter, resulting in a useful, understandable, and hopefully beautiful user interface. But don’t be fooled into thinking that design is left only for designers.

Anthony Colangelo

The JavaScript Module Design Pattern also keeps things very simple, easy-to-read, use and uses Objects in a very nice way. Even better, it won’t bloat your code with repetitive this and prototype declarations. Continue reading “JavaScript Module Design Pattern”