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

Posts Tagged ‘Javascript’

Vanity Toolset is a set of jQuery plugins, created by Enavu (developers of 52framework), to simplify many common tasks of front-end UI development.

The toolset currently includes 7 plugins: jSlider, jTabs, jPaginate, jSpotlight, jTip, jPlaceholder, and jCollapse where new ones will be added regularly.

Vanity jQuery

They are all built with simplicity in mind, nothing complicated and have small sizes.

Plugins are very well-documented, all have demos and they work cross-browser.

Backbone.Notifier is a powerful and flexible framework for displaying and controlling UI notifications.

It is built on top of jQuery, Backbone.js + Underscore.js and has many cool features like a 3D module or animations support.

Bacbone.Notifier

The notifications can be displayed on the top or in the middle, modal notifications exist and it is possible to set custom styles via CSS + JS API.

Messages can be timed to be shown or hidden as wished, an integrated loader exists and there are pre-defined styles: default, info, error, warning and success.

X-Tag is a tiny JavaScript library for creating custom HTML elements which can have totally custom functionalities.

The library is based on the W3C Web Components draft and it is built/supported by Mozilla.

X-Tag

As an example, we can create an HTML element named "accordion" and, using JavaScript, customize it to convert its contents to an accordion. As a result, whenever we use <accordion></accordion>, the contents will be presented as an accordion.

The things that can be created with the library is totally up to our imagination (like a tabbox, tree, special input, slider, navigation, etc.).

jQuery is by far the most popular JavaScript library and it simplifies many JavaScript related tasks so much.

However, as expected, it can't handle everything but targets the most common tasks. And, sometimes, we need that missing pieces.

jQuery++ is a set of DOM helpers and special events which fills a part of this gap. It is not a UI library (like jQuery Tools) but only low-level DOM-utilities.

jQuery Plus Plus

Some of the plugins included are; a modified .animate (which uses CSS animations when possible) .cookie or .formParams (which serializes form data). And, there are events for drag, drop, swipe and much more.

It is possible to use each plugin one-by-one or a custom-download-generator helps packing only the selected ones into a single file.

Chronoline.js is a JavaScript library for creating a chronological timeline of events.

The timeline is is displayed horizontally, events placed on it can be any days long and details about the events are shown in a tooltip when hovered.

Chronoline.js

It can feature the timeline with any number of days (day-by-day, weekly, quarterly, month-by-month, etc.).

The library uses Raphael.js + jQuery and works only in modern browsers.

Redactor is a JavaScript-powered (jQuery) WYSIWYG editor with a clean and good-looking interface.

It auto-converts textarea fields into an editor and the editor is capable of all the major actions (text-styling, adding image/file/video/tables/lists).

The uploading of files and images makes use of HTML5 APIs and they can be uploaded via drag 'n' drops besides selecting files.

Redactor - jQuery WYSIWYG Editor

Redactor can work inline or fullscreen, there are many settings to customize it and it is multilingual (already supports many languages).

P.S. The website of the resource is half English and half Russian but it is coded in English and demos + docs help understanding how it works.

You'll remember Scrollorama, the popular jQuery plugin for creating chic scrolling effects.

There is now a superior version named SuperScrollorama by the same developer which offers more and complicated animations.

It makes use of the feature-rich TweenMax and the Greensock Tweening Engine (make sure you check its license before using) for accomplishing the effects.

SuperScrollorama

Similar to an animation app, it allows us to add tweens and timelines to it, targeting when an element appears in the viewport or at a specific scroll point.

The website of the resource shows its flexibility and there is a short-yet-enough documentation provided.

Improving (manipulating) standard HTML elements with JavaScript for a better usability makes sense when used wisely.

ddSlick, a lightweight jQuery plugin, does that by mimicking the behavior of list-menus with a better look and more information.

It works as a drop-down menu where we can use images and description besides a simple text.

ddSlick jQuery Plugin

The data source that populates the drop-down options is JSON and there are multiple options for customizing the functionality. The look & feel can be changed as well (very few styles used).

There is also a callback function that is fired when an option is selected (which is good for auto-modifying a hidden form for a possible submit, etc.).

WYSIHTML5 is an open source rich text editor, developed by Xing, that produces non-bloated, valid HTML5 code.

The editor doesn't rely on any JS framework,  it is lightweight and loads/works pretty fast.

It transforms textarea fields and provides the major stuff including text styles (bold, italic), lists, headers, inserting images or links and coloring the text.

WYSIHTML5

There is speech-input (which is only displayed in Chrome) and HTML source code can be viewed with a click.

WYSIHTML5 speeds up the writing process by auto-linking the URLs and offers a secure usage by using sandboxed iframes in order to prevent identity theft through XSS.

Today, using JavaScript frameworks, it is so easy to accomplish complex stuff with few lines of code, including Ajax.

For forms, if you want to make it much easier, ALAJAX is there for you. It is a jQuery plugin that automagically converts standard forms into Ajaxed ones, no coding required.

jQuery Alajax

Once inserted and the forms are defined, It blocks the default POST functionality, analyzes the input types used and sends them as an Ajax request.

Its code is well commented and leaves space for further customizations (extra actions to be taken before/after submitting).

Uptime Robot
feed-holder
FeedBurner
PSD2HTML.com