jQuery Smooth Div Scroll by Thomas Kahn

Back to index

Scrolling Mixed Content Touch

Here's an example of scrolling mixed content (div's) on a touch device (iPhone, iPad, Android Smartphone etc). The basic setup is the same, but I've rigged the scroller for touch scrolling by disabling hot spot scrolling and enabling touch scrolling. If you are trying out this demo on a non-touch device you can still grab and drag the scroller to scroll the content.


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;
}
	

And here's the JavaScript to get the touch scroller:

$(document).ready(function() {
	$("#mixedContent").smoothDivScroll({
		hotSpotScrolling: false,
		touchScrolling: true
	});
});
	

Back to index