blog.michaelfasani.com

jQuery is a JavaScript library. JavaScript Libraries simplify how you traverse HTML documents, handle events, perform animations and add Ajax interactions to your web pages. They deliver your code so that it works across all common browsers. jQuery is designed to change the way that you write JavaScript and allow you to add functionality to your pages quicker.

The official jQuery site

Learn about the jQuery JavaScript library, how to install it and how to add functionality to your pages.
http://www.jquery.com

Visual jQuery by Remy Sharp

A quick visual reference guide with examples of what can be achieved with jQuery.
http://www.remysharp.com/visual-jquery

jQuery API by Remy Sharp

Another reference guide to functions available to you in jQuery by Remy Sharp.
http://www.remysharp.com/jquery-api

jQuery General Discussion Forum

This is the best place to post if you have general questions or concerns. Also, if you’ve built a site that uses jQuery, or would like to announce a new plugin, this is the place to do it.
http://www.nabble.com/jQuery-General-Discussion-f15494.html

Learning jQuery

Getting to know the library of choice for unobtrusive JavaScript a an informative jQuery blog.
http://www.learningjquery.com

jQuery Menu Firefox Extension

Add this handy menu right into the top of your Firefox menu and save valuable seconds!
http://www.kintek.com.au/jquery-menu-firefox-extension.html

jQuery for designers

What it says on the tin, jQuery for Designers. A informative blog.
http://www.jqueryfordesigners.com

Its not possible to put a character limit on multi line text box areas in HTML/XHTML so you have to use some form of JavaScript snippet, here is a snippet I use, because its quick and very simple to customize.

<script type="text/javascript">
//Max length multiline textbox checker
function checkMaxLen(txt,maxLen) {
try{
if(txt.value.length > (maxLen-1)) {
var cont = txt.value;
txt.value = cont.substring(0,(maxLen -1));
return false;
};
}catch(e){
}
};
</script>

Then use the following code on the Textarea tag.

<textarea onkeyup="return checkMaxLen(this,5000)"></textarea>

You simply set the text limit by changing the value in the JavaScript function from 5000 to what ever number of characters you need.

This chunk of XHTML code is used on all my pages so that IE6 displays inline PNG’s correctly. This code stops the blue flash PNG fix problem. The JS code snippet was originally taken from http://homepage.ntlworld.com/bobosola. You will need a different JS file if you wish you use a PNG for form submit buttons. This is free-ware code and all the documentation can be found on the bobosola link above.

Step 1: Prepare your PNG images

Firstly you must give all your transparent PNG images a class of transparent-png.

<img src="ImageName.png" class="transparent-png" alt="MyImage" height="100" width="100"/>

Step 2: Prepare your document

Add the following code to the HEAD of your XHTML document:

<!––[if lte IE 6]>
<style type="text/css">img.transparent-png{visibility: hidden;}</style>
<script defer type="text/javascript" src="js/pngfix.js"></script>
<noscript><style type="text/css">img.transparent-png{visibility: visible !important;}</style></noscript>
<link href="css/ie6.css" type="text/css" media="all" rel="stylesheet" />
<![endif]––>


Line 1: Basically tells the browser to only use this code if the browser is Internet Explorer 6 or lower. That means that newer browsers will ignore this entire section. So all your fixings for IE6 can be done in one CSS file and the JS file is only called when needed.

Line 2: Hides all the images which have a class of transparent-png, this is because IE6 puts horrible blue backgrounds into the transparent areas of the PNG. The pngfix.js overlays the png on top of the existing PNG using the following Microsoft filter (filter:progid:DXImageTransform.Microsoft.AlphaImageLoader) so that the browser understands transparency as expected.

Line 3: Loads the JavaScript file.

Line 4: Makes older browsers which don’t support JavaScript display images anyway even though they may be broken but at least the site will still be usable.

Line 5: Includes a CSS file which can be used to add IE6 CSS fixes.

Line 6: Closes the IF statement.

Step 3: Install the JavaScript inline PNG Fix

Save this PNG fix JS file to “/js/pngfix.js” or your scripts directory.

/*Correctly handle PNG transparency in Win IE 5.5 & 6. http://homepage.ntlworld.com/bobosola. Updated 18-Jan-2006. */
 
var arVersion = navigator.appVersion.split("MSIE")
var version = parseFloat(arVersion[1])
 
if ((version >= 5.5) && (document.body.filters))
{
for(var i=0; i<document.images.length; i++)
{
var img = document.images[i]
var imgName = img.src.toUpperCase()
if (imgName.substring(imgName.length-3, imgName.length) == "PNG")
{
var imgID = (img.id) ? "id='" + img.id + "' " : ""
var imgClass = (img.className) ? "class='" + img.className + "' " : ""
var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' "
var imgStyle = "display:inline-block;" + img.style.cssText
if (img.align == "left") imgStyle = "float:left;" + imgStyle
if (img.align == "right") imgStyle = "float:right;" + imgStyle
if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle
var strNewHTML = "<span " + imgID + imgClass + imgTitle
+ " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"
+ "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
+ "(src=\'" + img.src + "\', sizingMethod='scale');\"></span>"
img.outerHTML = strNewHTML
i = i-1
}
}
}