One of my new favorite blogs to read is jQuery for designers. Mainly because the guy who runs it seems to have the same obsession for the very design elements I do and partly because he’s better at jQuery than I am and I learn something every article I read (or watch, he offers screencasts for every article which is… mmm… unique).

One of the many techniques I have needed for this next wordpress theme I’m releasing is a fading hover effect. You can see it used on Dragon Labs as well as the jQuery UI site. Unfortunately the only site is done in degradable and semantic way is Dragon Labs, but Anand doesn’t have his code readily available and I haven’t talked to him in years. So… I tore into the code available from jqueryfordesigners…

You can view their article here.

My problem with the way(s) this effect is accomplished with the technique(s) from jqueryfordesigners is that this effect is only useful to me for links, and I’m not crazy about linking using an onclick event (shame on you jQuery). So I ventured out to edit their code and see if I couldn’t do it better - and by better I mean better for my particular situation. What I came up with was a solution that allows no images to be tied into the markup. The entire process is handled without the need of inline images or extra hidden elements. I would say it was perfect if it wasn’t for the fact that every now and then it simply stops working - for no apparent reason at all.

This method is now out of date. Please view this example for a simpler, revised version that does not suffer from the bug this version does.

The demo is pretty self explanatory, but here’s a play-by-play:

Step 1:
Include jQuery.

Step 2:
Include the following code:

$(document).ready(function() {
	// find the div.fade elements and hook the hover event
	$('.fadeThis').hover(function() {
		// on hovering over find the element we want to fade *up*
		var fade = $('> .hover', this);
 
		// if the element is currently being animated (to fadeOut)...
		if (fade.is(':animated')) {
			// ...stop the current animation, and fade it to 1 from current position
			fade.stop().fadeTo(500, 1);
		} else {
			fade.fadeIn(500);
		}
	}, function () {
		var fade = $('> .hover', this);
		if (fade.is(':animated')) {
			fade.stop().fadeTo(500, 0);
		} else {
			fade.fadeOut(500);
		}
	});
 
	// get rid of the text
	$('.fadeThis > .hover').empty();
})

Step 3:
Form your html using a similar pattern:

<a class="fadeThis" href="http://greg-j.com">
	<span class="hover">This content is hidden</span>
</a>

If you know why this effect seems to randomly stop working - or better yet, how to fix it - please let me know.

This is a small post made in hopes it reaches a JavaScriptdeveloper, who in turn passes it along to another, then another, so-on-and-so-forth…

I use jQuery with nearly every project. While I find it easier and easier to roll my own JavaScript, I’m not one for reinventing the wheel. If a plug-in exists that does what I want, I’ll use it. The first thing I do is check if they have a packed version (size matters). If not, I pack my own. My problems start when developers don’t have a packed version already available. Chances are, if they don’t have a packed version available, it’s because the JavaScript packer breaks their code. Not because it’s bad code, and not because there is something wrong with Dean Edwards packer, but because when code is packed certain operations are changed if the code isn’t written perfectly.

Enter JSLint. Think of JSLint as the W3C Validator for JavaScript. If your code passes inspection (you can essentially ignore repeatedly assigned vars), it will pack.

Tonight I’ve had to fix not one, but two jQuery plug-ins to make them available for packing. The first is the preloadCssImages plug-in from the filament group (amazing developers I might add) and the second is FancyBox by some guy called KAC. I’m not calling anyone out, rather hoping to make people aware of JSLint. It only takes a few moments to go through your code, and the result is a much lighter footprint in most cases.

I’ve contacted the creators of their respective plug-ins, but if they don’t post the fixed, here they are:
preloadCssImages
FancyBox

I’ll have another post in the next 24 hours releasing a free wordpress theme, so stay tuned!

In the process of writing the new WebMaster Marketplace over at MySpacePros I used InnerFade for jQuery and realized it wouldn’t work when it was packed with Dean Edward’s packer. I found the issue and fixed it (just a missing semi-colon), but contacting the creator didn’t go so well (Anyone speak German?) so I figured I’d post the fix here. That and it’s been a while since my last post.

If you’re wondering, it’s line 69. $.innerfade = function() {} should be $.innerfade = function() {};. If it’s not, it won’t compress.

Download InnerFade for jQuery (fixed and packed)