JavaScript Blog Posts

Capture Keyboard Input with Keypress JS Library

26 August 2014
1151 Views

Keypress is a robust Javascript library for capturing keyboard input. It’s an input capture library with some very special features, it is easy to pick up and use, has a reasonable footprint (~9kb), and has no dependencies.

Some keys have unreliable support and should mostly be avoided. Print, Scroll Lock, Pause/Break, and Insert have unreliable keyup or keydown firing in Windows or OS X, so I suggest avoiding them, although Keypress does still allow them.

Capture Keyboard Input with Keypress JS Library

FullPage.js Plugin for Fullscreen Scrolling Websites

26 August 2014
900 Views

FullPage.js is a simple and easy to use plugin to create fullscreen scrolling websites (also known as single page websites). It allows to create fullscren scrolling websites as well as adding some landscape sliders inside the sections of the site. It is designed to fit to different screen sizes as well as tablet and mobile devices.
FullPage.js Plugin for Fullscreen Scrolling Websites


Collaboration Made Easy with TogetherJS Library

26 August 2014
850 Views

TogetherJS is a free, open source Javascript library by Mozilla that adds collaboration features and tools to your website. By adding TogetherJS to your site, your users can help each other out on a website in real time.

TogetherJS is implemented in Javascript; no software or plugins to install, and it’s friendly with existing web pages, while still letting developers customize the experience. TogetherJS is built and hosted by Mozilla, so you know it’s safe to use.

Collaboration Made Easy with TogetherJS Library

A Friendly Way of Displaying Time Updates to Users

26 August 2014
841 Views

TidyTime.js is a jQuery plugin, that provides a more friendly way of displaying time updates to users. It takes any regular time and changes it into more human friendly dialogue such as “It’s just gone noon. It’s quarter past 8 in the evening, it’s nearly half past 4 in the afternoon, it’s just gone 25 to 6″ and more.

By adding additional text before and after the time you are able to create powerful friendly interaction with users. TidyTime.js works best with dynamic websites and apps and can be used as a stand alone clock as well.

A Friendly Way of Displaying Time Updates to Users

Enhances Credit Card Inputs with Skeuocard.js

22 August 2014
908 Views

Skeuocard progressively enhances credit card inputs to provide a skeuomorphic interface. To begin, simply enter any valid card number. When you begin entering your card number, Skeuocard attempts to match it to an accepted card type. Once it is able to do so, it modifies the layout of the card to match the card product (Visa, MasterCard, etc) and makes any tweaks specific to the issuer.

As you enter your information, Skeuocard modifies the underlying form values from your original, non-enhanced form. It also validates each field to find simple user mistakes and missing fields.

If the card product has fields on both sides of the card (for example, placing the CVC code on the back) the user will be prompted to flip the card to fill in the remaining fields.

Enhances Credit Card Inputs with Skeuocard.js

Create Tooltip-Style Toolbars for Web Apps with Toolbar.js

22 August 2014
832 Views

Toolbar.js allows you to quickly create tooltip style toolbars for use in web applications and websites. The toolbar is easily customisable using the twitter bootstrap icons and provides flexability around the toolbars display and number of icons.

Toolbars can be attached to any element required. You can run as many toolbars as required. Toolbars are responsive and follow the element on resize. The implementation is pretty straightforward with simple options. It is released under MIT License.

Create Tooltip-Style Toolbars for Web Apps with Toolbar.js

Opentip: A Free JavaScript Tooltip Class

22 August 2014
826 Views

Opentip is a free opensource Java-Script tooltip class. There are great styles built right into opentip and it’s easy to create your own. Opentips can automatically download their contents via AJAX. It’s extremely easy to configure them to do so.

Joints and targets allow you to position the tooltip exactly where you want it. Stems are those little pointers. You can configure them to point in any direction. Opentips are drawn on canvas which creates beautifully rendered tooltips in all browsers. Opentip has been developed for and tested in all major browser, including IE7+.

Opentip: A Free JavaScript Tooltip Class

Breeze Helps You Manage Data in Rich Client Apps

22 August 2014
777 Views

Breeze is a JavaScript library that helps you manage data in rich client applications. If you store data in a relational database, query and save those data as complex object graphs, and share these graphs across multiple screens of your JavaScript client, Breeze is for you.

Business data objects mirror your server-side model. Breeze creates them dynamically. Their properties bind to UI controls so the UI updates when your data model changes. Each object knows when it has changed and what has changed.

Breeze works out-of-the-box with all modern browsers on desktop and mobile devices. These browsers implement the current JavaScript standard, known as ECMAScript 5 (ES5), which Breeze uses internally. Breeze is free and open source through the MIT license.

Breeze Helps You Manage Data in Rich Client Apps

Open Source Drag & Drop File Uploads with Dropzone.js

22 August 2014
1709 Views

Dropzone.js is an open source library that provides drag’n’drop file uploads by simply including a java-script file. It views previews of images and you can register to different events to control how and which files are uploaded.

It supports Chrome 7+, Firefox 4+, IE 10+, Opera 12+ and Safari 5+. For all the other browsers, dropzone provides an oldschool file input fallback. It is released under MIT License.

Open Source Drag & Drop File Uploads with Dropzone.js

Magnifier.js – Magnifying Glass Effect on Images

25 February 2014
2607 Views

Magnifier.js is a Javascript library enabling magnifying glass effect on an images. There are zoom in / out functionality using mouse wheel. Magnified image can be displayed in the lens itself or outside of it in a wrapper. Magnifier.js uses Event.js as a cross-browser event handling wrapper. It works in Chrome, Firefox, Safari, IE 7, 8, 9 & 10.
Magnifier.js – Magnifying Glass Effect on Images