November 18, 2014

Proportionally Scale or Crop Images Using CSS

How do you resize an image so that it fits inside a fixed size container while maintaining its aspect ratio? The apparent solution is to set the image width, height, min-width and/or min-height to 100% or auto. However, this solution is not generic enough to handle images with varying aspect ratios properly. Here is an example:

Proportionally Resized Images

May 3, 2014

Google Maps Asynchronous Loading

While working on a project that uses Google Maps API, I noticed the following problems:

  1. The content below Google maps appeared after a slight delay
  2. Google PageSpeed Insights kept telling me to "eliminate render-blocking JavaScript and CSS in above-the-fold content"
  3. The maps did not load when the page was loaded via AJAX
  4. The maps did not work in jQuery Mobile

All of these problems were caused because I was loading the Google Maps API synchronously. Let me explain. Almost all Google Maps API examples tell you to do this:

April 22, 2014

StackOverflow Like Pagination

Some while ago, I built a pagination system in PHP to display a long list of pagination links. The pagination system showed at most 5 links at a time and additional links were represented by ellipsis (...). However, I was not able to deal with certain edge cases, so I drew some inspiration from the pagination system used on StackOverflow to tackle them. This is what the end result looked like:

Pagination using ellipsis

March 29, 2014

jQuery UI Datepicker for jQuery Mobile

Can you guess which datepicker is this?

jQuery UI Datepicker for Mobile

It is the jQuery UI datepicker tweaked for jQuery Mobile!

March 9, 2014

CSS nth-child Selector Pwned

The CSS3 :nth-child() selector pseudo-class allows you to select elements based on their position in the set of children of their parent. It accepts an argument in the form of an + b. How exactly does it work? Let me explain.

In very simple words, the expression an + b matches every ath element in the set starting from the bth element keeping in mind that (i) the index numbering starts at 1 (ii) zero and negative values do not represent any element (iii) text and non-element nodes are not counted. The following corollaries exist:

December 2, 2013

5 jQuery UI Autocomplete Examples

The jQuery UI Autocomplete widget enables users to quickly find and select from a list of values as they type. If you find the jQuery UI Autocomplete demos and documentation too daunting, here are some examples with explanation to get you started.

  1. Using Label-Value Pairs
  2. Add CSS Class to the Dropdown
  3. Load Data via AJAX
  4. Highlight Matched Text
  5. Custom HTML in Dropdown

October 31, 2013

Google Analytics Visitors' Screen Resolutions Report

Earlier when I decided to redesign my blog I asked myself this question: what screen size should I design for? I answered myself by looking at the visitor data collected by Google Analytics. Even though I decided to go for a responsive design, a screen resolution report provided my with some interesting insights. For example I inferred that more than 75% of my visitors would be able to see the newly introduced 970x90px large leaderboard AdSense ads.

August 1, 2013

Fast-Start Enabled Videos with FFMpeg

MPEG 4 is the most dominant video format for the web, which is supported on a variety of platforms and devices. And FFmpeg is the most popular software for encoding videos. While there are tons of articles about encoding MPEG 4 videos with FFmpeg, most of them fail to warn you about something: most video players will not start the playback until the whole video is downloaded. This could be annoying, especially for large videos.

May 1, 2013

5 jQuery UI Dialog Examples

The jQuery UI library provides effects, utilities, and themeable widgets that can add interactivity to your webpage. The Dialog widget is a part of jQuery UI; it allows you to display content inside a floating window which has a title bar, content area, button bar, drag handle and close button; and it can be moved, resized and closed. The following examples demonstrate some advance uses of the dialog widget.

  1. Modal Dialog with Buttons
  2. Open Dialog on Click
  3. Hide the Close Button/Title Bar
  4. Change Dialog Position
  5. Load Content via AJAX
  6. Size to Fit Content

April 29, 2013

Printing Wide HTML Tables

I built a report using HTML table that had more than two dozen columns. In fact, it was a matrix report where the number of rows and columns could grow indefinitely. The report looked perfect on the screen. However, upon printing, the browsers would print only the left portion of the table while the portion which does not fit on the page horizontally is discarded.

I was not able to find a solution so I made a half-hearted attempt at this. My "solution":

  • Create a fixed width div with hidden overflow
  • Place a copy of the table inside this div
  • Scroll the desired portion of the table into view using CSS positioning
  • Repeat as many times necessary