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.

“Responsive Iframes — The Right Way (CSS Only)!” was originally published on the 19th of March 2014, last updated July 24, 2018 to reflect emerging trends.

Responsive iframes are a cinch! Jump start using the responsive iframe CSS (using intrinsic ratios) shown below to make your iframe responsive. You’ll never ask ‘how to make iframe responsive’ again!

View Demo View Code

.iframe-container {
  overflow: hidden;
  padding-top: 56.25%;
  position: relative;
}

.iframe-container iframe {
   border: 0;
   height: 100%;
   left: 0;
   position: absolute;
   top: 0;
   width: 100%;
}

The responsive iframe CSS above demonstrates how to transform a normally fluid iframe into a responsive iframe. Just be sure to update the padding-top property to reflect the aspect ratio to make iframe responsive.

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

Pages: 12

Load JS & CSS Conditionally in Drupal 7

Quit loading every theme CSS and JavaScript file in Drupal 7 and learn how to load CSS & JS files based on conditionals like URLs, node types, modules, 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 — a how-NOT-to, use this instead.

Don’t do what I’ve seen countless devs do — attach JavaScript handlers to the window scroll event. There’s a better way, here’s Twitter’s solution.

I came across an article by John Resig, Learning from Twitter — it completely changed how I attach JavaScript handlers to scroll events. It’s a simple trick that will help boost performance and help keep your code object-orientated.

It’s a very, very, bad idea to attach handlers to the window scroll event.
John Resig, Learning from Twitter

Continue reading “Attaching JavaScript Handlers to Scroll Events — a how-NOT-to, use this instead.”