Let me start by saying that I am not a developer, I am a designer who dabbles in jQuery and as such my code will probably not be the cleanest or most efficient but it gets the job done.

I will also assume you have some basic knowledge of jQuery.

View the demo

Recently I had to create a sophisticated jQuery interface initiated by clicking an icon and showing a div then fading it away upon leaving the div. The problem was the shape meant that when a user moved the cursor from the icon to the div they briefly left the confines of the div and as such the div would fade out. This was a problem and the solution seemed to be the Hover Intent plugin which allows the mouse cursor to leave the div and re-enter it within a certain number of ms (milliseconds) and not fade out the div (or whatever action you have written).

This is great right? Well yeah, but this only works when you hover over an element to begin with. What happens when you want to initiate the initial action on a click instead of on hover? This was my problem.

My solution:

So lets set up Hover Intent set up to work on hover with a mega-menu. Below is just the jQuery, you can see the html and CSS in the demo if you want to or download the source files here.

$(document).ready(function(){
$('body').removeClass('no-js'); // Removes the class 'no-js' from the body to let us know javascript is enabled
function slideTheMenuDown() { // This function is called by hover intent 'over:'
$(this).find('.subnav').slideDown('fast'); // Slide the menu down
}

function slideTheMenuUp() { // This function is called by hover intent 'out:'
$(this).find('.subnav').slideUp('fast'); // Slide up the sub menu
}

$('ul.topnav li').hoverIntent({
sensitivity: 7, // number = sensitivity threshold (must be 1 or higher)
interval: 100,   // number = milliseconds of polling interval (we want this to be initiated on click rather than hover)
over: slideTheMenuDown,  // function = onMouseOver callback (required)
timeout: 500,   // number = milliseconds delay before onMouseOut function call
out: slideTheMenuUp    // function = onMouseOut callback (required)
})
});

Now that we have Hover Intent working on hover all we need to do is wrap the function slideTheMenuDown in a click event. When Hover Intent reacts to a hover event, there is no action until the associated click event has triggered (basically until you click nothing happens). The result is no animation until you are hovering over the desired element and are also clicking it. Sweet right?

This is what it looks like

function slideTheMenuDown() {
    $(this).click(function() { // We wrap the action in a click event
        $(this).find('.subnav').slideDown('fast') // Slide the menu down on click
    });
});

That’s it, you’re done.

I have added a few embellishments such as adding an active class to the parent li so when you hover onto the submenu, the hover state sticks on the top level menu item.

Get the menu style as a psd from Premium Pixels

View the demo

This post is about using TimThumb to create an on-the-fly, greyscale image thumbnail of the first image in a post and use jQuery to fade in a colour version on top creating a nice effect.

Let me also say that this is not in-depth and is not for beginners as I’m not going to walk you through each step, merely give you an overview.

If you want to see a demo then look at my homepage as I’ve used this effect there and on my search & post lists. As the thumbnails are created on-the-fly and not during image upload, you can use this technique anywhere you like! Why there isn’t a plugin for this I don’t know.

Things you will need:

1. TimThumb.php
2. Get the Image script (includes a TimThumb.php in a package file)
3. jQuery
4. WordPress

Put TimThumb.php in your theme folder in /scripts/ (create this folder if it doesn’t exist)

Follow this tutorial to get TimThumb and Get The Image working in wordpress. It’s as simple as copying the script to your functions.php file (or create one if you don’t have one).

Link to jQuery (there is a way to link to the jQuery library that comes with WordPress but I prefer to link to the one hosted on Google)

To view all the code, simply hover over it.

Link to jQuery

Add the following to your header template to link to the Google Code hosted jQuery library:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js" type="text/javascript"></script>

The PHP

This goes in your template file

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<div class="home-thumb">
<a class="post-thumb-a" href="<?php the_permalink(); ?>"><?php echo get_image(150, 306, '2'); ?></a>
<a class="post-thumb-b" href="<?php the_permalink(); ?>"><?php echo get_image(150,306,''); ?></a>
</div>
<?php endwhile; endif; ?>

This should be generally familiar to WordPress people but it’s saying if there are posts, while there are posts, get the information within the post. More information can be found on the WordPress Codex about The Loop. The permalink links to the url of the post (can be any link destination though) and inside the link we call the function you should have pasted into your functions file – get_image(). The arguments are ‘height’, ‘width’ and ‘filter’. I have yet to find a list of all the filters supported by TimThumb but for this you’ll only need filter 2 – greyscale.

So get_image()  gets the first image in the post and crops it to the dimensions inside the callback (in this case a height of 150px and a width of 306px but you can choose any size that is smaller than the image in the post). The third number is calling a filter from TimThumb which creates a greyscale thumbnail of the image. Then we duplicate this call but remove the ’2′ so we get the full colour thumbnail. We do this so that we can position them one on top of the other and fade one in creating a cool transtion.

The class ‘.post-thumb-a’ should be on the link containg the greyscale image & the class ‘.post-thumb-b’ goes on the link containing the colour image. This is important as ‘.post-thumb-a’ will be placed on top to hide the colour image and will be faded out to reveal the colour image.

The CSS

This positions the images and title correctly

.home-thumb {

	overflow:hidden;

	position:relative;

	width:306px;

	height:150px;

}

a.post-thumb-a img, a.post-thumb-b img {

	position:absolute;	

	top:0;

	left:0;

}

a.post-thumb-a img {

	z-index:10;

}

What the CSS does is position ‘post-thumb-a img’ (the image inside the link) on top (z-index:10;) of post-thumb-b img. This needs to be inside a div as it uses an absolute position to make sure they are pixel perfect overlayed. Make the parent div the same height and width as the thumbnail size you specified in the get_image() callback above.

If you test this now, you should see the greyscale image and not the coloured on — that’s because they coloured one is hidden underneath.

The Javascript

This goes in the header.php template of your WordPress theme

<script type="text/javascript">

jQuery(document).ready(function($){

	$(".home-thumb a img").hover(

		function() {

			$(this).stop().animate({"opacity": "0"}, 800);

			},

		function() {

			$(this).stop().animate({"opacity": "1"}, 800);

			});

});

</script>

The Javascript selects ‘.home-thumb-a img’ (the greyscale image within the link, the one hiding the coloured image) and sets the opacity to ’1′ until the mouse hovers over it, then change the opacity to ’0′ over the time of 800 ms (1000 ms = 1 second) to reveal the colour image, creating a colour fading effect.

That’s it, you’re done. Now have a play around. I’ve added a title tag in mine.

If I’ve made a mistake anywhere here please let me know and I’ll make sure to change it. Any questions and I’ll be glad to help.

After much arguing through many emails I have decided to defer my vote to someone else as it’s getting heated. Just need someone to make a creative decision who is higher up in the hierarchy than we are.

Forgetting all of that stuff, I have redesigned my website, business card and all pdf documents and updated my ‘brand’ since doing that for the final degree exhibition. I changed the colour to 100% Magenta instead of orange but kept the same font The portfolio section is now up with proper descriptions, pictures and styling (with some more projects to come when I get a chance).

My business card can be seen below and yes I am aware that the back of the card has the wrong corners rounded in the image.

While at Samsung I noticed that my new website design did not look correct in IE6 (no surprise there then) so I spent some time correcting some CSS problems. No sooner than I had done that than I tried it in Safari and it failed even more to display correctly.

After several hours trying to figure out what the problem was, changing (and improving) my CSS stylesheet I discovered that even though I zero’d all margins at the start of the CSS by:

* {margin:0px; padding:0px}

Safari is a bitch and does not recognise that. So after several hours of trying, finally declaring the padding and margins as 0 for ul and li elements as well as entire divs, the formatting magically came into alignment in Safari.

After doing all that, feeling like I needed to vent some of my frustration and being British I wanted to write a strongly worded letter to Mr. Jobs. Instead I am blogging about it. This in itself proved more difficult than first anticipated as when I logged into Worpress, the visual text editor for the post screen had gone and all the text was coming out in white! After a quick Google and a re-install of WordPress 2.8 the editor came back and I can see what I’m writing now.

I have just received an HTTP error while uploading my business card image. Seriously what is going on with the internet tonight?

Now the reason I am blogging at this late hour and not in bed, asleep in preparation for work tomorrow is simple… There are people in my house who I don’t know, playing very loud music. I hope tomorrow is a better day.