April 22, 2014

StackOverflow Like Pagination

Some while ago, I built a pagination system 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:

January 31, 2014

Set Cache Header for Files Hosted on Google Code SVN

If you serve HTML, JavaScript, CSS and images from Google code using Subversion VCS, it might be a good idea to optimize HTTP caching by setting a longer expiry date. By default the server sets an expiry date of 3 minutes. It is possible to change this value by setting the google-cache-control:max-age subversion property on selected files (value specified in seconds). To specify a longer expiry date on files that do not change often, set this property to a higher value, e.g. 604800 (= one week). This allows the files to be saved or cached by a browser or proxy for a longer duration. To disable caching altogether set this property to 0.

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.