Archive for the ‘Web Development’ Category

Ultimate collection of top jQuery tutorials, tips-tricks and techniques to improve performance

I have been looking for the ultimate collection of the most useful and common jQuery code snippets for JavaScript over the web for quite some time now. But the world’s not a perfect place and I haven’t come across ‘the’ place where one would get all the information regarding jQuery be it for DOM manipulation and traversal functions, selectors, cheat sheets or performance improvement for JavaScript code which are written through jQuery. Hence this is my small endeavor to put together the most popular and talked about jQuery link collections across the web.

Here you would find links which are related to improve web site performance for your jQuery driven sites as well as helpful guides & tutorials with jQuery code snippets in them which you can basically copy-paste onto your web applications. The main goal was to focus on links which provide enough examples with jQuery code for the most common web development cases.

While this is not the ultimate collection for the most popular jQuery plugins, I have included the most re-tweeted ones through my twitter account search section. Please feel free to add links related to this particular category as well in the comments. I am sure it would be useful to the readers.

Here goes the compilation in no particular order:

Improve your jQuery – 25 excellent tips

jQuery Tips and Tricks– Stack Overflow

jQuery Tips and Tricks

jQuery Useful and Handy Tips and Tricks

jQuery Tips and Tricks Part 2

20 Top jQuery tips & tricks for jQuery programmers

jQuery Tips and Tricks

Tutorials:5 Quick jQuery Tips

5 easy tips on how to improve code performance with huge data sets in jQuery

50+ Amazing Jquery Examples- Part1

8 Fantastic jQuery Tutorials for Designers

jQuery Tutorials for Designers

Top 3 jQuery Tips for Beginners

7 Really Useful Tips For Better jQuery Code

jQuery Tips, Tricks, and Miscellaneous

A Couple of Quick jQuery Tips: Alternating Gray Rows in a Table, Highlight Table Row Mouseover

10 Tips for Writing Better jQuery Code

6 fast jQuery Tips: More basic Snippets

6 more jQuery Tips: Text Searching, Page Load Time and Others

6 quick jQuery tips: Text manipulation, timers and elements

8 awesome JQuery tips and tricks

Useful and Handy jQuery Tips and Tricks

jQuery Tips and Tricks II

10 Advance jQuery Scripts to take Your Website to the Next Level

jQuery for Beginners: Selectors, Hierarchies and Attributes, Oh My!

20 jQuery Tutorials And Plugins To Impress Your Friends

25+ jQuery Plugins that enhance and beautify HTML form elements

6 jQuery snippets you can use to manipulate select inputs

40 Exceptional jQuery Interface Techniques and Tutorials

Clever jQuery Selectors

95+ Exceptionally Useful jQuery Plugins, Tutorials and Cheat Sheets

10 Really Helpful Traversing Functions in jQuery

jQuery CSS3 Selectors Sandbox

jQuery Selectors Cheet Sheet

55 Jquery Tutorials, Resources, Tips And Tricks: Ultimate Collection

38 jQuery And CSS Drop Down Multi Level Menu Solutions

51 Form Element Resources and Tutorials Using CSS And Javascript

37 More Shocking jQuery Plugins

10 incredible JQuery navigation menus

jQuery Visual Cheat Sheet


Updated on October 12, 2009:


Starting With jQuery – Validation Plug-in

bassistance.de » jQuery plugin: Validation

A jQuery inline form validation, because validation is a mess

Regex Selector for jQuery

Parsing Strings With jQuery

jQuery plugin to style scrollbars (cross-browser compatible)

jScrollPane: cross-browser jQuery plugin to replace browsers default vertical scrollbars

Jquery Vertical Slide (Dropdown) Navigation

Animated Scrolling with jQuery 1.2

jQuery Patch: Animate CSS Rotation and Scale

Special Events

Scrolling with jQuery

jQuery – Loading Partial Content

jQuery – Using Slider as a Scrollbar

Animated Page Scroll with jQuery

jQuery’s Passes Itself As An Argument To The “Ready” Event Callback

Viewing jQuery DOM Event Bindings With FireBug

jQuery’s Filter() Method Can Take A Callback Function For Advanced Filtering

A Graphical Explanation Of Javascript Closures In A jQuery Context

jquery-aop: Aspect Oriented Extensions for jQuery to add advices (Before, After, Around & Introdcution)

Load Content While Scrolling With jQuery

Implementing infinite scrolling with jQuery

jQuery Smooth Div Scroll by Thomas Kahn

Up and Down slider using JQuery

10 best jQuery gallery and slider plugins

Step By Step To Create Content Slider using jFlow, A Minimalist jQuery Plugin

jQuery Looped Slider Tutorial

Making a Content Slider with jQuery UI

Accessible News Slider

Learning jQuery: Revealing Photo Slider

Create Featured Content Slider Using jQuery UI

Update: jQuery UI 1.7 Slider from a Select Element

Build a Content Slider with jQuery

Easy Slider Plugin from jQuery UI

Coda Slider Effect

13 Super Useful jQuery Content Slider Scripts and Tutorials

Making A Slick Content Slider

Master CheckBox in GridView header

jQuery TOOLS / Scrollable – Scroll your HTML with eye candy

CSS/JS Hack – Vertical Scrollbars. On the… left.

jqPrint: jQuery Plugin to print only contents of a specified element using jPrintArea plugin

Introduction to jQuery in ASP.Net and 10 Advantages to Choose jQuery

45+ Fresh Out of the oven jQuery Plugins

List of Useful jQuery Plugins


Updated on December 01, 2009:

jQuery based Modal Popups / Windows / Dialogs:

jqModal- Minimalist Modaling with jQuery

SimpleModal Plugin by Eric Martin

jQuery UI Dialog Plugin

NyroModal :: jQuery Plugin

boxy – Facebook-like dialog/overlay, with frills

jQuery Impromptu

jQuery AJAX Validation Contact Form with Modal + Slide-in Transition | The Blog of Joren Rapini

jQuery Plugin: choose component

Facebox v1.2

jQuery – Modal Dialog

jQuery SuperBox!

More =>

15+ jQuery Popup Modal Dialog Plugins and Tutorials

jQuery Popup Dialog And Gallery Plugin Reviews

Simple jQuery Modal Window Tutorial

Modal Scripts | Modal Window | Modal Dialog | Modal Popup – DownloadJavascripts.com

jQuery modal box round up

Top 5 jQuery Modal Plugins

19 jQuery Modal Boxes to improve your UI

How to create a stunning and smooth popup using jQuery

Building modal panels with jQuery

JQuery: Die 22 besten Modal – Fenster Plugins [German site but still has useful links]

 

Please do keep in mind that this can’t, in no way, be the perfect and most complete collection for all things related to jQuery. Despite the title of the article, it simply can’t be without your efforts. Hence, I would most sincerely urge my valued readers to feel free to post their favorite ones through the comment section. With a little bit of help from you mates, I am sure we can build ‘the ultimate collection’ which we have set forth on achieving. After all, in order to achieve big we need to dream big as well, no? So, please do contribute even if that means posting a single link which adds value to this collection of jQuery links. Only then will this post no longer be a misnomer. Keep this growing to infinity folks!

Advanced JavaScript Resources

JavaScript, being so simple to learn & use is one programming language which is not always given its proper due. I think the main reason for this is that most people who tries to undermine the language are greatly fooled by it’s simplicity. Although, it has its fare share of shortcomings but the kind of things it can accomplish is pretty amazing.  If you have any doubts, check Can Your Programming Language Do This? at Joel on Software.

There are raging and never ending debates as to whether JavaScript is even a true programming language or whether it is an object-oriented language at all but that’s beside the point.

IMHO, JavaScript does indeed exhibit object-oriented programming language features. As per Yahoo! Answers, there are two models of object orientation. One is based on classes as the templates from which to create objects (instances of classes), and the other relies on prototypes that are already objects and which can be cloned to create new instances. JavaScript (and others) takes the prototype approach.

In any case, today I am here to guide you towards few sources which should go a long way in giving you a good idea about what JavaScript is and what it isn’t. Statutory warning – most of them are of advanced nature :). So, here you go, look at these sources which might quench your thirst for advance level JavaScript:

JavaScript Execution Context, Closure, Eval and “this” Keyword

Javascript Closures

The Magic Eval

Quirksmode JavaScript Tutorials

Scope in JavaScript

Variable Scope for New Programmers

Code Conventions for the JavaScript Programming Language

The JavaScript Programming Language

Douglas Crockford: JavaScript Doesn’t Suck

JavaScript as a Functional Language

Functional JavaScript – Harnessing the power of the Function Object

Yahoo! User Interface Blog has these excellent resources:

Douglas Crockford, a senior JavaScript Architect at Yahoo! and introducer of JavaScript Object Notation (JSON) to the world, whose  JavaScript: The World’s Most Misunderstood Programming Language is a must read, had a go at clearing the common JavaScript misgivings for you folks out there:

YUI Theater: Douglas Crockford, The JavaScript Programming Language

Video: Douglas Crockford, “An Inconvenient API: The Theory of the Dom”

Video: Douglas Crockford, “Advanced JavaScript”

Learning JavaScript Programming Language through Video Lectures

Weekly Link Roundup – 1

Links published on April 13, 2009:

101 Essential Resources For Freelancers

This article contains:

  • Must Read Articles For Freelancers
  • Blogs Freelancers Should Subscribe To
  • Forums For Freelancers
  • Where To Find Freelancing Gigs
  • Useful Tools For Freelancers
  • Freelancer Survey Results

Interesting Web Development Related Resources

This article contains resources on JavaScript, jQuery, CSS, ASP.NET AJAX etc.

10 Creative & Rich UI & How to Create Them

10 creative & rich UI in modern day websites and how you can create similar interfaces using the techniques mentioned in this post.

jQuery UI provides a comprehensive set of core interaction plugins, UI widgets and visual effects that use a jQuery-style, event-driven architecture and a focus on web standards, accessibility, flexible styling, and user-friendly design. All plugins are tested for compatibility in IE 6.0+, FF 2+, Safari 3.1+, Opera 9.0+, and Google Chrome.

CSS Dock Menu ala KDE

See it to believe it. It has quite amazing resemblance to the KDE environment or Apple Macintosh like UI.

Simple Round CSS Links ( Wii Buttons ): Quite a nice way to embellish your buttons or links through CSS. Give it a try.

Nice Bubble Tooltips written with JavaScript. The balloon like feature is attractive.

Programmer Competency Matrix: Very interesting way to calculate capability index for your fellow developers or yourself as a matter of writing!

20 Things Programmers Say When Something Is Not Working

This is a very funny yet a true representation of events during software development life-cycle.

Follow

Get every new post delivered to your Inbox.