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

Posts Tagged ‘Javascript’

LionBars is a jQuery plugin for creating OSX-style, custom scrollbars for any web page.

The scrollbars created looks the same in all browsers under each OS and they don't hurt the usability by not shrinking the content or with the auto-hide option.

It has support for endless scrolling (check related WRD tutorial) and can fire functions when the scrollbar reaches to the end.

LionBars

Fiddle Salad is a fresh web development tool, an online IDE, for client-side web applications.

It allows us to write HTML, CSS, JavaScript code or use alternatives like HAML,Zen Coding, SASS, LESS and more.

All the code is written in a single-page interface and the output is displayed/rendered instantly.

Fiddle Salad

There is built-in code completion support for CSS + jQuery and links to the documentation for the properties of each language.

With a free membership, it is possible to create any number of projects and save them for re-working on them without losing any settings or data.

Rhinoslider is a very flexible jQuery slider plugin that can present any HTML element (text, images, videos, etc.).

The plugin comes with lots of transition effects and new effects or styles can be added with ease -thanks to its extensible architecture-.

It has options for every possible variable from the customization of the effects to auto-play, play direction, random display and navigation.

Rhinoslider

There is a web-based configurator that allows defining these values while seeing the output quickly. And, it generates the related jQuery code automatically.

Rhinoslider also has a full-featured API for controlling the functionality and customizing it further.

In order to HTML5-enable older browsers or to create a fallback for unsupported features, it is very common to use polyfills (like using a Flash video player if there is no HTML5 video support).

Webshims Lib is a JavaScript library that automates the process of loading polyfills by detecting the capabilities of a browser with Modernizr.

Webshims Lib

It already includes many polyfills like JW Player for audio-video fallback, ExCanvas for canvas support and more. Also, it is modular which means new pollyfills can be added with ease.

The library is very helpful to keep the page sizes small by only loading the required polyfills for incapable browsers.

There are several code syntax highlighters and most of them handle the job well.

For a very lightweight solution, Rainbow is a fresh one which is only 1.4kb and can be extended with ease.

It is only needed to use the JS module for the language to be highlighted for keeping things small.

Also, the colors and fonts used can be completely customized with CSS theming support.

Rainbox Syntax Highlighter

 

Timeline is a JavaScript-powered tool for creating interactive storytelling timelines where a timeline works in parallel with a content slider.

Users can choose to browse the contents either by clicking the items in the timeline or by navigating through the content slider where both stays synchronized all the time.

Timeline

Items are listed in chronological order, we can go back and forth through the timeline with drag 'n drops and it is possible to expand/contact it.

It can use JSON data or Google Spreadsheets as the data source and there is built-in support for pulling content from services like Twitter, YouTube, Flickr, Vimeo, Google Maps and SoundCloud.

Sigma.js is an open-source JavaScript library with a small footprint for drawing graphs using HTML5 canvas.

It is built for to consuming static or dynamic but interactive network maps with unlimited nodes on a web page.

Sigma.js

The library is standalone, can be extended with plugins (GEFX parser and ForceAtlas2 layout algorithm are included as plugins) and offers jQuery-like chainable methods.

There are a lot of variables for customizing each instance and various examples exist that show the capabilities of Sigma.js.

Hammer.js is a JavaScript library for adding touch gestures support to any website so that users can interact with them easier on touch devices.

It requires jQuery, only 2kb sized and supports tap, double tap, hold, drag and transform.

Hammer.js

The library is implemented pretty easily:

  • just bind Hammer.js to a container HTML element
  • every touch event performed on that element returns a callback with an array of details including:
    • event
    • position
    • touches
    • scale
    • rotation

For drag gestures, it can also return extra info like the angle, direction and distance.

Hammer.js works -almost- on all modern browsers and, to sum up, "you can touch this" : ).

Blur.js is a flexible jQuery plugin for implementing blur effect to any web element.

It actually works by creating and placing psuedo-transparent blurred elements over the targeted ones and makes use of the StackBlur algorithm.

Blur.js

The source of the blurred item (it can use the background of body or other HTML elements), radius of the effect and it is positioning can be defined with ease.

There is built-in caching for re-using the blurred image and there is support for making the item where the effect is applied to be draggable (requreis jQuery UI).

HTML Canvas Library is a lightweight and standalone JavaScript wrapper for the native canvas element to simplify creating animations and visualizations.

It has easy-to-use and consistent methods that are capable of handling tasks like:

  • animations with framerate control
  • cross-browser keyboard, mouse and multitouch event capture
  • layers support for high-performance animations
  • nine-point quick aligning support
  • simple rotations
  • built-in image loading

The library is documented well and there are lots of examples provided (including interfacing the Box2D-JS physics library).

HTML Canvas Library

Uptime Robot
feed-holder
FeedBurner
PSD2HTML.com