My jQuery mini logo

The other night I wanted to add a mini ‘Daniel Stuart’ logo on my site’s top navigation bar. The idea was that this would maintain my branding but the real magic is to only show the mini logo once the user scrolls passed the large logo.

A look at the xHTML

Below is a look at the xHTML placed in the top bar. I have set the display to none so it does no show up initially.

<div id="miniLogo" style="display: none">
	<a href="http://danielstuart.ie">
		<img src="images/miniLogo.png" alt="Daniel Stuart"/>
	</a>
</div>

jQuery to the rescue

I have used scrollTop() to determine how far down the user has scrolled. According to my template design, I want the logo to fade in when the user has scrolled down 100 pixels or more. Also, I want the logo to fade away when the user scrolls back up to the top.

I have set up a boolean variable to check it the user has scrolled past the main logo as I only want to initiate fadeIn and fadeOut once.

I also used jQuery.noConflict(); to avoid any issues with any other scripts I am using.

var $scrolled = new Boolean(false);
jQuery.noConflict();
jQuery(window).scroll(function () {
	position = jQuery(window).scrollTop();
	if(position >=100 && $scrolled == false){
		$scrolled = new Boolean(true);
		jQuery('#miniLogo').fadeIn('slow', function() { });
	}else if(position <100 && $scrolled == true){
		$scrolled = new Boolean(false);
		jQuery('#miniLogo').fadeOut('slow', function() { });
	}
});

So check it out above, scroll down a bit past the main logo and watch the magic happen!

Web work in New Zealand

Since living in New Zealand for the guts of 7 months I have managed to get a little bit of web development work here and there. Back in Queenstown I did some freelance work for local web development company, Kelpdesign. They took me on for a few weeks and I managed to get a few site’s done for them. Nice bunch of people and I’ll never forget William’s two dogs lounging around the office in front of the gas heater.

The first bit of work was a simple WordPress website for a local tradesman. They were looking for something quick and it was basically a free theme, some plugins and some content put together.

www.queenstownconcretegrinding.com
www.queenstownconcretegrinding.com

The second website on the other hand was a custom design by Kelpdesign and it was for a local construction project management company. I had to convert it to xHTML and CSS and set it up as a WordPress template. This was the first time I have created a template for WordPress and it really opened me up to what WordPress could do. I have created so many templates for Joomla in the past and developing one for another CMS was pretty interesting. This WordPress template had everything from custom fields and separate layouts that could be assigned to specific pages and categories. As well as clever bits of PHP and nice usage of WordPress’s API.

www.triplestar.net.nz
www.triplestar.net.nz

WordPress 2.8 installed

I’ve just installed WordPress 2.8 on my server. Now time to build myself a website for a change! Going to try and find a decent way of showing my portfolio and I really want to start blogging; you know, sharing interesting web development ideas & techniques, funny stories, personal thoughts, interesting links and stuff!

Now to try and implement Twitter, Last.fm and other social widgets 🙂