Tuesday 21 January 2014

JSON EDITOR ONLINE : WEB-BASED TOOL TO VIEW, EDIT AND FORMAT JSON

JSON Editor Online is a web-based tool to view, edit, and format JSON. It shows your data side by side in a clear, editable treeview and in formatted plain text.
Features:

View and edit JSON side by side in treeview and plain text.
Edit, add, move, remove, and duplicate fields and values.
Change type of values.
Colorized values, color depends of the value type.
Search & highlight text in the treeview.
Undo and redo all actions.
Load and save files and urls.
Format and compact JSON in plain text.

Direct Link Demo

Doubletake dynamically updates the src of your images based on the browser width. Start with a small, mobile-friendly image in your HTML. Doubletake will use a defined set of breakpoints to update image SRCs when necessary.
I’m using a couple of tools to help me resize the images on this page – a local copy of SLIR and the src.sencha.io web service. If you aren’t comfortable resizing images on the fly, you could simply host multiple copies and then set the Doubletake breakpoints to the sizes you have created.

Direct Link Demo

Today we're going to look at a way to keep a sense of consistency on your website by maintaining the state of some elements even when the user navigates through history. We're effectively going to create history-inactive areas which remain in the same state while the rest of the document is navigable.
This technique effectively allows selective' loading of elements. Effectively, if the user clicks a link or presses the back button, instead of loading the whole page (most of which stays constant, like script and stylesheets), we will only load the stuff that changes, i.e. the content. By doing this we save load times There are two main reasons why you would want to only load certain elements when your user uses the back and forward button to navigate through history. This cuts out all the unnecessaries and creates a faster web experience.

Direct Link Demo

SwipeView is the super simple solution to endless seamlessly loopable carousels for the mobile browser. It's memory conservative as it uses only three elements at any given time, it's smooth as velvet since it takes advantage of hardware acceleration, it's bandwidth friendly with its 1.5kb minified/gzipped footprint.

Direct Link Demo

Howler.js is a JavaScript library that works with Web Audio API by default and falls back to HTML5 Audio when not supported.
Features:

Defaults to Web Audio API
Falls back to HTML5 Audio
Supports multiple file formats to support all browsers
Automatic caching for Web Audio API
Implements cache pool for HTML5 Audio
Per-sound and global mute/unmute and volume control
Playback of multiple sounds at the same time
Easy sound sprite definition and playback
Fade in/out sounds
Methods can be chained
Uses no outside libraries, just pure Javascript
Lightweight, 7kb filesize (2kb gzipped)

Direct Link Demo

Smoothie Charts is a really small charting library designed for live streaming data. I built it to reduce the headaches I was getting from watching charts jerkily updating every second. What you’re looking at now is pretty much all it does. If you like that, then read on.

Direct Link Demo

FLEXIBLEAREA.JS : JQUERY PLUGIN THAT DYNAMICALLY UPDATES TEXTAREA'S HEIGHT

A jQuery plugin that dynamically updates textarea’s height to fit the content.This plugin works for textareas with fixed width as well as for textareas with fluid width. The CSS resize property is set to “none” by this plugin, which means you will not be able to manually resize the textarea.

Direct Link Demo

iCarousel is a powerful mobile-friendly and lightweight jQuery plugin that allows you to arrange a set of images in a carousel layout. The plugin also provides an easy to use API which will allow to further enhance the functionality of the carousel. Great for screenshoot slider.
Features:

Highly Flexible and Customizable.
Multiple instances allowed in a single HTML page.
Works on iOS & Android devices.
Auto slideshow with optional pause on hover.
Easily resizable.
Keyboard support.
Touch support.
3D & 2D available.
Customizable transition timing function. (easing)
Fast, hardware accelerated CSS3 transitions.
SEO friendly, content is not hidden.
Powerful, documented API public methods, properties, callbacks.
Each slide can have any html content(except video) and can be any size.
Customizable scroll direction.
Customizable X & Y spaces between slides.
Unlimited slides support.

Direct Link Demo

CREATING WINDOWS-8-LIKE 3D ANIMATIONS WITH CSS3 AND JQUERY

I have recently realized that it’s been such a long time since CSS3 animations were introduced into the web, and yet I haven’t really experimented or made any demos with them before.
I’ve also been using Windows 8 for a while now (and loving it), and the first thing I thought was impressive about it, was the transitions and animations built into the dashboard, so I thought it would be really cool if my first experiment with 3D would be to duplicate the effects I saw in windows 8 into a demo of my own.

Direct Link Demo

In this tutorial I'm going to show you how to create circular navigations using CSS transforms. I'm going to take you through the steps for creating these styles one by one, and explain the math (yikes!) and simple logic behind them so you get a clear understanding of the technique.
Like I mentioned, there's going to be some basic math involved, along with CSS transforms to create these styles. But don't worry, the math is really very simple and I'll be going through it step by step.

Direct Link Demo

HeapBox is plugin for jQuery that replace native HTML selectboxes in your webpages. HeapBox supports themes, events, callbacks, ajax and much more.Heapbox doesn’t know how to deal with textboxes, checkboxes etc but when it comes to selectboxes, it’s kick-ass.

Direct Link Demo

A plug-in that turns an array of images into a 360 degrees interactive view that can be rotated at will.
Features:

method… can be “click”, “mousemove” or “auto”
sensibility to adjust rotation speed
autoscrollspeed to adjust the speed when method “auto” is selected (lower number gives faster rotation)
parameter direction can be either “forward” or “backward” depending on how your photos were taken and how you want them to appear
cycle (see demo) (new in 0.2)
Preload images
Display a progress bar expressing loading progress

Direct Link Demo

AVGRUND : A JS/CSS3 MODAL UI CONCEPT

A modal concept which aims to give a sense of depth between the page and modal layers.Uses CSS transforms to scale components and CSS filters to blur the page. Built for the fun of it, not intended for any practical use.

Direct Link Demo

J.B.Weather (ver 2.0) is a simple widget for displaying weather conditions and forecast for places across the world.
Features :

jQuery driven
uses AJAX technology & Cache
Search Bar with auto complete function
Ability to set default location
Ability to auto detect user location using HostIP service or its own integrated geoip database.
Celsius or Fahrenheit units
Kilometers or Miles units
Displays today's date, temperature, wind direction and speed, forecast for next 4 days

Direct Link Demo

Responsive Megamenu is a menu component based in CSS and Javascript code.
It can be used like a dropdown navigation, megamenu navigation or both. It's has a responsive and fluid layout.

Features:

11 Styles
Javascript/CSS3 effects
Grid system
Responsive layout
Fluid layout
Collapsible
Major browsers compatible

Direct Link Demo

jQuery validation engine is a Javascript plugin aimed at the validation of form fields in the browser (IE 6-8, Chrome, Firefox, Safari, Opera 10). The plugin provides visually appealing prompts that grab user attention on the subject matter.
Validations range from email, phone, and URL, to more complex calls such as ajax processing or custom javascript functions. Bundled with many locales, the error prompts can be translated into the language of your choice.
Rules of thumb
* field.id are unique across the page
* for simplicity and consistency field.id and field.name should match (except with minCheckbox and maxCheckbox validators)
* spaces or special chars should be avoided in field.id or field.name
* use lower cases for input.type ie. text, password, textarea, checkbox, radio
* use the Ajax validator last ie. validate[custom[onlyLetter],length[0,100],ajax[ajaxNameCall]]
* use only one Ajax validator per field!
* JSON services should live on the same server (or you will get into browser security issues)
* in a perfect RESTful world, http GET is used to READ data, http POST is used to WRITE data: which translates into -> Ajax validations should use GET, the actual form post should use a POST request.

Direct Link Demo

MENTION.JS : ADD FUNCTIONALITY TO TWITTER BOOTSTRAPS TYPEAHEAD PLUGIN

Lightweight wrapper for adding @user mention functionality to Twitter Bootstraps Typeahead plugin.This enables you to have Twitter-like user mentions in textareas.

Direct Link Demo

JavaScript Gauges in Metro Style is a set of 8 gauges created in the modern Windows8 or Metro style which can be added to virtually any web application: ASP, ASP.NET, PHP, JSP, ColdFusion, Ruby on Rails, and simple HTML pages.The gauges included into the package are not just separate meters, sliders, etc. They can be used as full featured ready gadgets intended to display the information in a visually appealing way.
Features:

Cross-platform compatibility. The gauges can be used on any platforms: ASP, ASP.NET, PHP, JSP, ColdFusion, Ruby on Rails and simple HTML pages and accessed from any devices: desktop, laptop, mobile (including iPhone and iPad), and via any browsers: IE, Mozilla Firefox, Google Chrome, Opera, Safari, etc.
Declarative description. The gauges are described using declarative selection of the parameter in JSON.
Customization. You can set any parameters describing your gauge and create custom objects using JSON.
Interactivity and Animation. Every gauge provides customizable interactivity and animation.
Easy styling. A gauge styling can be easily modified in CSS.
Callback support. You can get notifications about changes of the gauge value and handle it in JavaScript.
Easy integration. To integrate a gauge you just need to specify gauge name and area of a webpage where it should be inserted (<div> tag); and all this with JavaScript.
WinRT compatible. The gauges can be integrated into HTML5-based WinRT applications to effectively visualize data.

Direct Link Demo

SortResponsiveTable including: sorting script adds search, column averages and totals, record numbering, a view all function, and a reset function.
Other features include alternate row highlighting, header class toggling, auto data type recognition, and selective column sorting.

Direct Link Demo

An easy to use lightbox plugin for jQuery.Have you ever had a DOM element that you wanted lightboxed, but didn’t want all the fanciness of all the lightbox-related plug-ins out there? Lightbox_me is for you.
Lightbox_me is a jQuery plugin and requires jQuery to be included in order to work.Include both jQuery and the lightbox_me JavaScript file before calling the plugin in your JavaScript.

Direct Link Demo

TOOLBAR.JS : JQUERY PLUGIN THAT CREATES TOOLTIP STYLE TOOLBARS

Toolbar 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.
Features:

Straightforward implementation with simple options
Can run as many toolbars as required
Toolbars can be attached to any element required
Toobar icons are easily customised through the popular twitter bootstrap framework
Toolbars are responsive and follow the element on resize

Direct Link Demo

jQuery.kinetic is a simple plugin which adds smooth drag scrolling with gradual deceleration to containers.Add kinetic scrolling functionality to a container using mouse or touch devices.Drag a mouse or use touch gestures over the windows below to scroll the pane. If you let go with momentum the scrolling will slow gradually.

Direct Link Demo

This is a plugin for jQuery for in-place editing of data on the page. The intended way to use it is for the editable fields on the web page to be marked up with HTML data-* attributes. The plugin call can be placed in a page template and when it runs it finds all the fields that have been marked as editable.
Features:

Primarily driven by markup on the page.
Can also use javascript configuration.
Framework independent.
Works with IE6-8 and all modern browsers, including mobile.
Supports text input fields.
Supports textarea input fields.
Supports select dropdown fields.
Data to be edited can be supplied as an attribute of the element, rather than using the existing text within the element.
Data to be edited can be retrieved from the server just before editing.

Direct Link Demo

Responsive Tile Gallery is a completely responsive image gallery. It allows your visitors to easily sort and view all of your images. It also allows you to put your images into categories, load thumbnails instead of full resolution images, and develop a responsive websites for all platforms.
Features:

Fully responsive image gallery
Optional categories to let users sort through images
Optional lightbox for full resolution viewing
Optional Image captions
Option to use thumbnail images for faster load times
Uses CSS Transitions with jQuery fallbacks for improved performance
Cross-browser compatible (from IE7 and up)

Direct Link Demo

MAKE PRETTY CHARTS FOR YOUR APP WITH JQUERY AND XCHARTS

Charts are a great visual aid when presenting data. You can't build a professional admin panel without them. They are also tricky to set up. However, there is a new library that makes things easier - xCharts. Today, we are going to use it along with the daterange picker for Twitter Bootstrap, to build a pretty, AJAX-powered chart for your web application that fetches data from a MySQL table.

Direct Link Demo

This is NOT another small youtube widget or a video box to be shown on the right side of your website. This is the real deal. Now show your actual complete youtube channel on your website just like its shown on youtube.
Youmax plugin will display your channel uploads, playlists and a featured playlist that you may choose. Users can browse through your playlists and uploads and watch videos they like. Introducing Youmax 1.0! Check out the demo!

Direct Link Demo

So what is LivIcons? They are a cross browser vector icons, built with JavaScript, with individual mini animation for every icon. They based on SVG (scalable vector graphic) in modern browsers and VML (vector markup language) in IE6 - IE8 for clean and perfect look at any devices (Yes. Retina too).
Features:

303 live icons - one script.
New step in interactivity and brand New - such animation methods for interface elements were never created before.
Animated and can be static of course
Any color, any size
Retina perfect
16 pixel perfect
Flexible settings of behaviour and appearence
Bootstrap compatible
Easy integration - just one string of code for an icon.
IE6+ support
All browsers

Direct Link Demo

Unlike many other colorpickers out there, colorjoe is truly scaleable. It is based on CSS and does not depend on external images. As a result, you can tweak its size to fit your purposes. Supports touch and AMD module definition as well.
colorjoe was somewhat inspired by ColorJack and RightJS Colorpicker. Unlike those it actually scales pretty well. Essentially this means that you’ll be able to define its actual dimensions and layout using a bit of CSS. This way the widget fits well responsive layouts.
In addition it’s relatively easy to implement missing functionality (RGB fields, whatnot) thanks to the simple API it provides.

Direct Link Demo

FILEREADER.JS : LIGHTWEIGHT WRAPPER FOR THE JAVASCRIPT FILEREADER INTERFACE

A lightweight wrapper for the JavaScript FileReader interface.FileReader is a JavaScript interface that allows you to read local files as binary. This is available in supported browsers when a user drags and drops files into a browser window or selects files from an input with a type of file.
FileReader.js does not require any other libraries. If you do use jQuery, there is a small plugin wrapping up the functionlity though!

Direct Link Demo

jQuery plugin that displays your public picasa web albums on your website in a photo gallery.

Direct Link Demo

Facebook has this nice little chat box that doesn't take up much space, and people can instantly interact with their friends, it is a cool feature to have in any website. Let's get inspired and create an Shout Box which will look similar to Facebook chat box.

Direct Link Demo

A jquery plugin that slowly and lazily packs the contents of an element. Unlike most packing libraries that try to do all the math and sorting up front, stalactite takes a lazy approach and sorts each child element sequentially. This can add a sense of curation as it makes your viewer aware of the browser’s decisions.
It sorts all types of content and is especially diligent about images, videos, and iframes making sure to load all media before assessing proper widths and heights.

Direct Link Demo

This date range picker component for Twitter Bootstrap creates a dropdown menu from which a user can select a range of dates. It was created for the reporting UI at Improvely.
If invoked with no options, it will present two calendars to choose a start and end date from. Optionally, you can provide a list of date ranges the user can select from instead of choosing dates from the calendars. If attached to a text input, the selected dates will be inserted into the text box. Otherwise, you can provide a custom callback function to receive the selection.The date range picker relies on jQuery, Datejs for parsing strings into dates and defining custom ranges, and the Twitter Bootstrap CSS.

Direct Link Demo

SIMPLE YOUTUBE MENU EFFECT WITH CSS3 &AMP;#038; JAVASCRIPT

Today we'll show you how to recreate the little menu effect that you can see in the left side-menu on YouTube when watching a video (where it says Guide). The menu is made of a little menu icon, a label and a list of menu items that appears when the label or menu icon is clicked. Once it's clicked the menu icon slides to the right and the label moves up while the list items fade in sequentially. We'll add some more style and effects to it in order to make it a bit more interesting.

Direct Link Demo

This plugin makes it easy to add fit-to-fill background video to websites. It can play silent ambient background video (or series of videos). Or use it as a player to show video playlist. BigVideo.js can also show big background images, which is nice to have for showing big background images for devices that don't have autoplay for ambient video.

Direct Link Demo

Slider with css3 transitions and many effects.In browsers that don’t support css3 transitions classes won’t be animated but some effects will still work, just a bit choppy.

Direct Link Demo

JQUERY.TRANSFORMLIST : CSS3 TRANSFORM STYLES AND ANIMATIONS FOR JQUERY

jquery.transformlist is a Javascript plugin for jQuery to add support for styling and correctly animating CSS3 transforms that make use of multiple transform functions.
jquery.transformlist is not intended to provide animation between arbitrary transform styles – it doesn’t provide the matrix decomposition required for that task. Instead it aims to assist you in creating a transform list of several transform functions that are composited for a specific task, and then provides you with means to use jQuery.animate() between different sets of arguments for those transform functions.
That’s a little unclear, so imagine you set up a “camera” transform list allowing you to adjust the X, Y, and Z of the focal point; and then the rotation around, elevation above or below, and distance from the focal point.

Direct Link Demo

A simple jQuery plugin to arrange images into a flexible grid, based on Tumblr’s photoset feature. Originally the plugin was created for our Style Hatch Tumblr themes as a way to use the photoset grid in responsive layouts, but we have since expanded it for use outside of the themes.

Direct Link Demo

Vertical Responsive Navigation is a navigation component based in CSS and Javascript code. It's responsive navigation, collapsible on mobile devices, has two themes and 12 preset colors.
Features:

Light and Dark themes
12 preset colors
Responsive
Collapsible
Major Browsers Compatible
361 icons available

Direct Link Demo

This plugin adds automatic ajax loading of page content when the user scrolls the page, with built-in browser cache. When the user gets to the end of the page, it fetches more content. This way, you don't have to load more than neccesary on the first page load, and the user benefits, since she doesn't have to click numbers in a pagination widget.
The result is the jquery.esn.autobrowse.js jQuery plugin which does that for any page.It loads JSON data from the server, and renders it client-side.

Direct Link Demo

JQUERY SOCIAL BUTTONS

A jQuery plugin that helps you roll your own tweet/like links.The ouput of this plugin is currently a pretty ugly (though easily stylable) display of stats for Twitter and Facebook. Initial support for like/tweet links exists, though Facebook’s is pretty rudimentary. The goal is to avoid the use of the IFRAMEs provided by Twitter and Facebook, though it may make sense to use modal IFRAMEs upon clicking the like links.

Direct Link Demo

Rubberband is a jQuery plugin for adding responsive breakpoint events. Sometimes you need to know when a responsive page changes. Rubberband allows scripts to act on media query changes in real time by making use of the browser’s internal media query matching system, window.matchMedia.

Direct Link Demo

Our Metro Sidebar display a sidebar with metro style, ideal for use on tables of content, navigation menus or management interfaces. Some features are:
Easy to use. Changeable Metro Colors. Full jQuery & css compatible. Hide and show. Checkboxes. Submenus. Metro design style. Auto overflow handling by scroll.

Direct Link Demo

Today I am going to share a trendy functionality which I have been implementing in my projects for a while now.
I call it FoxyComplete and what is does is fetch clickable search results along with images either automatically scraped from the result's content or a specified file. It's easy to implement and once done, easy to tweak.

Direct Link Demo

TEXT OPENING SEQUENCE WITH CSS ANIMATIONS & JQUERY

Today I want to show you how to create a fun little typography effect with CSS animations and text shadows.
Maybe you know those eerie opening sequences of movie trailers where some text is being faded in on a dark background.
After seeing Introducting Briefs (which is not a terror movie trailer but a preview for an interesting app) I got inspired for recreating the effect using CSS. we'll use Dave Rupert's Lettering.js to wrap the words and letters into multiple spans.

Direct Link Demo

Introducing a new jQuery PhotoZoom plugin, it helps you to view bigger images on mouse over component, this is very useful for media related web applications. You can customize the PhotoZoom container based on your web page design. Very easy to implement just include the plugin using script tag and give required selector, take a look this live demo.

Direct Link Demo

The aim of the project is to create a lightweight 3D library with a very low level of complexity in other words, for dummies.
The library provides <canvas>, <svg>, CSS3D and WebGL renderers.

Direct Link Demo

During browsing internet, I have noticed new interesting thing - it looked like isometric guide. Today I will show you how you can create something similar. We will create isometric interactive interior guide with CSS3 and jQuery.

Direct Link Demo

LAZYBLOCK : CONDITIONALLY LOAD CONTENT IN RESPONSIVE DESIGNS WITH JAVASCRIPT

lazyBlock is a proof-of-concept to show how content can be conditionally loaded in responsive designs without relying on AJAX to fetch that content. Content is included in the original mark-up but is placed within <script> tags with the type text/html. Based on user action or screen width, the content can then be moved from the <script> tag and then injected into the DOM by lazyBlock.

Direct Link Demo

A jQuery plugin to fetch shot and player info from the Dribbble API. Jribbble uses a Makefile that is pretty much jQuery’s Makefile. The Makefile adds the version number and date to the output files then creates the Ugly version of Jribbble using UglifyJS. NodeJS is required to build an Ugly version of Jribbble.

Direct Link Demo

Blog search

Tuesday 21 January 2014

Saturday 18 January 2014

Friday 17 January 2014

Thursday 16 January 2014

Wednesday 15 January 2014

Tuesday 14 January 2014

Monday 13 January 2014

Sunday 12 January 2014

Saturday 11 January 2014

Friday 10 January 2014

Thursday 9 January 2014

Wednesday 8 January 2014

Tuesday 7 January 2014

Popular Posts

Labels

Blog Archive

Subscribe