Most Wanted 15 jQuery Cheat Sheets for Web Developers

jQuery is the most popular java script library is used in today.it greatly simplifies java script programming.Here I listed most popular and very useful jQuery cheat sheet collection on the Internet,for anyone who like to learn jQuery.You can get more cheat sheets mentioned here as pdf files or image(.png,.jpeg) files.

jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript.

From http://jquery.com/

1. jQuery 1.4.2 Visual Cheat Sheet
jQuery Visual Cheat Sheet, the refined and updated version of the popular woork's jQuery Cheat Sheet. The new edition includes all the reference you will ever need for jQuery 1.4.2 API!

Article : http://woorkup.com/2010/06/13/jquery-1-4-2-visual-cheat-sheet/
Download : http://woorkup.com/wp-content/uploads/2010/06/jQuery-Visual-Cheat-Sheet-1.4.2.pdf
2. jQuery 1.4 Cheat Sheet
This cheet sheet attempts to better align with the new documentation structure jQuery is now using and clearly marks all new and updated functions for jQuery 1.4.

Article : http://labs.impulsestudios.ca/jquery-cheat-sheet
Download : http://labs.impulsestudios.ca/downloads/impulse_studios-jquery_cheat_sheet-1.0.pdf
3. jQuery Selectors
jQuery selectors are one of the most important aspects of the jQuery library. These selectors use familiar CSS syntax to allow page authors to quickly and easily identify any set of page elements to operate upon with the jQuery library methods. Understanding jQuery selectors is the key to using the jQuery library most effectively. This reference card puts the power of jQuery selectors at your very fingertips.
You must register(it is free) to get this cheat sheet.

Article : http://refcardz.dzone.com/refcardz/jquery-selectors
4. jQuery 1.4.4 API Cheat Sheet

Article : http://www.futurecolors.ru/jquery/
Download :
http://www.futurecolors.ru/jquery/jquery.cheatsheet.1.4.pdf
http://www.futurecolors.ru/jquery/jquery.cheatsheet.1.4.png
5. jQuery 1.3 cheat sheet wallpaper

Article : http://www.gmtaz.com/jquery-13-cheatsheet-wallpaper/
6. jQuery Cheat Sheet - jQuery 1.3.2

Article : http://www.javascripttoolbox.com/jquery/cheatsheet/
7. jQuery Cheat Sheet - jQuery 1.1.3

Article : http://www.javascripttoolbox.com/jquery/cheatsheet/
8. jQuery - YUI3 Rosetta Stone

Article : http://carlos.bueno.org/jq-yui.html#start
9. jQuery 1.3 Cheatsheet

Article : http://blog.acodingfool.com/cheatsheets/jquery-1-3-cheatsheet/
10. jQuery 1.3 Visual Cheat Sheet

Article : http://woork.blogspot.com/2009/09/jquery-visual-cheat-sheet.html
Download : http://www.scribd.com/doc/20161482/jQuery-Visual-Cheat-Sheet-by-WOORK
11. jQuery cheatsheet wallpaper

Article : http://chris4403.blogspot.com/2008/01/jquery-cheatsheet-wallpaper.html
Download :
http://cheatsheet.googlecode.com/svn/trunk/cheatsheet/src/jquery/jquery1.2-cheatsheet-1280-001.png
http://cheatsheet.googlecode.com/svn/trunk/cheatsheet/src/jquery/jquery1.2-cheatsheet-1280-002.png
12. jQuery 1.2 Cheat Sheet (colorcharge.com)

Article : http://colorcharge.com/jquery/
13. jTouch – jQuery Cheat Sheet for iPhone

Article : http://jtouch.colorcharge.com/
14. jQuery 1.2 Cheat Sheet

Article : http://www.gscottolson.com/weblog/2008/01/11/jquery-cheat-sheet/
Download : http://www.gscottolson.com/jquery/jQuery1.2.cheatsheet.v1.0.pdf
15. jQuery Selectors by codylindley.com

Article : http://codylindley.com/jqueryselectors/

Read More

How To Add Energy Saving Mode For Blogs or Websites

This is a free service and it is provided by http://www.onlineleaf.com/.Their standby engine is deliver a fully functional and simple way to help your website run requiring less energy to generate. It hides heavy animations, covers the window in dark colors (as these, in many cases are less energy consuming) and pauses heavily running background processes.
When your visitors are inactive, this engine launch a standby screen, with the text "Energy saving mode".

This is very easy to add to your website or blog with in few seconds.
Login to your Blogger dashboard --> Design --> Edit HTML.
You don't need to click on "Expand Widget Templates".
Scroll down to where you see the </head> tag of your template.
Now copy below code and paste it just before the </head> tag.

<script language='javascript' src='http://www.onlineleaf.com/savetheenvironment.js' type='text/javascript'/>

This standby engine uses the jQuery Javascript library, so if you are using other Javascript libraries or code, add below code instead of above code :

<script language='javascript' src='http://www.onlineleaf.com/savetheenvironment.js' type='text/javascript'/>

<script>jQuery.noConflict();</script>

Time of inactivity
Also you can easily define how long time your visitors have to be inactive, for the engine to launch the standby screen, by adding ?time=X where X should be replaced with the number of seconds you would like to define the time interval. An example could be:

<script language="javascript" type="text/javascript" src="http://www.onlineleaf.com/savetheenvironment.js?time=120"></script>

... which will set the time of inactivity to 2 minutes (120 seconds).
This can be configured to display in any of the supported languages, if you add ?lang=code, where code is one of the language short codes below.
Supported languages

 
ak - Akanda - Danishde - Germanen - Englishes - Spanishfr - Frenchfi - Filipinogr - Greek
 
hr - Croatianid - Indonesianjp - Japaneseit - Italiannl - Dutchpl - Polishpt - Portuguesebpt - Brazilian Portuguese
 
ro - Romaniansl - Slovenianse - Swedishsk - Slovaksw - Swahilitr - Turkishvi - Vietnamese
  
 
The following example will be using Spanish for the standby screen:

<script language="javascript" type="text/javascript" src="http://www.onlineleaf.com/savetheenvironment.js?lang=es"></script>

If you are using WordPress, just download their plugin, activate it and everything should work instantly.

Read More

How To Fix PNG Transparency Problem in Internet Explorer 6

If you are using Internet Explorer version 6, you can see png images of web pages showing inside a white background. It add a bad appearance to your website or blog.This is a problem because still some people are using Internet Explorer version 6,it is the default browser for windows XP.So this quick and simple tutorial will show you how to fix this PNG transparency problem in Internet Explorer 6.
Login to your Blogger dashboard --> Design --> Edit HTML.
You don't need to click on "Expand Widget Templates".
Scroll down to where you see the </head> tag of your template.
Now copy below code and paste it just before the </head> tag.

<!--[if lt IE 7]>
<script type="text/javascript" src="http://bnote.googlecode.com/files/unitpngfix.js"></script>
<![endif]-->

I have hosted "unitpngfix.js" file on google code.
Note : Best thing is, hosting this "unitpngfix.js" file yourself.So you can download it from HERE.
Now save your template and you are done.You can check updates and more details of this script from http://labs.unitinteractive.com/unitpngfix.php.

Read More

16 Amazing jQuery Tooltips Collection

This will be a most wanted list of jQuery tooltips collection for every web designer.When you surfing the web you can see different types of tooltips effect in web sites.Here I listed more popular jQuery tooltips collection in these days.I hope to update this article with new tooltips effects in future.So bookmark this article for your future preference if you like this post.Use the links given below for the tutorials,demos and downloads.

The tooltip or infotip is a common graphical user interface element. It is used in conjunction with a cursor, usually a mouse pointer. The user hovers the cursor over an item, without clicking it, and a tooltip may appear — a small "hover box" with information about the item being hovered over.

jQuery (mb)Tooltip

Article : http://pupunzi.open-lab.com/2009/02/07/mbtooltip/
Demo : http://pupunzi.com/#mb.components/mb.tooltip/tooltip.html
Download: http://cloud.github.com/downloads/pupunzi/jquery.mb.tooltip/jquery.mb.tooltip.1.6.zip
qTip
qTip is a tooltip plugin for the jQuery framework. It's cross-browser, customizable and packed full of features!

Article : http://craigsworks.com/projects/qtip/
Demo : http://craigsworks.com/projects/qtip/demos/
Download: http://craigsworks.com/projects/qtip/download/
TipTip

Article : http://code.drewwilson.com/entry/tiptip-jquery-plugin
Demo : http://code.drewwilson.com/entry/tiptip-jquery-plugin
Download: http://www.drewwilson.com/upload/data/4/tipTipv13.zip
jQuery Tools

Article : http://flowplayer.org/tools/tooltip/index.html
Demo : http://flowplayer.org/tools/tooltip/index.html
Download: http://flowplayer.org/tools/img/tooltip/tooltip.zip
Simpletip

Article : http://craigsworks.com/projects/simpletip/
Demo : http://craigsworks.com/projects/simpletip/
Download: http://craigsworks.com/projects/simpletip/
JavaScript Kit Tooltip

Article : http://www.javascriptkit.com/script/script2/htmltooltip.shtml
Demo : http://www.javascriptkit.com/script/script2/htmltooltip.shtml
Download: http://www.javascriptkit.com/script/script2/htmltooltip.shtml
BeautyTips
BeautyTips is a simple-to-use balloon-help style tootip plugin. Any element on the page can be set to show a talk-balloon containing any text or HTML on hover, click, or any bindable event.

Article : http://plugins.jquery.com/project/bt
Demo : http://www.lullabot.com/files/bt/bt-latest/DEMO/index.html
Download: http://plugins.jquery.com/project/bt
clueTip
The clueTip plugin allows you to easily show a fancy tooltip when the user's mouse hovers over (or, optionally, clicks on) any element you designate in your script. If the element includes a title attribute, its text becomes the heading of the clueTip.

Article : http://plugins.learningjquery.com/cluetip/
Demo : http://plugins.learningjquery.com/cluetip/demo/
Download: http://plugins.learningjquery.com/cluetip/#download
EZPZ Tooltip

Article : http://theezpzway.com/2009/3/17/jquery-plugin-ezpz-tooltip
Demo : http://theezpzway.com/demos/ezpz-tooltip
Download: http://theezpzway.com/2009/3/17/jquery-plugin-ezpz-tooltip#section-10
Hovertips

Article : http://www.dave-cohen.com/node/1186
Demo : http://www.dave-cohen.com/node/1186
Download: http://www.dave-cohen.com/modules/hovertip/hovertip.js
jQuery Awesomeness

Article : http://net.tutsplus.com/tutorials/javascript-ajax/build-a-better-tooltip-with-jquery-awesomeness/
Demo : http://d2o0t5hpnwv4c1.cloudfront.net/234_tooltip/Demo/index.html
Download: http://d2o0t5hpnwv4c1.cloudfront.net/234_tooltip/Demo.zip
Tipsy Tooltip
Tipsy is a jQuery plugin for creating a Facebook-like tooltips effect based on an anchor tag's title attribute.

Article : http://onehackoranother.com/projects/jquery/tipsy/
Demo : http://onehackoranother.com/projects/jquery/tipsy/#examples
Download: http://onehackoranother.com/projects/jquery/tipsy/#download
Popup Bubble

Article : http://www.dvq.co.nz/jquery/create-a-jquery-popup-bubble-effect/
Demo : http://www.dvq.co.nz/wp-content/uploads/2008/07/jquery-popup-bubble/index.html
Download: http://www.dvq.co.nz/jquery/create-a-jquery-popup-bubble-effect/
jQuery Horizontal Tooltips Menu

Article : http://www.queness.com/post/556/jquery-horizontal-tooltips-menu-tutorials
Demo : http://www.queness.com/resources/html/tooltipmenu/index.html
Download: http://www.queness.com/resources/archives/jquery-tooltipmenu.zip
Coda Popup Bubbles

Article : http://jqueryfordesigners.com/coda-popup-bubbles/
Demo : http://jqueryfordesigners.com/demo/coda-bubble.html
Download: http://jqueryfordesigners.com/coda-popup-bubbles/
BetterTip

Article : http://edgarverle.com/BetterTip/default.cfm
Demo : http://edgarverle.com/BetterTip/default.cfm
Download: http://edgarverle.com/BetterTip/bettertip.zip
If there is a jQuery tool tip effect you like,but you can not add it to your website or blog yourself,you can contact me,I can do it for you.

Read More

Home Services Privacy Policy Contact Advertise Here How to Fix "Google Friend Connect is not displayed" Problem

If you use MooTools(http://mootools.net/) script inside your blogger template, mostly your Google Friend Connect widget will disappear from your blogger blog and only shows a white space.This is a serious problem to more bloggers.I also have faced to this problem and finally find the solution for this problem.I thinks this little trick will also helpful to others and decide to explain how to solve this problem.

MooTools is a compact, modular, Object-Oriented JavaScript framework designed for the intermediate to advanced JavaScript developer. It allows you to write powerful, flexible, and cross-browser code with its elegant, well documented, and coherent API.

MooTools can be included in your template in 2 ways.
First way:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/mootools/1.2.4/mootools-yui-compressed.js"></script>

Second way:

<script src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("mootools", "1.2.4");
</script>

You can do this with in few seconds.Now follow the steps given below.


Login to your Blogger dashboard --> Design --> Edit HTML.
You don't need to click on "Expand Widget Templates".
Scroll down to where you see the </b:skin> tag of your template.
Now copy below code and paste it just after the </b:skin> tag.

<script type='text/javascript'>
//<![CDATA[

JSON.extend({
parse: function(string) {
    return JSON.decode(string);
},
stringify: function(obj) {
    return JSON.encode(obj);
}
});

//]]>
</script>

Save your template and you are done.
When your problem is fixed, please don't forget to leave a comment.

Read More