Words about stuff, and things related to stuff

TwitterFeed and Tweet.js - feed your blog to Twitter, and your Twitter feed to any page

Two fun, free tools for blog/Twitter syndication combo:

1) www.twitterfeed.com : enter any Blog Rss feed url and twitterfeed will automatically post your blog entries to your twitter account

2) tweet.js : light, fast jQuery powered Twitter feed display - easy to configure options and show your Twitter posts on any page you choose

See both in action in the sidebar, here: www.gowestweb.com

Anything I post on this blog gets added to my 'gowestweb' twitter feed, which is shown on the GoWest site using tweet.js

Replace missing images sitewide with jQuery and ColdFusion

In my application.cfc, within the 'onRequestStart' function, I have a variable defined for the replacement image to use in my site.

Then, in an include that puts special goodies into the head of every generated html page sitewide, I have this bit of cf code

view plain print about
1<!--- missing img src --->
2<cfif fileExists(expandPath(request.missingImage))>
3    <cfset imgErrorSrc = '#request.thisdir##request.missingImage#'>
4<cfelse>
5    <cfset imgErrorSrc = ''>
6</cfif>

This checks to make sure the 'error' image actually exists - if not, we just use a blank '' value. (Note: request.thisDir is my own global variable that references the root of the site - you can replace that with any hardcoded or dynamic url)

Then, write a simple function to replace any images - this duplicates a similar usage of the tag's 'onerror' attribute ( which is fine for images in non-strict doctypes, but is not entirely valid ).

view plain print about
1<!--- replace all missing images with replacement image, or with empty src --->
2<script type="text/javascript">
3$(document).ready(function(){
4    $('body img').error(function(){
5        $(this).attr('src', '<cfoutput>#imgErrorSrc#</cfoutput>').attr('alt','');
6    });
7});
8</script>

That's it. Also notice I am clearing the 'alt' attribute as a final precaution. Using this method, any missing image anywhere within the html will simply be 'blanked out'.

I could use jQuery's .remove() function, to remove a missing image completely from the DOM, but there are times when I want the space or layout to be preserved, and really, I don't want errant images in my pages at all, so this gives me a way to debug if I find my self (inevitably) scratching my head when a missing image simply 'vanishes' from the page 4 or 5 sites from now.

As a final note, the CF part of this, setting the value for the 'src' attribute, can be enhanced to include different images for different pages, or under different conditions. Likewise, the jQuery function could be expanded to target images in one location with a specific action, and in another with a separate function by using different css selectors.

Just another example of how Jquery + CF = bliss :-)

Remove missing images (and parent elements) using jQuery

My client has an auto dealership site where inventory images are pulled remotely, i.e. 'hotlinked', from the inventory service's website. The client asked me to create a slideshow of inventory images on the home page - no problem using jQuery cycle() plugin - but there's one hangup: some of the images don't exist!  Easy enough to remove the images ( <img onerror="this.style.display = 'none'"> ) , but these images are dynamically linked, and contained in an unordered list. So, even if I remove the errant images with an inline attribute, I still have this empty 'a' and 'li' hanging around.

Using a single line of jQuery code, I whipped up this super-quick solution:

<script type="text/javascript">
$(document).ready(function(){

// find all missing images
$('#slideshowWrap img').error(function(){

// hide the image, then remove the parent element from the DOM
$(this).hide().parents('a').parents('li').remove();

// uncomment line below to see the script at work
//alert('hidden: ' + $(this).attr('src'));

});

// end jquery
});
</script>


The parents('a') could become parents('p') or whatever is needed to get rid of the containing element.

Maybe the 'hide()' combined with 'remove()' is redundant.... but I like it.

That 'alert' line, if uncommented, will alert you to the src of each missing image for testing.


jQuery validate() plugin, IE6, simple solution

I have been using the jQuery validate plugin for just about every form I've created in the past year or more. Easy, robust, beautiful stuff by world-class jQuery coder Jörn Zaefferer ( plugin page ) ... if you haven't checked it out yet, please do!

Anyway, tonight I had (yet another) strange thing happen in IE6 - basically, nothing was happening. The form i was working on was able to submit in IE6 as if javascript was disabled - no errors, no message, nothing. As usual, everything was fine in Firefox (firebug) and IE7, and I was stumped as only IE6 can stump me... then, thanks to Google, I found this thread: http://groups.google.com/group/jquery-en/browse_thread/thread/843bc94ffef99250

Apparently there is something in the packed version of the validation file (jquery.validate.pack.js) that IE6 does not like. The solution? Don't use the packed version! Takes up a little more bandwidth but at least it works in all browsers.

Now - how much longer do we have to keep caring about IE6? (In this case, the offending browser is on the client's computer, so I have to play nice as much as possible...)

CF Gallery Creator & jQuery Slider Gallery !New and Improved!

Still a work in progress, I have fixed a few small things and added better setup notes for the CF Gallery Creator and jQuery Slider Gallery (click for explanation in previous post)

The new code is available as a zip file, attached ** see below **

This package contains

1) a custom ColdFusion image gallery generator, which will create thumbnails and large images of any size you specify from a folder containing your original images, and outputs them to the page in a nice unordered list html markup.

Includes options for multiple subfolders, each one a separate 'gallery' with thumbnail or dropdown navigation.

 

2) a simply but effective 'slider gallery' built on css and jQuery. Example here:

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

( Without the jQuery and css, the raw markup from the CF tag alone looks like this
http://www.gowestweb.com/cfdev/_tags/gallery/gallerypage.cfm?gallery=some-gallery-name

 

As usual this was built to meet a specific need for a client project and has been tweaked and adjusted along the way.

Please DO try it out, and let me know if/when you use it.
Comments, enhancements and suggestions welcome!

Some alternatives to Adobe NNTP Newsgroups

As many dedicated web developers mourn the passing of the NNTP interface for Adobe's support forums ( formerly nntp://forums.adobe.com ), I'd like to extend a hearty welcome, inviting all web developers, friends and interested cohorts to join myself and a number of other seasoned web professionals in some popular NNTP-friendly alternative hangouts.

http://www.miuaiga.com/page.cfm/Web-Developer-Newsgroups

In addition to general web developer newsgroups, there are some specialized groups for ColdFusion, javascript (ok, mostly jQuery), all three flavors of CartWeaver (E-commerce) and more.

Every one of the newsgroups listed on the page above is happy to welcome new and interesting contributors, the more the merrier. You may even discover some old friends among the archived threads. 

NOTE: If you are not currently using NNTP to interact with other web-folks online, you've been missing out! I recommend Mozilla Thunderbird, and an account at each one of the places listed. See you there!

---

In regards to the big switch, the Adobe Dreamweaver support forum says this:

ANNOUNCEMENT: Forums will be unavailable for planned system maintenance
starting at 3pm PST on April 3, 2009. New forums will be online on
Monday April 6, 2009.

( currently April 3, 1:35 Pacific time ... T-minus 90 minutes )

jQuery noSpam email address protector now works with euro domains! (two dots)

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://plugins.jquery.com/project/nospam

jQuery : find empty select boxes (or selects with a specific value)

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 ... ]

Mobile jQuery Cheat Sheet

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/

jQuery in Action 2008 Best Seller (no surprise!)

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

Show/Hide the Cartweaver "forgot password" form with jQuery

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.

Continued...

...Show Newer Read More...

Recent Comments

Importing Events Calendar Data into Mura CMS
Jon said: Hi Michael, Thanks for this post - similarly looking to import data from excel spreadsheet into mur... [More]

New TinyMCE lets you paste as plain text automatically
PRR said: I am using tinyMCE 4.2.3 and configured as suggested in this post but when i try pasting in editor i... [More]

Searching and collecting Mura CMS content by Extended Attribute Value with feed.addParam()
Armando Faes said: After a few hours of head banging - finally thanks to this - Once more THANK YOU! [More]

CF Gallery Creator & jQuery Slider Gallery !New and Improved!
Jan Willis said: Okay, I realized that you are calling my root as the Site - not the wwwroot. So, I moved the JS, CS... [More]

CF Gallery Creator & jQuery Slider Gallery !New and Improved!
Michael Evangelista said: @Jan, it has been a long time (6+ years) so my memory of the details is vague, but I think the image... [More]