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.


Things I miss from Dreamweaver (in Eclipse / CFeclipse / Aptana)

yes there are a few...  I've been DW-free  and 100% eclipse-coding for about a year now I think... and I still find myself wishing for just a few of the features that were in DW. Maybe they'll be in 'ColdFusion Builder' ... maybe they already exist in eclipse and I'm not looking at it correctly.

My workspace is currently Eclipse 3.4 w/ CFeclipse plugins and Aptana code editor. The perspective I work in is largely Aptana's default w/ some stuff moved around.

Anyway, here's my short list of things I wish I had in my daily IDE : 

- Highlighted Tag Matching. Yes there is a bit of that in my eclipse/cfeclipse build, i.e. 'jump to matching tag', but in DW I could hit a key combo that would highlight the tag and its contents, and with another keystroke, jump to the parent matching tag, expanding outward. Then I could collapse that section - or any section I want - among other things. I miss that.

- (smarter) Tag Completion: In eclipse, I can type <p> and it puts the closing </p> right after. That's great. But in DW, I could type <p> then a big long sentence and then simple ' </  ' ... and it would know to put the closing 'p>' in there for me. Same for /div>, whatever. That was cool.

- Last Modified Dates /. 2-part FTP Panel: I love eclipse's "project" view, where i can have any number of projects in a single scrolling pane without flipping back and forth like DW's 'sites' system. Awesome. And the built-in FTP w/ Aptana is much faster and more reliable for me than DW ever was (this was the main reason i finally forced myself to become friendly w/ eclipse after years as a die-hard DW user). But sometimes I really miss the expanded FTP view from DW, where i could see files on the local server as well as the remote, with last-modified dates and everything. I still suspect this lurks in eclipse but have not found the right 'view' as of yet.

- User Defined Keyboard Shortcuts: this is a BIG one. Snippet shortcuts are awesome, but still not quite the same as being able to set my own key combos on any menu or window item.

 

No chance I'll be going back to DW any time soon (or ever) - there's too much in Eclipse that I would not only miss but become less productive if I did not have. For the most part I have a great, stable (and free!) web coding system in place, but these are the main features I find myself missing. My hands get tired after 12-hour coding days - every little auto-completed key-shortcutable item counts! - and when going between windows and views, I wish I didn't have to use the mouse so much.

I'm curious to hear from other DW-to Eclipse converts... what's your wish list for Eclipse?

 

Wedding Photos / Flickr Slideshow Embedding... easy!

I didn't realize Flickr made it so easy to embed a photoset as a flash slideshow into your page. I just added our wedding photos to our simple wedding website, in about 5 minutes (once I had the pictures sorted and uploaded to flickr, that is) 

http://michaelandavery.com/photos.cfm

To create a Flickr slideshow for any existing 'set' of photos, just click the 'slideshow' link at the top right when viewing the set. Then, in the slideshow player, click 'share' at the top right. They give you a line of code you can paste into your page and voila! The only thing I changed was the width/height parameters, both in the embed tag and the options for the flash display. The whole thing scaled perfectly to the size I selected. I *really* like the 'fullscreen' icon in the lower right of any playing slideshow. And so easy a caveman can do it!

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

Singaporean armpit sniffer...

I just got an email with the subject:

Singaporean armpit sniffer gets jail and caane

No message, just that subject line. And a 'rtf' attachment... hmmm. Compelling, but, no thanks. Do people really open the attachments on stuff like this?

No real point to this post - of all the strange fake headlines and bizarre email headings I've seen recently, this one struck a deep chord, and I decided it was worth sharing.

< dwlol (deleting while laughing out loud) >

 

Duplicate a mySQL table with one line of SQL code

CREATE TABLE copyname SELECT * FROM originalname

Too easy!

I'm using this to make a backup of an existing table before running a scheduled data import routine (overwriting the backup_table each time by making a new copy of the original) :



<cfquery datasource="#request.dsn#" name="dupTable">
DROP TABLE backup_table
</cfquery>
<cfquery datasource="#request.dsn#" name="dupTable">
CREATE TABLE backup_table SELECT * FROM data_table
</cfquery>

mySQL replace() : find and replace text in existing mySQL data column

This is a really useful function - you can find and replace text in any column of a mySQL database using the " replace() " function.

UPDATE table_name
SET column_name = replace(column_name,'text to find','replacement text');

easy!

 

Firefox: select onChange() when using keyboard - a solution

Working on a CartWeaver site, modifying part of the routine whereby different prices are shown on the page when selecting various options from a dropdown list on the product details page, I noticed that in Firefox, the 'onchange' event of the select list only fires if using a mouse, or when tabbing out of the select box using the keyboard ( select list loses focus).

I guess it's always been this way, I just haven't noticed until now. Fortunately there is a very easy fix - append the 'losing of focus' to the 'onkeyup' event, so that either keyboard or mouse have the same effect, causing the browser to register the 'change'.

Original select list is like this:

<select name="sel" id="sel#i#" onchange=" ( function here )" >

Adding just a bit of code for the onkeyup, like so:

<select name="sel" id="sel#i#" onchange=" ( function here )" onkeyup="this.blur();this.focus();">

we now have a list that loses then regains focus everytime a key is pressed (while it has focus), i.e. using the keyboard to move up or down through the options now triggers a split-second loss and regaining of focus, which is enough to trigger the 'onchange()' in firefox. I love a good easy fix!

Thanks to Sanket Vasa for the tip

 

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.mredesign.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.mredesign.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 )

How Google Desktop ruined my day

I am so smokin' mad about this, i gotta vent. And hopefully in the process, save somebody else from the same awful problem.

I have really liked Google Desktop - been running in on a high-powered Dell XPS Vista machine for about a year and use it regularly. Helpful for finding files, emails, outlook tasks, you name it.

But... it has a dark side.

more...

More Entries

blogcfc 5.9.1.002 by raymond camden
contact michael evangelista