Just a quick note about how Mobile Safari gets along with .live(). As a matter of coding style, I usually assign my actions to links and buttons. Sometimes I don’t.

<li>Title of Something <span class="more"></span></li>

This code won’t get followed by a bot to show more info about the list item.

$('.more').click(function () {
    showMore();
});

Now I have an event assigned. However, if this list item is added dynamically…

$(myListItem).appendTo('ul');

$('.more').live('click', function () {
    showMore();
});

Works great, except on Mobile Safari. The workaround is really hacky though. If this ‘more’ were a link (<a href="#" class="more"></a>), there wouldn’t be a problem, just like adding onclick="".

<li>Title of Something <span class="more" onclick=""></span></li>

Problem Solved.

Last summer, I had the opportunity to work with Eisner Award winning cartoonist Scott Kurtz of PVP. During one conversation we had, he came up with a punch-line to what we were talking about. I don’t remember what the subject was, but the punch-line involved a mock editorial cartoon. He grabbed a 2″ x 2″ sticky note pad and drew the cartoon. We had a laugh.

This would never happen online. At least, not in any convenient, simple, method that I was aware of.

Right now, it’s very crude. The controls are, admittedly, non-intuitive. There is no ‘Undo’ other than clearing the canvas and starting over. It doesn’t support older browsers either.

I’m actually quite okay with that last part. This site was immensely fun to build. Getting it to work on IE6 would have taken away from that. Right now, I know that it works on FireFox 3.0, Safari 4.0b (or WebKit nightly build), and Google Chrome 2.0.

The only benefit of text-shadow is not downloading graphics for what can be expressed in css. The same goes for -webkit-border-image, -webkit-gradient, -moz-border-radius, anything that keeps a web designer from having to launch Photoshop is a boon to bandwidth.

Here are two examples of using some WebKit css gradients.*

Update: You must have the Chrome 2.0 or Safari 4.b for these to work.

Example 1. is brought to you by “Killer Queen”

This similar looking display to that of the iPhone album display uses a radial gradient (opposed to a linear) as the background for the track names. The overall effect is a dim light. The odd numbered tracks also use a gradient to take advantage of -webkit-gradient’s support of alpha values.

Example 2. is a css calendar.

This one combines linear gradients and javascript arrays. Because -webkit-gradient can use rbga formatting in place of the usual hexadecimal value, calculating the values from color to another was much easier.

The drawback to these browser specific properties are, well, browser specific. While adding a gradient value to your div id=wrapper might give it a groovy drop shadow effect on Safari, nothing is happening on either Firefox, and much less for IE.

The workaround at this point is to browser detect.

if(jQuery.browser.safari) {
$('#wrapper').addClass('problem-solved');
}
else {
	$('#wrapper').addClass('wah-wah-wah');
}

Or whatever.

In order to take advantage of the background clipping, the color needs to be transparent. First off, that pretty much ruins any other browser from displaying text. So this is only useful to Safari users (not even the iPhone currently supports it). In Photoshop, you can get around having a transparent color and still having a drop shadow by setting that layers Fill Opacity to 0% while the layers opacity at 100%.

Also, using this technique has some odd behavior with padding. In my example, I couldn’t set padding to the parent div without the effect inheriting that padding. Restating the padding didn’t affect it either.

Here is the example: webkit-background-clip.html

Now, you can add the -webkit-text-stroke and that will work with text-shadow, but only on the stroke and not the text. I’ve yet to find an example that uses all three without looking like one of Superjail’s Doctor’s genetic experiments.

Perhaps it is for the best, getting these to work together might have been the next blink.

For example, the popular ajax loader file that hails from Apple’s own asynchronous progress indicator, has 12 points and loops around once a second. Well, for one thing, 12fps is really choppy, but it already plays slower on Apple’s nifty browser.

jQuery to the rescue

Did you know that jQuery can control css background positions? Are you thinking what I’m thinking?

But first, back to drawing board

So the first part was to break up the animated gif frames and spread them out across a very long canvas. Since Photoshop no longer opens animated gif files (unless you own ImageReady somewhere), Fireworks can open the file. Use Fireworks to export the frames to individual files and THEN Photoshop can import all the files as a stack.

File <Scripts> Load Files into Stack…

For our ajax loader, expand all the layers next to each other and then save it out to its own gif. The file size won’t be that difference in fact.

Now let’s get back to jQuery

In our html, just set the div with a width and height to match your gif to prevent clipping and let the script do the rest.

$(document).ready(function(){
	var bgimage = 'url(images/ajax-loader-long.gif)';
	var frames = 24;
	var mpf = parseInt(1000/frames)  // how many miliseconds in each frame
	var currentFrame = 0;
	var offset = 0;

	$('.animate').css('background-image', bgimage);

	function animate() {
		offset = currentFrame * 64;
		$('.animate').css('background-position', '-' + offset + 'px 0px');
		currentFrame = (currentFrame == frames) ? 1 : currentFrame + 1;
	}

	setInterval(animate, mpf);
});

Now we have a script that will snap the position of the background over each “frame” at the correct frame rate. Actually, the frame rate is not divisible by 1000, but it’s close and it’s not like you could tell.

The only problem with this script is that it’s constantly running. If you look at the page in Firebug, your going to see the code whipping around with new values all the time. Annoying! Also, chances are your page isn’t going to need some animation playing constantly. Ajax loaders are intermittently called when a simple action is called as a… asynchronous progress indicator! Who knew.

So we’re going to put in a cancel command to this script: clearTimeout.

$(document).ready(function(){
	var bgimage = 'url(images/ajax-loader-long.gif)';
	var frames = 24;
	var mpf = parseInt(1000/frames)  // how many miliseconds in each frame
	var currentFrame = 0;
	var offset = 0;
	var runAnimate = 0;

	$('.animate').css('background-image', bgimage);

	function animate() {
		offset = currentFrame * 64;
		$('.animate').css('background-position', '-' + offset + 'px 0px');
		currentFrame = (currentFrame == frames) ? 1 : currentFrame + 1;
	}

	runAnimate = setInterval(animate, mpf);

	$('.animate').toggle(
		function () {
			clearTimeout(runAnimate);
		},
		function () {
			runAnimate = setInterval(animate, mpf);
		}
	);
});

Add in a toggle so show how to turn on and off the animation and were done.

It even works on ie6!