Here is a little javascript/jQuery carousel I knocked up this morning. It's an extension of something I put together for a recent project, seen here in dev form. Today I put the functionality in to stop the click function at the beginning and the of the list of carousel items. I thought I'd note it down here.

1  $(function() {
2	
3  myCarousel = function() {
4		
5 	var scrollContent = $("div.inner-cont ul"); //the content to be scrolled
6	var pixelShift = 0;
7	var liCount = $("div.inner-cont ul li").size(); //count the number of list items
8	var marginVal = 158;
9	var rightLink = $("div.rot-cont a.right");
10	var leftLink = $("div.rot-cont a.left");
11
12	rightLink.click(function() {
13		var liTotalCount = 0 - liCount * marginVal; //total length in pixels, in this case 158 x the number of list items, subtracted from zero, this is to store the variable as a number not a string
14		var stopCount = liTotalCount + marginVal; //add one width to the total, so that we stop on the last list item
15		if (pixelShift != stopCount) {
16			pixelShift = pixelShift - marginVal; //shift by 158px on every click
17			scrollContent.animate({'left': pixelShift + 'px'}, 'slow'); //animate the shift
18			return false; //disable the anchor
19		}
20		else {
21			return false; //else (we're at the end), disable the anchor and do nothing
22		}
23	});
24
25	leftLink.click(function(event) { //same again, but for the count down link
26		if (pixelShift != 0) {
27			pixelShift = pixelShift + marginVal;
28			scrollContent.animate({'left': pixelShift + 'px'}, 'slow');
29			return false;
30		}
31		else {
32			return false;
33		}
34	});
35 }
36	
37 myCarousel();
38
39 });

It uses a variable (marginVal) for the list item width in pixels (this should match the width in the CSS), so ultimately it can have as many or as few list items to scroll through as you like.

I can't be bothered to pick it apart any further, the comments should explain enough, and view the source of the post to see the HTML/CSS but feel free to drop me a line if you have any questions or comments.

There are some lovely recipes on there too!

To save the image, Windows users - right click > Save as, and Mac users - right click > Save image as...

Here is my attempt:

Ed: BA Hons Design/12yrs exp web dev. Prev: Dell/Tesco/Arcadia/UKTV. Skills: XHTML/CSS/UI. Folio: http://www.fuzzyoutline.com/folio.html

I'm not sure it's that good to be honest, there were certainly better examples last night but I intend to work on it some more. And the general consensus last night was that it was cheating to have my URL in the Tweet, but I think that because my job is wholly internet based I can get away with it. I've also left 3 spaces at the end of my #cv140, it's only 137 characters long, so it can be re-tweeted with just RT:

Get over to Twitter Search and enter the hashtag #cv140 and have a go.

Update: here are a couple of the other #cv140's:

@Andyqsmith:
#cv140 PeopleManager/Motivator,RunProjects,Unusual/Innovative fixes for Tech/NonTech challenges,Big picture thinker,Any industry,I'mgdbuyme

@emmey
#cv140 System coordinator, degree educated, pc & communications skills seeking to excel in software application management. Refs on request.

After unpacking and configuring MAMP, I simply ran the install.php file and I was up and running in minutes, very straightforward. So far I've been digging around in the markup mostly, but have also taken a quick look at the user rights and privileges and also at a few of the themes to see how they're put together.

I also like the abstract way that the modules seem to be used and re-used around the site. I've only scratched the surface here, but am looking forward to looking into it further.

I was feeling a little creative, so I put this together from a tutorial on a design site.

I might build on the idea and put a new design together for my Web Standards Design site, but I also might not.

As you were.

View Larger Map

View Larger Map

This is (or was) a hostel back in '94, and Paula and I stayed there with our Aussie travel mates during the Florida leg of our travels.

View Larger Map

It turns out that you need to have an image of the entire Widget saved as Default.png in the package. This image is shown if your widget is taking time to load. In the Widget Development Documentation it seems to fail to tell you this one small point and I had to find it elsewhere.

Anyway, I've got the basic prototype working, and I would upload it here for all to look at, but it seems as though Movable Type disagrees with the .wdgt file extension...

• The 960 Grid System
• Blueprint CSS
• YUI Grids
• Typogridphy

It's great to have peace of mind that code updates are stored remotely, so clients code is backed up safely. It's also very useful for projects with more than one developer working on the same code at the same time using Subversions usual tools.