Need to show an email address on the web?
You have a few options:

1) create a standard "mailto:" link and enjoy an endless flow of vi@gR&! ads and invitiations for massive funds transfers from far away lands

2) use an email obfuscator!

My favorite email address obfuscator by far is the jQuery noSpam plugin by Mike Branski.
This jQuery plugin turns an obfuscated e-mail address into a human-readable one.

Now supports multiple dots (.) both before and after the at (@) sign!

While the simplicity and smoothness of this little script has always been top-notch, it has just been made even better by allowing the use of euro-style domains, such as " user@domain.co.uk " in addition to standard 'single dot' extensions.

To use this plugin, include jquery.nospam.js and call the nospam() method. No Spam automatically detects if your matched element is a link. If so, it checks the rel attributes for the obfuscated e-mail addresses. For all other elements, it uses the text between the matched tags. 

Examples and further instructions are at http://www.leftrightdesigns.com/library/jquery/nospam/

Another super short jQuery solution to a super long late-night quest on my part.

I have a form with a variable number of select boxes. Before the form can be submitted, I need to verify that there are no selections left unchanged.

The select boxes start out with a default value of ''  (empty quotes). To search for them , i was using all sorts of variations on jquery 'val()', but that is more useful for setting a value than finding a select with a value. After a few various connotations... here's the one that works:

 var valCt = $('select.colorselect[value=""]').size();

This finds all selects with the class of 'colorselect' and the value of '', and returns the size, which in jQuery talk means 'how many'. If I have 3 unchanged select boxes, valCt will equal '3'.

From there it is an easy hop to add a check to the submit action of my form, checking to make sure valCt is 0.

if (!(valCt == 0)) {
return false
} else [ ... submit form here ... ]

http://colorcharge.com/jquery/

made for iPhone/iTouch but works great on my blackberry in Opera mobile. Unlike most of the things I bookmark on my mobile, I can actually see using this one.

here's the actual URL, click this link in your mobile browser:
http://labs.colorcharge.com/jtouch/

Manning Publications' jQuery in Action is the book to have if you want to learn jQuery, or if you're a somewhat-jQ-ninja-in-training-ish , and you want to unlock more hidden gems of jQuery wisdom.

I grabbed my copy in advance of the release date last year, and have worn out some of the best pages already.  No surprise to me, Manning just announced that jQuery in Action was their 2008 best seller!

Incidentally , they are running a hefty discount on this and any other titles , for another week or so.

(from the same email announcing the best seller list, in just now... )

Save 31% on any purchase at Manning.com
Enter coupon code ja1331 when you check out
$20 minimum purchase; expires January 13, 2009

Here's a perfect example of the way jQuery makes things so easy, even a caveman programmer can do it.

In Cartweaver, the default Customer Login form is actually two separate forms - one to log in, and one to recall a forgotten password by entering an email address.

I have tried various rearrangements of the default markup on this page for each site I've done, always trying to give the more important 'log in' form a more visible presence than the 'forgot pw' form, without cluttering up the page.

Tonight, i found a solution i like best of all ... hide the forgot pw form altogether, using a simple link to show it if needed.

more...

http://www.communitymx.com/abstract.cfm?cid=B895B

And with this the mini-series is complete.
The third and final section of this tutorial includes adding jQuery validation, cleaning up and compacting the code, and making it as easy as could be to drop the file into any site for an instant, dynamic, spam-blocking ColdFusion form-to-email contact form.

p.s. - CMX has put up part 2 and 3 as paid articles (part 1 is free), but you can get a free trial and grab this along with some other good information - If you haven't spent time on Community MX lately , check it out - they have a lot going on!

A client gave me a long page of addresses and links, a directory of manufacturers for his industrial-based site.

Converting it to html, my markup ended up something like this:

and so on for the various states, about 35 of 'em.

Now, I needed a list of links at the top of the page, one for each state, that would allow the user to click a state name at the top, and get scrolled down to the relevant section below.

I had two choices.. go through the code and manually make an anchor link, or come up with a dynamic solution (not a hard decision).

more...

NOTE: This project has been updated.
Read explanation below and then see: http://www.miuaiga.com/index.cfm/2009/4/11/CF-Gallery-Creator--jQuery-Slider-Gallery-New-and-Improved

This little project is two things in one...  a thumbnail gallery creator and a neat jquery gallery display
...both of which I am proud to show off and share after a long day of tinkering

I have a client who wants 'a bunch of photo galleries' on her site.... and she likes a flash gallery with a sliding row of thumbs at the top, large image below.
So - I built a CF tag to make galleries on the fly (in several ways.. .keep reading... ) AND a jQuery gallery that behaves just almost exactly like her flash example.

1)  // instant coldfusion photo gallery creator! //
 
First, I have created (and today, cleaned up and bundled) a coldfusion custom tag that automatically generates entire galleries of resized photos with thumbnails, and several options.

The same tag also displays the galleries for every folder inside a given location, creating thumbs on the fly.

By itself, it looks like this
http://www.mredesign.com/cfdev/_tags/gallery/gallerypage.cfm?gallery=some-gallery-name

A very naked gallery skeleton, ready to be turned into any kind of gallery you like.

Options include
 - show links or select dropdown for choosing gallery
 - show thumbnails with gallery chooser links
 - crop thumbs to centered square tile (like my examples) or use w/h resizing

There is a LOT of potential in this little script, including instant thumbnails, easy to update galleries, and a bunch of built-in options.

See my dev notes at the end of this post.


2)  // jquery slider gallery ! //

An updated version of my homegrown jQuery 'slider' gallery.
This page is using the exact same cf tag with the same exact base content.

http://www.mredesign.com/cfdev/_tags/gallery/slidergallery.cfm?gallery=some-gallery-name

jQuery and CSS turn the first page, above, into this.

NEW in this version - friendly 'no js' degredation. (disable js to see a styled gallery of thumbs, linked to their large images)

Also added
 - title / alt tags on thumbnails
 - captions! (currently title name with image file name)
 - next/back links
 - click large image to advance through
 - looping next/back function (goes back to start after last image)
 -

Here is a version with dropdown instead of links, and the filename removed from the captions
http://www.mredesign.com/cfdev/_tags/gallery/slidergallery_select.cfm?gallery=some-gallery-name

and another version with no captions
http://www.mredesign.com/cfdev/_tags/gallery/slidergallery_nocaptions.cfm?gallery=some-gallery-name

These options can all be set when calling the tag from your main page, i.e.

<cfimport prefix="sitetags" taglib="tags" />
    <sitetags:gallery
    origfolder = "#expandPath('_temp/')#"
    newfolder = "#expandPath('img/galleries/')#"
    galleryurl = "img/galleries/"
    thumbnailmaxw="140"
    thumbnailmaxh="140"
    largeimagemaxw="460"
    largeimagemaxh="460"
    selecttype="ul"
    showthumbs="0"
    showcaptions="1"
    showfilenames="1"
    >

To Do:
- Advance the slider when clicking the next/back links or large image
( best approach - auto scroll current thumbnail to center as part of the 'current image highlighting' function)
- Preload the large images
- Show a transition effect (might require multiple large images and a swap behavior)
- Show a 'loading' graphic while waiting for large image to load

jQuery code is a bit messy, this is all very fresh, but I would love to have some input for ways to speed it up or add the auto-advancing function.


== TESTERS WANTED ==

I'd like to post this on riaforge and maybe other places too, in a nice 'demo' wrapper, as a freebie for the CF / jQuery world.
First, I'd like some feedback from people actually trying to use it.

The important concept here - this is two things - the cftag that makes all the thumbnails,
and the jquery / css that turns that raw markup into a gallery. They can be used together or totally independently.

Please contact me directly - I can easily bundle this up and send it to you for testing, let me know.


=== MY NOTES FROM THE CF CUSTOM TAG ==

For those who might be interested, I put heavy instructions / notes into the head of the tag file.
Here is what it says currently...

<!---
Photo Gallery Custom Tag
Michael Evangelista : Evangelista Design : www.mredesign.com
Creates thumbnails and full size images on the fly, creating a thumbnail gallery
Created 20081011
====
Usage:

1)Set up your images in directories, grouped by gallery
   The name of your folder will be the name of the gallery
   Put all of these named folders of raw images into any other folder (this is your 'parent' folder)

    note: The size of the original images will have a big effect on performance.
    Ideally your images should not be huge to begin with, but can be larger than your large gallery size.
   
2) Put this file in a folder called 'tags'
  
3) Put this code at the beginning of any cfm page
   (adjust the path so it points from your cfm page to the 'tags' folder)

    <cfimport prefix="sitetags" taglib="tags">

4) Put this code below that
    (origfolder is the path from your cfm page to the parent folder for your original , unsized images)
    (newfolder is the path from your cfm page to the new parent folder for your gallery images
     **this will be created for you if it does not exist!)
    (gallery url is the url version of the path above)

    ** Be sure your paths and url end with the trailing slash 

    <sitetags:gallery
    origfolder = "#expandPath('_temp/')#"
    newfolder = "#expandPath('img/galleries/')#"
    galleryurl = "img/galleries/"
    >
   
5) Browse to your page. You won't see anything but a dropdown list with no options.
    Put "?init=run" after your page url (i.e. gallerypage.cfm?init=run) and the page will make your gallery folders for you (be patient).
    You should then see an option in the dropdown for each folder, and a set of thumbnails showing each gallery.
    Change the selection, see the thumbnails.
   
    ** Note: you can - and should - change the cfparam for "attributes.initpw" to anything you like, instead of 'run'.
        Make it hard to guess so nobody can trigger your gallery creator without permission. Then just use "gallerypage.cfm?init=mynewpassword".
   
    ** If the page times out or takes too long, try it with less images per folder, or just put a few folders at a time in your parent directory.
    ( see 'adding images' below)
   
6) When the gallery creator is done, you will see the page refresh, with links or dropdown options now in place for each gallery.
   Select one... there it is!
   
Now you have the basic skeleton of any dynamic gallery display - thumbnails in ul/li html markup, each linked to their larger versions,
with a title created from the folder name, and a set of links to manage the different galleries. Depending on your settings ( see below ),
you also have captions and thumbnails in the selection menu (if using selecttype = 'ul' and showthumbs = 1)

You can link to any gallery by simply putting the name in the url like this
gallerypage.cfm?gallery=some-gallery-name  (note the url-friendly hyphenation)


// OPTIONS

You can set the max width or height of thumbs and full size images in the params below, or by adding the attributes to your tag call.
( note: the sizes will not apply to images that have already been generated)

    <sitetags:gallery
    origfolder = "#expandPath('_temp/')#"
    newfolder = "#expandPath('img/galleries/')#"
    galleryurl = "img/galleries/"
    thumbnailmaxw="140"
    thumbnailmaxh="140"
    largeimagemaxw="460"
    largeimagemaxh="460"
    >

You can also use the 'cropthumbs' and 'thumbcropsize' options to set up a square cropped thumbnail using the 'thumbcropsize' for both width and height.
( note: cropthumbs=1 overrides all thumbnail width and height settings)
    example:
            cropthumbs="1"
            thumbcropsize="80"
               
You can control some of the output markup with these options errorFiles
(note: showthumbs only applies if selecttype is 'ul', no thumbs shown with dropdown)
  
     example:
        showthumbs="0"
        showcaptions="0"
        showfilenames="0"

You can also set the name of the thumb and full folders

    example:
        thumbfolder="little"
        fullfolder="big"

And the type of selection list  - choose from links or select box ( "ul" or "select" ) or code in your own
   
    example:
        selecttype="ul"
       
You can also turn off the thumbnails on the gallery list page

    example:
        showthumbs="0"
       
       
// WHAT THIS DOES

This tag does two distinct things

1) in INIT mode (with ?init=run in the url OR by putting initmode='1" in the tag call)
     What it does: Get directory listing, create folders, resize photos

The tag looks at the origination folder, and checks for folders inside of that.
It loops through each of the image files in the those folders, and makes a new folder
in the destination with resized images,one for each original subfolder.

If the destination parent folder does not exist, it will be created for you.
Your folder names will be made web-friendly, replacing special chars and spaces with "-"       

Inside of each folder will be two more folders, "thumb" and "full" (or whatever you assign in the attributes).
The generated images will have the exact same filename, they are just in different folders
(this makes javascript / css gallery coding really simple!)

The resizing will use the larger side of your image and compare to the max set for that dimension.
(i.e. wide images get resized by width, scaling the height; tall images are resized by height, scaling the width.)
Images will not be made larger than the original.

2) In 'standard' mode (default use)
      Get new directory listing, create thumbnails from large images, show html with linked thumbnails

The tag looks at the gallery parent folder ( in your "newfolder" attribute)
A list is created of all the folders inside the parent, with filenames made 'reader friendly' (hyphens replaced with spaces)

If you have a folder matching the 'fullfolder' attribute (i.e. "full"), you have a gallery.
The code loops through the fullfolder, and checks for a thumbnail for every full size image.
If there is not a thumbnail, one will be created for you.

A list of all the gallery folders is created, either as a ul/li list of links,
or a select box dropdown that changes the page automatically on selecting a gallery.

The output from this code is very basic html markup.
The images are in a ul/li list, with thumbs linked to their larger counterparts - very easy to target with css and/or javascript.
The gallery name (and filename if showfilenames = 1) is assigned as the 'title attribute on the thumbnail's link element,
and as an 'alt' attribute on the thumbnail image itself, and used as a caption (if showcaptions = 1).


// ADDING IMAGES

Here is where it gets really cool - you have several options for updating your existing photo collection.

You can slide a new 'full' image into an existing gallery's 'full' folder, and the thumbnail will be created instantly
(when you view the page for the first time).

You can create a whole new gallery in standard mode by adding a folder to your parent directory,
containing another folder called 'full' with your presized larger-size images. On first view, the thumbs will be created for you.

You can resize all your thumbs by deleting the all the thumbnails from the small size folder,
and setting a new thumbw and thumbh in the tag attributes. Just browse to your gallery to get all new thumbs.

You can add and auto-resize a new gallery any time by adding a new folder to your original location and running in 'init' mode again
(any folders that already have a matching gallery folder in the destination will be ignored)

So, you have several options for adding more photos.

To remove images from the gallery - just delete the large one, the thumbnail will be ignored.

// THAT's IT!

// Please send comments or additions to Michael Evangelista, evangelistadesign at gmail dot com or www.mredesign.com
  Thanks and have fun
 --->

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 ///

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

/// end fix ///

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.

**NOTE: edited 10/7/08 - it works better with just the window.load statement, no document.ready handler wrapped around it

<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 !