2017

at 0
Top & Best jquery plugins,tutorials,effects with jquery examples,demos for beginners,designers,developers.jQuery Plugin Tutorial with example.

Lazy Load Plugin for jQuery


Lazy Load is delays loading of images in long web pages. Images outside of viewport are not loaded until user scrolls to them. This is opposite of image preloading.



Using Lazy Load on long web pages will make the page load faster. In some cases it can also help to reduce server load.

Demo

JLazy


Lazy is a fast, feature-rich, extensible and lightweight delayed content loading plugin for jQuery & Zepto. It's designed to speed up page loading times and decrease traffic to your customers and users by only loading the content in view.

Demo
Download

Lazyload

LazyLoad is a fast, lightweight and flexible script that speeds up your web application by loading images only as they enter the viewport.
LazyLoad is a fast, lightweight and flexible script to allow you enhance performance on your website by loading images only as they enter (or are about to enter) the viewport or a scrollable area, with best support to the img srcset attribute and to the progressive JPEG image format.

LazyLoad supports responsive images, it’s SEO friendly and it has some others notable features.

Demo

Download

bLazy 


bLazy is a lightweight script for lazy loading and multi-serving images, iframes, videos and more (less than 1.4KB minified and gzipped). It’s written in pure JavaScript why it doesn’t depend on 3rd-party libraries such as jQuery. It lets you lazy load and multi-serve your images so you can save bandwidth and server requests. The user will have faster load times and save data usage if he/she doesn't browse the whole page.

Demo

Download

BttrLazy


BttrLazyLoading is a Jquery plugin that allows your web application to defer image loading until images are scrolled to but not only! BttrLazyLoading also allows you to have different version of an image for 4 differents screen sizes: phones (<768px), tablets (≥768px), desktops (≥992px) and large Desktops (≥1200px).

Demo 

Download

Tags:
ajax loader, image effects, javascript load, javascript on scroll, jquery, lazy images, lazy load images, lazy loading, lazy loading javascript, lazyload js, load plug in, plugin, 
Continue reading

at 0
Top & Best jquery plugins,tutorials,effects with jquery examples,demos for beginners,designers,developers.jQuery Plugin Tutorial with example.
Simple yet flexible JavaScript charting for designers & developers.

Features

Mix and match bar and line charts to provide a clear visual distinction between datasets.

 Plot complex, sparse datasets on date time, logarithmic or even entirely custom scales with ease.

 Out of the box stunning transitions when changing data, updating colours and adding datasets.

 Open source-Chart.js is a community maintained project, contributions welcome!

 Responsive-Redraws charts on window resize for perfect scale granularity.

 HTML5 Canvas-Great rendering performance across all modern browsers (IE9+)

 8 Chart types-Visualize your data in 8 different ways; each of them animated and customisable.

 Demo

 Download


Continue reading

at 0
Top & Best jquery plugins,tutorials,effects with jquery examples,demos for beginners,designers,developers.jQuery Plugin Tutorial with example.
A vanilla, lightweight, configurable select box/text input plugin. Similar to Select2 and Selectize but without the jQuery dependency.

Features


  • Lightweight
  • No jQuery dependency
  • Configurable sorting
  • Flexible styling
  • Fast search/filtering
  • Clean API
  • Right-to-left support
  • Custom templates
Check out demo and developer site


Continue reading

at 0
Top & Best jquery plugins,tutorials,effects with jquery examples,demos for beginners,designers,developers.jQuery Plugin Tutorial with example.

A lightweight, pure JavaScript tooltip library.

Most browsers from 2012 onwards (IE10+). As of early 2017, it should support 95% of users (caniuse.com); depending on your target audience it could be higher or lower. Tippy gracefully degrades on older browsers (and with JavaScript disabled) by using the browser's default title tooltip.

Tippy works on touch devices almost the same as on desktop/mouse devices.
However, in order for tooltips to close when tapping anywhere on the body on touch devices (at least on iOS).

Demo

Download


Continue reading

at 0
Top & Best jquery plugins,tutorials,effects with jquery examples,demos for beginners,designers,developers.jQuery Plugin Tutorial with example.

A Fast, simple and lightweight browser feature detection library written in plain JavaScript. Try it by opening this page in different browsers and seeing the results:
 It has no dependencies and weighs only 1kb minified and gzipped. Feature.js automati­cally initia­lizes itself on page load, so you don’t have to. It doesn’t, however, run any tests while ini­tia­lizing, so

it will only ever run them when you ask it to. This makes it perform very fast.
With Feature.js, it’s simple to build progres­sively enhanced expe­riences that use feature detection to determine if a code can be execu­ted in the user’s browser.

Demo

Download 
Continue reading

at 0
Top & Best jquery plugins,tutorials,effects with jquery examples,demos for beginners,designers,developers.jQuery Plugin Tutorial with example.

TwitTalk is a very simplistic use of the Twitter API.
It encompasses both the search and user profile API to grab both text and media tweets.
Right now, it will take the last x amount of tweets from users where the language is determined to be english(en) who have mentioned Kate Spade/Jack Spade or the tweets that are from Kate Spade and Company entities.
The layout is built with JQUERY (Freewall.js).
The twitter process is built with PHP and the rest is just vanilla JS.

Demo

Download
Continue reading

at 0
Top & Best jquery plugins,tutorials,effects with jquery examples,demos for beginners,designers,developers.jQuery Plugin Tutorial with example.

Today we’d like to share some isometric grid styles with you.
The inspiration comes from the Hotchkiss website where an isometric, scrollable grid is shown with some cool hover effects. In our first experiment we created a scrollable grid just like the one seen on that site, with some hover effects that involve random rotations.
 The second demo shows some ideas for “static” grids that are not scrollable but that serve more kind of a decorative purpose.
Demo

Download


Continue reading

at 0
Top & Best jquery plugins,tutorials,effects with jquery examples,demos for beginners,designers,developers.jQuery Plugin Tutorial with example.
Highly customizable checkboxes and radio buttons (jQuery & Zepto)




  • Identical inputs across different browsers and devices — both desktop and mobile
  • Touch devices support — iOS, Android, BlackBerry, Windows Phone, Amazon Kindle
  • Keyboard accessible inputs — Tab, Spacebar, Arrow up/down and other shortcuts
  • Screenreader accessible inputs — ARIA attributes for VoiceOver and others
  • Customization freedom — use any HTML and CSS to style inputs (try 6 Retina-ready skins)
  • jQuery and Zepto JavaScript libraries support from single file
  • Lightweight size — 1 kb gzipped
  • 32 options to customize checkboxes and radio buttons
  • 11 callbacks to handle changes
  • 9 methods to make changes programmatically
  • Saves changes to original inputs, works carefully with any selectors

Continue reading

at 0
Top & Best jquery plugins,tutorials,effects with jquery examples,demos for beginners,designers,developers.jQuery Plugin Tutorial with example.


Swiper is the free and most modern mobile touch slider with hardware accelerated transitions and amazing native behavior. It is intended to be used in mobile websites, mobile web apps, and mobile native/hybrid apps. Designed mostly for iOS, but also works great on latest Android, Windows Phone 8 and modern Desktop browsers

Swiper is not compatible with all platforms, it is a modern touch slider which is focused only on modern apps/platforms to bring the best experience and simplicity.

Demo

Download

Continue reading

at 0
Top & Best jquery plugins,tutorials,effects with jquery examples,demos for beginners,designers,developers.jQuery Plugin Tutorial with example.

SlidesJS is a responsive slideshow plug-in for jQuery (1.7.1+) with features like touch and CSS3 transitions. Give it a try above and check out the examples to help you get started adding SlidesJS to your project.

Features


  • Responsive
    Create dynamic slideshows that adapt to any screen.
  • CSS3 transitions
    Animations that run smoothly on modern devices.
  • Touch
    Swipe support that tracks touch movements on supported devices.
  • Easy setup
    Get going fast with the easy-to-use examples.


Demo

Download 
Continue reading

at 0
Top & Best jquery plugins,tutorials,effects with jquery examples,demos for beginners,designers,developers.jQuery Plugin Tutorial with example.

Jssor Slider


Jssor Slider is touch swipe image slider carousel with 200+ slideshow effects.
 When touch Jssor Slider, it will freeze and then move to the direction that finger swipes to. It comes with javascript library source code.

Jssor Slider is reponsive by calling API. The API method '$ScaleWidth' is the best performance responsive slider carousel approach, Jssor Slider can be scaled to any size at realtime.

Jssor Slider works on any javascript enabled browser, including Windows Phone, iOS, Android and Opera Mobile etc.
And Jssor Slider is well tested on Samsung mobile, iPhone, iPad, HTC, Blackberry. Report Device.

Demo 

Download

ResponsiveSlides.js

 A tiny jQuery plugin that creates a responsive slider using elements inside a container. It has been used on sites like Microsoft's Build 2012 and Gridset App. ResponsiveSLides.js works with wide range of browsers including all IE versions from IE6 and up.

Demo

Download

Slippry

Responsive slider plugin for jQuery. Intrinsic trick to enable responsive resizing without js.
Responsive
Slippry is written with the future in mind, not the past. We wrote it to work on the latest jQuery functions, CSS3 tricks and HTML5 elements. We support death with dignity for technology.

Demo

Download

bxslider


  • Fully responsive - will adapt to any device
  • Horizontal, vertical, and fade modes
  • Slides can contain images, video, or HTML content
  • Advanced touch / swipe support built-in
  • Uses CSS transitions for slide animation (native hardware acceleration!)
  • Full callback API and public methods
  • Small file size, fully themed, simple to implement
  • Browser support: Firefox, Chrome, Safari, iOS, Android, IE7+


Demo

Download



Continue reading

at 0
Top & Best jquery plugins,tutorials,effects with jquery examples,demos for beginners,designers,developers.jQuery Plugin Tutorial with example.

tooltipster


A flexible and extensible jQuery plugin for modern tooltips by Caleb Jacob and Louis Ameline under MIT license.
Compatible with Mozilla Firefox, Google Chrome, IE6+ and others.
Requires jQuery 1.10+
demo

downlad

tooltipsy.com



jQuery tooltip plugin for control-obsessed designers.
demo
downlad

qtip2.com


qTip2 is the second generation of the advanced qTip plugin for the ever popular jQuery framework.
Building on 1.0's user friendly, yet feature rich base, qTip2 provides you with tonnes of features like speech bubble tips and imagemap support, and best of all... it's completely free under the MIT/GPLv2 licenses!

demo
downlad

tipsy



Tipsy is a jQuery plugin for creating a Facebook-like tooltips effect based on an anchor tag's title attribute.

demo
downlad

Tipr 


Tipr displays attractive tooltips, and it's around 2KB, CSS included. The tooltips can appear above or below almost any HTML element. It also reacts to the size of the viewport.

demo
downlad

protip


49 position
Live refresh of tooltip options.
Live element checking (element removed? -> tooltip should disappear).
Gravity: find a better position if it won't fit to the screen.
DOM targets: append into the root or into another target element.
Placements: outside, inside, border, center
Click activated and sticky tooltips.
Custom HTML content
Interactive tooltips
In/Out delays
Auto-hide
Icon support
Skins, sizes, schemes
Animations support
Mixins (CSS only, JS based coming soon)
Custom event callbacks
UMD Support
demo
downlad


Continue reading

at 0
Top & Best jquery plugins,tutorials,effects with jquery examples,demos for beginners,designers,developers.jQuery Plugin Tutorial with example.
Hi tody iam going to show css3 grid layout system for your moderns website development scenario.
old website designers were achieve this responsive grid system as their own design patterns ,but now a days this job is very easy by using ready made CSS Grid Layout Framework. 2014 Best Bootstrap Alternatives-Change Design Into Responsive. 10+ Stylish Jquery Datetime Picker Plugin For Web And Mobile Application Developers
how i can find best responsive Grid Layout Framework ?
Best Grid Layout Framework mach all the below aspects .
  • Fluid Layout
  • Mobile First
  • Responsive
  • Fixed Gutter etc.
In this article i will take some of those Layout Frameworks.


Bootstrap is a sleek, intuitive, and powerful front-end framework for faster and easier web development.It's made for folks of all skill levels, devices of all shapes, and projects of all sizes.

Created and designed by Google, Material Design is a design language that combines the classic principles of successful design along with innovation and technology. Google's goal is to develop a system of design that allows for a unified user experience across all their products on any platform.


Semantic is a UI component framework based around useful principles from natural language.
Key Features
  • 50+ UI elements
  • 3000 + CSS variables
  • 3 Levels of variable inheritance (similar to SublimeText)
  • Built with EM values for responsive design
  • Flexbox friendly

  • Light as a feather at ~400 lines & built with mobile in mind.
  • Styles designed to be a starting point, not a UI framework.
  • Quick to start with zero compiling or installing necessary.

Responsive modifiers enable specifying different column sizes, offsets, alignment and distribution at xs, sm, md & lg viewport widths.

Simple Grid was created for developers who need a barebones grid. Simple Grid works well with 1140px layouts but easily adapts to any size of layout. With fluid columns, Simple Grid is responsive down to mobile.

Simple Grid is a 12-column, lightweight CSS grid to help you quickly build responsive websites. Download the CSS stylesheet, add the appropriate classes to your markup, and you're off to the races. It’s that simple.

he Responsive Grid System isn't a framework. It's not a boilerplate either. It's a quick, easy & flexible way to create a responsive web site.



Continue reading

at 0
Top & Best jquery plugins,tutorials,effects with jquery examples,demos for beginners,designers,developers.jQuery Plugin Tutorial with example.



TToday i am going to share some commonly used query validation plugins on last year .These all are very easy to integrated on common programming languages .

1.jqueryvalidation


This jQuery plugin makes simple clientside form validation easy, whilst still offering plenty of customization options. It makes a good choice if you’re building something new from scratch, but also when you’re trying to integrate something into an existing application with lots of existing markup. The plugin comes bundled with a useful set of validation methods, including URL and email validation, while providing an API to write your own methods.

Demo | Download

2.jQuery-Validation-Engine

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.

Demo | Download

3. Validator, for Bootstrap 3

The Validator plugin offers automatic form validation configurable via mostly HTML5 standard attributes. It also provides an unobtrusive user experience, because nobody likes a naggy form.

Demo | Download


Continue reading
Subscribe to: Posts (Atom)