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

Revolver.js – Create Heavily-Customizable Content Sliders (With jQuery Or MooTools)

9 Jan

There are many beautiful content sliders out there which can be easily integrated into web pages where most of them come with a default design and functionality.

If you want to create a completely custom one, Revolver.js,a boilerplate for customizable sliders is a good fit.

Revolver.js is a jQuery and MooTools plugin with an API covering the most common slider functions.

Almost any markup can be used for sliders, their designs are under control with CSS and the API is flexible enough to manage it in any desired way.

There are various transitions types to choose from, functions exist for browsing items (first, last, next, etc.) and callbacks are offered for each event.

The resource is very easy-to-use, documented in detail and has a small footprint (~4.5kb minified).

Requirements: jQuery or MooTools
Compatibility: All Major Browsers

Tags: Javascript

Filed under: Gallery, Goodies, MIT License

0 Comments

Mark & Share Any Part Of Web Contents: MASHA

7 Jan

MASHA is a JavaScript utility that allows readers to highlight any parts of a web content and share it with others.

The feature is triggered when readers select any desired text and an icon appears to inform them about the feature + create a unique link when clicked.

Readers can simply click the icon, copy the unique URL generated and share it with others. When a MASHA-generated URL is loaded, the selected text is highlighted so that it is seen easily.

There are callbacks for onMark, onUnmark and onHashRead (when a MASHA URL is loaded) that makes custom events possible and a WordPress plugin exists for quickly adding this utility.

Requirements: No Requirements
Compatibility: All Major Browsers

Tags: Javascript

Filed under: Browsing, Goodies, MIT License

0 Comments

Accessible & Customizable HTML5 Player – Acorn Media Player

6 Jan

Info: The demos of the resource don't work as the source video files are unavailable.

Acorn Media Player is a jQuery plugin for creating a customizable HTML5 media player with support for accessibility.

The player can be completely controlled with keyboard (with standard tab-based navigation), has screen-reader support + accessible themes and various other accessibility tweaks.

There is also support for closed captions and a dynamic transcript generated from the selected captions is provided.

Acorn Media Player can be themed with ease, can display videos in fullscreen, informs users on loading processes with loading + buffering indicators and can even remember the volume level used with HTML5 localStorage.

The sliders (seek and volume) can either use jQuery UI's widgets or a custom one is provided as well and few other options exist (like the direction of the volume slider) for further customization.

Requirements: jQuery

Tags: HTML5 Javascript

Filed under: GPL License, Goodies, MIT License, Media

0 Comments

Sugar – Useful New Methods For JavaScript

4 Jan

Sugar is a JavaScript library that aims to ease JS development by extending its native objects with new, helpful methods.

It brings lots of new featured for working with strings, numbers, dates, arrays, objects,regular expressions and functions.

As an example:

capitalize would make the 1st letter capital
isEven and isOdd helps finding if the given number is odd or even
count would find how many times the given character exists in an array
isFuture would return if any given date is bigger than today
and so much more.

The library is very well-documented and it is a huge helper for JavaScript-heavy applications.

Requirements: No Requirements
Compatibility: All Major Browsers

Tags: Javascript

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

0 Comments

Scrolling Effects With jQuery – Scrollorama

3 Jan

Scrollorama is a jQuery plugin for creating eye-candy effects in parallel to the scrolling of web pages.

By dividing the content into blocks, it simply lets us to animate elements on the page (when a block is reached) based on the browser window’s scroll position.

The animations are accomplished using CSS properties, durations of them can be defined and it is also possible to set the exact scrolling positions of the start/stop events.