Connect With WRD
feed via e-mail
feed via e-mail

Archive for the ‘Browsing’ Category

PACE is a JavaScript library for adding good-looking loading bars to any website with ease.

There are multiple loading effects: YouTube-like, corner indicator, page fill and more.

PACE.js

It requires very less effort; simply insert the JavaScript file with the selected theme and PACE works automatically for page load and ajax requests.

The library doesn’t require any JS frameworks and can, optionally, be tweaked manually.

There are various jQuery-powered solutions for creating tabs quickly and easily.

Tabslet is another alternative for the task and has support for multiple handy features.

jQuery Tabs Plugin - Tabslet

It simply converts an unordered list into a tabbed interface and has callbacks on major events (when the tab is clicked or the tab content is loaded).

Also, tabs can be rotated automatically on given intervals and their content can be displayed with an animation.

  • Tags:
  • Filed under: Browsing, Goodies
  • 0 Comments
  • Vex is a JavaScript library for creating very good looking modal boxes.

    The library is standalone + lightweight (2kb minifed + gzipped) and comes with an easy-to-use API.

    JavaScript Dialogs - Vex

    It has smooth animations, a built-in CSS spinner and replaces alertconfirm, and prompt out of the box.

    Vex also works well on mobile browsers and its design can be customized quickly.

  • Tags:
  • Filed under: Browsing, Goodies, MIT License
  • 1 Comment
  • AnimateScroll is a simple jQuery plugin for adding easing effects to scrolling.

    It is possible to customize the style of scrolling (30+ scrolling effects) and scroll speed.

    AnimateScroll

    There is also a “padding” option where we can manipulate “the position where the scrolling ends”.

    The plugin is not limited to the full body of the page but a specific wrapper element can be targeted too.

    jInvertScroll is a jQuery plugin that manipulates the default scrolling behavior and forces a horizontal scroll.

    The plugin is lightweight (<1kb) and works with almost no setup. Adding  a specific class to wrapper elements and calling a JS function i senough.

    It also eases creating parallax effects with the onScroll callback where we can decide to animate any element.

    jInvertScroll

    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.

    Salvattore

    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).

    GridLayoutShock

    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.

    Uptime Robot
    feed-holder
    FeedBurner
    PSD2HTML.com