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.

    Create a Dynamic Scrolling Content Box Using AJAX

    jQuery AJAX Scrolling Content Box

    If you have used Google Reader, then you might have noticed the way Google Reader shows feed items, it loads up few items first when you click on a feed and as you scroll down to view more items, it fetches more items dynamically and adds it to the list.

    A navigation menu that stays on top with jQuery

    A navigation menu that stays on top with jQuery

    This is an easy way to make a navigation menu that sticks to top of the window while scrolling down the page. We want the menu to stick to the top only after we’ve scrolled down further than its original position. A few lines of jQuery will to the trick.

    Advanced Javascript ColorPicker

    Advanced Javascript ColorPicker

    ColorPicker is an advanced and highly customizable JavaScript color picker that doesn’t rely on any JS frameworks. It can display the entire color palette (~16.78 mil. colors) in 6 different color modes.

    Twisterghost a jQuery console I/O system

    Twisterghost a jQuery console I/O system

    A JavaScript based console I/O system built for module extensions.

    Knockout a Dynamic jQuery UI

    Knockout a Dynamic jQuery UI

    Knockout a Dynamic jQuery UI a dynamic jQuery UI by applying the Model-View-View Model(MVVM) pattern.Easily associate DOM elements with model data using a concise, readable syntax.When your data model’s state changes, your UI updates automatically.

    Knockout is a JavaScript library that helps you to create rich, responsive display and editor user interfaces with a clean underlying data model. Any time you have sections of UI that update dynamically (e.g., changing depending on the user’s actions or when an external data source changes), KO can help you implement it more simply and maintainably.

    How to build a fast, simple list filter with jQuery

    How to build a fast, simple list filter with jQuery

    Sometimes you want users of your web-app to quickly filter a list down. For example, a web-app I’m currently working on features a page listing two dozen countries, and I want users to find the country they are looking for as fast as possible. This article shows you how little code is needed to add this in a fast, progressively-enhanced way using jQuery.

    timeago a jQuery plugin

    timeago a jQuery plugin

    Timeago is a jQuery plugin that makes it easy to support automatically updating fuzzy timestamps (e.g. “4 minutes ago” or “about 1 day ago”).