Symphony.

Wow! Sites in the Showcase section always amaze me.

Whisky Connosr looks like a community-driven review site. I’d love to get some behind-the-scenes on how that was implemented. Did it require a lot of extensions? It’s pretty amazing what Symphony can do.

Yes, quite impressive.

That is quite amazing!

I concur!

Whisky Connosr I think it is one of the best Symphony implementation in the showcase.

Thanks for the shout guys, much appreciated.

I’ve got quite a lot on at the moment but I will pen an insight and share with you soon :-)

Cheers

Jean-Luc

Excellent.

look forward to it. Even wonder about little details, like the anchor browsing of the alfabethic wiskeys, that happens not with #anchors but with /anchors in the url param.
Is that the extension to get clean GET’s in your urlbar?

newnomad: That was done with jQuery and the jQuery-Plugin scrollTo:

    $('ol.list-az li a').live("click", function() {
        letter = '#' + $(this).text();
        $.scrollTo($(letter.toLowerCase()), 800, {
            offset: { top: -30 },
            onAfter: function() {}
        });
        return false;
    });

As long as you return false, the default event (browsing to the link’s URL) will not be executed and the page will simply scroll.

GET-variables have nothing to do with it because 1. its not a GET-variable and 2. scrolling has nothing to do with the server.

So, do you block these in robots.txt, or do they get spidered as 404s?

@phoque

I realised how the animation was done, I have used scrollTo before, in the localscroll plugin. I had just set it up to extend normal anchorlink behavior. I just was puzzled how this could have be done without the anchorlinks, for a moment I thought the # were cleaned by modrewrite, like the ? and : were cleaned/replaced in the clean url parameters extension

So basicly indeed its just setup to listen to the links in the a to z list. Not fully clear how the jquery identifies the whiskey it should scroll to, they have no id classes? So it just uses jquery to find the first instance of a list with name with first letter as selected?

Advantages I see:

• exact control over position (anchors: safari tends to just put in viewport, not at top)
• clean urls

Disadvantages I see:

• not degradable/no fallback, no JS is no effect?
• links are not spidered…then again the headers with class are….

any other thoughts on how to handle these kinds of scrollto things in innovative ways?

And no spidering either?

I imagine the intention is to make the actual URI spiderable i.e. /b/ will reload the page just with the B bottles visible. But it’s a good example of hijacking links with unobtrusive JavaScript.

Each letter has markup like this <h2 id="e">E<h2>, to which line 2 of the JavaScript above builds a reference ('#' + letter). That should be enough to figure it out ;-)

nickdunn: yup

newnomad: no, you cannot use mod_rewrite as it can only do serverside URL-manipulations. In this case the browser never sends a request.

@ nick thanks, thats crystalclear, I somehow didn’t spot the letters with their id in the markup at first. In fact the actual URI isn’t spiderable, there is no param set for the letters, and you get a 404 when you try. The question is ofcourse if it is usefull to be spidered…
Since the entire page, and its titles are spidered, the scrolling is merely a behaviour thing and not a content thing? I am fascinated too about hijacking links with unobtrusive JavaScript, but am not fully convnced yet about this method VS actual anchors extended with the animation.

@ phoque, doh! true, anchors are all clientside, so not rewritable with apache. Athough the URI can be rewritten with JS, so that would possibly be another way to achieve this effect; use normal #anchors, but rewrite them as /anchor, just to have a clean look.(what I am really after) And then catch the links as described?

Well lets see what Jean Luc has to say about not using a url handle for the letters and the effect on SEO.