Clayton McIlrath » JS

Tip of the Day: Mobile Touch Events

Clay McIlrath — Tue, 30 Aug 2011 00:17:54 +0000

I recently got into a project that was a bit over my head. I had to build out a map that will work on desktop, mobile and tablets the same, but I quickly ran into issues tracking touch events in mobile Safari. All of the testing I was doing in iOS5 (beta) was working the exact same way as the browser, where I could monitor a click and drag (touchmove) event and get the properties pageX and pageY directly from the event. However, on other mobile browsers (specifically iOS4 and older) this property was returning 0 everytime. I then found that multi-touch events store each finger press so I had to get the array of fingers and return the page coordinates. Long story short, here is the code I ended up implementing:

document.ontouchstart = function (e) {
	if (e.touches.length == 1) { // Only deal with one finger
		var touch = e.touches[0], // Get information for finger #1
		    x = touch.pageX,
		    y = touch.pageY;
	}
}

jQuery Lightbox / Modal Plugin

Clay McIlrath — Sun, 02 Jan 2011 20:17:51 +0000

There are SO MANY different types of lightbox scripts in the wild, and while most of them are absolutely fantastic (shadowbox being one of my favorites) most of them are very limited in the control that they give you over the style, function and code. To make things worse, most of these lightbox scripts are also 5k or bigger, which is 5k more than you need sometimes. If you’re like me, and you do a lot of customization or want to tweak your code to be as fast as possible, then you’ll want this simple little jquery lightbox plugin. Style your lightbox exactly how you’d like and then simple invoke the modal() function and you’ll be able to trigger the lightbox.

jQuery.fn.modal = function() {
	return this.each(function(){
	var ah = $(this).height();
        var wh = $(window).height();
        var nh = (wh/2) - (ah/2);
 
        var aw = $(this).width();
        var ww = $(window).width();
        var nw = (ww/2) - (aw/2);
 
        // Trim body height, append overlay, and disable scrolling (this can be undone with a custom close button)
        $("body").height(wh).css('overflow','hidden').append('<\/div>');
        $(".overlay").fadeTo("slow", .8);
        $(this).css({'top':nh, 'left':nw}).fadeIn("slow");
	});
};

This code is what i use for the overlay, you can customize as you’d like. The actual div is appended to the body with JavaScript.

.overlay {
	display: block;
	position: absolute;
	top: 0%;
	left: 0%;
	width: 100%;
	height: 110%;
	background-color: black;
	z-index:1001;
	-moz-opacity: 0.8;
	opacity:.8;
	filter: alpha(opacity=80);
}

This is an example of a modal/lightbox i did using this plugin. Very simple CSS:

.modal {
	background: #00121b;
	min-height: 54.5em;
	width: 56.5em;
	border: 1px solid #111e24;
	box-shadow: 0 0 1em #000;
	-moz-box-shadow: 0 0 1em #000;
	-webkit-box-shadow: 0 0 1em #000;
	display: none;
	position: absolute;
	z-index: 1002;
}

FBJS Slider Carousel

Clay McIlrath — Tue, 13 Apr 2010 04:50:25 +0000

I’ve made a nice little FBJS Slider that I use quite often for animation within facebook. I hope that little snippets and code like this will help other developers make more interested and appealing Facebook applications. If you want to hire or request help with fbjs, fbml, or facebook development in general, you can do so by contacting my company Chosen

First with the styling

#slideWrap creates an extremely wide canvas for the slide to fit on aligned horizontally.
#wrapper then creates a sort of viewport to view the slides through.

Clayton McIlrath » JS

Tip of the Day: Mobile Touch Events

Further Reading on Mobile Touch Events in Javascript

jQuery Lightbox / Modal Plugin

FBJS Slider Carousel

First with the styling