2014

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

  1. jquery.inputmask

    jquery mask plugin,masked input plugin for jquery,jquery masked,jquery input mask plugin,jquery mask plugin example,jquery mask plugin download,mask input jquery,jquery data mask,jquery input masks,mask in jquery example

    jquery.inputmask is a jquery plugin which create an input mask.
    An inputmask helps the user with the input by ensuring a predefined format. This can be usefull for dates, numerics, phone numbers, .

    Highlights:


    • easy to use
    • optional parts anywere in the mask
    • possibility to define aliases which hide complexity
    • date / datetime masks
    • numeric masks
    • lots of callbacks
    • non-greedy masks
    • many features can be enabled/disabled/configured by options
    • supports readonly/disabled/dir="rtl" attributes
    • support data-inputmask attribute
    • multi-mask support
     Demo|Download

  2. digitalbush-Masked-input-plugin

    jquery mask plugin,masked input plugin for jquery,jquery masked,jquery input mask plugin,jquery mask plugin example,jquery mask plugin download,mask input jquery,jquery data mask,jquery input masks,mask in jquery example













     This is a masked input plugin for the jQuery javascript library. It allows a user to more easily enter fixed width input where you would like them to enter the data in a certain format (dates,phone numbers, etc). It has been tested on Internet Explorer, Firefox, Safari, Opera, and Chrome.
    Demo | Download

  3. jquery-maskmoney

    jquery mask plugin,masked input plugin for jquery,jquery masked,jquery input mask plugin,jquery mask plugin example,jquery mask plugin download,mask input jquery,jquery data mask,jquery input masks,mask in jquery example
    jQuery plugin to mask data entry in the input text in the form of money (currency).
    Demo | Download.

    Last updated:22/12/2014
    Tags:
    jquery mask plugin,masked input plugin for jquery,jquery masked,jquery input mask plugin,jquery mask plugin example,jquery mask plugin download,mask input jquery,jquery data mask,jquery input masks,mask in jquery example
Continue reading

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

  1. Foundation












    Foundation is made by ZURB, a product design company in Campbell, California. We've put more than 15 years of experience building web products, services and websites into this framework.
    Foundation 5 has a faster core that allows you to create beautifully optimized pages for whatever screen you want. The updated core also removes unnecessary wait time for users, especially for animations and transitions. The new updated visual style is simpler, cleaner, sexier and faster to restyle
    Demo     | Download 

  2. Zimit Framework


    Zimit is an open source project created by Jorge Garrido also known as FireZenk,
    with the intention of providing a robust and comprehensive basis for rapid prototyping of responsive web pages.
    Built with the idea of creating a robust base for a complete and uniform prototyping framework for HTML5 websites, Zimit provides a complete design skeleton and a suite of components fully stylized.
    Demo     |Download 

  3. Material-UI














    Material-UI is available as an npm package. Use browserify and reactify for dependency management and JSX transformation. The CSS framework is written in Less, so you'll need to compile that as well. For Sass users, material-ui-sass contains the .scss version of the Less framework.
    Demo     | Download  

  4.  Ink


    For the last 18 years, SAPO has lead the way in web development, in Portugal. We've always contributed to and made use of many open source projects, many of which are critical to our operations. Ink is developed under our open source initiative and made freely available under the MIT license.
    Demo     | Download 

  5. yaml


    YAML provides a complete set of matched building blocks to create complex websites. Grids, navigation, forms, typography module and all provided add-ons work seamlessly together.
    YAML is focussed on device independent screen design and provides bullet-proof modules for flexible layouts. This is a perfect starting point and the key to truly responsive design.
    Demo     |Download

    - Last Updated on 20/12/2014
Continue reading

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

  1. iGrowl

    iGrowl is a lightweight jQuery plugin that generates growl-like notifications with an emphasis on icons. Alerts are fully responsive and CSS animations are used to provide optimal performance. The plugin also includes 4 optional icon packs. 
    Demo     | Download 

  2.  Notify.js

    Notify.js is a jQuery plugin to provide simple yet fully customisable notifications. The javascript code snippets in this documentation with the green edge are runnable by clicking them.
    Demo     | Download 

  3.  PNotify

    PNotify is a JavaScript notification plugin, developed by SciActive. Formerly known as Pines Notify. It is designed to provide an unparalleled level of flexibility, while still being very easy to implement and use.
    Demo | Download

  4. AmaranJS jQuery Notification Plugin









    Nice, sleek and stylish notifications.
    Demo |Download

  5. ohSnap

    A simple notification jQuery/Zepto library designed to be used in mobile apps
    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.

jQuery fontIconPicker is a small  jQuery plugin which allows you to include an elegant icon picker with categories, search and pagination inside your administration forms. The list of icons can be loaded manually using a SELECT field, an Array or Object of icons.
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.
 ScrollMagic is a jQuery plugin which essentially lets you use the scrollbar like a playback scrub control.
It's the plugin for you, if you want to ...
  • start an animation at a specific scroll position.
  • synchronize an animation to the scrollbar movement.
  • pin an element at a specific scroll position (sticky elements).
  • pin an element for a limited amount of scroll progress (sticky elements).
  • easily add a parallax effect to your website.
  • create an inifinitely scrolling page (ajax load of additional content).
  • call functions when the user hits certain scroll positions or react in any other way to the current scroll position.
    License
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.
 MultiSelect turns an ordinary HTML select control into an elegant drop down list of checkboxes with themeroller support
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.

Custom select box replacement inspired by jQuery UI source.
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.

Backbone.Notifier was born as part of JSNAIL.IT (not live at the moment, maybe will revive it some day), an independent project I've worked on. It started as a component I were quite pleased with, and thought it may be also useful by others, so I've decided to add some features, make it completely independent and open it's source.
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.
WOW.js - Reveal Animations When You Scroll. Very Animate.css Friend.

Reveal Animations When You Scroll. Very Animate.css Friend :-)
Easily customize animation settings: style, delay, length, offset, iterations

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.
Last Update :7/16/2014

  1. DataTables

    DataTables is a plug-in for the jQuery Javascript library. It is a highly flexible tool, based upon the foundations of progressive enhancement, and will add advanced interaction controls to any HTML table.

    Source/Demo

  2. Jqgrid

    JqGrid is a grid plugin for the JQuery Javascript library. It is free, open source and gets distributed under the MIT license.


    Source/Demo

  3. JqxGrid

    JqxGrid is powerful data grid widget built entirely with open web standards. It offers rich functionality, easy to use APIs and works across devices and browsers.

    Source/Demo

  4. UiTableFilter

    jquery plugin for filtering table rows


    Demo/Source

  5. Tablesorter

    tablesorter is a jQuery plugin for turning a standard HTML table with THEAD and TBODY tags into a sortable table without page refreshes. tablesorter can successfully parse and sort many types of data including linked data in a cell.

    Demo/Source

  6. InGrid

     Ingrid is an unobtrusive jQuery component that adds datagrid behaviors (column resizing, paging, sorting, row and column styling, and more) to your tables.


    Demo/Source

  7. JTable

    jTable is a jQuery plugin that is used to create AJAX based CRUD tables without coding HTML or Javascript.


    Demo/Source

  8. Dynatable

    Dynatable is a funner, semantic, interactive table plugin using jQuery, HTML5, and JSON. And it's not just for tables.


    Demo/Source

  9. Footables

    FooTable is a jQuery plugin that aims to make HTML tables on smaller devices look awesome.


    Demo/Source

  10. Stupid-table-plugin

    This is a stupidly simple, absurdly lightweight jQuery table sorting plugin. As long as you understand basic JavaScript sorting, you can make this plugin do as much or as little as you want.

    Demo/Source

  11. Handsontable

    Handsontable is a minimal Excel-like data grid editor for HTML, JavaScript & jQuery.

    Demo/Source

  12. Flexigrid

    Lightweight but rich data grid with resizable columns and a scrolling data to match the headers, plus an ability to connect to an xml based data source using Ajax to load the content.

    Similar in concept with the Ext Grid only its pure jQuery love, which makes it light weight and follows the jQuery mantra of running with the least amount of configuration.

    Demo/Source

  13. Table Pagination

    This jquery plugin is used to create a pagination element under a table element. You can customize your pagination needs through various settings.

    Demo/Source
  14. Coming Soon...
     
Continue reading

at 0
Top & Best jquery plugins,tutorials,effects with jquery examples,demos for beginners,designers,developers.jQuery Plugin Tutorial with example.
In this post i will discuss what are the different  methods for pass value from controller to view.
Basically MVC provide 3 options for passing information from an action method (controller ) to view, They are
  • Using ViewData
  • using ViewBag
  • Using Strongly typed view with view model objects

  1.  Using ViewData

     ViewData Dictionary Allow you to add Data information's and that will later  be access from view.
    Check out our example
    Controller:

           public ActionResult ViewDataExample()
            {
                ViewData["viewdatacontent"] = "My name is ViewData";
                ViewData["subcontent"] = "Welcome ";
                return View();
            }
    View
    <h2>ViewData Example</h2>
    <h1> @ViewData["viewdatacontent"]</h1>
    <h2>@ViewData["subcontent"] </h2>
    Check This example and understand ViewData ..

  2. ViewBag

    ViewBag is different when compare ViewData ,You can it understand later Because ViewBag implement dynamic features introduce in MVC 4 versions .The basic thing in ViewBag is that properties can be added to ViewBag is Dynamically
    Refer our code shown below
    Controller :
        public ActionResult ViewBagExample()
            {
                ViewBag.viewdatacontent = "My name is ViewData";
                ViewBag.subcontent = "welcome";
                return View();
            }
    View:
    <h2>ViewBagExample</h2>
    <h1> @ViewBag.viewdatacontent</h1>
    <h2>@ViewBag.subcontent </h2>

    Note: ViewBag use viewData as storage mechanism .One thing you keep in mind ,Both ViewBag and ViewData content or information is Lost after fully view  rendered .
    My point of view ViewBag is better then ViewData because of it is little bit Easier than ViewData
  3. Strongly Typed view with model object
      Check this post
Continue reading

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

In this Posts i will shown some html 5 chats and graphs that are  create using power of jquery .Charts and Graphs include time series, horizontal ,vertical, bar, pie, etc charts which are easy to extend and modify.

  1.  Google Charts


    Google chart is a best chart widget controll for developing interactive webpages .
    Features:

    Rich Gallery

    Choose from a variety of charts. From simple scatter plots to hierarchical treemaps, find the best fit for your data.

    Customizable

    Make the charts your own. Configure an extensive set of options to perfectly match the look and feel of your website.

    HTML5 / SVG

    Cross-browser compatibility (adopting VML for older IE versions) and cross-platform portability to iOS and new Android releases. No plugins are needed.
    Read more:
    View Demo:

  2. Chart.js


    6Type charts

    Visualise your data in different ways. Each of them animated, fully customisable and look great, even on retina displays.

    HTML5 Based

    Chart.js uses the HTML5 canvas element. It supports all modern browsers, and polyfills provide support for IE7/8.

    Simple and flexible

    Chart.js is dependency free, lightweight (4.5k when minified and gzipped) and offers loads of customisation options.
    Demo and documentation

  3. JqPlot


    jqPlot is a plotting and charting plugin for the jQuery Javascript framework. jqPlot produces beautiful line, bar and pie charts with many features:
    • Numerous chart style options
    • Date axes with customizable formatting.
    •  Up to 9 Y axes.
    • Rotated axis text.
    • Automatic trend line computation.
    • Tooltips and data point highlighting.
    • Sensible defaults for ease of use.
      Read more
Continue reading

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

Masonry









Masonry is a best java script grid layout system created by David DeSandro.
 placing elements in optimal position based on available vertical space, sort of like a mason fitting stones in a wall.
check out jquery waterfall layout it is very smiler to jquery Masonry plugin .
You can read more details about Masonry including demos ,methods and events see  see masonry.desandro.com .
Read previous jquery plugins demos and demo
Read more
demo 

Endless Scroll

Endless Scroll is smiler to infinite scroll jquery plugin already used for different websites and blogs .
This scrolling technique is adopted from google reader and live image search .
The Main Features are
  • The ability to up-scroll and prepend content to the beginning of the page
  • Easy to limit no of pages 
  • SEO friendly urls and more exiting features
Read more about Endless scroll .
View Demo.

Continue reading

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

  1.  CSS3 Loading

    Loading is a one of the best css3 collections of SVG loaders and spinners .
    The developer say that If you do intend to use these in production, be aware of limited browser support and be prepared to create fallbacks.
    But most of the latest browsers are support this amazing loading animation with different styles.
    This product is created and licensed by Brent Jackson .
     Read more
    Demo

  2. Flat Preloaders

    Set of animated preloaders, that was made using simple shapes and trendy colors.
    This products will perfectly fit your flat web projects.
    Read more
    Demo

  3. SpinKit

    Spinkit is a pure css animated loading indicators.
    spinkits use only css script  for generate smooth and customizable animations.
    But one thing is spinkit was not works successfully some browsers such as browsers  that not support animation property (ie internet explore 9 and below versions).
    Read more
    Demo
Continue reading

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







CSS loading text animation
contad is a best css3 plugin for animate text while during page load .
you can see demo and description



Continue reading

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






shine.js 

shine.js is a jquery library script for generate shadows . you can see working demo  and documentations.

Main features

  • Dynamic light positions .
  • We can easy to customize shadows and its colors.
  • Apply shine.js for both text and images 
  • shine.js worked in most of the all browsers that support textShadow or boxShadow property .
  • Easy to implement.
  • Light Weight.

    Read more
    Demo

Jquery Shadow













query shadow is a plugin for generate shadow for various purposes.
The main advantage of this plugin is it is created without using any of the image components .So that loading  and customization  is very simple.
Check out demo and read more details .
Read more
Demo

Shadow animation jquery plugin






By using this jquery plugin we can easy to convert box shadow into a animation form and it is support all web browsers that support box shadow property like recent versions of Firefox, Safari, Chrome, Opera and Internet Explorer 9+ .

Read more about this plugin
Demo.

animate textshadow






Animated CSS text shadows with jQuery
animate-textshadow is a simple light weight jquery plugin for animate shadows both text,image and box.
This plugin work all browsers similer to above text shows conditions , ie browsers that support box shadow property .
Read more
View Demo
Continue reading

at 0
Top & Best jquery plugins,tutorials,effects with jquery examples,demos for beginners,designers,developers.jQuery Plugin Tutorial with example.
DateTime picker is a highly customizable jQuery plugin for creating mobile and web application developments.
Most of the date time picker is free and opens source and license under General public license (GPL).
The popular free jquery date time pickers is 
  • BeatPicker
  •  Curioussolutions date time picker
  • Datepicker
  • Gldatepicker
  • pickadate.js
  • JalaliJSCalendar
  • Pikaday
  • Kalendae

 BeatPicker


















Beatpicker is  a JQuery datetime picker for embedding high level web and mobile application development .There are different configurations like  position of a calendar ie left,right,top or bottom and different datetime formatting.
Demo
read more

Pikaday


















pickaday is a refreshing JavaScript Datepicker tools

Features

  • Light weight script around 5KB in size.
  • No dependencies so we can use it in anywhere in our projects.
  • For easy styling they are use modular css techniques .

Browser compatibility

  • IE 7 and above
  •  Chrome 8 and above
  •  Firefox 3.5 and above
  • Safari 3 and above
  •  Opera 10.6 and above
 Download and  view demo
Demo
read more

 Pickadate 






pickdate is a mobile friendly responsive date time picker . There is a tonne of options to customize its configurations and styles .
pickadate is also provide a rich API to extend functionality of a date time picker

Features 

  • It support Jquery 1.7 and above
  • Lightweight 
  • Multi language support
  • Grunt based build system
  • mobile touch and user friendly designs
Demo
Read more

glDatePicker

  gldatepicker is a ultra simple customizable,light-weight date picker plug-in for jQuery at just over 7KB compressed

 

 

 

 

 

 

 

 

 Features

  • Stylish date management  .
  • Set some data on special dates .
  • Restrict movement of month/year from one to other .
  • Hide some dates from selections
  • Jump special year or month through a dropdown list
  • Free to use 
Demo
Read more
check more datetime picker
 
Continue reading

at 0
Top & Best jquery plugins,tutorials,effects with jquery examples,demos for beginners,designers,developers.jQuery Plugin Tutorial with example.
waterfall is a lightweight powerful jquery plugin that allows design websites and web applications that will run on desktops as well as mobile  without worry about its screen resolutions .
we can create fluid website like pinterest.com .
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.
Jspanel is a Jquery plugin for create floating panels for use in a backend solution and other web applications or websites. jsPanel 1.6.0beta10 release on 2014-04-15 with newly features such as optional footer toolbar,improve css,themes and overall improvements in codes and its performance .
For API configurations and detailed configuration of codes please visit  this link .

What is new in Latest jsPanel

  • Add optional footer toolbar
  • Header and footer toolbar now has the same functions
  • improve CSS and templates
  • Improvements in codes and performances
 Read more
Demo
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 check box ,radio buttons for your Web development

iCheck is a highly stylish jquery customizable check box and radio buttons for developing a good website or blogs.Icheck is verified to work in different browsers such as Internet Explorer version 6+, Firefox version 2+, Opera version 9+, Google Chrome and Safari browsers.should works in different other mobile browsers like UC Webs ,opera min,android browsers,ios browsers etc.

Features

  • iCheck  Suppoer differnt platforms like mobile and desktops 
  • Touch device supprts
  • Size is too small about 1 KB
  • Multi customizable check box and radio buttons about 32 styles
  • 11 call back to handling events 
  • Keyboard accessible inputs and more features
Icheck plugin is licensed under MIT License. so we can use icheck plugin free for personal and commercial purposes
View Demo
Download
Continue reading
Subscribe to: Posts (Atom)