For more information, demo and documentation visit the Form Producer demo site.

Visit Demo Site Download Now!

The HTML

Ok so let’s start off with the easy part, the HTML. I’m not going to show the whole HTML here but just the structure. To see the whole HTML you can download the source later.

<div id="wrapper">
    <div id="top">
        <div id="feature">
 
            <h1>Ultimate jQuery Slider</h1>
            <div id="cycle">
                <img src="image1.png" alt="Title 1" id="slide1" />
                <img src="image2.png" alt="Title 2" id="slide2" />
                <img src="image3.png" alt="Title 3" id="slide3" />
            </div>
            <a id="next-arrow"><span>Next</span></a>
            <div id="nav"></div>
 
        </div>
    </div>
    <div id="body">
        <div id="content">
 
            <div id="product_slide1">
                <!-- Content here... -->
            </div>
 
            <div id="product_slide2">
                <!-- Content here... -->
            </div>
 
            <div id="product_slide3">
                <!-- Content here... -->
            </div>
 
        </div>
    </div>
    <div id="footer"></div>
</div>

As you can see here the structure of the HTML is fairly simple. The most important part’s to note is the cycle div with the images inside. We are going to be using the jQuery Cycle plugin for our scroller but I’ll explain more about that later on. Note that these images require an id attribute. This id will be how we reference the page hash and also how we know which content div to show (prefixed with product_).

There is also a next-arrow link and an empty nav div. These are required for the navigation to work and their functionality will be added when we set up the Cycle plugin.

The CSS

Ok now for some CSS. Again I am not including all of the CSS here (it is included in the source code download) rather I’m just showing the relevant parts of the CSS.

#top {
	background:url(images/background.png) repeat;
	width:100%;
	height:600px;
}
#feature {
	width:900px;
	height:100%;
	margin:0 auto;
	background:url(images/feature_back.png) no-repeat 50% 0;
	position:relative;
}
#feature h1 {
	width:350px;
	height:40px;
	margin:0 auto;
	background:url(images/header.png) no-repeat 0 bottom;
	padding-top:30px;
	text-indent:-9999px;
}
#feature a#next-arrow {
	background:url(images/next.png) no-repeat 200% center;
	position:absolute;
	width:180px;
	height:480px;
	top:80px;
	right:0px;
	text-indent:-9999px;
	cursor:pointer;
	/* Initially hidden */
	opacity:0;
}
#feature a#next-arrow span {
	display:block;
	width:100%;
	height:100%;
	background:url(images/next.png) no-repeat -220% center;
	z-index:99;
	/* Initially hidden */
	opacity:0;
}
 
#cycle {
	margin:0 auto;
	margin-top:40px;
	/* Initially hidden */
	opacity:0;
}
#cycle img {
	width:586px;
	height:450px;
	background:url(images/loading.gif) no-repeat 50% 50%;
}
 
#nav {
	width:50px;
	margin:0 auto;
	/* Initially hidden */
	opacity:0;
}
#nav a {
	background:url(images/bullet.png) no-repeat;
	display:inline-block;
	width:15px;
	height:15px;
	text-indent:-9999px;
}
#nav a.activeSlide {
	background:url(images/bullet_active.png) no-repeat;
}
#nav a:focus { 
	outline: none; 
}
 
 
#body {
	background:#fff url(images/body.png) repeat-x;
	width:100%;
	min-height:60px;
	margin-top:-10px;
}
 
#content {
	width:600px;
	margin:0 auto;
	padding-top:30px;
	/* Initially hidden */
	opacity:0;
}
 
#content div {
	/* Initially hidden */
	display:none;
}

Ok there is quite a lot in there but take your time to go through it. Part’s to notice are:

• #feature has position set to relative to that we can absolutely position the #next-arrow.
• The #next-arrow span definition is for the fancy fade effect we will implement in the javascript. It’s outside of the scope of this article to explain how this works but it’s safe to say it’s not required and you could just use :hover here.
• The #nav width is set manually. This is not very elegant and needs to be changed depending on how many links (bullets) you have if you want it to remain centred.
• A lot of the elements we have are initially hidden. This is so we can have our fancy fade-in effects when the page loads.
• We are using opacity here. Most modern browsers support pure CSS opacity but some (cough… IE cough…) don’t. Although this has been tested in modern browsers I’ve not made much effort to make it backwards compatible due to the fact we are using several techniques that won’t work in older browsers.

And that is us for the CSS. The rest is either fairly self explanatory or outside the scope of this article. However if you do have any questions about the CSS then please leave a comment and I will try and answer it.

The Javascript

Now for the fun part. The javascript.

$(document).ready(function(){
 
	//find starting index based on hash
	var start = 0;
	if(window.location.hash != ''){
		if($('#product_' + window.location.hash.replace(/#/, '')).size() > 0){
			var id = window.location.hash;
			var afterCount = $(id + ' ~ img').size();
			start = ($('#cycle img').size() - afterCount) - 1;
		}
	}
 
	//set up jQuery Cycle
	$('#cycle').cycle({
		fx:'fade', 
		speed:1000,
	      timeout:0,
		pager:'#nav', //populate the bullet navigation
		next:'#next-arrow', //next arrow link
		before:onBefore, //our onBefore callback
		startingSlide:start //set the starting slide
	});
 
	function onBefore(){
		//don't do if initial load
		if($('#content div:visible').size() > 0){
			var img = this;
			window.location.hash = '#'+img.id;
			//Dynamically set window title. Not SEO friendly.
			document.title = img.alt + ' | Ultimate jQuery Slider';
			$('#content').animate({opacity:0}, 500);
			$('#content div:visible').slideUp(500, function(){
				$('#content #product_' + img.id).slideDown(500);
				$('#content').animate({opacity:1}, 500);
			});
		}
	}
 
	//initial load
	var img = $('#cycle img:eq('+ start +')');
	window.location.hash = '#'+img.attr('id'); //set inital hash
	//Dynamically set window title. Not SEO friendly.
	document.title = img.attr('alt') + ' | Ultimate jQuery Slider';
 
	$('#cycle').animate({opacity:1}, 800, '', function(){
		$('#nav').animate({opacity:1}, 500);
	});
 
	$('#content div:eq('+ start +')').slideDown(500, function(){
		$('#content').animate({opacity:1}, 500, '', function(){
			$('#footer').animate({opacity:1}, 500);
		});
	});
 
	//next arrow fade
	$('#feature').hover(function(){
		if(jQuery.support.opacity){
			$('#next-arrow', this).stop().animate({opacity:1}, 500);
		}
	}, function(){
		if(jQuery.support.opacity){
			$('#next-arrow', this).stop().animate({opacity:0}, 500);
		}
	});
 
	//next arrow hover
	$('#next-arrow').hover(function(){
		if(jQuery.support.opacity){
			$('span', this).stop().animate({opacity:1}, 500);
		}
	}, function(){
		if(jQuery.support.opacity){
			$('span', this).stop().animate({opacity:0}, 500);
		}
	});
 
	//IE compatibility
	if(!jQuery.support.opacity){
		$('#next-arrow span').css('opacity', 0);
	}
});

So what is happening here? Well let’s go through it step by step:

• First of all, if you haven’t already, download the jQuery Cycle plugin and include it in your HTML. I’m not going to explain here how this plugin works but the jQuery Cycle website has plenty of good documentation.
• The first thing we are doing here is finding what the index of the starting slide should be. On our site we are using hashes as permalinks for the pages. Although this is very SEO un-friendly it does mean that people can link to specific pages (or slides) on the site.
  As for the code we are saying “if there is a hash and a corresponding content div (prefixed with product_), count the number of siblings after this one and subtract this from the total number of children to get the starting index”.
• Next we are setting up the Cycle plugin. There are just default values for fading and time and setting timeout to zero to stop the slides automatically progressing. We also link up the #next-arrow and #nav elements that we made earlier. We also set our before callback so we can do things before the slides change.
• Next we have the definition of our onBefore callback function. This function changes the window hash and title and handles the fading and sliding animation of the slide transitions.
• Then we have some code which happens only when the page first loads. This is basically the same as the onBefore function but with some small differences to the animation (e.g. everything fades in at different times rather than sliding up and down).
• The next bit of code makes the #next-arrow fade in only when you are hovering over the #feature div. Fairly simple. Note the use of opacity.
• The next bit of code is what I talked about earlier that defines the fancy hover-fade effect for the #next-arrow. This is out of the scope of this article but again it is safe to say this is not required if you just used #next-arrow:hover in the CSS.
• Finally we just have a small bit of compatibility code to make sure the #next-arrow span is hidden. As I discovered jQuery opacity seems to different from CSS opacity so this works even though it is only called on browsers that don’t support CSS opacity.

And that is the javascript. I would read through this a couple of times as it is not a simple piece of javascript but hopefully it will all make sense eventually.

Conclusion

So there you have it. The Ultimate jQuery Slider. Please feel free to tell me what you think of this code and let me know if you find any bugs. I’d especially love to know if you use this code anywhere so don’t be shy and let me know.

View Demo Download Source

The first thing I should say is WTF is not a theme. It is a theme framework. It’s designed to easily add all the extra theme functionality you get in all the latest themes without having to code it all by hand. I’m not going to say much more about it here other than go and check it out. Oh and let me know what you think.

• Head over to the Blog Action Day website, find out what is going on and, if you have a blog, join in.
• Turn down your screen brightness and save some power.
• If your going on holiday, un-plug your PC (and other devices) from the wall.
• Don’t use sleep mode. Instead turn off your PC completely.
• Use power saving settings on your PC (in Vista go to Control Panel > Power Options and pick the “Power Saver” option).
• If your building a PC, check what power is needed and try and limit the Watts in your power supply (ask yourself “do I really need a 900W PSU?”).
• Do lot’s of printing? Check you carbon footprint with the HP Carbon Footprint Calculator for printing.
• Just incase anyone is actually still using CRT monitors, don’t! LCD’s provide up to 70% power savings and up to twice the lifespan.
• Turn off you PC and go for a walk. Get out and enjoy the environment. Don’t take it for granted.

• jQuery Coda Slider functionality
• 3 different colour schemes (easily extendable) including PSD’s
• CSS3 Progressive Enhancement
• Easy installation and maintenanace (only 1 HTML file)
• Compatible with all major browsers
• Full documentation
• Makes use of the 960 grid system
• Under 1mb of files

I seem to be going through a sort of reshuffle of structure when it comes to my website(s). Basically what’s happened is I have split up my personal about site, portfolio and this blog in an attempt at re-branding myself and my work. So I now have a network of sites which represent the different parts of my online presence. I hope this makes it easier for people get an idea of who I am while having a more professional approach to my work. This blog will still be the hub of my online activity where I hope to continue to publish web/software development/design posts and tutorials.

As always I am interested on your views of what I have done. Do you think this is a wise move? Has it been successful? Am I a total idiot? Let me know.

“But not all browsers support CSS3 techniques yet!” I hear you say. Yes this is true. However, these are techniques which you should use only to enhance the experience for a user. They should not be fundamental for your web site/app to function. After all if we designers and developers don’t start to use them how will they ever get adopted in the mainstream.

Rounded Corners

Here is probably the most used technique of CSS3 so far and for good reason. It makes rounder corners of elements so much simpler than it used to be.

-moz-border-radius: 5px; 
-webkit-border-radius: 5px;
border-radius: 5px;

Text Shadow

This is probably going to become one of the most over used CSS3 techniques but it is quite cool.

text-shadow: 2px 2px 2px #000;

Opacity

This is another really useful technique which isn’t too hard to replicate with png’s. This is simpler however.

opacity: .7;

Box Shadow

Another cool one that makes adding shadows to objects super simple.

-moz-box-shadow: 5px 5px 2px #000;
-webkit-box-shadow: 5px 5px 2px #000;
box-shadow: 5px 5px 2px #000;

Font Face

There are many javascript/flash way’s to achive this technique. However this is a simple unobtrusive way to add cool font’s to your sites.

@font-face {
    font-family: 'Rough';
    src: url('fonts/roughdraft.ttf');
}
p.font {
    font-family: Rough;
    font-size: 30px;
    line-height:30px;
}

Conclusion

All of the above techniques (excluding font-face) are used in this blog design. See how a few small tweaks can really add that extra pop to a design. Even if only a certain percentage of users can see them. Remember I encourage you to start using these techniques when you can but only to enhance the users experience. If your not sure when you can use them check out the core principles of progressive enhancement.

So the question is: Does having more than one <H1> tag per page on your site affect your page rank/SEO score?

If your a freelancer you know how important it can be to track your time. Let’s face it, keeping track of your time properly decides how much you get paid. So with this in mind lets look at some web apps that have been designed to help you take control of this important issue.

MakeSomeTime

MakeSomeTime is a free service that focuses on having a super simple interface so that you don’t have to fuss with anything else. Just keep track of your time and keep your times organized.
Visit Site

Subernova

Subernova is a fully fledged project management app with iPhone and Air apps. It does a lot of things with a nice looking interface but it also lets you time your tasks.
Visit Site

Basecamp

Basecamp is another fully fledged project management app with loads of features and is considered an industry leader. It also lets you track your time but without an actual timer (you can only assign time to tasks). Understandably Basecamp is not free but it has a 30 day free trial.
Visit Site

Toggl

Toggl is a time tracking app with cross platform desktop apps and focuses on team based project time tracking. Toggle has a free plan for 20 users but has several paid plans available.
Visit Site

Paymo

Paymo is a time tracking app with a nice interface and quite a few features. It has a free plan for up to 3 users or $3.99/user/month plan as well as an invoicing add-on for $10/month.
Visit Site

Over to You

If you have any experience of any of these apps or you know of any that I have missed then please let me know.

There is quite a mix of cool jQuery and quirky CSS techniques used in there. One of the things I’m most impressed with is that the site works in every browser (yes even including IE6) and even the fading animations work. So head on over and check it out and let me know what you think.