Chris Barr

Words

Sunday, August 15, 2010

Scrolling a overflow:auto; element on a touch screen device

Monday, May 03, 2010

In mobile Safari on the iPhone, iPod Touch, and iPad (as well as the webkit based browser on Android phones) it's not immediately obvious how to scroll a div that has overflow:auto; set on it. If this were a desktop browser you would see scrollbars and be able to manipulate those or even use your mouse wheel. No such concepts exist on a touch screen device!

To scroll the entire page you just touch it and move your finger. But when you touch the element that would normally scroll, the entire page scrolls instead. This is a little bit broken in my opinion since there's no visual indicator that you aren't seeing all the content. However, if you are on a site and you know there's a scrollable div there is a simple (but not obvious) workaround. Simple use two fingers at the same time and scroll them in the same direction.

This works OK but like I said it's not obvious, there's still no indicator that the content is scrollable, and when you use more than one finger you might accidentally trigger some other gesture like scaling the page. I recently ran into this exact issue at work and came up with a pretty solid solution in javascript. I broke this down into two simple functions, but the last one is where the magic happens.

This first function simply attempts to create a new touch event. Only touch screen browsers like mobile Safari have these events, so if it doesn't throw an error then we are using a touch screen device. Otherwise it's probably a desktop browser.

function isTouchDevice(){
	try{
		document.createEvent("TouchEvent");
		return true;
	}catch(e){
		return false;
	}
}

Next, this function calls the isTouchDevice() function, and if it succeeds we attach some special touch events to the page. First when a touch event begins (the touchstart event) we get the current scroll position and prevent the default browser behavior, which in this case would be to scroll the page. Next when you move your finger the touchmove event is called. Here we just subtract the position of your finger from the scroll position we saved earlier and again prevent the page from scrolling.

function touchScroll(id){
	if(isTouchDevice()){ //if touch events exist...
		var el=document.getElementById(id);
		var scrollStartPos=0;

		document.getElementById(id).addEventListener("touchstart", function(event) {
			scrollStartPos=this.scrollTop+event.touches[0].pageY;
			event.preventDefault();
		},false);

		document.getElementById(id).addEventListener("touchmove", function(event) {
			this.scrollTop=scrollStartPos-event.touches[0].pageY;
			event.preventDefault();
		},false);
	}
}

So that's it, just include these functions on your page and just call it by passing in the ID of the element you want to scroll. Like so: touchScroll("MyElement");. You can see a working demo here: http://chris-barr.com/files/touchScroll.htm. I feel like this is a better way of doing things because it's more intuitive since you're just using one finger, and it's potentially more obvious. Even if you don't immediately know there's hidden content, you might accidentally touch this while scrolling the page and realize there's more to see in this div.

Typographical Javasctipt Clock

I was bored, so I made one.  Check it out here: http://chris-barr.com/files/text%20clock/

Hot Chip - I Feel Better

Wednesday, March 17, 2010

Kid Cudi (feat. MGMT & Ratatat) - Pursuit Of Happiness

Thursday, March 11, 2010

Broken Bells - The High Road

New Years Resolutions

Friday, January 01, 2010

It’s a new year, and a new decade. I know 2010 will be a great year for me, and I’m going to do my best to make sure of that by setting a few new years resolutions for myself.

• Take 1 photo a day and blog it to force myself to get more creative - I’m keeping it in a tumblr blog you can follow here: http://2010photos.tumblr.com
• Lose 10 pounds
• Make a short film about my trip to Togo, Africa in July
• Try to get a photo published somewhere or in a local gallery

So most of these are photography related, but I think these all revolve around my trip to Africa later this year. This is more than likely a once in a lifetime trip, and I really want to make sure that I take some amazing photos and videos to remember it by.

So, Photoshop crashed on me.

Thursday, December 31, 2009

I hope this helps the nice people over at Adobe.

Fantastic Album Art

Friday, November 27, 2009

I wanted to show off some amazing album art from my music library, so I've picked 24 of my absolute favorites (arranged alphabetically). My rules for selecting these was to purely judge them based on the artwork, not on the actual music itself.

Some just have amazing photography, others just focus on great use of typography. All in all, I love each piece of album art (and the music.)

Ben Folds - Ben Folds Live

[iTunes] | [Amazon]

Chemical Brothers - Push The Button

[iTunes] | [Amazon]

Death Cab For Cutie - Transatlanticism

[iTunes] | [Amazon]

Derek Webb - Stockholm Syndrome

[iTunes] | [Amazon]

Feist - The Reminder

[iTunes] | [Amazon]

Frou Frou - Details

[iTunes] | [Amazon]

Iron and Wine - Our Endless Numbered Days

[iTunes] | [Amazon]

John Mayer Trio- Try!

[iTunes] | [Amazon]

John Reuben - The Boy Vs. the Cynic

[iTunes] | [Amazon]

Johnny Cash - The Legend of Johnny Cash

[Amazon]

José González - In Our Nature

[iTunes] | [Amazon]

The Mars Volta - The Bedlam in Goliath

[iTunes] | [Amazon]

Modest Mouse - Good News for People Who Love Bad News

[iTunes] | [Amazon]

Norah Jones - Not Too Late

[iTunes] | [Amazon]

Radiohead - Hail to the Theif

[iTunes] | [Amazon]

Regina Spektor - Begin to Hope

[iTunes] | [Amazon]

Sarah McLachlan - Wintersong

[iTunes] | [Amazon]

Shawn McDonald - Simply Nothing

[iTunes] | [Amazon]

Sufjan Stevens - Illinoise

[iTunes] | [Amazon]

The Flaming Lips - At War With The Mystics

[iTunes] | [Amazon]

The Shins - Chutes Too Narrow

[iTunes] | [Amazon]

UNKLE - War Stories

[iTunes] | [Amazon]

Wilco - Yankee Hotel Foxtrot

[iTunes] | [Amazon]

William Shatner - Has Been

[iTunes] | [Amazon]

Ramona Falls - I Say Fever

Saturday, November 07, 2009