7 jQuery code snippets a programmer need daily


by Php Ninza on August 2, 2009

Usually programmers use a lot of JavaScript code snippets as functions regularly, These JavaScript functions are lengthy code snippets and are usually tough to understand and edit. Some of the most common functions used are form validation functions , Pagination functions etc.

The day since jQuery has been on the block , It has provided a nifty way of solving a lot of common problems for which we needed lengthy JavaScript functions. I am sharing with you guys top 20 jQuery plugins and code snippets that are pretty useful for daily coding routines.

1) Form validation plugin:- Form validation is probably the most common used JavaScript functionality used these days . However , a lot of repetitive editing is required in the forms and JavaScript regex expressions for correctly fitting the validations.

For this a nifty jquery plugin Valid8 provides a easy to use 4 line code to insert validation in any form !, Valid8 provides various methods including ajax requests, multiple regex validation etc in form validation , I have found ajax requests to be a nifty feature while checking username availability in registration and signup forms

Valid8 plugin page can be found at http://www.unwrongest.com/projects/valid8/

And it can be downloaded from:-

http://jquery-valid8.googlecode.com/files/jquery.valid8-1.2.2.js

2) Drag and Drop functionality using jQuery:- This excellent tutorial showed me a nifty way of making a drag and drop functionality , This drag and drop interface provide a excellent web 2.0 interface in your web projects for user usability. This drag and drop tutorial uses the Google JqueryUi plugin , Which we believe is used by google on it’s products  Drag and drop is used heavily by Google on it’s products such as gmail and igoogle.

For making such a drag and drop functionality you will need the jquery Ui plugin by google which can be located here.

The tutorial can be find at :- http://papermashup.com/drag-drop-with-php-jquery/

The demo of this tutorial can be located at http://papermashup.com/demos/jquery-drag-drop/

And the complete source code of the tutorial can be downloaded from http://papermashup.com/demos/jquery-drag-drop/jquery-drag-drop.zip

3) Pagination using jquery:- This is a official plugin from Jquery guys to provide pagination on any set of data you have. This plugin is a useful replacement of the php pagination classes and provides a neat web2.0 style pagination features.Pretty useful when we have a large sets of data such as search results or data listings.

Since this is a official plugin from jquery guys , The stability of the plugin is definitely unquestionable . it uses a simple javascript funciton which takes page_index and paging container as the arguments. For complete documentation read the official documentation of this plugin

The official Plugin page can be found at:- http://plugins.jquery.com/project/pagination

The demo of the plugin can be seen at:- http://d-scribe.de/webtools/jquery-pagination/demo/demo_options.htm

4) Embed flash using jQuery:- Flash is probably the best intreactive web technology invented till date, The people tend to understand best by audio-visual effects and flash is the ultimate choice on web.

Dealing with flash variables , cross-browser issues and browsers with flash plugin not installed always left a bitter experience for a programmer, But using this Embed flash plugin this issues can be sorted out in a easy manner.

The official plugin page can be found at:- http://jquery.lukelutman.com/plugins/flash/

5) Creating tag cloud via jQuery:- Tag cloud are a excellent way of showing important keywords and categories on your website ! , Usually tag cloud are made through php class via predefined keyword density.

The official plugin dynacloud shows a neat simple tagcloud which is generated dynamically.

The official plugin page can be found at:- http://plugins.jquery.com/project/dynacloud

Demo of the plugin can be found at

http://johannburkard.de/blog/programming/javascript/dynacloud-a-dynamic-javascript-tag-keyword-cloud-with-jquery.html

6) Insert Simple ajax effects using jquery :- Simple effects plugin provides easy methods of inserting cool ajax functionality and UI in your web apps.

UI functionality like Fade toggle boxes and blind toggle boxes are cool effect that can make your web apps UI a lovely experience for your users.

The official plugin page can be found at http://www.learningjquery.com/2008/02/simple-effects-plugins

7) Creating tips with jQuery  :- Tips are some efficient way of showing simple bits of information to users, This jquery plugin gives you a excellent way to create nifty tips in html code

Plugin page can be found at:- http://codylindley.com/Javascript/264/jtip-a-jquery-tool-tip

Demo of this jquery plugin :- http://www.codylindley.com/blogstuff/js/jtip/

These are some basic plugins that can make progrrammers life easy ! Try them and let us know how you find them !, Do list out your favorites plugin below.

Technorati Tags: ,,,

Also, If you are beginning your steps on jquery development , Do try this excellent book on jquery . It has all necessary details on beginning jquery development

Share and Enjoy:
  • Print
  • Digg
  • Sphinn
  • del.icio.us
  • Facebook
  • Mixx
  • Google Bookmarks
  • Blogplay

{ 27 comments… read them below or Shout @ me! }

Praval Singh August 2, 2009 at 2:54 pm

Good one, esp. for learners!

SeanJA August 2, 2009 at 7:47 pm

None of those were snippets, those were all plugins…

Roger Padilla August 2, 2009 at 7:55 pm

Very welcome, thank you!

Atif Majid August 3, 2009 at 5:23 am

Really Nice. Thanks for sharing

Sean O August 3, 2009 at 9:55 am

Snippets? Umm, these are plugins. You should change the title of this post for accuracy.

Liam August 3, 2009 at 10:28 am

title now says “jQuery plugins that a programmer need everybody”

ruhanirabin August 3, 2009 at 10:43 am

Seven #jQuery code snippets a programmer need daily http://bit.ly/157tVn

This comment was originally posted on Twitter

BariHossain August 3, 2009 at 11:24 am

“7 jQuery code snippets a programmer need daily” #tech #jquery #plugin http://bit.ly/157tVn (via @elijahmanor)

This comment was originally posted on Twitter

web2feed August 3, 2009 at 11:30 am

jQuery plugins that a programmer need everybody | PHP tutorials and Scripts Collection http://bit.ly/jXmzS #jquery

This comment was originally posted on Twitter

Php Ninza August 3, 2009 at 11:33 am

@Praval

Thanks bud, The inspiration is always to friend my developer friends

Php Ninza August 3, 2009 at 11:38 am

@Roger

Thanks by stopping by , You guys are real inspiration

Php Ninza August 3, 2009 at 11:42 am

@SeanJa @Sean0

Thanks guys for stopping by !, If you go through the links given in the post , These links leads to some basic snippets that you can use with the help of plugins.

These plugins are now in daily use in my codes. I have found them very useful instead of using PHP classes and functions.

And there goes the post and the title , Hope i am clear !, Stay in touch

Php Ninza August 3, 2009 at 11:43 am

@Roger and @Atif

Thanks buds, I love to help newbies in web dev!, They bring in amazing enthu. Hope you guys liked it.

Php Ninza August 3, 2009 at 11:44 am

@liam

Can’t help this link was bookmarked by someone in that manner and which now became viral !, Can’t change that entry

mrtech August 3, 2009 at 11:51 am

7 #jQuery code snippets a programmer needs daily #tech #js #jquery http://bit.ly/3D2rVc

This comment was originally posted on Twitter

halhelms August 3, 2009 at 2:27 pm

7 useful-on-a-daily-basis jQuery tips. http://is.gd/20rDK

This comment was originally posted on Twitter

cgw3 August 3, 2009 at 3:55 pm

7 jQuery code snippets a programmer needs daily http://ff.im/-67eYm

This comment was originally posted on Twitter

hekainteractive August 3, 2009 at 4:15 pm

@myEN 7 jQuery code snippets a programmer needs daily http://ff.im/-67eYm

This comment was originally posted on Twitter

baires August 3, 2009 at 4:32 pm

#jQuery plugins that a programmer need everybody – http://bit.ly/ri6P8

This comment was originally posted on Twitter

paulmilford August 4, 2009 at 8:02 am

7 jQuery plugins that a programmer needs everybody | PHP tutorials and Scripts Collection http://bit.ly/jXmzS #php

This comment was originally posted on Twitter

cybercool10 August 4, 2009 at 12:31 pm

jQuery plugins that a programmer need everybody | PHP tutorials and Scripts Collection #php http://to.ly/nPR

This comment was originally posted on Twitter

mikeeadams August 7, 2009 at 6:52 pm

7 jQuery code snippets a programmer need daily: http://bit.ly/l3GGL via http://stufftotweet.com/

This comment was originally posted on Twitter

petarvucetin August 7, 2009 at 8:17 pm

jQuery plugins that a programmer need everybody | PHP tutorials and Scripts Collection http://ff.im/-6iSCt

This comment was originally posted on Twitter

Web2Discover August 10, 2009 at 10:35 pm

jQuery plugins that a programmer need everybody | PHP tutorials and Scripts Collection: http://bit.ly/A8hKF

This comment was originally posted on Twitter

stefan4m August 11, 2009 at 9:26 am

7 jQuery code snippets a #programmer need daily(Form #validation plugin, Drag and Drop functionality using #jQuery, etc) http://ow.ly/jF0j

This comment was originally posted on Twitter

Stas September 1, 2009 at 3:25 am

I suggest everyone to use new free PHP IDE – Codelobster PHP Edition with special JQuery plug-in for working with JQuery library.

Alok Das July 21, 2010 at 10:31 am

really a nice one.

Leave a Comment

{ 5 trackbacks }

Previous post:

Next post: