Blog

Responsive IFrames — The Right Way (CSS Only)!

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.

This post was originally published on March 19, 2014 and last updated May 7, 2018

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 (CSS Only)!”

WordPress lostpassword_errors Filter

Unlike the registration_errors filter, there’s not a lostpassword_errors filter… but there is another filter you can use instead!

I spent a couple of hours of searching and another one debugging attempting to find a WordPress filter for errors like the:

ERROR: Invalid username of email.

that appears on the lost password page. Since there’s a registration_errors filter, I thought lostpassword_errors or something close to it would be available. Nope. Continue reading “WordPress lostpassword_errors Filter”

Facebook PHP SDK — a simple guide!

Bring the power of Facebook to your application using the Facebook PHP SDK — a powerful library allowing you to retrieve user information, publish to profiles, enable Facebook registrations, logins and more!

This post was originally published on May 30, 2014 and last updated March 9, 2018.

The Facebook PHP SDK is a powerful library that allows developers to easily integrate Facebook login and make requests to the Graph API. In this post, we’ll go over how to install, initialize and perform operations like posting to timelines, user registrations, logins and more!
Continue reading “Facebook PHP SDK — a simple guide!”

Load JS & CSS Conditionally in Drupal 7

Learn how load CSS & JS files based on conditionals like url, node type, module, views & more!

This post was originally published on May 22, 2013 and last updated March 8, 2018 thanks to some helpful input by Steve Elkins.

Drupal 7 is a haus at combining CSS & JS files. This can help boost page performance & optimization easily, but if not used right, can do the complete opposite. In this post, we’ll go over how to load JS & CSS files based on conditionals like URL, module, node, views and more.

Before we dive in, get somewhat familiar with the drupal_add_js and drupal_add_css functions. We’ll use these to load the actual JS and CSS files. Continue reading “Load JS & CSS Conditionally in Drupal 7”

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!