This is the celebrated journal of Mr. Simon Collison A.K.A Colly

WallSwaps - an experiment

3rd October 2008

We love doing web stuff every day, and we love our clients. However, all too often what we do is bound by rules, criteria and technical specs. So occasionally we (like many of you) need to break free and do something for fun. That is why we created WallSwaps.

WallSwaps

Launched today, WallSwaps is a really easy way to get our little birdie logo around the globe. In return, you get a permanent link on our wall, and a shiny new card-mounted badge. It is only a badge, but badges are good.

Wallswaps

Figure 1: The full canvas.
An experiment

The site is an experiment. Thus, it is a one-pager, and so much bigger than your browser window, yet you don’t get any scrollbars. Instead, we’re using a JavaScript combo to provide two cool ways to navigate around the wall (one a draggy affair, the other based around anchors).

Greg has really pulled this thing together visually, and the JavaScript implementation from Phil has really tied the room together. I’m not sure how they’ve done some of it, but I know it uses some few freely available scripts (such as Ariel Flesler’s ScrollTo and LocalScroll scripts, Jonathan Sharp’s AutoScroll script and of course jQuery in general).

Wallswaps

Figure 2: A closer look at the navigation.

We’re also rather pleased that it works alright on those new-fangled iPhone things. The navigation footer is dropped, seeing as you can move around the thing using your mucky fingers.

Wallswaps iPhone

Figure 3: It even works on an iPhone.
Updates and stuff

We hope you’ll all continue to send us your stuff - we love it - and we will only be updating the site at the end of every month (it may end up broken into several walls with our faves up front), and we’ll add RSS and some other stuff.

We’ll also hopefully find a way of ensuring it doesn’t all break when you resize the text. It gets by without JavaScript and CSS and ain’t bad for an early release - and it is only an experiment after all.

Don’t use Internet Explorer!

We’re very keen to get this thing working in IE7 and a few other old-fashioned browsers. There are problems with positioning and some other things that will get sorted next time we update it. For now, just use good browsers. You know the ones…

Responses

# Matt Wilcox responded on 3rd October 2008 with...

Very cool, however I don’t know what bit of my screen I’m supposed to be looking at at the end of the animation. I’ve solved this on my own sites using the onAfter parameter in localScroll to call the following function:


  /* Internal page scrolling.
       Now switched from a custom script to instead use the scrollTo and localScroll plugins for better flexibility */
  $.localScroll({
    axis:'xy', // 'x', 'y', 'xy' or 'yx'
    onAfter: targetHighlight,
    offset: {top:-20, left:-20}
  });

  /* Function to highlite a target after the anchor has been clicked */
  function targetHighlight(target) {
    $(target).animate({
      outline:"3px solid #fff"
    }, 500 ).animate({
      outline:"6px solid #69f",
      outlineOffset:"12px"
    }, 250 ).animate({
      top: "-10px",
      outline:"3px solid #000",
      outlineOffset:"3px"
    }, 250 ).animate({
      top: "0",
      outline:"0",
      outlineOffset:"0"
    }, 125 );
  }

Hope that helps :) Lovely project by the way, and such cool stuff stuck up there too.

# Hattie Ann responded on 3rd October 2008 with...

That is way too cool.  I absolutely love it.  Keep up the great work!!

# Mrmil responded on 3rd October 2008 with...

It doesn’t seem to work in Opera :(, anyways, great idea and interesting stuff. :)

# April Michele responded on 6th October 2008 with...

What a great idea. I have a real corkboard that I post pictures from last years events that are coming up soon at my Bed and Breakfast.  Shame I can’t figure out how to use this to do the same thing.  Would it be possible?  I’m not as up on stuff like this as I would like to be.

# Melinda Slade responded on 7th October 2008 with...

This is one of those ‘Ah-Hah’ ideas that you wish you had come up with yourself, know what I mean?  Great work!!!!

Responses are now disabled Your ability to respond is disabled automatically some 30 days after articles are published, or manually much sooner if spamming guttersnipes target a particular article.

Prev 754 Next

Superfluous Aside

Archived in Design & Web

Written in Sneinton

There are 5 responses

External References

Copyright © Mr. Simon Collison 2003-2017. Protected and licensed under a Creative Commons License. Grab the RSS feed

Engineered in Nottingham, scaffolded by ExpressionEngine, steam-pumped by United & kept alive with tea and hugs.