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

Archive for the ‘Browsing’ Category

We all know the iOS folder interface: “clicking a folder changing the opacity of other elements and displaying the contents inside a sliding element”.

App-Folders is a jQuery that mimics that behavior and works on both desktop + mobile browsers.

jQuery App Folders

Folders can include any HTML element (images, text, video ,etc.) and each folder gets its own URL that makes direct-linking possible.

The look/feel doesn’t have to be iOS-like but it can be themed completely for creating attractive layouts (check demo).

Alertify is a lightweight JavaScript library for displaying stylish notifications with ease.

The library doesn’t depend on any JS frameworks, can show notifications in a modal window and also feature growl-like messages.

Alertify - JavaScript Notifications

Notifications are unobtrusive and the outputs can be completely customized via CSS as custom classes can be attached to elements.

Callbacks exist for ok + cancel events to act accordingly and there is support for chaining to create queued dialogs.

 

There are many ways to serve each web element in responsive layouts.

For HTML tables, FooTable (a jQuery plugin) comes with a great approach without breaking the functionality and design.

The plugin auto-hides the selected columns on each breakpoint defined and users won’t need to scroll horizontally.

FooTable jQuery Plugin

What makes it better is that “the hidden columns can be viewed by simply clicking each row” so that it is still possible to navigate through the complete data.

It is applied very easily with the help of data-attributes and the plugin leaves an open gate for future enhancements as there is a plugin framework within.

Magnifying glass interfaces are pretty useful for enabling users to zoom in to images so that details can be viewed without loading a bigger version.

mlens, a tiny jQuery plugin (~1kb minified and gzipped), simplifies creating this magnifying glass functionality so much.

mlens jQuery zoom plugin

It comes with few parameters like the shape of the lens (circle or square), lens size and the options for customizing the border.

Multiple instances of it can be used in the same page and a WordPress plugin for it is being developed.

  • Tags:
  • Filed under: Browsing, Goodies, MIT License
  • 1 Comment
  • Sly is a jQuery plugin that offers item-based (like image/content galleries) scrolling with many useful options.

    Within a defined container element, items inside can be browsed with the help of a scroller or with the functions provided like next, nextPage, toStart, toEnd, 5 toStart, etc.

    Sly jQuery Plugin

    It features different navigation logics which can auto-position next items or keep the active item always in the center.

    There is support for infinite scrolling and it work both horizontally or vertically.

    The plugin is very handy to be used as a pagination, content or image gallery module.

    Today, many websites are being built with responsive layouts (which is great) that ease reading and browsing in multiple viewports.

    However, readers may still want to view the original layout even if they are browsing from a mobile/tablet,/etc. device considering this may ease reaching the info we need on some situations.

    Responsive Viewport

    ReView is a tiny JavaScript library that allows visitors to switch between the layouts on request.

    It analyses the initial viewport + meta tag if available and displays a link/button to the visitor for instantly switching to the other viewport with no refreshes, all JavaScript.

    The view preference is automatically stored via HTML5 sessionStorage and a plugin architecture exists for extending its features.

    Jarallax is a feature-rich JavaScript library for easily creating and customizing parallax scrolling effects.

    The library enables us to manipulate CSS using keyframes and it supports custom controllers.

    Jarallax

    These controllers, compared to time-based animations, allows us to decide the events that animations will react to (scrolling, mouse gestures, etc.).

    And, besides JavaScript animations, it can also use CSS-powered ones for a better performance.

    P.S. The library makes use of jQuery.

    Tooltipster is a jQuery plugin for quickly creating HTML5-validated and flexible tooltips.

    The plugin is small-in-size (4.8kb minified), works fast and can be customized with ease.

    Tooltipster

    Its look can be changed with CSS (theme support) and the position of the arrow, following the mouse, delay/period of the appearance can all be defined.

    Tooltips don't use any images and any HTML can be inserted into them. Also, it works well in all browsers (including IE).

    Gridster is an impressive jQuery plugin to develop iGoogle-like multi-column grids that can be drag 'n' dropped and re-ordered.

    The plugin only requires jQuery (no jQuery UI) and can convert any given HTML structure into the widgets of the grid.

    And, we are not limited with the elements loaded initially but can add and remove new ones dynamically.

    Gridster.js

    The number of columns/rows, margins between items and required styles being generated automatically can all be set.

    Also, there callbacks on every level and a .serialize command returns the positions of all the widgets anytime we want.

    The drag 'n'drop interactions of jQuery UI (draggable, droppable and sortable) are probably the most popular solutions out there.

    However, if you don't want to use jQuery UI just for this and would like to go with only a jQuery plugin, here it is: HTML5 Sortable.

    HTML5 Sortable

    This plugin uses the native HTML5 drag and drop API for creating sortable lists/grids and provides a similar API + behavior when compared to jQuery UI's sortable.

    It is lightweight (<1kb when minified/gzipped), supports "connected lists (moving items between different lists)" and works in all major browsers.

    Uptime Robot
    feed-holder
    FeedBurner
    PSD2HTML.com