Blog search
Saturday, 30 November 2013
SIEVE : JQUERY PLUGIN FOR SEARCH ANYTHING
DOWNLOADIFY : DOWNLOAD TEXT FILES WITHOUT SERVER INTERACTION WITH JS LIBRARY
A tiny javascript + Flash library that enables the creation and download of text files without server interaction.Web applications that allow you to generate vCards, color palettes, custom code, etc would benefit from using this library. In addition to increasing speed (no round trip to the server) this solution can reduce the database and server load of existing web applications.
This is not a library to 'force download' a file from a server. It does not interact with a server at all.
This is not a library to 'force download' a file from a server. It does not interact with a server at all.
MELONHTML5 : 3D CUBE GALLERY IN HTML5, JQUERY AND CSS3
JKIT : JQUERY BASED UI TOOLKIT
KARTOGRAPH : JQUERY INTERACTIVE MAP APPLICATIONS WITHOUT GOOGLE MAPS
Kartograph is a new framework for building interactive map applications without Google Maps or any other mapping service. It was created with the needs of designers and data journalists in mind.
The core concept of Kartograph is to separate the mapping process in the map generation and map rendering part. The client-side library kartograph.js renders pre-generated maps stored in SVG files. You can chose among hundreds of ready-to-use maps or simply generate your own using kartograph.py, the open source Python SVG map generator.
The core concept of Kartograph is to separate the mapping process in the map generation and map rendering part. The client-side library kartograph.js renders pre-generated maps stored in SVG files. You can chose among hundreds of ready-to-use maps or simply generate your own using kartograph.py, the open source Python SVG map generator.
Friday, 29 November 2013
FLARE : JQUERY OPTICAL FLARE FX
This is a plugin for jQuery which animates a colored optical flare to slide across elements. The flare is white in the center and has a customizable colored glow. The plugin also allows change of speed, glow radius, and event triggering the animation. The animation is performed by sliding across an element’s top-left corner to the top-right corner.
Features:
Features:
- Cool movie-style effect also used in games such as Sleeping Dogs.
- Works in Chrome, Firefox, and Safari, and IE 10 including mobile.
- Uses modern CSS techniques.
- Customizable glow color, speed, glow radius, and trigger event.
- First Optical flare effect without use of images.
BEHAVE.JS : ADD IDE STYLE BEHAVIORS TO PLAIN TEXT AREAS
Behave.js is a lightweight library for adding IDE style behaviors to plain text areas, making it much more enjoyable to write code in.
Features:
Features:
- Supports Partial IE6, IE7+, Firefox 8+, Safari 4+, Chrome X+, Opera 12
- No Dependencies
- Custom Code/Behavior Fencing
- Hard and Soft Tabs
- Auto Open/Close Parenthesis, Brackets, Braces, Double and Single Quotes
- Auto delete a paired character
- Overwrite a paired character
- Multi-line Indentation/Unindentation
- Automatic Indentation
CLEDITOR : WYSIWYG HTML EDITOR IN JQUERY
CLEditor is an open source jQuery plugin which provides a lightweight, full featured, cross browser, extensible, WYSIWYG HTML editor that can be easily added into any web site.
In addition to the standard text formatting features found in other WYSIWYG editors, CLEditor also contains rich drop downs for font name, size, style, text color and highlight color. CLEditor allows you to insert images, hyperlinks and horizontal rules.
CLEditor provides a rich plugin development environment, allowing you to customize its user interface and functionality to fit your needs.
In addition to the standard text formatting features found in other WYSIWYG editors, CLEditor also contains rich drop downs for font name, size, style, text color and highlight color. CLEditor allows you to insert images, hyperlinks and horizontal rules.
CLEditor provides a rich plugin development environment, allowing you to customize its user interface and functionality to fit your needs.
ANIMATE.CSS :A BUNCH OF PLUG-AND-PLAY CSS ANIMATIONS WITH JQUERY
animate.css is a bunch of cool, fun, and cross-browser animations for you to use in your projects. Great for emphasis, home pages, sliders, and general just-add-water-awesomeness.A big ol’ goody bag filled with CSS animations for WebKit, Firefox and beyond.
To use animate.css in your website, simply drop the stylesheet into your document’s
You can do a whole bunch of other stuff with animate.css when you combine it with jQuery or add your own CSS rules.
To use animate.css in your website, simply drop the stylesheet into your document’s
<head>
, and add the class animated
to an element, along with any of the animation names. That’s it! You’ve got a CSS animated element. Super!You can do a whole bunch of other stuff with animate.css when you combine it with jQuery or add your own CSS rules.
Thursday, 28 November 2013
ECHO.JS : SIMPLE JAVASCRIPT IMAGE LAZY LOADING
Echo.js, simple JavaScript image lazy loading via HTML5 data-attributes, superfast and standalone (jQuery free).Lazy-loading works by only loading the assets needed when the elements ‘would’ be in view, which it’ll get from the server for you upon request, which is automated by simply changing the image "src"attribute. This is also an asynchronous process which also benefits us.
PULLOUTS : JQUERY SLIDE-OUT WIDGETS
PullOuts is a stand-alone script based on a popular WordPress plugin - PullOut Widgets, and can be used on any website that supports HTML and JavaScript.PullOuts allows to grab any piece of content from a web page and display it as a pullout widget. Whether it's a block of text, images, shopping cart, login, search or subscription form, a video or any other content - you can make it a pullout.
Features :
Features :
- Flexible pullout widget positioning on top, right, bottom or left side.
- Multiple pullout triggers:
- on mouse click;
- on mouse hover;
- timer countdown;
- page count;
- when specified element appears on the screen.
- Unlimited widget colors.
- 289 slick icons for pullout tabs.
- 32 sliding animation effects.
- Multiple styles for pullout tabs: square, rounded corners, borders, combination of the above.
- CSS3 vertical and horizontal tabs.
- Pullout speed control.
HOW TO CREATE TABS IN HTML USING JQUERY
HTML based tabs are widely used as a part of the modern ux practices as it's the most convenient way of presenting data and users can easily browse through larger sum of data without leaving the page or waiting for any postbacks.
Say goodbye to those long pages and implement HTML tabs today to improce your website's user experience.
I will be using jQuery to create the HTML Tabs today, don't worry it won't be a killer. I'll guide you through every step and I'm confident that by the time you're done with this tutorial you'll agree to the fact how easy it is to create tabs with just a few lines of jQuery's magical code.
Say goodbye to those long pages and implement HTML tabs today to improce your website's user experience.
I will be using jQuery to create the HTML Tabs today, don't worry it won't be a killer. I'll guide you through every step and I'm confident that by the time you're done with this tutorial you'll agree to the fact how easy it is to create tabs with just a few lines of jQuery's magical code.
MELONHTML5 &#8211; JQUERY GRID SLIDER
Wednesday, 27 November 2013
JQUERY SEARCHABLE MAP TEMPLATE WITH GOOGLE FUSION TABLES
You want to put your data on a searchable, filterable map. This is a free, open source tool to help you do it.
Features :
- clean, full screen layout
- new mobile and tablet friendly using responsive design
- address search (with variable radius)
- geolocation (find me!)
- new RESTful URLs for sharing searches
- results count (using Google’s Fusion Tables API)
- ability to easily add additional search filters (checkboxes, sliders, etc)
- all done with HTML, CSS and Javascript – no server side code required
FIXIE.JS : AUTOMATICALLY ADDS FILLER CONTENT TO HTML DOCUMENTS
Fixie.js is an open source tool that automatically adds filler content to HTML documents.Adding lorem ipsum text to HTML documents involves copy-pasting, manual editing, and increasingly unwieldy code.
By interpreting your semantic HTML5 tags, Fixie will automagically add the right type of content in the right places. Headings, paragraphs, links, images, sections… trust me, it’s all there. That way you can focus on your design, instead of finding the right filler content.
By interpreting your semantic HTML5 tags, Fixie will automagically add the right type of content in the right places. Headings, paragraphs, links, images, sections… trust me, it’s all there. That way you can focus on your design, instead of finding the right filler content.
YUNERO : JQUERY PLUGIN DISPLAYS A VIDEO FEED FOR YOUTUBE CHANNEL UPLOADS
Now you can bring your Youtube uploads to your websites with “Yunero” – a new jQuery plugin that creates a widget on your website. Just specify your youtube channel URL and this widget will display the recent uploads from your channel. You may also specify your youtube playlist URL and video feeds from your playlist will be displayed. A subscription box for you is also shown to attract social people.
SIMPLE JQUERY FULLSCREEN IMAGE GALLERY
Tuesday, 26 November 2013
STRATUS 2 : JQUERY POWERED SOUNDCLOUD PLAYER
Stratus is a jQuery powered SoundCloud player that lives at the bottom (or top) of your website or blog.You can add tracks to Stratus right from your page. Simply give a SoundCloud track link the class of
stratus
and the player will do the rest. This works great for the discography section of your site.CODINGJACK'S JQUERY 3D CAROUSEL
CodingJack's 3D Carousel is a Real 3D using CSS3 3D Transforms carousel plugin with jQuery,Html5 & Css3
The carousel is supported on iOS and Android and includes touch swipe functionality. It looks great on a tablet and will even work on a smartphone. But because the carousel can appear small on smaller screens, I've included two special options for smartphones:
The carousel is supported on iOS and Android and includes touch swipe functionality. It looks great on a tablet and will even work on a smartphone. But because the carousel can appear small on smaller screens, I've included two special options for smartphones:
- Option to display a thumbnail grid instead (the "fallback" presentation)
- Option to transform the grid fallback into a responsive layout. View either preview from your phone for an example.
PHERY : PHP + AJAX + JQUERY INTEGRATION
Monday, 25 November 2013
FILTER-ME : JQUERY PLUGIN TO FILTER IMAGES USING CANVAS
jQuery filter.me is a jQuery dependant script that allows you to apply filters to images using Photoshop .acv Curves Adjustment files. jDataView is used to read the Photoshop file, from which we create a Monotonic Spline Curve representing its data. From this curve the new pixel RGB values can be calculated. These values are then applied using HTML5′s canvas element.
Literally any Photoshop curves file can be applied to multiple images with ease. This is a great alternative to using something like PHP’s imagemagick to try and replicate similar filtering. It can sometimes be a little slow, especially in mobile browsers, but I’m sure this will improve as canvas becomes more mainstream.
Literally any Photoshop curves file can be applied to multiple images with ease. This is a great alternative to using something like PHP’s imagemagick to try and replicate similar filtering. It can sometimes be a little slow, especially in mobile browsers, but I’m sure this will improve as canvas becomes more mainstream.
WORDSMITH : JQUERY PLUGIN THAT ADDS ON-DEMAND WORD DEFINITIONS
PULL OFF AWESOME SCROLL EFFECTS WITH STROLL.JS
Stroll.js is a super easy to implement library that makes applying mind-boggling scroll effects a breeze. All you have to do is paste in a couple of brief lines of JavaScript, the rest is all handled with HTML and CSS. Keep reading and I'll show you how it works.
Stroll.js is a neat little JavaScript library that brings a bunch of eye-catching animations to the scroll action on list items. The idea is that you have a group of items in a scrollable list and you use Stroll.js to make browsing that list more interesting.
Stroll.js is a neat little JavaScript library that brings a bunch of eye-catching animations to the scroll action on list items. The idea is that you have a group of items in a scrollable list and you use Stroll.js to make browsing that list more interesting.
PATHJS : SIMPLE, LIGHTWEIGHT ROUTING FOR WEB BROWSERS
PathJS is a lightweight, client-side routing library that allows you to create “single page” applications using Hashbangs and/or HTML5 pushState.
Features:
Features:
- Lightweight
- Supports the HTML5 History API, the ‘onhashchange’ method, and graceful degredation
- Supports root routes, rescue methods, paramaterized routes, optional route components (dynamic routes), and Aspect Oriented Programming
- Well Tested (tests available in the
./tests
directory) - Compatible with all major browsers (Tested on Firefox 3.6, Firefox 4.0, Firefox 5.0, Chrome 9, Opera 11, IE7, IE8, IE9)
- Independant of all third party libraries, but plays nice with all of them
Sunday, 24 November 2013
JQUERY TEXT HIGHLIGHTER AND FILTER PLUGIN
GOOGLE MAPS SLIDER WITH JQUERY
I’m sure it’s partly me getting better at JavaScript, but I found the API quite well done and easy to work with. For one thing, it’s fully evented. That means you can attach event listeners to different thing, like the map itself or things inside the map. A simple example would be if a marker is clicked, you can change the zoom level of the map, change information shown elsewhere on the page, or really anything else you might want to do with JavaScript.
I created a list of locations in an unordered list. Each list item had HTML5 data attributes containing the latitude and longitude of it. It also contained a title and long and short descriptions.When one of these list items is hovered over, I apply a “hover” class to deal with styling, “pan” the map to the new coordinates, and fill out the right area with more information.
I created a list of locations in an unordered list. Each list item had HTML5 data attributes containing the latitude and longitude of it. It also contained a title and long and short descriptions.When one of these list items is hovered over, I apply a “hover” class to deal with styling, “pan” the map to the new coordinates, and fill out the right area with more information.
BUZZ! : A JQUERY HTML5 AUDIO LIBRARY
MEDIATABLE : JQUERY RESPONSIVE TABLE PLUGIN
MediaTable listen to screen size to define visible or hidden columns using CSS media query.You can choose what column to view with the automagically columns menu. This is a usefull solution to display big data table into small screen devices allowing the user to display relevant data at the beginning then to choose what data to display.
Saturday, 23 November 2013
HOVEREX : JQUERY IMAGE HOVER ANIMATION PLUGIN
HoverEx is a jQuery plugin for image hover animations.It contains over 36 animations and prepared 18 hover animation templates.It also support for image zoom and slider effect.You can use it to create unique animated effects effortlessly without any knowledge of jQuery.
Features:
Features:
- Over 36 animations
- Over 18 build-in templates
- Responsive able
- Easy to customize
- Include two version
- Build in 8 animate queue,and you can customize easy
- Inline Zoom Support. Can be set the zoom range and zoom change step.And mousewheel control support.
- Image Slider Support. Support mousewheel control,and pre/next buttons
SOCIAL LIKES : JQUERY LIKE BUTTONS OF POPULAR SOCIAL NETWORK
JQUERY UI BOOTSTRAP : BOOTSTRAP-THEMED KICKSTART FOR JQUERY UI WIDGETS
A jQuery UI theme based on Twitter Bootstrap.This project was started to bring the beauty and ease-of-use of Twitter Bootstrap to jQuery UI widgets.In their original forms, jQuery UI and Bootstrap can’t coexist resulting in conflicts with both CSS classes and styles as well as JavaScript when you do try to use them. jQuery UI Bootstrap provides the JavaScript and CSS required to quickly start a project using both jQuery UI and Twitter Bootstrap.
Our solution offers a custom version of Bootstrap compatible with jQuery UI as well as a Bootstrap-themed jQuery UI theme you can use to prototype your projects.
Our solution offers a custom version of Bootstrap compatible with jQuery UI as well as a Bootstrap-themed jQuery UI theme you can use to prototype your projects.
Bootstrap , CSS2 / CSS3.0 , Forms , jQuery UI , Maps , Menus , Responsive , Slider , Tables , Web , Windows & Overlay
MASKEW : A JAVASCRIPT LIBRARY FOR SKEWING THE SHAPES OF ELEMENTS
Friday, 22 November 2013
WEBCAMSWIPER : JQUERY FLIP BOOK
BACON IPSUM JQUERY PLUGIN
Thursday, 21 November 2013
STYLESELECT : JQUERY CUSTOM LOOKING SELECTBOX
JQUERY PANZOOM : PLUGIN FOR PANNING AND ZOOMING ELEMENTS USING CSS3
Panzoom is a progressive plugin to create panning and zooming functionality for an element. Panzoom supports the same browsers as jQuery 2.0 and can be used with jQuery 1.9.0+ or jQuery 2.0+. Rather than setting width and height on an image tag, Panzoom uses CSS transforms and matrix functions to take advantage of hardware/GPU acceleration in the browser, which means the element can be anything: an image, a video, an iframe, a canvas, text, WHATEVER.
Panzoom includes support for touch gestures on iOS and Android and even supports pinch gestures for zooming. It is perfectly suited for both mobile and desktop browsers. You’ll be amazed at how well this performs on your mobile device.
Panzoom includes support for touch gestures on iOS and Android and even supports pinch gestures for zooming. It is perfectly suited for both mobile and desktop browsers. You’ll be amazed at how well this performs on your mobile device.
JQBARGRAPH : JQUERY BAR GRAPH PLUGIN
jQuery plugin for creating bar graphs from your data. jqBarGraph is compatible and fully tested with Safari 2+, Internet Explorer 6+, Firefox 2+, Google Chrome 3+, Opera 9+.
There is two type of data array for jqBarGraph. First is for simple bar graph type, and second is for multi and stacked bar type.For simple bar graph type data for one bar should look like this: [value, label, color]. Label and color are optional. For multi and stacked type of graph you should send data in next format: [[value1, value2, value3, ..., valueN], label].
There is two type of data array for jqBarGraph. First is for simple bar graph type, and second is for multi and stacked bar type.For simple bar graph type data for one bar should look like this: [value, label, color]. Label and color are optional. For multi and stacked type of graph you should send data in next format: [[value1, value2, value3, ..., valueN], label].
JQUERY HOTSPOT MAP & POWERFUL ANNOTATIONS AND TOOLTIPS
Hotspot is a plugin for easily adding annotations, text, or other stuff to an image, on the exact locations that you want. It's an old concept with one exception. It comes with a powerful editor for precise drawing and positioning of the spots. You can also edit settings, see a preview of the final result and the editor will generate the HTML and JS code for you!
One of the most powerful features of this plugin is the editor that it comes with. You don't need to manually specify coordinates and dimensions of each spot on the image. It's all visual - click to add a spot, or click and drag to draw a rectangle. Then dial the settings, click Generate and you will see a preview of the final result!
One of the most powerful features of this plugin is the editor that it comes with. You don't need to manually specify coordinates and dimensions of each spot on the image. It's all visual - click to add a spot, or click and drag to draw a rectangle. Then dial the settings, click Generate and you will see a preview of the final result!
Wednesday, 20 November 2013
SHAKE.JS : & SHAKE & EVENT JAVASCRIPT PLUGIN FOR MOBILE WEB BROWSERS
A custom ‘shake’ event JavaScript plugin for mobile web browsers using device accelerometer.Your web browser must support the
Supported Browsers:
devicemotion
event for this plugin to work. Shake.js uses built-in feature detection to determine if it can run in your web browser. It will terminate silently on non-supporting browsers.Supported Browsers:
- iOS Safari 4.2.1 (and above)
- Android 4.0.3 (default browser)
- Opera Mobile (Android)
- BlackBerry PlayBook 2.0
- Firefox for Android
- FirefoxOS Devices
CREATE A SLIDING NAVIGATION MENU WITH JQUERY
Consider a situation where you include your blog categories in a navigation menu. If you have a long category list, a drop down navigation menu will exceed the page height and the user might need to scroll to navigate to the last part of the menu. These small things are enough for a user to navigate away from your site.
To solve that, we are going to create a complete navigation menu using jQuery. I will explain how to compress large menus using sliding panels to keep the depth of your menu to a minimum level. Take a look at the demo before we get started. You can see that sub level menu items are hidden initially and displayed as sliding panels on click.
To solve that, we are going to create a complete navigation menu using jQuery. I will explain how to compress large menus using sliding panels to keep the depth of your menu to a minimum level. Take a look at the demo before we get started. You can see that sub level menu items are hidden initially and displayed as sliding panels on click.
CONTENTFLOW : JAVASCRIPT FLEXIBLE COVERFLOW SLIDER
ContentFlow is a flexible CoverflowTM / ImageFlowlike flow written in javascript, which can handle any kind of content.
With ContentFlow it is now possible to have any number of flows within one web-page. Each separately configurable, satisfying different visual needs.
With ContentFlow it is now possible to have any number of flows within one web-page. Each separately configurable, satisfying different visual needs.
- It’s easy to implement and to extend.
- It can auto generate reflections (clientside)!
- You can add and remove content items on the fly
- You are free to define your own methods for displaying content and interacting with it.
- You can control all aspects of the flow without loosing the ease of use.
JQUERY PRICE FORMAT PLUGIN
Tuesday, 19 November 2013
JQUERY.SUGGEST : SIMPLE INLINE AUTOSUGGEST JQUERY PLUGIN
jQuery.suggest, a simple inline autosuggest jQuery plugin. It takes an array of terms as haystack and suggests the user the first item that matches what has been typed to this point. The suggestion is updated with every keystroke.
If more than one match is found, a small indicator will appear underneath the input (you can still it via CSS as you wish). The user can then use the arrow up/down keys to cycle through the options.
Tab
or Enter
will accept the suggestion and update the input field accordingly.If more than one match is found, a small indicator will appear underneath the input (you can still it via CSS as you wish). The user can then use the arrow up/down keys to cycle through the options.
SIMPLECART(JS) & JAVASCRIPT SHOPPING CART
No databases, no programming, no headaches. A simple javascript shopping cart in under 20kb that you can setup in minutes. It’s lightweight, fast, simple to use, and completely customizable. All you need to know is basic HTML.
SimpleCart(js) will automatically populate the div with all the items in the cart. You can change the appearance of your cart or what columns are in the cart by checking out Cart Header Formatting.
SimpleCart(js) will automatically populate the div with all the items in the cart. You can change the appearance of your cart or what columns are in the cart by checking out Cart Header Formatting.
MINIMALISTIC SLIDESHOW GALLERY WITH JQUERY
In today's tutorial we will create a simple and beautiful slideshow gallery with jQuery that can be easily integrated in your web site. The idea is to have a container with our slideshow and the options to view a grid of thumbnails, pause the slideshow, and navigate through the pictures. The thumbnail grid will slide out from the top and allow the user to navigate through a set of thumbnails.
RESPONSIVE IMG : JQUERY RESPONSIVE IMAGE PLUGIN
This jQuery Plugin make your existing images responsive without creating new images.Responsive Img is a solution to all which combines a jQuery plugin with a PHP image pre-processor.The plugin enables the page to change the src attributes of the images in parallel to the container width and the PHP file auto-creates the new/resized images.
Images are only created when requested for the first time and this process won't be repeated for future requests to perform better.
Images are only created when requested for the first time and this process won't be repeated for future requests to perform better.
Monday, 18 November 2013
JSIGNATURE : JQUERY PLUGIN FOR DRAW SIGNATURE IN BROWSER
jSignature is a jQuery plugin which simplifies creation of a signature capture field in the browser window, allowing a user to draw a signature using mouse, pen, or finger.
jSignature captures signature as vector outlines of the strokes. Although jSignature can export great bitmap (PNG) too, extraction of highly scalable stroke movement coordinates (aka vector image) of the signature allows much greater flexibility of signature rendering.
A extra effort (through smoothing and pressure simulation) is made to make the strokes look pretty on the screen while these are drawn by the signor.All major desktop, tablet and phone browsers are supported. HTML5 Canvas element is used by default. We fall back on Flash-based Canvas element emulator (FlashCanvas) when actual Canvas is not supported by the browser (Iinternet Explorer v.8 and lower).
jSignature captures signature as vector outlines of the strokes. Although jSignature can export great bitmap (PNG) too, extraction of highly scalable stroke movement coordinates (aka vector image) of the signature allows much greater flexibility of signature rendering.
A extra effort (through smoothing and pressure simulation) is made to make the strokes look pretty on the screen while these are drawn by the signor.All major desktop, tablet and phone browsers are supported. HTML5 Canvas element is used by default. We fall back on Flash-based Canvas element emulator (FlashCanvas) when actual Canvas is not supported by the browser (Iinternet Explorer v.8 and lower).
EASIE.JS : CSS3 LIKE EASINGS FOR JQUERY ANIMATIONS
ZUPER RESPONSIVE MULTITOUCH SLIDER IN JQUERY
Zuper Slider uses unobtrusive javascript and a powerful configuration panel for effects and design elements to transform a block of simple HTML markup into a beautiful elegant slider. When we create the Zuper Slider is lightweight, fast loading, mobile ready, responsive, easy to use,has multiple skins and much more. Zuper Slider is the most complex and powerful slider that you can use. Saves development time - Powerful features - Simple implementation - Fully customizable.
Mobile Ready Zuperslider is mobile ready. Touch gestures navigation for iOS, Android and other touch devices. Its main feature is that has the touch technology implemented for mobile devices.
Mobile Ready Zuperslider is mobile ready. Touch gestures navigation for iOS, Android and other touch devices. Its main feature is that has the touch technology implemented for mobile devices.
Subscribe to:
Posts (Atom)