Archive for 2011

FancyMoves has a lot of great features which are easy to edit to customize your slider. Easily change the speed of the slider, add multiple sliders on the same webpage, turn off the navigation below the slider, and much more.There are multiple ways to navigate to the next / last item: using your keyboard, using the left and right arrows on the sides of the slider, using the nav under the slider (optional), or simply clicking on the next or last item in the slider.

jQuery FancyBox is built in so you can have images enlarge with an overlay effect on the screen. Hovering over the enlarged photo shows arrows, allowing you to navigate to other images within the group. FancyBox is easy to customize for your needs; change the transition effects, the background color, the title positioning, and more.

Google Analytics has an excellent map of the world showing where your website visitors come from.While I can’t ever hope to compete with Google’s product, I do want to have a similar map within JAWStats which shows roughly the same sort of information. Ignoring the “clickable” nature of Google’s map at this stage (I’ll tackle that another day), dynamically drawing a map in a web browser isn’t so easy. Naturally, I thought Flash would be the answer but, never one for doing things the easy way, I wanted to try doing this directly in HTML’s <canvas> tag.

Imagine there’s a 4-lane highway between your web browser and the internet itself. This highway is optimize to let pictures, text, and css fly by. But, when it comes to external scripts, the highway creates a toll booth that slows traffic. The worst part is that pictures text, and css caught behind these scripts have to wait until they pass through. JSL is the latest in toll both avoidance. It creates an express lane that lets all pictures, text, css, and external scripts pass by without worrying about toll booths. That means you save time and money on traffic costs 🙂

A cross-browser, accessible alternative to the standard form element which can be fully customised with CSS.Stylish Select attempts to replicate the functionality of the browser default select box as closely as possible with support for keyboard navigation, and intelligent positioning.

jQuery Stylish Select aims to have a minimal code footprint and weighs in at just over 3KB when minified.

ImageMapster is a jQuery plugin that brings HTML image maps to life. With this tool, any image map can be highlighted, selected, and manipulated in all kinds of ways. ImageMapster is 100% Javascript and it works on every major browser, without Flash or any other dependencies (except jQuery), including Internet Explorer 6. Some advanced effects require HTML5 support, but will still fall back to work in older browsers.

Earlier this year we were asked to create a website for a Swiss TV documentary about the famous “Langstrasse” in Zurich and its inhabitants. We came up with the idea of giving the user the ability to move through the street and see interesting hotspots connected with the documentary.

Our plan was to take a common user experience and use it in a refreshing way. Everybody knows how to scroll through a document, whether by dragging the scrollbar, using a mouse wheel or sliding with your fingers. You expect the page content to move up and down, but it’s kind of surprising to move through a street that way.

I created some web widgets for the London’s Design Museum and learned a few useful things in the process. Although all the necessary information can be found on the web, I couldn’t find a really comprehensive guide about doing this with jQuery so I decided to write this one. I’ll cover only techniques which are specific to web widgets so you should already be familiar with JavaScript, jQuery and web development if you want to follow easily.

The interesting points will be:

ensure the widget’s code doesn’t accidentally mess up with the rest of the page,

Sometimes, a nice and sharp design is ruined by the addition of a scroller. By default, the OS styles the scroller and that (arguably) makes it look ugly. For this tutorial, I’ll be using a nice little script called fleXcroll and then adding some code to add support for loading content via Ajax. I’ll also be using jQuery, but of course, you can use any other JavaScript framework or just plain old JavaScript.