jQuery Takeover Loader

gabes — Sat, 11 Jun 2011 22:21:29 +0000

A really simple jQuery plugin I’ve just written for my portfolio part of this site.

When the document is ‘ready’ call takeoverloader() on jQuery results (desired DOM elements). In my case I used $(document). It will then track all img elements in the children of your chosen element and report progress and completion of the loading process.

It will ignore img tags with an empty src attribute, or a class of .noloader

So you’re initial code would be something along these lines:

$(document).ready( function() 
{
	// hide content div (UI being loaded)
	$('#content').hide();
	// takeover the loading.
	$(document).takeoverloader( {
		progress: function( progressAmount ) // called each time an item is loaded
			{
				// do something with progressAmout (normalised)
				$('.loadprogress').text( Math.round( progressAmount * 100 )+'%' );
			},
		complete: function() // called when loading is finished
			{
				$('.loadprogress').hide();
				$('#content').fadeIn();
				// etc
			}
		}
	);
 
	// To forcibly remove events, call 'destroy'
	$(document).takeoverloader( 'destroy' );
});

It’s up on github, and there’s also a minified (google closure compiled) version in the repo too.

Links:
http://github.com/pixelbreaker/pixelbreaker_jquery/tree/master/takeoverloader

jQuery plugins coming soon.

gabes — Wed, 09 Dec 2009 16:32:09 +0000

Pretty soon, I’ll be releasing two plugins for jQuery.

They are re-writes of my current javascript extensions to SWFObject. One for full browser flash with a minimum width and height. And an updated version of the MouseWheel enabler for Macs.

I’ve gone for jQuery as I’ve been using it a fair bit recently with jQuery SWFObject, and it’s super easy to work with.

Here’s an example of a full browser flash object, with a minimum width/height. The best thing being that there is no requirement for fiddly CSS to make the full browser view work, the CSS is all implemented by jQuery!

$(document).ready(function () 
{
	// add an extra class to the  element for JS-only styling
	$("body").addClass("js");
 
	$.flash.expressInstaller = '_includes/expressInstall.swf'; 
 
	if( $.flash.hasVersion(9.1) )
	{
		var mainFlash = $.flash.create(
			{   
				swf: 'FlashApplication.swf',
				width: '100%',
				height: '100%',
				id: 'FlashApplicationSwf',
				name: 'FlashApplicationSwf'
			}
		);
		SWFAddress.setId('FlashApplication');
		$('#flashContent').html( mainFlash );
		$('#flashContent').fullFlashMinSize( 800, 600 );
	}		
});

pixelbreaker » jQuery

jQuery Takeover Loader

jQuery plugins coming soon.