Added a few bells & whistles to the blog

Hey people, I want to point out a few improvements made to this blog in recent days. They have been stuck in my mind for awhile and I finally got around to getting them done.

First of all the sidebar has these huge links at the top now. If you want to learn more about me and are on LinkedIn, Facebook, or Delicious then I suggest you click them immediately. The real cool thing about these links is they are actually all one giant image. The two main reasons to create them this way; first it reduces the number of HTTP requests your browser makes which decreases load time, and second it completely bypasses any flash between hover states if you mouse over an image. The technique is called CSS sprites and you can find many tutorials on creating your own throughout the web.

While I was at it, I created a CSS sprite for the social bookmarking image links under the title of all our posts. That saves 7 HTTP requests alone, but I also added a little jQuery magic to animate them to appear to float up if you mouseover one. Amazing how just a little animation has so much effect on User Experience!

Another cool feature is the “Top” link in the bottom right, it has been there for awhile now but I was unhappy with the fact that it would be shown even if you were at the top of the page already! So I found an elegant jQuery solution and modified it to fit my needs. Now if you scroll the page down it appears and if you go back to the top it disappears. And so it is that jQuery once again saves the day.

Another thing to mention is all the jQuery I use is unobtrusive meaning it won’t break anything for people with javascript disabled.

What good is a post without some code? Here is the jQuery code I used, sorry but it comes with no explanation or support!

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'></script>
 
<script type='text/javascript'>
$(document).ready(function(){
	$(function(){
		$.fn.scrollToTop=function(){$(this).hide().removeAttr("href");if($(window).scrollTop()!="0"){
		$(this).fadeIn("fast")}var scrollDiv=$(this);
		$(window).scroll(function(){if($(window).scrollTop()=="0"){$(scrollDiv).fadeOut("fast")}else{$(scrollDiv).fadeIn("fast")}})
		$(this).click(function(){$("html, body").animate({scrollTop:0},"fast")})}
	});
 
	$(function() {
		$("#toTop").scrollToTop();
	});
 
	$(".share-container img").mouseover(function(){
		$(".share-container img").animate({
			top: "-10px",
		}, 500 );
	});
});
 
</script>