As per Matt’s poking and prodding and pleading and … ok, he didn’t plead, but he did finish a re-working of our own About section, with the layout designs done for a week now (if the Date Modified on the file is telling me the truth), and the Case Study-y thumbnail slidey image goodness on the right there already two days old, but anyways, I did what I done, and developed his doings, and if you haven’t yet, I think its worth a click or six. And we promise to do more slidey goodness to the Team section too, as soon as we get some images to slide around.
And, if you are interested in some behind-the-scenes magic, aka more reason (to add to another reason) why I heart jQuery, well then…
… allow me to simply drop in the code that makes it all possible:
$('#right #studies .outside').addClass('jq').siblings('.stabs')
.show().children('a').bind('focus',function() {
$(this).blur();
}).click(function() {
$(this).addClass('on').siblings('.on').removeClass()
.parent().siblings('.outside').children('.inside')
.animate({left: '' + (0 - (($(this).html() -1) * 286)) + 'px'},500);
return false;
});
Lost? Me too. Let’s see:
We tell the outer container that we do have javascript, so it can stop worrying about scrolling on its own (css overflow: hidden), then we show() the numbers to control the scrolling, hide the gross focus box that firefox likes to throw up around things you click on, and add the animate magic. I think that is just about as compact as I could get it. That, plus a touch of css, to make sure that if, by some freak accident, you view the page without javascript (heaven forbid), it works out as well, and we are good to go!
Happy Thursday.