First, let me state that Lazy Load is a great plug-in! I think it’s a very well written, simple and clever plug-in. It does what it is supposed to do perfectly. The bug isn’t with the plug-in, but rather with WebKit (and possibly jQuery).

Some background info

Zeus Comics’ checklist page lists a few hundred new items each week. Each item has an image associated with it. So, rather than have the page load two to three megabytes of image data, I use the plug-in. Works great, except for WebKit. Safari and Chrome both load all the images because of this bug.

It gets worse

Either Mobile Safari or jQuery (on Mobile Safari) has an addition bug.² .offset() returns the wrong value. So on the iPhone and iPad, the image’s .offset() value keeps increasing as you scroll down, thus it never is seen as being “above the fold” and doesn’t get triggered. Subtracting $(window).scrollTop() will fix that, but you also need to subtract the height of the image of Lazy Load won’t trigger the image until it’s fully above the fold (or maybe not, and I simply screwed something up).

$.belowthefold = function(element, settings) {
        if (settings.container === undefined || settings.container === window) {
                var fold = $(window).height() + $(window).scrollTop();
        } else {
                var fold = $(settings.container).offset().top + $(settings.container).height();
        }
        return fold <= ($(element).offset().top - $(element).height() - $(window).scrollTop()) - settings.threshold;
};

Unfortunately, this doesn’t solve for all of the images loading. The only way to prevent that from happening is to detect the browser on the server side and change the src to your place holder image.

<?php
if( ($this->agent->browser() == 'Safari') || ($this-agent->browser() == 'Opera') )
{
        $image = $placeholder;
        $data_image =  $row->image;
}
else
{
        $image = $row->image;
        $data_image = $row->image;
}
?>

<img src="<?php echo $image; ?>" data-src="<?php echo $data_image; ?>" >

*data-src replaces original in the script. The only reason for that was, frankly, Discus uses this convention in their image scripts and I simply liked it better. Also, if you are using CodeIgniter to detect browsers like I am, you will need to update your user agent file.

Since src is now a place holder, these code snippets can be removed.

if (undefined == $(self).attr("original")) {
        $(self).attr("original", $(self).attr("src"));
}

if (settings.placeholder) {
        $(self).attr("src", settings.placeholder);
} else {
        $(self).removeAttr("src");
}

Add the following to self.loaded = true;

if ( $(self).attr('src') != $(self).attr('data-src') ) {
        $(self).attr('src', $(self).attr('data-src'));
}

In a perfect–bug free–world, we wouldn’t have to rely on servers to detect browsers and call specialized scripts. It’s a bit like having to write separate a CSS file for Internet Explorer. Yuck! I did this because, the original script works fine except in two specific cases. While the WebKit bug still exists, the server has to set src to a placeholder image.

See it action here.

As with any code I publish here, I do apologize for my bad coding, especially in this case for butchering Mika Tuupola’s excellent work.

1. Bug 6656 — Image loading continues when IMG elements or Image JavaScript objects are removed
2. offset() returns incorrect values in iPad

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.

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!

Normally, a javascript event such as onmousemove would use event.layerX and event.layerY to get the coordinates of our mouse when it moves.

For jQuery, pageX and pageY will return values from the top left of the page and not the layer. Unless the element you’re working with is left-aligned, you need to calculate the offset of that element as well. Not only that (unless there is a better way to do this) the offset values returned doesn’t include the offset values of the parent tag.

In this example, I have two divs.

<div id="frame">
	<div id="content"></div>
</div>

And you can imagine that #frame is centered and has padding. Getting #content’s offset won’t include anything outside of the frame so $(#content).offset().left; would only get you the distance of itself and its parent.

Get your layerX for jQuery

For this example, we are using a known set of divs so we can just write out each div in this script.

$(document).ready(function(){
	$('#canvasForeground').mousemove(function(e){
		var myLayerX = $('#content').offset().left + $('#frame').offset().left;
		var myLayerY = $('#content').offset().top + $('#frame').offset().top;
		var x = 0, y = 0;
		x = e.pageX - myLayerX;
		y = e.pageY - myLayerY;
	});
});

The variables are declared inside the event function to handle window resizing. Now were this a more complicated page and the element in question has deeply nested or even dynamically generated, writing our all the parent tags wouldn’t necessarily work (or be very efficient).* But the approach would remain the same. That’s it!

*standard apology for poor code writing skills

I was able to replicate this function using Scriptaculous on our beloved comic shop website. But after a few years of constantly adding duct tape to the site, it was time to move everything to a single framework. And that mean making this triptych banner script run on jQuery. Hopefully without a lot of html recoding.

Make your list

For the html, set your divs with a ‘slide’ class and a position class. I guess you can do this in an unordered list, but whatever.

<div class="slide pos1"><a href="link1"><img src=""></a></div>
<div class="slide pos2"><a href="link2"><img src=""></a></div>
<div class="slide pos3"><a href="link3"><img src=""></a></div>

<div class="slide pos1"><a href="link4"><img src=""></a></div>
<div class="slide pos2"><a href="link5"><img src=""></a></div>
<div class="slide pos3"><a href="link6"><img src=""></a></div>

Set your positions

The easiest solution is to make the position classes absolute.

.pos1 {
    position: absolute;
    left: 0px;
    top: 0px;
}

.pos2 {
    position: absolute;
    left: 210px;
    top: 0px;
}

.pos3 {
    position: absolute;
    left: 420px;
    top: 0px;
}

Good news, everyone! This script doesn’t need a plug-in.

I always start my script codes with an apology, so why stop now. I’m sorry.

The first part makes sure that the banners appear in the order that their written in html. Because of the absolute positioning, however, they stack on top of each other and the last will be on top.

Also, I didn’t like how i in jQuery’s each() function started at 1 and not 0, but that’s just me.

$(document).ready(function(){
    var slideCount = $('.slide').size() - 1;
    $('.slide').each(function(i) {
        $(this).css('z-index', slideCount - i);
    });

    var currentSlide = slideCount;
    var zIndex = 0;

    function imgRotate() {
        $('.slide').each(function(i) {
            if($(this).css('z-index') == currentSlide)
            {
                $(this).fadeOut('slow', function() {
                    $(this).css('z-index', (0));
                    $(this).show();
                });
            }
            else
            {
                zIndex = $(this).css('z-index');
                zIndex = parseInt(zIndex) + parseInt(1);
                $(this).css('z-index', (zIndex));
            }
        });
    }

    setInterval(imgRotate, 4000);

});

This script should be able to make with any number of banners and any number of sets. This example just used a set of three, but your can make it a set of two, or four, or ten! Just make the list divisible by the set and fix your positions of course.

Truth be told, I was a die-hard fanatic for scriptaculous/prototype, but after ExpressionEngine announce their adoption of jQuery for EE 2.0, it was time to grow beyond the one framework pony.

Luckily, someone already set out to build the slider in jQuery. And major hat’s off to Remy Sharp for a great approach to this. If you looking for a way to build your own slider, start there first.

The Problem

Actually, there was no problem until I had a client to didn’t fit into the strict mold set out for this widget. As with most inventive solutions, they are begat from necessity.

The slider is built on an unordered list, but doesn’t support nested lists. For my needs, the slider had to be able to not only show multiple categories of products, but also visually differentiate.

Now, this can be resolved by manually setting css values. This approach would “hard code” the positions of the categories. That isn’t very code may be puled from a database.

Also, the slider needs to work without javascript. I know. Who doesn’t use javascript? The answer is, I don’t know, but someone always points out if something doesn’t degrade properly.

The Solution

I built this out backwards, but it works. So don’t question it. This demo shows the slider with wireframes to show off the block level div’s and li’s.

You can see by this code example that the lists are simple and even has a space for the category description if your site requires it.

HTML

This is a simple template shoing how to format your product groups and your categories for them. There can be as many needed. This example should be able to display them all successfully.

<div id="mlSlideWidget" class="slideWidget">
	<div id="sliderWindow" class="sliderGallery">
		<ul class="sliderList">
			<!-- Each category -->
			<li class="group">
				<div class="groupContent">
					<!-- Description info for category -->
					<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum vitae diam vitae leo hendrerit aliquet. Donec dolor. Integer placerat rhoncus metus. Proin sagittis. Nullam sed lacus accumsan orci convallis interdum. Aenean aliquet, nisi et sollicitudin posuere, orci tortor fermentum.</p>
					<ul class="groupButtons">
						<!-- Each product for this category -->
						<li class="singleButton"><a href="#">Product 1</a></li>
						<li class="singleButton"><a href="#">Product 2</a></li>
						<li class="singleButton"><a href="#">Product 3</a></li>
					</ul>
				</div>
			</li>
			<li class="group">
				<div class="groupContent">
					<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum vitae diam vitae leo hendrerit aliquet. Donec dolor. Integer placerat rhoncus metus. Proin sagittis. Nullam sed lacus accumsan orci convallis interdum. Aenean aliquet, nisi et sollicitudin posuere, orci tortor fermentum.</p>
					<ul class="groupButtons">
						<li class="singleButton"><a href="#">Product 4</a></li>
						<li class="singleButton"><a href="#">Product 5</a></li>
						<li class="singleButton"><a href="#">Product 6</a></li>
					</ul>
				</div>
			</li>
			<li class="group">
				<div class="groupContent">
					<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum vitae diam vitae leo hendrerit aliquet. Donec dolor. Integer placerat rhoncus metus. Proin sagittis. Nullam sed lacus accumsan orci convallis interdum. Aenean aliquet, nisi et sollicitudin posuere, orci tortor fermentum.</p>
					<ul class="groupButtons">
						<li class="singleButton"><a href="#">Product 7</a></li>
						<li class="singleButton"><a href="#">Product 8</a></li>
						<li class="singleButton"><a href="#">Product 9</a></li>
					</ul>
				</div>
			</li>
			<li class="group">
				<div class="groupContent">
					<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum vitae diam vitae leo hendrerit aliquet. Donec dolor. Integer placerat rhoncus metus. Proin sagittis. Nullam sed lacus accumsan orci convallis interdum. Aenean aliquet, nisi et sollicitudin posuere, orci tortor fermentum.</p>
					<ul class="groupButtons">
						<li class="singleButton"><a href="#">Product 10</a></li>
						<li class="singleButton"><a href="#">Product 11</a></li>
						<li class="singleButton"><a href="#">Product 12</a></li>
					</ul>
				</div>
			</li>
		</ul>
	</div>

	<div id="scroll" class="slider">
		<!-- the handler to action the slide -->
		<div class="handle"></div>
		<!-- labels appear against the slider, as pointers to the user -->
		<ul>
			<!-- These are categories -->
			<li class="marker">Category 1</li>
			<li class="marker">Category 2</li>
			<li class="marker">Category 3</li>
			<li class="marker">Category 4</li>
		</ul>
		<div class="fakeHandle">
			<table width="100%" cellpadding="0" cellspacing="0" border="0">
				<tr>
					<td width="15"><img src="images/handle-left.png" width="15" height="115" alt="<" /></td>
					<td background="images/handle-middle.png"> </td>
					<td width="15"><img src="images/handle-right.png" width="15" height="115" alt=">" /></td>
				</tr>
			</table>
		</div>
	</div>

</div>

CSS

I threw in a dash of YUI’s css reset. Most of the id and class names are generic. I would recommend renaming these to something more specific to avoid conflict.

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td, img {border-width: 0px;margin:0;padding:0;}
#mlSlideWidget {
	font:11px arial,helvetica,clean,sans-serif;
	*font-size:small;
	*font:x-small;
	position: relative;
	height: 361px;
	width: 659px;
	background: url(images/slider-background.jpg) left top no-repeat;
}

#sliderWindow {
	margin: 1px;
	height: 365px;
	position: relative;
	width: 655px;
}

.sliderGallery {
	overflow: auto;
}

.sliderGallery ul.sliderList {
	top: 0px;
	left: 0px;
	margin-top: 135px;
	padding-bottom: 0;
	position: absolute;
	list-style: none;
	height: 210px;
	overflow: auto;
	width: 2000px;
	white-space: nowrap;
}

#mlSlideWidget .sliderGallery ul li.group {
	margin-left: 7px;
	margin-right: 7px;
	display: inline;
	float: left;
}

#mlSlideWidget .sliderGallery ul li.group .groupContent {
	margin-right: 10px;
	padding-left: 10px;
	padding-top: 10px;
	padding-bottom: 10px;
}

ul.groupButtons {
	height: 120px;
}

li.group {
	background: url(images/group-backgroundcap.png) no-repeat right top;
}

li.group .groupContent{
	background: url(images/group-background.png) no-repeat left top;
}

li.group p {
	width: 430px;
	height: 70px;
	font-size: 10px;
	line-height: 12px;
	white-space: normal;
}

li.group ul.groupButtons {
	list-style: none;
	white-space: nowrap;
}

li.group ul.groupButtons li.singleButton {
	width: 140px;
	float: left;
	height: 118px;
	text-align: center;
}
#scroll {
	position: absolute;
	top: 0px;
	left: 0px;
	z-index: 100;
	width: 639px;
	margin-left: 10px;
	margin-right: 8px;
}

#scroll ul {
	height: 123px;
	list-style: none;
}

#scroll li.marker {
	margin-top: 4px;
	padding-top: 60px;
	text-align: center;
	z-index: 90;
	font-size: 10px;
	height: 30px;
	width: 55px;
	padding-left: 20px;
	padding-right: 20px;
	margin-left: 10px;
	margin-right: 10px;
	float: left;
}

.handle {
	position: absolute;
	top: 8px;
	left: 0;
	z-index: 110;
	height: 115px;
}

.fakeHandle {
	position: absolute;
	top: 8px;
	left: 0;
	z-index: 80;
	height: 115px;
}

jQuery UI will need to be built with UI Core, Draggable, Slider, Effects Core, and Slide. Some of the values of this rules in the example are built to my specs and can be modified to whatever specs fit your site. Note the versions of jQuery at the time of this article.

This example doesn’t know how many objects exist in the slider. If you use a set amount, this example can be greatly reduced. However, if your categories are managed via a database or cms tool, the number of objects used can change.

Javascript

Try not to laugh at my n00b code. I’m sure there are much better ways to write this.

//basic rules for controling the divs
$(document).ready(function(){

   //fix css rules
   //above css written for pages loaded without javascript
   $('.sliderGallery').css({'overflow-x': 'hidden', 'overflow-y': 'visible'});
   $('li.marker').css({'float': 'none', 'position': 'absolute', 'top': 0, 'left': 0});

	//set up some public variables and arrays
	var scrollBar = 639;
	var sliderListOffsetLeft = $('.sliderList').offset();
	var productWidth = 0;
	var groupWidth = 0;
	var sliderWidth = new Array();
	var sliderLeft = new Array();
	var groupRangeLeft = new Array();
	var marker = new Array();

	//measure the width of all the sub-categories
	//and the sub-sub-categories while we're at it
	$('li.group').each(function (i) {
		sliderLeft[i] = productWidth;
		$('li.singleButton', this).each(function (i) {
			groupWidth = groupWidth + $(this).width()
		});
		//hard coded minimum width for groups
		if (groupWidth < 450)
			groupWidth = 450;
		else
			groupWidth += 20;
		productWidth = productWidth + groupWidth + 16;
		//set width for each sub-caterogy
		sliderWidth[i] = groupWidth + 14;
		$(this).css({width: groupWidth});
		//reset the variable
		groupWidth = 0;
		//used in another function not used in demo
		groupOffsetleft = $(this).offset();
		groupRangeLeft[i] = groupOffsetleft.left - sliderListOffsetLeft.left - ((i > 0) ? 14 : 7 );
	});

	//Fix css to fit with slider content
	$('ul.sliderList').css({width: productWidth + 14});

	//Variables to make math easier
	var handle = (scrollBar / productWidth) * scrollBar;
	var markerLeft = 0;
	var scrollBarVisible = scrollBar - handle;

	$('li.marker').each(function (i) {
		markerLeft = (sliderLeft[i] / productWidth * scrollBar);
		markerWidth = (sliderWidth[i] / productWidth * scrollBar);
		$(this).css({left: markerLeft});
		marker[i] = (markerLeft / scrollBarVisible) * 100;
	});

	$('div.handle').css({width: handle});
	$('div.fakeHandle').css({width: handle});

	if (productWidth > scrollBar)
	{
		$('div.slideWidget').each(function () {
			var ul = $('ul.sliderList', this);
			var fake = $('.fakeHandle', this);

			var slider = $('.slider', this).slider({
				handle: '.handle',
				minValue: 0,
				maxValue: productWidth,
				slide: function (ev, ui) {
					ul.css('left', '-' + Math.round(ui.value / 100 * (productWidth - 657)) + 'px');
					fake.css('left', Math.round(ui.value / 100 * (scrollBar - handle)) + 'px');
				},
				stop: function (ev, ui) {
					move = ui.value / 100 * (productWidth - 657);
					ul.animate({ 'left' : '-' + Math.round(move) + 'px' }, 500);
					fake.animate({'left' : Math.round(ui.value / 100 * (scrollBar - handle)) + 'px'}, 500);
				}
			});
		})
	}

	else {
		$('.fakeHandle').css({width: 0});
		$('.handle').css({width: 0});
		$('.fakeHandle').css('visibility', 'hidden');
		$('.handle').css('visibility', 'hidden');
	}

});

Notice the versions of jQuery and UI. 1.7.1 has issues with this solution. As of yet, I haven’t found a fix.