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

Archive for the ‘Browsing’ Category

Tabs are used widely to present lots of content in a limited space and they help the user to browse without scrolling.

Tabulous.js is a lightweight jQuery plugin that simplifies creating them with a plain HTML structure.

Tabulous.js

The tabs created can be styled with CSS and multiple switching effects exist (slide, scale, scale up and flip).

It has no complicated features, just the tabs, its effect and that’s all as, sometimes, that’s all we need.

  • Tags:
  • Filed under: Browsing, Goodies, MIT License
  • 1 Comment
  • Tipue, a web development studio in London, has created and sharing 2 nice jQuery plugins for a good site-search experience.

    The first of them is “Tipue Search” which is an easy way to create a full site search for any website.

    It has options to compare the keyword either with a JSON data or dynamically from the content of any number of given URLs. Once setup, there the page for the “search results” is ready too.

    Tipue Search

    And, there is “Tipue Drop” which is a “search suggestion box” which displays suggestions while typing in a good-lloking and responsive interface.

    As expected, both plugins can work side-by-side or separately and they are documented well.

    There are various JavaScript-powered solutions for creating dynamic-column grid layouts (like Pinterest).

    Although most of them are great, sometimes, the grids contain gaps or ragged edges.

    Mason.js is a jQuery plugin that aims to perfect such grids by filling those gaps smartly.

    Mason.js

    One the grid is created, the plugin calculates where those gaps exist and fills them with either predefined elements or by duplicating the content in the grid.

    It is possible to define the sizes to be used for elements, the size of columns/rows, breakpoints and if the layout will be fluid or fixed.

    Pop Easy is a jQuery plugin for quickly creating completely customizable modals.

    The plugin is lightweight (2kb) and has support for displaying any HTML element, including videos.

    Regarding the design, the default modal already has a good-looking interface and it can be changed/improved with CSS.

    jQuery Modal Box Plugin - Pop Easy

    There are options for customizing the animation used when the modal appears, its speed, the opacity, if it’ll be opened onLoad and more.

    Considering the size, the plugin is very useful. One thing seems to be missing for now is the built-in ability to load remote data (Ajax).

    Windows is a lightweight jQuery plugin for nicely scrolling the full-screen.

    It provides a simple and handy API for managing the page/content position to ease the browsing experience.

    The plugin can analyze if a defined content is in the viewport, how much of it is in the viewport and can trigger any actions like focusing the page to the content by scrolling it.

    Windows - jQuery Plugin

    It is so good that the web gets more and more lightweight with the use of modern web technologies.

    Few days ago, WRD had shared the pure CSS gallery and now CSS Modal, a solution to create modal boxes with CSS.

    CSS Modal

    They can be used to display any HTML content and designed to work in responsive layouts.

    JavaScript is used only for improving the experience (Esc key support, firing events..) and it is also available as a SASS plugin.

    There are various jQuery plugins for filtering and sorting elements where the most popular ones are Isotope and Quicksand.

    MixItUp is another great plugin to handle such tasks that deserves to be bookmarked.

    While jQuery part decides which elements to show or hide, CSS3 transitions are used for animating them.

    jQuery Filtering Plugin - MixItUp

    The plugin plays nice with responsive + fluid layouts it is lightweight and works pretty fast.

    There are many options for customization: effects, easing, their speed, etc. and it is very well-documented.

    There are various jQuery plugins for creating Pinterest-like dynamic grid layouts.

    jQuery.Shapeshift is a strong alternative to them with an an extra touch: the items can be drag ‘n’ dropped (uses jQuery UI).

    jQuery Shapeshift Plugin

    The drag ‘n’ drop doesn’t effect the grid negatively as the grid auto-fills the gaps when needed.

    It also works on touch devices and responsive layouts.

    The plugin comes with lots of options to set the margins, enable/disable drag-drops, customize animation and much more.

    It is always hard to guess how users browse + how they perceive the content and flow of a website or web app.

    There are tools to analyze these as much as possible and, using  methods like A/B testing, improving the usability is always possible.

    However, it is always a great idea to guide users whenever they want. Nothing to lose on that for sure.

    There are awesome jQuery plugins that ease guiding users and creating site/page tours for them. They are stylish, customizable and simple to use. Check them out:

    Intro.js

    Intro.js jQuery Plugin

    A lightweight plugin that uses data attributes and has keyboard navigation support.

    It focuses on objects beautifully and pretty easy-to-setup.

    aSimpleTour

    aSimpleTour jQuery Plugin

    aSimpleTour uses a JSON data for all the configuration and content.

    While a floating box helps managing the tour, tooltips (that can be positioned however wanted) help focusing on the elements.

    Pageguide.js

    Pageguide jQuery Plugin

    Pageguide.js offers a very slick way to provide site tours.

    The steps are highlighted beautifully and a sticky footer/header allows navigating through them while providing extra info about each step.
    Read the rest of this entry »

    There can be times where we may want to inform/guide users regarding the details/functions of the HTML elements on the page.

    Chardin.js is a jQuery plugin which does that in a very chic way (inspired from the recent Gmail new composer tour).

    Chardin.js

    It uses the information mentioned in “custom data attributes” of the given elements.

    And, once triggered, it activates an overlay that focuses on the element and displays the info with visual guides (that can be positioned however wanted).

    Uptime Robot
    feed-holder
    FeedBurner
    PSD2HTML.com