Archive for the ‘Browsing’ Category

There are many different solutions for creating Pinterest-like, dynamic-column layouts.

Salvattore is another good one that comes with an important difference: it is not configured in JavaScript but in CSS.

It is again a JavaScript-powered solution but doesn’t require any frameworks.


The number of columns are mentioned in CSS and it is pretty easy to define different numbers for different devices using @media queries.

And, Salvattore works on almost all modern browsers (IE9+).

Dable is a JavaScript library for improving the functionality of standard HTML tables.

The library is capable of adding filtering, sorting and paging features to any table (or, table-like views can be generated from JavaScript arrays).

It is standalone, cross-browser compatible and can be styled (already has multiple themes -including Bootstrap-.

Dable - JavaScript Table Controls

For Ajax-heavy sites and apps, informing users about the status of a progress is a good idea so that they know “things are ok and must wait some more”.

Rather than placing a loading indicator beside each action in our HTML code, a site-wide indicator is a smarter choice.

NProgress and Skylo jQuery Progress Bar Plugins

NProgress and Skylo are 2 different jQuery plugins for creating YouTube-like thin progress bars that are positioned just under the browser toolbar.

Both plugins have functions to start, re-position, end or get the position of the bars.

While NProgress is suitable for any website, Skylo is focused on Bootstrap-powered sites and has multiple themes for the bars.

Pinterest-like responsive grid layouts became one of the standard ways to present “lots of content” in an organized way.

For anyone willing to use such layouts on any web project, Grid Layout Shock is one of the easiest yet feature-rich solutions out there. And, they are giving away 5 Developers licenses to WRD readers (details at the bottom).


It is available in 2 versions:

  • WordPress plugin
  • jQuery plugin

which makes the usage for almost any type of website so quick and painless.

They are both responsive, have multiple styles and can be customized in means of look/feel.

The WordPress plugin integrates with the site completely as it can pull the content from posts, custom post types, taxonomies, galleries and portfolios (both versions can get the data from RSS).

GridLayoutShock Sample

Using the shortcode generated in the plugin’s settings page, it can be added anywhere inside pages, posts and widgets. Or, the whole site can be displayed with a responsive grid template.

Also, the number of the posts, their order or dimensions can all be set.

Grid Layout Shock has both free (with limited features) and paid versions. Make sure you check them all.

How to join the giveaway?

5 Developer licenses ($99/each) are being given away. In order to join you can choose one or both of the actions to increase the chances:

The winners will be selected randomly and announced a week later (26 August 2013).

Good luck to all.

The winners

Here they are:

  • pete (comment #1271135)
  • Farhan (comment #1271164)
  • @AhmetCAKIR
  • Ashmita Dobariya (comment #1271411)
  • Paula (comment #1271493)

Congratulations and thanks very much everyone for joining.

We use sticky elements in web pages a lot to improve navigation, the display of ads and more.

Sticky-Kit is a very handy jQuery plugin that simplifies creating/managing such sticky elements and comes with features for complex use.

Stick-Kit jQuery Plugin

These features include “the handling of multiple stick elements”, “enabling/disabling the behavior depending on elements’s position in viewport” and callbacks.

It also has a function for recalculating the dimensions and elements which eases the usage on browser resizes.