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

Posts Tagged ‘Javascript’

When working on a new web project, during the HTML coding process, using Lorem Ipsum as filler content is a common approach (yet, there great Lorem Ipsum alternatives).

Fixie.js is a simple JavaScript library (with no JS framework dependencies) that automatically analyzes your semantic HTML5 tags and adds the right type of content inside the related elements.

It is not limited to simple text but can also add links, sections and images. Just add the fixie class to the element you wish and the matching dummy content will be displayed there.

Fixie.js

JQVMap is a jQuery plugin for rendering vector maps by using SVG for modern browsers and VML for the rest.

It is a heavily modified version of another plugin, jVectorMap, and comes with ready-to-use maps of "world, USA, Europe and Germany".

There are several customization options for beautifying the maps including colors, borders or their opacities.

jQuery JQVMAp

Maps can have zooming enabled or not, show tooltips of data when hovered and there is callback for clicks.

Also, it is possible to select any regions on initial load or after any custom event.

jQuery Knob is a lightweight jQuery plugin for creating good-looking circular switches (like the "volume controls" in radios).

It works by transforming any given input fields according to the values defined in its attributes and can be drag 'n' dropped to change the value.

jQuery Knob Control

We can define the min-max values, default value on initial load, color and put it into "read-only" mode (which is also good for using it as a visualization component).

There are no documents for the plugin but things are very straightforward and checking the source code of the demo is pretty enough to learn its logic.

minjs is a collection of independent components, built on jQuery, that aims to accomplish a specific job with lightweight code.

Currently, there are 3 components: minform, longtable and dtcal.

minjs

minform brings cross-browser compatibility to HTML5 form enhancements (for attributes: placeholder, required and autofocus).

longtable is for easily navigating through tables with many rows. It adds a pagination and offers functions to directly viewing any given page.

And, drcal, a simple calendar framework that looks and behaves how you wish. There are several functions for interacting with it.

CreateJS is a collection of multiple JavaScript libraries which can work independently or together for creating HTML5-powered, interactive experiences.

Currently, it consists of 4 libraries:

  • EaselJS – for working with HTML5 canvas
  • TweenJS – a tweening and animation library
  • AudioJS – a cross-browser and consistent audio API
  • PreloadJS – to manage the loading of assets

CreateJS

And, there is an Adobe AIR app named Zoë which is an open source tool for generating spritesheet images and frame data from SWF files.

They can be downloaded and requested from our websites or a free CDN is provided for faster/easier usage.

Real Shadow is a simple-yet-effective jQuery plugin for creating realistic shadow effects for any HTML element.

With a simple function, it works by targeting any number of elements and manipulating the value of box-shadow CSS property for the elements in accordance with the mouse position.

jQuery Real Shadow Plugin

So, the shadow's location and size is determined by the element's distance to the mouse pointer which ends up in a cool effect.

Like said, the plugin accomplishes a simple job but can help creating attractive outputs when used smartly.

Cubism.js is a plugin for D3.js, a JavaScript visualization library for HTML and SVG, to display time series in real-time.

It requests the data incrementally by polling only the most recent values and reduces the load on the server.

Charts are rendered incrementally as well by shifting charts one pixel each time to the left.

Cubism is data-source agnostic. It has built-in support for Graphite and Cube, and can be readily extended to fetch data from other sources.

Cubism.js

Parallax scrolling, creating an illusion of depth by moving web elements in different speeds while scrolling, can help offering an attractive browsing experience.

Skrollr is a lightweight (7kb minified – 3k gzipped) and standalone JavaScript scrolling animation library that simplifies bringing such parallax effects to life.

Skrollr

It allows us to animate the CSS properties of any element according to the horizontal scrollbar position. Defining key frames for each element at certain points in top offset is enough for that.

And, the library is perfect for designers who are not good at JavaScript as -almost- everything is defined inside HTML elements and no JS coding.

jPages is a client-side pagination script (a jQuery plugin) with features like keyboard + scroll navigation, auto page turn, delayed display and a customizable navigation panel.

Any number of pagination elements can be inserted into the same page and they can be positioned with ease.

jPages - jQuery Pagination Plugin

The plugin detects the number of items in a given list and auto-creates the navigation.

Callbacks exist to get the current page, total number of pages, number of items, etc. and it is possible to intervene the page number to be displayed using an API method.

P.S. There is an optional integration with the popular scripts Animate.css and Lazy Load for a more attractive and faster pagination experience

With the regularly increasing number of retina-screen devices browsing web pages each day, we may want to display images with better quality to such devices.

Here are 3 easy-to-use solutions for serving high resolution images to retina-display devices:

Retina Images

Retina Images

Retina Images is a JavaScript/PHP solution which stores the devicePixelRatio in a cookie and displays the high-res version of images (if exists) by checking whether that cookie's value is 1 or not (if 1, then the device has a retina screen).

With a simple setup, it works on images that defined in both CSS and HTML.

Retina.js

Retina.js

This open source script checks for every image on the web page to find out if there is any high-res version hosted on the server.

If such an image exists, it swaps that with the original one.

P.S. For the high-res images, It looks for the Apple's prescribed high-resolution modifier (@2x) version.

jQuery Retina Display Plugin

jQuery Retin aDisplay Plugin

This jQuery plugin also follows Apple's prescribed high-resolution modifier (@2x) format, searches for the high-res versions and replaces them with the original one if exists.

It is a plug 'n' play solution, nothing to edit (just add the high-res versions of the images to the same folder with other images).

Uptime Robot
feed-holder
FeedBurner
PSD2HTML.com