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:
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.
DOUBLETAKE : JQUERY PLUGIN FOR RESPONSIVE IMAGES
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.
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.
CONTROLLING HISTORY: THE HTML5 HISTORY API WITH JQUERY
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.
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.
SWIPEVIEW : INFINITE CAROUSELS FOR MOBILE WEB WITH JAVASCRIPT
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.
HOWLER.JS : MODERN HTML5 WEB AUDIO JAVASCRIPT LIBRARY
Howler.js is a JavaScript library that works with Web Audio API by default and falls back to HTML5 Audio when not supported.
Features:
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)
SMOOTHIE CHARTS : JAVASCRIPT CHARTS FOR REALTIME STREAMING DATA
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.
Saturday, 18 January 2014
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.
ICAROUSEL : JQUERY CAROUSEL PLUGIN
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:
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.
Friday, 17 January 2014
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.
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.
BUILDING A CIRCULAR NAVIGATION WITH CSS TRANSFORMS AND JAVASCRIPT
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.
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.
HEAPBOX : JQUERY SELECTBOX REPLACEMENT PLUGIN
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.
360 PANORAMA FOR JQUERY
A plug-in that turns an array of images into a 360 degrees interactive view that can be rotated at will.
Features:
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
Thursday, 16 January 2014
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.
J.B.WEATHER WIDGET 2.0 IN JQUERY
J.B.Weather (ver 2.0) is a simple widget for displaying weather conditions and forecast for places across the world.
Features :
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
JQUERY RESPONSIVE MEGAMENU WITH CSS3
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:
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
JQUERY VALIDATION ENGINE WITH 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.
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.
Wednesday, 15 January 2014
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.
JAVASCRIPT GAUGES IN METRO STYLE
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:
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.
SORTTABLES : JQUERY RESPONSIVE TABLES
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.
Other features include alternate row highlighting, header class toggling, auto data type recognition, and selective column sorting.
LIGHTBOX_ME : AN EASY TO USE JQUERY LIGHTBOX PLUGIN
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.
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.
Subscribe to:
Posts (Atom)
