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

Archive for the ‘Browsing’ Category

Smoke.js is a tiny JavaScript library that works as a replacement for the default alert function and offers more user-friendly notifications.

It works by simply adding "smoke." in front of the native alert, confirm and prompt functions but they are now displayed inline.

Notifications can be themed with CSS, they use CSS3 animations + backgrounds (no images are used). It is even possible to customize each alert by specifying styles inside the functions.

And, it doesn't require any JavaScript frameworks which is great for simple projects.

Smoke.js

jTable is a jQuery plugin for creating Ajaxed and feature-rich CRUD interfaces with little effort.

The plugin generates all the HTML required and uses jQuery UI for "add new/edit record" dialogs.

Records can be browsed with Ajaxed pagination and they can be sorted (server-side) as well.

jTable

jTable can be set to display sub-tables for a given record which is handy for listing any sub-details.

The interface is completely themable via CSS (there are already several themes) and the resource is very well-documented.

P.S. There are samples provided on using jTable with PHP and ASP.NET

When reading a long article on the web, we sometimes leave it in the middle to continue later (an e-mail arrives, door rings, etc.) and have difficulty on remembering the line we were at.

youRhere is a project, which is available as a jQuery plugin and Chrome extension, that brings a solution to this issue both for you and your readers.

youRhere jQuery Plugin

Once the jQuery version is installed on a web page, a marker follows the mouse besides each line and double clicking any line gets highlighted + stored with HTML5 localStorage. So, you can easily see the marked line anytime, even if you have closed and re-opened that URL.

The Chrome extension is for yourself to get the functionality on any web page without the need for the jQuery plugin being installed. It also offers a "social share" feature.

Chico UI is an open source and free set of user interface components to ease developing with jQuery.

The components include auto-complete, blink, calendar, carousel, countdown, date-picker, dropdown, expando, form and more.

There is a CSS layout framework named Chico Mesh for accomplishing any type of web layouts and grids.

Chico UI

Also, a CSS library exists for styling HTML and UI elements like lists, tables, buttons, typography, pagination.etc..

Each Chico UI resource is well-documented + supported with demos and various tutorials exist for more details.

PageScroller is a slick jQuery plugin for scrolling web pages nicely and smoothly.

It is a very flexible plugin, can integrate into any page easily and auto-create a navigation that sits in the sidebars or at the top.

Clicking each navigation item ends up in a scrolling that gets the user to the related section.

PageScroller

The plugin can also display top and bottom arrows for browsing through the sections one-by-one.

There are several customization option including the scrolling speed, offset and callbacks.

For data-driven web applications, we usually create an admin interface for managing this data where many parts of it are actually about listing records within a grid.

GroceryCrud is a CodeIgniter-powered resource that can auto-generate a fully-functional create/read/update/delete interface very quickly.

Once it is integrated into a CodeIgniter installation, a new grid with CRUD features can be created with only a few lines of code and it can have pagination, sorting + search, all with Ajax.

GroceryCrud

The generated data-entry forms can have both server-side and client-side validation where custom rules can be integrated easily.

It is possible to only use the desired columns and there are callbacks almost everywhere for further customizations.

noty is a jQuery plugin for creating user-friendly, "JavaScript-alert alternative" notifications very easily.

It has built-in support for alert, success, error and confirmation messages and they can either be displayed as HTML elements that fade in/out or as modal boxes.

noty jQuery Plugin

The notifications can be displayed on any part of a web page (top, bottom, center, top left or top right) and many options exist for customization (speed of open/close animations, display duration, being closeable or not and more).

Each notification is displayed from a queue in an order which is nice for making sure each item is shown.

There are various callbacks provided and an online editor exists for customizing the notifications.

Tooltips are tiny user interface elements which are very useful in displaying information "on request" without breaking the attention/focus.

WRD had previously featured qTip and it now has a new version, qTip2, with lots of improvements and new, exciting features.

qTip2 - jQuery Tooltip Plugin

The plugin can display the tooltip in any position wanted, plays nicely with image maps and they can be set to follow any element (handy for drag 'n' dropped and animated items) or mouse.

Tooltips can be styled completely, there is an optional Themeroller support and they can even be displayed as modal windows.

It has built-in Ajax integration and can load any remote data. qTip2's website has lots of creative demos including 3rd part service and various popular plugin integrations.

P.S. The download package can be customized to şnclude only the features needed and a converter exists for upgrading from the 1st version.

Tree menus are great for displaying nested data in a user-friendly and easy-to-browse interface.

jOrgChart is a jQuery plugin which converts nested unordered lists into tree menus but with an organization chart-like output.

jQuery Organization Chart Plugin

It has support for any depth, clicking each item can show/hide the sub-levels and drag 'n' dropping elements from one node to another is possible, the interface will adjust the levels accordingly.

There is no limit in the contents to be used inside each item, any HTML elements are supported (except  <ul> and <li>) and the plugin is so handy for visualizing hierarchical data (org. chart, family tree, computer network, etc.).

In order to save space and display the content only when requested, expanding/collapsing panels are used widely.

Using jQuery, such a functionality is very easy to implement with methods like toggle, show, hide and several others.

jQuery-Collapse is an ultra-lightweight (<1kb minified) plugin built specifically for this case with added features.

jQuery Collapse Plugin

It allows us to define the HTML elements to be hidden and displayed when needed with a simple function that has callbacks for integrating custom events.

There is also cookie support which remembers the state of the content panels and displays them accordingly when the page is re-visited.

The plugin is also designed with WAI-ARIA in mind that helps the web pages being more accessible to people with disabilities.

And, it is also cross-browser, completely tested in major browsers (including IE6).

Uptime Robot
feed-holder
FeedBurner
HotScripts Marketplace
PSD2HTML.com