collylogic.com - Simon Collison's weblog

WallSwaps - an experiment

2nd 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

Read on for an explanation…

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

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

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

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…

Simon Collison published this on 02/10/08, at 7:52 PM

Comments

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 smile Lovely project by the way, and such cool stuff stuck up there too.

02/10 at 20:56 from Matt Wilcox

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

03/10 at 00:32 from Hattie Ann

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

03/10 at 06:42 from Mrmil

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.

06/10 at 01:29 from April Michele

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

07/10 at 00:23 from Melinda Slade

Note that comments are disabled 30 days after articles are published, or sooner if spammers target a particular post. Sorry...

Commenting is not available in this section entry.