Clipping JPEGs Freely With JavaScript: polyClip.js

25 Jan

When we need to clip an irregular shape from an image and use it on the web, PNG is the most common answer as it is the only image format used by all web browsers that support alpha channels.

However, PNG images come with a penalty of size (if the source is a photograph) compared to similar sized JPEGs.

polyClip.js is a script, built on jQuery, that allows us to clip any image with imagemap coordinates using HTML5 Canvas.

For implementation on many images, "how practical would it be to use polyClip.js" is open to discussion however, for only few images, it can be a huge byte-saver.

And, it is supported in most browsers including IE7 (with Excanvas).

Requirements: jQuery
Compatibility: All Major Browsers

Tags: Javascript

Filed under: Goodies, Images, MIT License

0 Comments

jQuery-Collapse – Expanding & Collapsing Content With JavaScript

23 Jan

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.

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).

Requirements: jQuery
Compatibility: All Major Browsers

Tags: Javascript

Filed under: Browsing, Goodies, MIT License

2 Comments

A JavaScript Toolkit For Interactive & Real-Time Graphs – Rickshaw

20 Jan

Rickshaw is a JavaScript toolkit, created by the developers of the stock photo service Shutterstock, for generating interactive and real-time graphs.

It is built on top of the D3.js visualization library and can render stack or line graphs.

The graphs are interactive, respond to hovering them or their legends, items in the stack can be re-ordered with drag 'n' drops and more.

There is a good margin for customization: colors, sizes, interpolation and functionality in general with the modular/extendable structure of the toolkit.

Requirements: Some extensions require jQuery & jQuery UI

Tags: Javascript Real-Time

Filed under: Charts, Goodies, Other License

2 Comments

TextExt – Smarter Text Input Fields With jQuery

19 Jan

TextExt is a feature-rich jQuery plugin for improving the functionality of text input fields.

The plugin is modular, can be extended easily and has features like tag inputs, filtering, auto-complete, placeholder text and Ajax (which are all plugins of TextExt).

It can also display a custom arrow besides select fields, show the items in them as suggestions-while-typing and more.

TextExt is very well-documented, regularly improved and has too many examples to start with.

Requirements: jQuery
Compatibility: All Major Browsers

Tags: Javascript

Filed under: Forms, Goodies, MIT License

1 Comment

jQ.Mobi: jQuery-Like JavaScript Framework For Mobile (But Smaller & Faster)

16 Jan

jQuery Rewritten, Ground-Up, for Mobile HTML5 on iOS and Android devices.

This is how jQ.Mobi defines itself and gives a good insight on what it is.

It is a fresh and open source JavaScript framework -developed by appMobi- that focuses on providing a great experience on both of the dominant mobile operating systems with a tiny footprint and code efficiency.

Compared to jQuery Mobile (24kb), it is much smaller in size with only 3.5kb (both minified and gzipped) and covers most features with the same syntax.

When it comes to speed, jQ.Mobi is impressive there as well and mentioned to be 3x faster on Android and 2.2x faster on iOS.

The framework also has a UI library (again smaller in size) and includes plugins for mobile interactions and interfaces

Requirements: No Requirements
Compatibility: WebKit Browsers

Tags: Android iOS Javascript

Filed under: Goodies, MIT License, Mobile Development

0 Comments

JavaScript-Powered Media Queries – syze

14 Jan

syze is a standalone and tiny (<1kb) JavaScript-library for targeting web page designs by device or browser size very easily to build responsive websites.

The library allows us to define any number of breakpoints (as widths) with a single function and sets the class of <body> automatically on "window resize" or "change in orientation".

There are functions provided for collecting device + browser sizes and setting a custom debounce rate for making sure that no serious CPU load is created for the user's computer when syze is active.

syze also has a callback fired afte each event which is great for adding custom events to the mix.

Requirements: No Requirements
Compatibility: All Major Browsers

Tags: Javascript

Filed under: Extras, MIT License, Other Scripts/Apps.

0 Comments

Display RSS/Atom Feeds With jQuery: FeedEk

13 Jan

FeedEk is a jQuery plugin for parsing and displaying RSS and Atom feeds.

The plugin is so easy to use and can grab the feed items from any domain with a few lines of code.

Just mention the feed URL, how many items to be displayed, description and publish date to be shown or not and that's all.

Requirements: jQuery
Compatibility: All Major Browsers

Tags: Javascript

Filed under: Goodies, MIT License, Rss & Feeds

1 Comment

Preloading Resources With JavaScript – PxLoader

12 Jan

Loading screens are a part of almost any application (softwares, games, etc.) since forever.

We also see them in HTML5 apps informing us that the resources to be used for the application is being downloaded and the status of the overall progress.

PxLoader is a JavaScript library, that is built for the popular Cut The Rope game's HTML5 version, for downloading images, sound files or any other resource before any defined action (like activating the whole app).

It enables us to monitor download status with the help of progress + completed events and also lets us to prioritize the order in which items are downloaded.

Such features make PxLoader not only a library to manage the download of resources but also a good fit for creating visual preloaders for HTML5 apps.

Compatibility: All Modern Browsers

Tags: HTML5 Javascript

Filed under: Extras, MIT License, Other Scripts/Apps.

0 Comments

Colors: A JavaScript Library To Manipulate Colors

11 Jan

Colors is a standalone JavaScript library that comes with features to manipulate colors in multiple ways.

The library can handle multiple types of unit conversions including RGB to a Hexadecimal and Hexadecimal to RGB or HSV.

It can get the complimentary color of any Hexadecimal or RGB value and can generate random color values.

P.S. The library is still under heavy development and in beta phase.

Requirements: No Requirements
Compatibility: All Major Browsers

Tags: HSV Javascript RGB

Filed under: CC License, Colours, Design

0 Comments

28 High-Quality jQuery Plugins For Building Responsive Websites

10 Jan

There is always a new challenge for web designers and developers.

One of the latest is definitely responsive web design; the art of serving the same web page to multiple devices which look good on all of them.

Responsive Web Design

It is a getting-popular approach. As always, there are questioned parts (like the increasing number of screen sizes and the difficulty in setting breakpoints) but these are minor and creating a responsive website is nothing difficult.

Thanks to talented people out there that there are great resources simplifying development of such websites. Many tricky stuff can be handled easily with the right tools.

For jQuery users, there are a good number of responsive design plugins and here is a carefully collected and well-categorized list to bookmark and hit back when you are about to design responsively : ).

Layout & Tools

Response JS

The plugin has the mobile-first approach and enables us to dynamically arrange code blocks based on breakpoints + serve media progressively using HTML5 data attributes.

It also offers useful methods for easily testing screen properties that are important for creating responsive websites.

jquery responsive web

This plugin adds dynamic classes to the <body> depending on the operating system, browser and window size so that you can use a single CSS to change every aspect of your design.

When you resize the window, it automatically changes the window size related class. There are also two functions called, one on init, and the other on resize, so that you can make design manipulations accordingly.

Read the rest of this entry »

Tags: Javascript Responsive

Filed under: Extras, Other License, Other Scripts/Apps.

9 Comments