Blog

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!

Add WordPress Plugin Template Files

Creating a WordPress plugin where you need to create templates that can be overridden by the theme? Learn how to build a template loading system similar to WooCommerce allowing you to do just that!

If you’ve ever worked with WooCommerce theming, you’ve probably had to copy some of their templates files to your own theme in order to override the HTML. It’s a great system that allows frontenders the ability to change the output to match designs. In this article, I’ll walk you through how to do just that — easily add WordPress plugin template files.

Just wanna get straight to the code? Click here. Continue reading “Add WordPress Plugin Template Files”

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”

What Are Webfonts? — for Clients

The concept of webfonts, their different versions and how they render differently across different browsers, versions, devices and operating systems can be hard to explain to client. This will make it easy!

“Webfont… what’s that and why do I need them?” Trying to explain to a non-technical client the what, why and which webfonts are needed can be like having a conversation with a 2 year old in the ‘but why?’ stage.

What are webfonts?

Here’s a quick break down of the 3 W’s to help keep clients from doing a @font-face-palm! Continue reading “What Are Webfonts? — for Clients”

Drupal 7: Empty Menu Link Titles

Create Drupal 7 menu links with empty titles! With Drupal’s hook_menu_link and <none>, create icon links & other styled links that have no text.

One of my biggest pet-peeves is creating Drupal 7 empty menu link titles since there’s no out-of-the-box solution. As a result it can be difficult to create stylized links, such as icons or background images. After many frustrating sessions I finally sat down to find a way to make this happen. Consequently, I began to think this was an impossibility and was unable to find a solution already in existence that did exactly what I needed it to do. However, Drupal 7 empty menu link titles are absolutely possible with just this one little snippet! Have no fear, theme_menu_link to the rescue! Continue reading “Drupal 7: Empty Menu Link Titles”