jQuery Smooth Div Scroll by Thomas Kahn

Back to index

Scrolling Mixed Content

Smooth Div Scroll is not limited to scrolling only images even though most of the examples on this page are image scrollers. In this demo I have wrapped images and text in div's that I make scrollable. Smooth Div Scroll doesn't care about what you put in the scroller as long as it's several elements that have a width that can be calculated (block elements). Since div's are block elements they're great for wrapping other content, but you could also use links (a href-tags) as long as you set them to display: block; since the default display mode for links is not block but inline.

If you're viewing this on a touch device, take a look at the touch version of this demo.


My father's family name being Pirrip, and my Christian name Philip, my infant tongue could make of both names nothing longer or more explicit than Pip. So, I called myself Pip, and came to be called Pip.


I give Pirrip as my father's family name, on the authority of his tombstone and my sister - Mrs Joe Gargery, who married the blacksmith.


As I never saw my father or my mother, and never saw any likeness of either of them (for their days were long before the days of photographs), my first fancies regarding what they were like, were unreasonably derived from their tombstones.


The shape of the letters on my father's, gave me an odd idea that he was a square, stout, dark man, with curly black hair.


From the character and turn of the inscription, 'Also Georgiana Wife of the Above,' I drew a childish conclusion that my mother was freckled and sickly.

To five little stone lozenges, each about a foot and a half long which were arranged in a neat row beside their grave, and were sacred to the memory of five little brothers of mine - who gave up trying to get a living, exceedingly early in that universal struggle - I am indebted for a belief I religiously entertained that they had all been born on their backs with their hands in their trousers' pockets, and had never taken them out in this state of existence.


Ours was the marsh country, down by the river, within, as the river wound, twenty miles of the sea.

My first most vivid and broad impression of the identity of things, seems to me to have been gained on a memorable raw afternoon towards evening.

This text is from the first chapter of the book "Great Expectations" by Charles Dickens. As you can see you can put links in the mixed content as well.

Here's the CSS for this example:

#mixedContent {
	width:100%;
	height: 330px;
	position: relative;
}

#mixedContent .contentBox {
	position: relative;
	float: left;
	display: block;
	height: 308px;
	width: 200px;
	border: solid 1px #ccc;
	padding: 10px;
	margin: 0px 5px;
	/* If you don't want the images in the scroller to be selectable, try the following
	   block of code. It's just a nice feature that prevent the images from
	   accidentally becoming selected/inverted when the user interacts with the scroller. */
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-o-user-select: none;
	user-select: none;
}

#mixedContent .contentBox img {
	margin-bottom: 10px;
}

#mixedContent .contentBox p {
	font-size: 10px;
}
	

Back to index