Animated JavaScript Slideshow

March 12, 2009

JavaScript Slideshow This dynamic JavaScript slideshow is feature packed and under 5KB. It is the long awaited update to my previous script here. A few new features include description support, link support, no naming restrictions, portrait image support, graceful degradation and active thumbnail status. This script was built ground-up and will soon be included at scriptiny where all my scripts will be added as they are updated, debugged and incorporated in the new TINY namespace. I will also document the scripts more thoroughly and publish multiple examples. I will continue to publish scripts there and support as I have time via the new community forum. I will try and post more frequently here on a wide range of web development related topics. Here is an example of the markup to build a slideshow…

  • Image One

    photos/image-one.jpgLorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ut urna. Mauris nulla. Donec nec mauris. Proin nulla dolor, bibendum et, dapibus in, euismod ut, felis.

    Image One

  • Image Two

    photos/image-two.jpgLorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ut urna. Mauris nulla. Donec nec mauris. Proin nulla dolor, bibendum et, dapibus in, euismod ut, felis.

    Image Two

Each “li” above represents an image. The “h3″ content becomes the title for the image and the “p” the description. The “span” content is the path to the fullsize image. If you want to link the image wrap an “a” tag around the “img” tag which is the thumbnail image. The following are the parameters that can be set on the object… more complete documentation will follow soon. Default values are displayed as (10) and recommended values as [1-20]. Images imgSpeed = int; (10) navOpacity = int; (25) navHover = int; (70) letterbox = “string”; (#000) required color for letterbox on portrait images link = “string”; class name for link hover state Auto Slideshow auto = boolean; (false) speed = int; (10) Information Dialog info = boolean; (true) infoID = “string”; required for information dialog infoSpeed = int; (10) Thumbnail Slider thumbs = “string”; id of thumbnail slider, disabled if not set scrollSpeed = int; [1-20] (5) thumbOpacity = int; [0-100] (70) active = “string”; required for thumbnail active border spacing = int; (5) spacing between thumbnails left = “string”; id of left navigation link, required for slider right = “string”; id of right navigation link, required for slider Here is an example calling the script… The init function takes 5 parameters (id of the slideshow content placeholder, the id of the image placeholder, the id of the previous image placeholder, the id of the next image placeholder, the id of the image link placeholder). This script has been tested in Firefox, Internet Explorer, Opera, Safari and Chrome. Please send any bug reports to with the title “BUG REPORT”. This script is available for any personal or commercial projects under the creative commons license and is offered AS-IS, NO FREE SUPPORT PROVIDED.


C# Design Patterns – The Facade Pattern

March 12, 2009

Today I am back with another design pattern. In this post we’ll be exploring the Facade pattern.

What Is The Facade Pattern

The facade pattern is a higher level interface that simplifies and brings together multiple interfaces of a subsystem. What this means is if you want to do something but that requires interacting with multiple subsystems you can create a facade that same only a few methods that handle all the interaction with the subsystem.

Our Application Requirements

In our city dog registration application lets assume there are a few things that need to be done when a new dog is registered. First the new dog and it’s owners must be entered into the system. Next the registration fee must be processed. Finally, we want the system to send the owners the welcome email.

This is a very simple example but this action requires 3 separate systems to do something in order to complete this one task of registering a new dog.

Using The Facade Pattern

For the sake of simplicity and not cluttering this post with too much code, I am not going to provide code for the sub systems, just the facade.

public class RegistrationManager : IRegister { private IAccountingService _accounting; private IMessageService _messaging; private IRepository = _repository;
public RegistrationManager(IAccountService accounting, IMessagingService messaging, IRepository repository) { _accounting = accounting; _messaging = messaging; _repository = repository; }
public void RegisterDog(IDog dog) { _repository.AddDog(dog); _accounting.ProcessPayment(dog.PaymentOrder); _messaging.SendWelcome(dog.Owners.Find(x => x.PrimaryContact)) } }

As you can see this is a very simple example but it illustrates the concept of the pattern. We have taken 3 tasks, each belonging to a different sub system, and combined them into 1 task in a facade class, in this case the RegistrationManager class.

The RegisterDog method adds the new dog to the repository, sends the payment order to the accounting system, and sends a welcome message to the dogs owners that are flagged as primary contacts.

Summing It Up

I hope this post helps you understand the Facade pattern and I hope you are continuing to learn and have fun with this series.

Be sure to grab the RSS feed or follow me on Twitter to stay up to date and not miss any posts.

The C# Design Patterns Series

Part 1 – An Overview
Part 2 – The Decorator Pattern
Part 3 – The Abstract Factory Pattern
Part 4 – The Observer Pattern
Part 5 – The Facade Pattern

Adventures in Web 3.0: Part 1 – HTML 5

March 12, 2009

Last week I was reading about the Event Apart re-design which uses HTML5. I have remained peripherally aware of HTML 5 (I’m on the mailing list) but mostly I’ve just been following the ongoing debate about adding RDFa to the spec (which has seemed, at best, like two groups of people talking at cross purposes). With major, albeit web designer focussed, websites starting to use it in production I thought it was probably time I learned a few of the nuts and bolts.

So to get started I had a quick skim through Lachlan Hunt’s article ‘A Preview of HTML 5’ and, yes, nicked his code:

<!DOCTYPE html>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <title>An HTML 5 Document</title>
    <h1>A Preview of HTML 5</h1>
    <p class="byline">By Lachlan Hunt</p>
      <li><a href="/">Home</a></li>
      <li><a href="/products">Products</a></li>
      <li><a href="/services">Services</a></li>
      <li><a href="/about">About</a></li>
  <article id="comment-2">
      <h4><a href="#comment-2" rel="bookmark">Comment #2</a>
          by <a href="">Jack O'Niell</a></h4>
      <p><time datetime="2007-08-29T13:58Z">August 29th, 2007 at 13:58</time></p>
    <p>That's another great article!</p>
      <li><a href="/2007/09/">September 2007</a></li>
      <li><a href="/2007/08/">August 2007</a></li>
      <li><a href="/2007/07/">July 2007</a></li>
  <footer>© 2007 Example Inc.</footer>

As you can see it’s very similar to HTML 4, but with some unfamiliar elements:

  • DOCTYPE – lacks any kind of URI, it’s included purely to trigger standards mode in browers
  • header, nav, article, aside, footer – new block level elements to provide more semantic structure to web pages, mostly they mean what you expect although ‘aside’ might be better considered as ‘sidebar item’
  • time – new inline elements, although only one is shown here, to solve particular problems with, or encode common usage patterns of, current HTML, in this case the Datetime Design Pattern

These unfamiliar elements aren’t a problem for Firefox, the above code displays just fine:

Unstyled HTML 5 in Firefox

So with the markup in place I started wondering about how CSS would affect things. The first thing I discovered was that Firefox doesn’t have much in the way of default styling for the new elements – so setting background colours doesn’t have much effect until I added some default styles:

header {
    display: block;
    width: auto;
nav {
    display: block;
    width: auto;
article {
    display: block;
    width: auto;
aside {
    display: block;
    width: auto;
footer {
    display: block;
    width: auto;

With these rules in place I was then able to apply a very tasteful colour scheme to my basic layout:

Styled HTML 5 in Firefox

Looks about the same in Google Chrome:

Styled HTML 5 in Google Chrome

And in Opera:

Styled HTML 5 in Opera

Unfortunately it all falls down in Internet Explorer as we’re back to seeing the page unstyled. This is because IE doesn’t apply CSS styles to elements it doesn’t know about. Fortunately, there’s a hack (which I discovered on Bruce Lawson’s HTML 5 example page) – if you use document.createElement in JScript to create instances of the new elements (no need to even add them in to the DOM), IE ‘learns’ about them and then applies CSS rules. So I created a JS file and included it in conditional comments:


So now in IE7, looking fairly consistent with the other major browser engines:

Styled HTML 5 in IE7

Also in IE8b2 in ‘compatibility mode’:

Styled HTML 5 in IE 8

Unfortunately the workaround breaks in IE8 beta 2 in ‘standards mode’ – though it’s been fixed for the next beta.

For extra credit I did a version of my stylesheet which used the CSS table layout rules (thanks Roger), but I think I’ll save the advanced CSS, as well as the fun new HTML 5 elements, such as video and datagrid for follow up posts.(ads)