Archive for 2011

FancyMoves a jQuery Product Slider

FancyMoves a jQuery Slider

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.

jQuery ExCanvas World Map

jQuery ExCanvas World Map

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.

JSL (JavaScript Loader)

JavaScript Loader

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 🙂

jQuery TinySort a sorting plugin

jQuery TinySort a sorting plugin

TinySort will sort any nodetype by it’s text- or attribute value, or by that of one of it’s children.

jQuery Stylish Select

jQuery Stylish Select box

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 a jQuery plugin makes HTML image maps useful

ImageMapster a jQuery HTML image maps

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.

Fancy checkboxes and radio buttons with CSS jQuery

Fancy checkboxes and radio buttons with CSS jQuery

Many young guns ask about how to style custom checkboxes and radio buttons in forms. I prepared a typical markup, a few lines of CSS and some JavaScript functions (Safari label behavior fix included)

Create an interactive street view with jQuery

Create an interactive street view with jQuery

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.

How to build a web widget using jQuery

How to build a web widget using jQuery

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,
  • dynamically load external CSS and JavaScript files,
  • bypass browsers’ single-origin policy using JSONP.

Adding a jQuery scroller to your website that supports Ajax

Adding a jQuery scroller to your website that supports Ajax

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.