Archive for September, 2009

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!

Advertisements

Announcing new league on Cricinfo Fantasy Cricket for ICC Champions Trophy 2009

It’s fantasy cricket time once again as countries lock horns against countries in the ICC Champions Trophy 2009 scheduled to begin on the 22nd of September, 2009.

According to Wikipedia, the 2009 ICC Champions Trophy is a One Day International cricket tournament to be held in South Africa between 22 September and 5 October.

Earlier this year, I ran another league on the T20 World Cup that was held in England during the month of June. Here’s that posting for you to get up to speed with the game:

Announcing new league on Cricinfo Fantasy Cricket for T20 World Cup 2009

Cricinfo has just announced couple of games for the upcoming 8 team Champions Trophy tournament.

Champions Trophy

This is the most exciting game of the two as you need to pick the right players to play the tournament. You can create a maximum of two teams in this game. Do make sure you have both the teams ready come match day on the 22nd because that gives you some insurance against one of your teams not doing well. In that case, you can always fall back upon your second team. The key is to pick two different teams with different combination so as to maximize your chances of success. There are few rules regarding transfers for this game:

Unlimited transfers are allowed only until 12:30 GMT on Sep 22, 2009. Thereafter, you have got 12 transfers available till the group matches get over on Sep 30, 2009. This will be followed by a period of ‘unlimited transfers’ till the first semi-final that starts at 12:30 GMT on Oct 2, 2009. Thereafter there would be 4 transfers allowed for the Semi-finals and Final.

I have created a league named “Velvet Flair Champions Trophy” for this very game. Do join me and rest of the folks to lock horns amongst ourselves and see who has got the best cricket brain to match this contest. In order to join join my League on Cricinfo Fantasy Cricket for the ICC Champions Trophy 2009 you need to use this LPIN:

90293-6f5ee36548afe841

Champions Trophy Pick’em

This is another game where you need to predict the winner or loser in each game. But you have to do this right before the tournament starts.

I have also created a league named “Velvet Flair’s CT Pick’em” for the Champions Trophy Pick’em game. Here’s the LPIN for the league:

90292-6f5ee48c48afe168

To join the leagues,

Step 1: Go to Cricinfo Fantasy Cricket

Step 2: Login with your Cricinfo ID (you will need to register if you do not have one)

Step 3: Create an entry for yourself (this step is optional if you already have one)

Step 4: Click on ‘Join a League’ on the Left Hand Navigation

Step 5: On the page which appears, select your entry, copy and paste the unique invitation code (LPIN) mentioned above

Step 6: You are now a member of the league – all set to play Cricinfo Fantasy Cricket

In order to get some tips on the game and get abreast with the nuances of this fantasy league do read my earlier blog post below for the Twenty20 Worldcup held in June 2009 in England:

Cricinfo Fantasy Cricket Tips for Twenty20 Worldcup 2009

And here are few important links you need to keep your eyes on:

How to Score Points

How to Change Team

Matches Covered

How to Select Team

Have fun playing!

How Google is responsible for Twitter’s Terms of Service: All your Tweets are belong to us!

Be warned this is two post sandwiched into one as I try to delineate Twitter’s Google connection.

On the 5th September, 2009 not only did Google change their logo, but they also tweeted the following message on their @google Twitter feed:

1.12.12 25.15.21.18 15 1.18.5 2.5.12.15.14.7 20.15 21.19

This is a coded message. It’s very simple to decode this message! All you need to do is write down all the letters of the alphabet and number them in sequential order ( A=1, B=2, C=3, and so on). Once you decode this message it will read: “All your O are belong to Us“. It is Google’s reference to the popular internet meme “All your base are belong to us

The explanation of this “Unexplained Phenomenon” can be found here.

Now onto the real thing. Few days back Twitter also changed their Terms of Service. What’s more Co-founder of Twitter Biz Stone blogged about Twitter’s New Terms of Service.

Under the Ownership clause he said:

Twitter is allowed to “use, copy, reproduce, process, adapt, modify, publish, transmit, display and distribute” your tweets because that’s what we do. However, they are your tweets and they belong to you.

Now can anybody see the connection between Google’s unexplained phenomenon or mystery with Twitter’s change of heart about their terms of service?

Doesn’t the above paragraph about Twitter’s copyright policy sound very contradictory? On one hand, they are saying our tweets are our property while Twitter is allowed to do whatever they like with it. Huh! To me in plain-vanilla English it means – Tweet as you may but “All your Tweets are belong to us” 🙂 What do you guys think? All opinions are welcome because “All your Opinions are belong to me” 😉

Microsoft ASP.NET AJAX 4.0 Preview 5 Released at CodePlex

As we know, ASP.NET AJAX 4.0 Preview 4 had earlier included outstanding client-centric development features like client-side data binding & client side templates ala XAML for WPF, implementation of observer pattern from scratch in JavaScript, data view controls, support for data sources like ADO.NET Entity Framework, LINQ to SQL etc..

Microsoft has just released ASP.NET AJAX Preview 5 at CodePlex:

http://aspnet.codeplex.com/Release/ProjectReleases.aspx?ReleaseId=32770

In Preview 5 of ASP.NET AJAX 4.0 there has been improvement on the client-side data story (data binding et al.) introduced in previous previews of ASP.NET AJAX. In this release, there has been bug fixes and feature enhancements for the following:

1.  Dynamic and recursive templates

2.  Binding Converters

3.  Compatibility with the ASP.NET UpdatePanel

The download includes the following:

–          Help file that contains API reference documentation for Preview 5 of ASP.NET AJAX 4.0

–          A Visual Studio project containing code samples for using many of the features of ASP.NET AJAX including those that were added onto the “Preview 5” bits. Here are those:

  • Examples of Data View & Client Template usage with .NET ASMX Web Service, Wcf Service, ADO.NET Data Service both in declarative and imperative ways.
  • Master Detail Live Binding scenarios with ADO.NET DataContext for CRUD (Create, Read, Update, Delete) operations.
  • ObservableData with JavaScript which has been implemented from scratch using the classic observer design pattern.
  • JSONP Usage.
  • Recursive Template Usage.

Two new script files have been included with the download for UpdatePanel compatibility issues basically:

MicrosoftAjaxWebForms.js
MicrosoftAjaxWebForms.debug.js

Changes

Here I am describing few of the major changes in this release as were outlined in the release notes:

Declarative Attribute Changes

It is no longer necessary to include a sys:activate attribute on the body of a page containing declarative markup.

Top Level Bindings

Support for “top level” expressions and bindings. Previously these were only supported within the context of a template marked with sys-template. For example, to bind the value of an input to a javascript object, you might do this:

<input sys:value="{binding bar,source={{foo}} }" />

This binds the value to the ‘bar’ field of a global ‘foo’ object. You can use other bindings to update the value, or directly with Sys.Observer:

Sys.Observer.setValue(foo, “bar”, “newValue”);

Binding the content of an element as text or HTML

You may bind to the content of a node using the new sys:innertext and sys:innerhtml attributes. Choose the appropriate attribute depending on whether or not you want to allow HTML in the value to be interpreted as HTML. For example, if you have a variable named ‘foo’ set to the value “<p>hello</p>”:

<div sys:innertext=”{{ foo }}”></div>

Will result in seeing <p>hello</p> in the browser.

<div sys:innerhtml=”{{ foo }}”></div>

Will result in the <p> tag being interpret as a paragraph tag.

The difference is in how the value is inserted. “sys:innertext” injects a text node with the given value. “sys:innerhtml” sets the innerHTML of the target element. Note that while “innerText” is an Internet Explorer only concept, “sys:innertext” is not an Internet Explorer only attribute. The name is semantically correct, despite it being implemented differently than IE’s native innerText field.

DataView Improvements

DataView now has the following events:
rendering
itemRendering
itemRendered
rendered

Binding Converters and Expandos

Bindings now support the concept of named converters that are set onto the Sys.Binding.converters field. There are none out of the box, but you may now define your own and refer to them by name. For example:

{binding foo,convert=myconverter}

This would look for a converter defined like so:

Sys.Binding.converters.myconverter = function(valueToConvert, binding) {

// convert
}

In addition, you may now set expandos onto the binding object and refer to them from your converter. This allows you to semantically describe what you want in a binding in any custom way you require for any specific binding. It allows you to parameterize a converter function. For example, this example sets a ‘format’ expando on the binding object despite that not being a field or property the binding natively has:

{binding foo,convert=format,format=MM/dd}
Sys.Binding.converters.format = function(value, binding) {

// binding.format === MM/dd

}

UpdatePanel Support

Preview 4 was not compatible with UpdatePanel in ASP.NET 3.5 due to changes to the data format UpdatePanel renders, and the inline script it renders in ASP.NET 4.0. The 4.0 scripts are now designed to work with either 3.5 or 4.0 on the server. To support UpdatePanel with these scripts, you must replace the partial rendering script (MicrosoftAjaxWebForms.js) with the 4.0 version. If you do not use an update panel, you must disable partial rendering.

Custom 404 error pages that are cool, funny yet creative

According to Wikipedia “The 404 or Not Found error message is a HTTP standard response code indicating that the client was able to communicate with the server but the server could not find what was requested”. But that’s a tad mechanical I know. So in a more eye-friendly(!) version, here’s my take:

There are times when we mistype a Uri or perhaps the page we wanted to access might have been moved somewhere else by the time we tried to gain access. In those situations, the server returns a HTTP status code of 404 signifying that the requested resource is not available for one reason or the other. This internal error message or page for that matter which is served up by the web server is not very helpful in most cases. This is highly de-motivating from the user’s point of view for all the user wanted was the content and not the reason why the web server can’t find the page. This is frustrating for the visitors which might prevent them from returning again to your site even if that was not a fault of yours.

Hence, it would have been nicer, if you provided the visitor a landing page from where he/she could have re-searched for the page. Or perhaps you could redirect/guide them to the main page from where they could navigate their way to the desired content. This act of re-engaging the visitors ought to go a long way.

Thus, from a web designer or a developer’s point of view, although you can’t prevent the incident from happening, you still can do some sort of damage control by trying to educate & inform the visitors as to the cause of the problem and at the same time guide them towards their desired content. They are, surely, going to be grateful to you and in turn might visit your site more often as opposed to leaving your site permanently having a disgruntled feeling when confronted with a default ugly looking page.

There are literally tens of thousands of such custom made 404 error pages but here are few resources I found exemplary:

http://blogof.francescomugnai.com/2008/08/the-100-most-funny-and-unusual-404-error-pages/
http://www.hongkiat.com/blog/60-really-cool-and-creative-error-404-pages/
http://www.hongkiat.com/blog/49-nice-and-creative-error-404-pages/
http://dzineblog.com/2008/11/custom-error-404-pages.html

Few funny examples:

http://www.admin2gd1-designs.com/funny/error404/
http://londondailyphoto.com/toons.html

And here is a compilation of suggestions for developing your 404 error pages:

http://www.smashingmagazine.com/2007/07/25/wanted-your-404-error-pages/
http://www.smashingmagazine.com/2007/08/17/404-error-pages-reloaded/