qcook.html

<div id="menu_layout">
	<div class="left_col">
		<ul class="nav nav-stacked" role="tablist">
			<li role="presentation" class="active">
				<a data-target="#recommended" aria-controls="recommended" role="tab" data-toggle="tab">
					<!-- Could also use fa-thumbs-o-up for recommended -->
					<span class="fa fa-check-square-o" aria-hidden="true"></span>
					<span class="sr-only">Recommended</span>
				</a>
			</li>
			<li role="presentation">
				<a data-target="#favourites" aria-controls="favourites" role="tab" data-toggle="tab">
					<span class="fa fa-star-o" aria-hidden="true"></span>
					<span class="sr-only">Favourites</span>
				</a>
			</li>
			<li role="presentation">
				<a data-target="#alphabetical" aria-controls="alphabetical" role="tab" data-toggle="tab">
					<span class="as-fa">A-Z</span>
				</a>
			</li>
			<li class="spacer" aria-hidden="true"></li>
			<li role="presentation">
				<a data-target="#new" aria-controls="new" role="tab" data-toggle="tab">
					<span class="fa fa-plus" aria-hidden="true"></span>
					<span class="sr-only">New</span>
				</a>
			</li>
			<li role="presentation">
				<a data-target="#download" aria-controls="download" role="tab" data-toggle="tab">
					<span class="fa fa-download" aria-hidden="true"></span>
					<span class="sr-only">Download</span>
				</a>
			</li>
			<li class="spacer" aria-hidden="true"></li>
			<li role="presentation">
				<a href="/">
					<span class="fa fa-home" aria-hidden="true"></span>
					<span class="sr-only">Home</span>
				</a>
			</li>
		</ul>
	</div>
	<div class="center_col">
		<h1>One Touch Cooking</h1>
		<div class="tab-content">
			<div role="tabpanel" class="tab-pane active" id="recommended">
				<h2>Recomended</h2>
				<ul class="btn-list">
					<li ng-repeat="entry in index.entries | orderBy:'-score' | limitTo:5">
						<a class="btn btn-default" ng-href="/qcook/{{entry.key}}">
							<span class="title">{{entry.title}}</span>
							<span class="score">{{entry.score}}</span>
						</a>
					</li>
				</ul>
			</div>
			<div role="tabpanel" class="tab-pane" id="favourites">
				<h2>Favourites</h2>
				<ul class="btn-list">
					<li ng-repeat="entry in index.entries | filter:{favourite:true}:true">
						<a class="btn btn-default" ng-href="/qcook/{{entry.key}}">
							<span class="title">{{entry.title}}</span>
							<span class="score">{{entry.score}}</span>
						</a>
					</li>
				</ul>
			</div>
			<div role="tabpanel" class="tab-pane" id="alphabetical">
				<div class="scrollbar">
					<div class="handle">
						<div class="mousearea"></div>
					</div>
					<div class="bg">
						ABCDEFGHIJKLMNOPQRSTUVWXYZ
					</div>
				</div>
				<div class="frame">
					<h2>Alphabetical</h2>
					<ul class="btn-list slidee">
						<li ng-repeat="entry in index.entries | orderBy:'title'">
							<a class="btn btn-default" ng-href="/qcook/{{entry.key}}">
								<span class="title">{{entry.title}}</span>
								<span class="score">{{entry.score}}</span>
							</a>
						</li>
					</ul>
				</div>
			</div>
			<div role="tabpanel" class="tab-pane" id="new">
				<h2>New</h2>
			</div>
			<div role="tabpanel" class="tab-pane" id="download">
				<h2>Download</h2>
			</div>
		</div>
	</div>
</div>

<script src="sly/sly-1.6.1.js"></script>
<script>
var options = {
	/* itemNav: 'basic', */
	smart: 0,
	activateOn: 'click',
	mouseDragging: 1, // Click-dragging on frame
	touchDragging: 1, // Touch-dragging on frame
	releaseSwing: 1,
	scrollBar: $('.scrollbar'),
	scrollBy: 1,
	dragHandle: 1, // Click-dragging on scrollbar handle
	dynamicHandle: 0,
};
var frame = new Sly('#alphabetical .frame', options).init();

$('a[href="#alphabetical"]').on('shown.bs.tab', function(e) {
	frame.reload();
});
</script>