JSFiddle - React, Tailwind, and code Playground

by keif

HTML

<link rel="stylesheet" href="http://www.steinwayshowrooms.com/css/new.css">
<link rel="stylesheet" href="http://www.steinwayshowrooms.com/css/fonts.css">
<link rel="stylesheet" href="http://www.steinwayshowrooms.com/css/SqueezeBox.css">
<script src="http://www.steinwayshowrooms.com/js/mootools-1.2.3.1-more.js"></script>
<script src="http://www.steinwayshowrooms.com/js/SqueezeBox.js"></script>
<script src="http://www.steinwayshowrooms.com/js/behaviors.js"></script>
<script src="http://www.steinwayshowrooms.com/js/swfobject.js"></script>
	<div id="hero" style="border:0 blue dotted;">
		<div id="kwick">
			<ul class="kwicks">
				<li><a class="kwick steinway" href="http://www.steinwayshowrooms.com/steinway"><span>Steinway &amp; Sons</span></a></li>
				<li><a class="kwick boston" href="http://www.steinwayshowrooms.com/boston"><span>Boston</span></a>
				<li><a class="kwick essex" href="http://www.steinwayshowrooms.com/essex"><span>Essex</span></a>
			</ul>
		</div>
	</div>

CSS

#kwick				{width:880px;border:1px transparent dotted;}

#kwick .kwicks 		{height:350px; list-style-type:none; margin:0; padding:0;}
#kwick li 			{float:left;}
#kwick .kwick 		{display:block; cursor:pointer; overflow:hidden; height:350px; width:220px;}

#kwick .kwick span 	{display:none;}

#kwick .steinway 	{background:url(http://www.steinwayshowrooms.com/img/hero-steinway-440-350.png) no-repeat;}
#kwick .boston		{background:url(http://www.steinwayshowrooms.com/img/hero-boston-440-350.png) no-repeat;}
#kwick .essex		{background:url(http://www.steinwayshowrooms.com/img/hero-essex-440-350.png) no-repeat;}

JavaScript

var $ = $ || document.id;
var Kwix = {
	start: function(){
		//$$('#kwick .kwick span').setStyles({'display':'none'}); .//we don't want to hide these at all
		Kwix.parseKwicks();
	},
	parseKwicks: function(){
		var squeeze_to = 110;
		var max_width = 440;

		$$('#kwick li').setStyles({
			'float': 'left'
		})
		$$('#kwick span').setStyles({
			'opacity': 0,	// oohhh! opacity! fancy!
			'width': max_width
		})
		//get original widths
		var start_widths = new Array();
		var kwicks = $$('#kwick .kwick');

		//kwicks.setStyles({'width': '134px'});

		var fx = new Fx.Elements(kwicks, {wait: false, duration: 250, transition:Fx.Transitions.Cubic.easeOut});
		kwicks.each(function(kwick, i){
			start_widths[i] = kwick.getStyle('width').toInt();
			//mouse is in, squeeze and expand
			kwick.addEvent('mouseenter', function(e){
				$$(e + ' span').setOpacity(1);
				var obj = {};
				obj[i] = {
					'width': [this.getStyle('width').toInt(), max_width]
				};
				var counter = 0;
				kwicks.each(function(other, j){
					if (other != kwick){
						$$(other + ' span').setOpacity(0);
						var w = other.getStyle('width').toInt();
						if (w != squeeze_to) obj[j] = {'width': [w,squeeze_to] };
					}
				});
				fx.start(obj);
			}
			);
		});
		//mouse is out, squeeze back
		$('kwick').addEvent('mouseleave', function(e){
			$$(this + ' span').setOpacity(0);
			var obj = {};
			kwicks.each(function(other, j){
				obj[j] = {'width': [other.getStyle('width').toInt(), start_widths[j]]};
			});
			fx.start(obj);
		});
	}
};
//lock and load!
window.addEvent('domready',Kwix.start);
window.addEvent('domready', function(){
		if(window.ie6){
			$$('[src]').each(function(el){
				el.setStyles({'filter': 'alpha(opacity=0)'});
			}.bind(this));
			var ap = new AlphaPng();
		}
});