There are threads galore in various jquery discussion groups and blogs about the problems with IE7's user agent info, which, on some installations, returns version '6'.

In my case, I have the exact same numeric version of IE7 on two different vista computers, and one shows up as IE6 while the other shows itself to jquery as version 7.
(No idea why, and unless somebody can explain it i am done pondering the mystery - it hurts my head!)

This recently surfaced as a serious problem with my use of the incredible, wonderful "thickbox" plugin - a jquery lightbox plugin with tons of feature (more about that here )

Anyway, after much digging and scratching (ok, googling and clicking for you realistic non-metaphorical types), I found a few browser detection scripts with a different spin for IE7.

The first one, which obviously has worked for many users, did not work for me. Bummer.
Jamie obviously put a lot of effort into bringing this simple ie thickbox patch to the masses. But for whatever reason (did I mention I am done thinking about the reason?!?) my stubborn-as-I-am IE7 still wanted to look like a 6 to jQuery.
Then, I found this thread on Nabble, and worked it into a test page. Lo and behold, the fix appeared before my eyes.

/// here is the fix ///

$(document).ready(function(){
if ( document.all && !window.opera && !window.XMLHttpRequest && $.browser.msie )
{var isIE6 = true;}
else
{ var isIE6 = false;} ;
$.browser.msie6 = isIE6;

///

You can then use the  value of " $.browser.msie6 " , which will either be 'true' or 'false', to work your various IE-specific magicnesses.
In my case, thickbox now centers just as it should in both of my IE7's !

Here is my test page with the full browser user-agent info.
Point your IE7 here and see what you see.
It will show either 6 or 7 as the version info, but either way the last line, 'msie6', should read false.

The usual syntax for setting up your jquery script in any page looks like this, using the 'document.ready' statement to launch all your stuff as soon as the page loads:

<script type='text/javascript'>
$(document).ready(function() {
// all your jquery stuff goes here
});
</script>

This is great, better than window.onload or body.onload, since it runs before any images or other files have finished downloading to the browser. However...  there are times when this is not so great, i.e. my latest attempt at my own 'equal columns' script.

First, I had this:

<script type='text/javascript'>
$(document).ready(function() {
var lh = $('#mainCol').height();
var rh = $('#rightCol').height();
if (lh >= rh){
//alert('left : ' + lh);
$('#rightCol').height(lh);
} else {
//alert('right : ' + rh);
$('#mainCol').height(rh);
}
});
</script>

Using the dimensions plugin (which is now a part of the main jquery library as of the latest release), this script gets the height of the 'rightCol' and the 'mainCol', figures out which one is a greater number, and assigns that number as the height of the other column.

works great - unless you happen to have images loaded in either column that do not have a specified height attribute.

In my case, I was loading a full column of large thumbnails in the rightCol div, and since jquery was firing before the page was fully loaded, firefox was reporting the height of the images as 'null', which caused all kinds of problems - the most important of which was that the columns were equal to the *shorter* column length... oops.

(note the alerts in the script comments - remove the // to see which of your columns is showing as longer)
 
Along comes jQuery's simple load() method, to the rescue!

by simply wrapping all my jquery goodness in
$(window).load(function()....
and then calling that function as part of the usual 'document.ready',
everything seems just fine... the columns are equal, since the script to fix the height is loading *after* the images have loaded to the page.

This causes a slight bit of 'motion' as the page is loading, but on the longer pages it is below the first screen height, and is very quick anyway.

<script type='text/javascript'>
$(document).ready(function() {
$(window).load(function(){
var lh = $('#mainCol').height();
var rh = $('#rightCol').height();
if (lh >= rh){
//alert('left : ' + lh);
$('#rightCol').height(lh);
} else {
//alert('right : ' + rh);
$('#mainCol').height(rh);
};
});
});
</script>

From the very same very fine folks that created the previously-mentioned (and well-used) book jQuery in Action, DZone now offers a free 6-page CSS Selectors Reference Card.

More about it at Yehuda's Blog, here
http://yehudakatz.com/2008/06/09/jquery-selector-refcardz/

I'm printing my copy now - it'll be coffee stained, highlighted, wrinkled and well-worn within no time !

This is just too cool.

A frequent visitor on my web dev newsgroup kindly posted a link to this slick little app, fresh off the bench and ready for Vista.

** Get it here: http://www.my-debugbar.com/wiki/IETester/HomePage

Finally! A way to check all versions of IE in one fell swoop - including Javascript rendering!

From the website...

IETester is a free WebBrowser that allows you to have the rendering and javascript engines of IE8 beta 1, IE7 IE 6 and IE5.5 on Vista and XP, as well as the installed IE in the same process.
New in v0.2.2 : Search box and customizable Homepage !

This is an alpha release, so feel free to post comments/bugs on the IETester forum or contact me directly.
Minimum requirement : Windows Vista or Windows XP with IE7 (Windows XP with IE6 has some minor problems and IE7/IE8 instances do not work under this config)

Download IETester v0.2.2 (23.8MB)

Just noticed a short announcement on the FCKeditor 'safari browser' page.

" Safari compatibility has been officially declared as of FCKeditor 2.5 Beta! We would like to thank WebKit and our Community for being with us, working to make this compatibility effort a reality. "

This is great news.
Safari compatibility was never an issue for me personally, but some clients had troubles and it just isn't any fun to say 'use a different browser' - they still see it as broken.

I moved over to using wymeditor for my recent CMS work, but will be enticed to take another look at FCK for sure.

I just ordered an advance print copy of the brand-spankin-new jQuery book, "jQuery in Action"

http://www.manning.com/bibeault/

$45 gets you the pdf right away (just downloaded mine - resisting temptation to blow of the rest of the morning and crack it open right now!) and the print book as soon as it is released - soon!

If it is anything like the other top-notch jquery tuts and instructions I've worked with, the book should be worth the price on the very first project.

Finally ... I managed to put together a multi part form that allows the user to go back and forward between the steps without passing a long list of variables around on the server.

Adding the custom validation on each step was a bit of a trick (thanks Joern and others for your help!), since the original validation is meant to run  when the form is submitted, not just when a 'next' link is clicked.

There are more notes at the top of the multi part form demo page

Inkedpress.com - new custom eCommerce website launched today!

Built with a highly customized CartWeaver ColdFusion back end and a slick jQuery / javascript image selector routine, the Inked Press site allows the user to enter any word or phrase, and select from a gallery of images to represent each letter, building a custom "Picture Font" personalized photo frame.

This was a fun project from start to finish, and everybody involved is pleased with the outcome. The custom image selection routine for building the Picture Fonts was my first 'heavy' usage of jQuery... and it made the entire process such a pleasant experience, I am already hungry for another custom js site!

In IE, right click this link and save it to your favorites.
Then, while on any page of any site, just click the bookmark in your IE favorites.

You should see an alert telling you whether IE is in Quirks mode or Standards mode for the page you are on (click the link above to see the same alert for the current page)

Thanks to satzansatz.de for the tip!

This entry from Simon Willison is exactly what I was looking for when I started wondering 'whats all this js library buzz about anyway'

http://simonwillison.net/2007/Aug/15/jquery/

Its also a good 'getting started' article - kind of an overflight, with some good explanation of jquery vs. regular ol js

I just created my first 'ajax' page... and can hardly believe how simply jQuery handles this function.

I created a cfm page with 3 chunks of content wrapped in cfif, with each one shown based on a url variable. Then I set up a few lines of jQuery code to call that page and pass the variable in the url.

The sample page is just for example. In theory, you could run a full query to the database using the url variable to select any type of content you want, and then show it right in the page, without refreshing, or 'blinking' anything.

(Going one step further, jQuery can use (this).text() to pull the text that it inside each link, and pass the string as the url variable. So a linked word 'cicero' becomes a value of 'cicero' in the url.)

See the demo and the code - jquery makes this so simple, I can already think of a dozen ways I can use this action in my cf applications (especially back-end stuff where js-disabled browsers are not an issue).

Just found this from a post in the jQuery newsgroup - I'm sure its been up for a while, but it is brand new to me...

http://malsup.com/jquery/cycle/begin.html

Mike Alsup does some very nice jQuery work, and writes great documentation, too. This script will replace the fade-in slideshow I have used so often and offers a wide range of effects for the transitions.

It will also allow any type of content in each 'slide' , including text, multiple graphics... whatever (see the bottom of the 3rd demo page)

Just playing around, showing what little I know of this stuff - added a few more demos based on tutorials I found online

Javascript text resizer with jQuery

Show/hide animations using jQuery's onboard effects

jQuery makes this stuff so easy!

I just added a simple jQuery FAQ demo to my humble demos list

Had to build something similar for a client's site today - stripping out the relevant code and putting up an example was quick and painless... enjoy!

http://www.mredesign.com/demos/jquery-show-hide/

jQuery makes this stuff far too easy.
I just threw together a quick demo of the jQuery '.addClass' function, using regular ol' page links to change the class of a div on the page.

Rather than separate stylesheets, I simply have one set of styles in the page head with 3 versions of each rule. So when the class of the container changes, the browser knows to use the style that fits.

There are more complex tutorials for 'stylesheet switchers' out there ( like this one ) , but I wanted to show how easy it is to change a class on any element with basic links using jQuery. Example code is on the demo page.

Following a link from one of the jQuery google groups, I found a big list of jQuery demos by Glen at commadot.com... and for the record I am jealous of the obvious time he's had just to play and explore. So much you can do with jQuery, I have been endlessly amazed for weeks now, and still feel I'm only scratching the surface.

Anyway, check out the demos - they're good examples of the fun funky things jQuery makes so easy.

ok , last one for now
this simple example page shows how easy it is to make links that 'do stuff' using jQuery.

Things I've learned, and was actually able to use (only had to check my syntax 7 times in 7 lines... )

The built in behavior called 'click' lets you assign any function when the named element is clicked
The behaviors of fadeIn and fadeOut do just that, with speeds of slow, normal or fast
The behavior called 'toggle' lets you assign two functions, and toggle between them by clicking the same element twice

Here is the extent of the code for the sample page (with comments) ...

<script>
$(document).ready(function(){
// link with id of 'showit' shows the div with id of 'somestuff'
$("a#showit").click( function() {
$("div#somestuff").fadeIn("slow")
} );
// link with id of 'hideit' hides the div with id of 'somestuff'
$("a#hideit").click( function() {
$("div#somestuff").fadeOut("slow")
} );
// link with id of 'toggleit' toggles the two functions
$("a#toggleit").toggle(
  function () {
    $("div#somestuff").fadeIn("slow");
  },
  function () {
    $("div#somestuff").fadeOut("slow");
  }
);
});
</script>

I don't know how many lines of straight javascript this would have been, but it ain't much at all using jQuery (of course, there's something like 3000 lines in the jquery file itself... but that's all done ahead of time!).

I also have a bit of css in the file, to give the stuffbox div a height, and an inline style so the stuff itself loads as hidden.

On the scale of jquery examples, this has got to be about 3 degrees below 'super-beginner-nooby', but for me, I suddenly feel like I can actually write - and understand - my own simple js functions... and that's the whole point of a library like jQuery.

I've seen this function in various applications, but never got close to 'getting it' ... until now.

Check out these examples
http://davehauenstein.com/code/inplace.php
http://15daysofjquery.com/examples/jqueryEditInPlace/divEdit.php
http://15daysofjquery.com/examples/jqueryEditInPlace/demo.php
http://www.appelsiini.net/~tuupola/jquery/jeditable/01_basic_usage.php


Still taking my time going through all the stuff on the 15 days of jQuery site (the day is passing me by... but its fun!)
and already thinking of several ways I could use something like this on a cms-based website. For example, client logs in to the site and gets to browse his own pages, seeing clickable regions wherever there is cms content. Click... edit...save... done! Far more elegant than a totally separate form in a separate directory, from a user perspective they'd feel like they are editing the page right where it sits. Instant gratification!

Also envisioning a photo gallery where the logged-in admin can look at a nicely-presented thumbnail gallery and, for example, click each photo to get a text area where they can add a description, right in the page.

This doesn't work at all with js turned off, but I can't see ever wanting something like this on a public page, anyway.

Another nice tut-splanation on the 15 days of jQuery site, about rounded corners using javascript and a few image slices, led me to this clean, simple jQuery Corners script, which doesn't use image slices at all, and allows for all sorts of corner effects.

While the demo and comments in the source are pretty straightforward, I had to try it out for myself... so, to show a super-simple version (and remind myself later when I go to actually use this somewhere), I put up a quick demo page showing a few variations.

View the source of that page to see just how simple it is...all the heavy lifting is done in the linked scripts - actually initiating the round corners is super simple

<script>
$(document).ready(function(){
// here's where the effects get set up
$("div.round12").corner("round 12px");
$("div.bevel17").corner("bevel 17px");
$("div.bite").corner("bite");
// that's it!
});
</script>

Also, this degrades really nicely - no js, no round corners...no big deal!

Ok so most of this is agreeably very, very basic.
But I gotta start somewhere... and writing it down - which at this point in my discoverizations might not mean anything to anyone and is probably way behind the general knowledge of anybody bothering to read a post about jQuery - helps me retain the basic points. So...

// Loading the functions

All the tutorials and examples I've looked at so far initialize the jQuery functions on any given page by first linking to the javascript (like you would for any js)

<script src="jquery.js"></script>

and then, rather than a window.onload or body onload command, the syntax is very simply this

<script type="text/javascript">
$(document).ready(function(){
//All the functions go here
});
</script>

The way I understand it so far, this causes the scripts to 'start' as soon as the DOM is loaded (i.e. the browser loads the full html structure of the page) but without waiting for images or other large assets to load completely. They say this is much faster and cleaner, and from what I have seen so far, I believe it!

// CSS-like designations

For this I am grateful ... jQuery uses regular ol' css designations to select various elements on the page.

For example, in that table striping tutorial (see previous post), the designation for a row in the table is like this:

$(".stripeMe tr")

where the class of the table is "stripeMe" ... hey, I get this part right away!

// Basic jQuery code format (from that same table striping tut)

• jQuery code starts with $
• Followed by parenthesis
• Inside parenthesis is what you tell jQuery to find - don't forget the quotes
  • $('p') = find all paragraphs
  • $('.whatever') = find everything with class="whatever"
  • $('.stripeMe tr') = find all tr (table rows) inside an element with the "stripeMe" class (ala the example above)

// Custom selectors

Down towards the bottom of this page, the custom selectors list includes nifty super-simple things like :even, :odd, :first, :last, :hidden, :visible... so easy! For example, in the table striping tutorial, what I've otherwise seen as fairly complex custom javascript solutions to select every other row of a table can simply be replaced by tr:even ... how easy is that?!?