3

Add Chrome Web Store Style Vertical Scroll Boxes To Your Site

Posted in Javascript

I really like the Chrome web store vertical scroll box functionality so figured I’d write up a tutorial post on how to add them to your site.

Demo

Hover over the boxes below.

View source

 

How-To

My vertical scroll box is a mashup of the Malsup’s cycle, George McGinley Smith’s easing, and Brian Cherne’s hoverintent plugins for JQuery.

HTML

Firstly we’ll add some HTML that’ll work with cycle:

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<div class='vertscrollbox'>
	<div class='slide imageslide'>
		<div class='slidewrapper'>
			<div class='image'>&nbsp;</div>
			<h3>Title</h3>
		</div>
	</div>
	<div class='slide textslide'>
		<div class='slidewrapper'>
			<h3>Title</h3>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elit ligula, sollicitudin sit amet tincidunt quis, pharetra eu magna. Integer pellentesque ipsum quis arcu scelerisque et dignissim nunc imperdiet. Mauris blandit felis quis lacus tincidunt sollicitudin...</p>
		</div>
	</div>
</div>

Each immediate child of the .verticalscrollbox div is a single slide. I’ve added some extra classes and a .slidewrapper container div for easier styling.

CSS
You can style the below however you want. I’ve made mine look relatively close to the chrome web store.

1
2
3
4
5
6
7
8

.vertscrollbox {width:240px;height:200px;border:1px solid #ddd;background-color:#eee;display:inline-block}
.vertscrollbox .slidewrapper {padding:15px}
.vertscrollbox .slide {width:240px;height:200px;color:#333;text-align:left;font-size:16px;overflow:hidden }
.vertscrollbox .imageslide {border-bottom:1px solid #000}
.vertscrollbox .imageslide .image {background:#FEFEFE;height:140px;margin-bottom:5px}
.vertscrollbox .textslide {text-align:justify}
.vertscrollbox h3 {font-size:13px;color:black;line-height:20px;margin:0px;padding:0px}
.vertscrollbox p {font-size:13px}

JS
I could have used cycle on its own, however hoverintent adds a nice feel of professionalism.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

$(function() {
	$('.vertscrollbox').cycle({
		fx: 'scrollVert',
		timeout: 0,
		containerResize: 0,
		easing: 'easeOutQuint',
		speed: 500
	}).hoverIntent({
		timeout: 500,
		over: function() {
			$(this).cycle('prev');
		},
		out: function() {
			$(this).cycle('next');
		}
	});
});

 

Conclusion

Nothing too tricky in this one. It’s alot of javascript to load for such a simple thing but I think the results are worth it and the tools could be used in other places on your site – eg cycle as a carousel on your homepage or hoverintent and ease for your main menu.

One last thing to note is that because I’m using display:inline on my .vertscrollbox divs, they won’t sit flush up against one another unless you remove the space between </div> and <div class=’vertscrollbox’>