Now the drama here is they are a PITA to create all the time on the fly while your writing those fancy ajax queries, some of the framework simplify the task by letting you specify a loading attribute, but the behaviour isn’t standard and I find the implementation is lacking because it is usually an after thought of the original Ajax request in the framework. Also you don’t want to create useless mark-up in you page by having a permanent but hidden until needed ajax overlay like I see a lot of sites doing. Less code = better at everything, remember that.

So here is the solution, create on the fly ajax loaders when and where-ever you may need them!

Demo

View Demo :: jQuery

The HTML

 See example page

Note: Elements you intend to insert the ajax loader into must be “position:relative;”

The CSS

 .ajax_overlay {}
 .ajax_loader {background: url("spinner_squares_circle.gif") no-repeat center center transparent;width:100%;height:100%;}

Note: ‘.ajax_overlay ‘ styles are mostly done by the script so you can dynamically change and control them

The jQuery

function ajaxLoader (el, options) {
	// Becomes this.options
	var defaults = {
		bgColor 		: '#fff',
		duration		: 800,
		opacity			: 0.7,
		classOveride 	: false
	}
	this.options 	= jQuery.extend(defaults, options);
	this.container 	= $(el);
	this.init = function() {
		var container = this.container;
		// Delete any other loaders
		this.remove();
		// Create the overlay
		var overlay = $('

').css({
				'background-color': this.options.bgColor,
				'opacity':this.options.opacity,
				'width':container.width(),
				'height':container.height(),
				'position':'absolute',
				'top':'0px',
				'left':'0px',
				'z-index':99999
		}).addClass('ajax_overlay');
		// add an overiding class name to set new loader style
		if (this.options.classOveride) {
			overlay.addClass(this.options.classOveride);
		}
		// insert overlay and loader into DOM
		container.append(
			overlay.append(
				$('

').addClass('ajax_loader')
			).fadeIn(this.options.duration)
		);
    };
	this.remove = function(){
		var overlay = this.container.children(".ajax_overlay");
		if (overlay.length) {
			overlay.fadeOut(this.options.classOveride, function() {
				overlay.remove();
			});
		}
	}
    this.init();
}

Note: paste this code into your scripts file.

Usage examples

$(document).ready(function() {
	$(".box-1").live('click', function(){
		new ajaxLoader(this, options);
	});
});

Note: For more detailed examples, please see the Ajax Loader demo page

Default options

var options = {
	bgColor 		: '#fff',
	duration		: 800,
	opacity		: 0.7,
	classOveride 	: false
}

Set up options, explained below

• bgColor: string – colour of the background overlay
• duration: number – length of fadeIn and fadeOut effects
• opacity: number – opacity of the background overlay
• classOveride: string – a class name to over-ride your default loader style

Download

Contains ‘Ajax Loader & Spinner’ example and code

jQuery Ajax Loader & Spinner

This solution came about while working for a really cool start-up venture, they are not around any more so the code is going public with the intention that others may benefit from the work, enjoy

Demo

View Demo :: MooTools

The HTML

 Grab it from the 'example page' or the 'zip file' at the bottom of this post

Usage

new Nested('ID-of-your-list', {
	onStart: function(el) {
		this.onStyle(el);
	},
	onComplete: function(el) {
		this.offStyle(el);
	}
});

Options (example)

var options = {
	childTag: 'LI',
	lockClass: 'locked',
	ghost: true,
	collapse: true,
	childStep: 40,
	closedSpace: 3,
	onStart: function(el) {
		this.onStyle(el);
	},
	onComplete: function(el) {
		this.offStyle(el);
	}
}

Set up options, explained below

• childTag: string – the child nodeType, you shouldn’t need to change this
• lockClass: string – class for locked nodes
• ghost: boolean – create visual ghosting node
• collapse: boolean – are options collapsible
• childStep: number – attempts to become a child of the previous Item if the mouse is moved this number of pixels right
• closedSpace: number – a space for top and bottom insert detection when near closed nodes
• onStart: function – things to do to an element when it STARTS dragging
• onComplete: function – things to do to an element when it STOPS dragging

Ok the only options there that need some further explaining are probably, ‘childStep’ and ‘closedSpace’.

childStep: we need a value that behaves like a border, meaning as you would manually drag a node to the right to nest it, this value determines how far you need to drag it before accepting you want to nest it.

closedSpace: when nearing a closed node it is nice to have the styles for this event to appear before hovering directly over the node that is closed. It provides your users with more of an idea about what can and can’t be done before they try to do it.

Download

Contains ‘MooTools Nested Sortable List’ example and code

MooTools Nested Sortable Lists

jQuery

Sorry guys, no jQuery version yet, have not had the time to convert it.

Disclaimer

I do not intend to support this script with feature requests or bug fixes, I’m posting the last stable copy I have in my possession to help prevent other developers from going around in circles and provide a starting point for your own Nested Sortables implementations

Here is a decent example of a Mega Drop Down Menu to illustrate what I’m talking about. But it certainly takes way too long to load, and uses images for the drop down box, which I personally don’t like because you have to wait for it to load on a slow connection, such as this wireless laptop I’m on.

So I was looking around for a better implementation of a mega drop down menu and noticed that a couple I found were using jQuery wizardry to effectively prevent instant hover effects, because you don’t want the mega drop down from appearing every time a user rolls over your top level navigation items, and a few were using neat CSS3 effects instead of images.

Then I thought it would be nice to have all the positives in one Mega Drop Down combined together and since there were already a few jQuery implementations doing one or the other, I figured I’d do it in MooTools, since I still have a penchant for that framework, so I’ve converted one of the jQuery plugins to MooTools for you all, added some other nifty features and given you some basic css to play with. So without further ad-due, here is the code for a MooTools – Mega Drop Down Menu .

Demo

View Demo :: MooTools

The HTML

 Grab it from the example page, as there is quite a bit of markup for the mega drops

The MooTools Javascript

Element.implement({
	megaMenu: function(f,g){
		var cfg = {
			sensitivity: 7,
			interval: 100,
			timeout: 0
		};
		cfg = $extend(cfg, g ? { over: f, out: g } : f );
		var cX, cY, pX, pY;
		var track = function(ev) {
			cX = ev.page.x;
			cY = ev.page.y;
		};
		var compare = function(ev,ob) {
			ob.hoverIntent_t = clearTimeout(ob.hoverIntent_t);
			if ( ( Math.abs(pX-cX) + Math.abs(pY-cY) ) < cfg.sensitivity ) {
				$(ob).removeEvent("mousemove",track);
				ob.hoverIntent_s = 1;
				return cfg.over.apply(ob,[ev]);
			} else {
				pX = cX; pY = cY;
				ob.hoverIntent_t = setTimeout( function(){compare(ev, ob);} , cfg.interval );
			}
		};
		var delay = function(ev,ob) {
			ob.hoverIntent_t = clearTimeout(ob.hoverIntent_t);
			ob.hoverIntent_s = 0;
			return cfg.out.apply(ob,[ev]);
		};
		var handleHover = function(e) {
			var p = (e.type == "mouseover" ? e.fromElement : e.toElement) || e.relatedTarget;
			while ( p && p != this ) { try { p = p.parentNode; } catch(e) { p = this; } }
			if ( p == this ) { return false; }
			var ev = $extend({},e);
			var ob = this;
			if (ob.hoverIntent_t) { ob.hoverIntent_t = clearTimeout(ob.hoverIntent_t); }
			if (e.type == "mouseover") {
				pX = ev.pageX; pY = ev.pageY;
				$(ob).addEvent("mousemove",track);
				if (ob.hoverIntent_s != 1) { ob.hoverIntent_t = setTimeout( function(){compare(ev,ob);} , cfg.interval );}
			} else {
				$(ob).removeEvent("mousemove",track);
				if (ob.hoverIntent_s == 1) { ob.hoverIntent_t = setTimeout( function(){delay(ev,ob);} , cfg.timeout );}
			}
		};
		return this.addEvent('mouseover', handleHover).addEvent('mouseout', handleHover)
	}
});

Paste this code into your scripts file. It will simply implement a new MooTools method for you, that will allow you to add the megaMenu functionality to any element/s that you desire.

Usage

window.addEvent('domready', function() {
    // Function fired on mouseover
    function addMega(){
      $(this).addClass("hovering");
    }
    // Function fired on mouseout
    function removeMega(){
      $(this).removeClass("hovering");
    }
    var megaConfig = {
         interval: 200,
         sensitivity: 4,
         timeout: 200,
         over: addMega,
         out: removeMega
    };
    $$("li.mega").megaMenu(megaConfig)
});

Ok, so the first two functions "addMega" and "removeMega" are completely and utterly not needed, but you will most likely want to include them so that you can apply a class name or some other property to items that have the megaMenu method attached.

megaConfig is simply your set up options, explained below.

• interval: The number of milliseconds the function waits between reading/comparing mouse coordinates.
• sensitivity: If the mouse travels fewer than this number of pixels between polling intervals, then the "over" function will be called.
• timeout: A simple delay, in milliseconds, before the "out" function is called

Credits

I can't claim full credit for the code and examples, I've borrowed heavily for times sake from the following sites.

Go here for the jQuery mega drop down plugin

Go here for the full SitePoint article on mega drop downs

Enjoy...

Key features

• Single tabbing from any point
• Selection tabbing
• Multiple line tabbing

Demo

View Demo :: MooTools
View Demo :: jQuery

The demo has a textarea that has tabbing enabled and one below it that does not. That way you can see what pressing tab does normally in a textarea and how it would be a real pain for someone trying to edit code. Basically tabbing in a normal textarea will move your focus elsewhere, if you are trying to tab a selection, it will in some browsers delete the selection.

The HTML

	// Some tabbed code

The MooTools Javascript

var catchTab = new Class({
	initialize: function(id){
		var obj = this;
		$(id).addEvent( 'keydown', function(e){
			obj.tab(this, e);
		});
	},
	tab: function(textArea, evt) {
		if(evt.key == "tab"){
			evt.preventDefault();
			//internet explorer is Rtarded!
			if(Browser.Engine.trident) {
				var range = document.selection.createRange();
				range.text = '\t';
			}else{
				var start = textArea.selectionStart;
				var end = textArea.selectionEnd;
				var value = textArea.get('value');
				if (start!=end) {
					var lines = textArea.value.substring(start, end).split('\n');
					var lastI = lines.length;
					var tmpStr = '';
					lines.each(function(obj, key){
						tmpStr += '\t' + obj + (lastI != key+1 ? '\n' : '');
					}, this);
					textArea.set('value', value.substring(0, start) + tmpStr + value.substring(end, value.length));
					textArea.setSelectionRange(start, end+lastI);
				} else {
					textArea.set('value', value.substring(0, start) + '\t' + value.substring(end, value.length));
					start++;
					textArea.setSelectionRange(start, start);
				}
			}
		}
	}
});

The jQuery Javascript

function catchTab(id) {
	this.init = function(id) {
		var obj = this;
		$('#'+id).bind('keydown', function(e) {
		  	obj.tab(this, e);
		});
    };
	this.tab = function(textArea, evt) {
		if(evt.keyCode == "9"){
			evt.preventDefault();
			if(jQuery.browser.msie) {
				//internet explorer is Rtarded!
				var range = document.selection.createRange();
				range.text = '\t';
			}else{
				var start = textArea.selectionStart;
				var end = textArea.selectionEnd;
				var value = textArea.value;
				if (start!=end) {
					var lines = textArea.value.substring(start, end).split('\n');
					var lastI = lines.length;
					var tmpStr = '';
					$.each(lines, function(key, obj){
						tmpStr += '\t' + obj + (lastI != key+1 ? '\n' : '');
					});
					textArea.value = (value.substring(0, start) + tmpStr + value.substring(end, value.length));
					textArea.setSelectionRange(start, end+lastI);
				} else {
					textArea.value = (value.substring(0, start) + '\t' + value.substring(end, value.length));
					start++;
					textArea.setSelectionRange(start, start);
				}
			}
		}
	};
    this.init(id);
}

Usage

// MooTools
window.addEvent('domready', function() {
	// ID of textarea
	new catchTab('text-area-tab');
});
// jQuery
$(document).ready(function() {
	// ID of textarea
	new catchTab('text-area-tab');
});

Instructions

Pretty easy, add the HTML and Javascript to your page, target the textarea with your ID when you call ‘catchTab’, the script will do the rest of the work for you. Your textarea will now have tabbing enabled.

Accessibility

You could argue that removing the tabs natural functions from the textarea box is a bad move, it will prevent a user tabbing through your website, as once they are inside the textarea the tab will work like a text editing function, a user will need to focus off the textarea to somewhere else to regain normal tabbing functionality.

The key here is, it meets a purpose, that purpose is to allow tabbing inside a textarea so that you can correctly format code. We have all tried to edit our code on a post such as this in WordPress or other online editors only to find that every time we try to add a tab it moves our focus to the submit button or in the worst case deletes it. I’ve personally seen thousands of blog comments that suffer from poor formatting of reposted code, this is extremely useful if your users don’t know where those illusive [code] [/code] tags are hidden.

So use it at your own leisure

enjoy!

The problem: I want my websites heading to have two words and one of those words I want to be in bold, or, and maybe even in a different colour.

The usual solution:

<h1>firstWord <span>secondWord</span></h1>

Looks something like this after some CSS – “firstWird secondWord”

The question I ask myself is simple, does Google like me putting spans, an element with no semantic value inside of my h1′s, h1′s being an element with very important semantic value?

If it doesn’t, why should I be punished for using text instead of an image to make my title stand out? Seems annoying doesn’t it. Well it annoyed me so much I came up with a solution.

A+ solution:

View Demo

The html

<h1>firstWord secondWord</h1>

The CSS

h1 {
	font: normal  2.25em Arial,Helvetica,Tahoma,Verdana,Sans-Serif;
	position:relative;
	height:0px;
	padding:50px 0px 0px 0px;
	overflow:hidden;
}
h1:before {
	content: 'firstWord ';
	position:absolute;
	top:0px;
}
h1:after {
	content: 'secondWord';
	font-weight:bold;
	position:absolute; top:0px;
	left:4.5em;
}

That’s it you’re done. View the demo and you will see the bolded second word, you can set any number of different styles on the words to achieve your desired look. Plus it is semantically more correct, it requires no span inside your h1 tag. If you have FireBug installed, inspect the element, you will see the inner value for the h1 node is simply ‘firstWord secondWord’ and that is how a search engine will see it!

Obviously this solution is of limited use, you can’t use more than two words, as you can only define a single :before and a single :after on each element, in this case our h1. You also need to specifically set where the second word will appear, as it is inserted after the normal content, which is hidden by the extra padding, so your second word without the positioning styles will also be hidden until you move it into view.

Well that’s it folks, although it is dubious that this will become a mainstream solution it certainly solved my dilemma of useless markup in my headings.

Enjoy!

I’ve implemented this a few times now for different applications so here is the base code I tend to start with.

View Demo :: MooTools
View Demo :: jQuery

Notice how after editing the URL field the title will stop changing the URL value. The logic being that once you have edited the URL to your liking, updating the title will cease to overwrite your new URL.

The HTML

    http://blah.com/

    
    edit

Add this html to your page. Take notice of the ID’s that is how the script will target all the necessary elements.

The Style

.myinput {
	display:none;
}

Very basic stuff here. Theres more styles in the demo files.

The MooTools Javascript

var urlBuilder = new Class({
	Implements: [Options, Events],
	options: {
		title : {
			regx	: [/[^0-9a-zA-Z\s.,'!@%#)(:\;\"]+?/,/\s+/g,/^[\s]+/g,/([0-9a-zA-Z\s.,'!@%#)(:\;\"]{50})(.+)/i],
			rep		: ['',' ','', '$1']
		},
		url : {
			regx	: [/[^0-9a-zA-Z]+?/g,/[\-]+/g,/^[-]+/,/[-]+$/],
			rep		: ['-','-','','-']
		}
	},
	initialize: function(element, urlFlag, options){
		this.setOptions(options);
		this.inputObj 	= element;
		this.newUrl		= $(element.id+'_url');
		this.updateUrl	= $(element.id+'_update');
		this.edit		= $(element.id+'_edit');
		this.ChangedURL = (!urlFlag ? false : urlFlag);
		this.init();
	},
	init: function() {
		this.inputObj.addEvent('keydown', this.getValue.bindWithEvent(this,  this.options.title ));
		this.inputObj.addEvent('keyup', this.getValue.bindWithEvent(this,  this.options.title ));
		this.newUrl.addEvent('keyup', this.getValue.bindWithEvent(this, this.options.url));
		this.edit.addEvent('mousedown', this.showURL.bindWithEvent(this));
	},
	getUri: function(uri, o) {
		o.regx.each(function(index, key) {
			uri = uri.replace(index, o.rep[key]);
		});
		return uri;
	},
	getValue: function(e, o) {
		var input = getTarget(e);
		if (input == this.newUrl) this.ChangedURL=true;
		var tmp = this.getUri(input.value, o);
		if (input.value != tmp )
			input.value = tmp;
		if (input != this.inputObj || !this.ChangedURL) {
			tmp = this.getUri(tmp, this.options.url);
			this.newUrl.value = tmp.toLowerCase();
			this.update(tmp + (tmp != '' ? '/' : ''));
		}
	},
	showURL: function(e) {
		var o = this.newUrl;
		var u = this.updateUrl;
		if (o.getStyle('display') == 'none') {
			o.setStyle('display', 'inline-block');
			u.setStyle('display', 'none');
			this.edit.set('html', 'Save');
		} else {
			o.setStyle('display', 'none');
			u.setStyle('display', '');
			this.edit.set('html', 'edit');
		}
	},
	update: function(s) {
		this.updateUrl.set('html', s);
	}
});

The jQuery Javascript

function urlBuilder(el, urlFlag, options) {
	// Becomes this.options
	var defaults = {
		title : {
			regx	: [/[^0-9a-zA-Z\s.,'!@%#)(:\;\"]+?/,/\s+/g,/^[\s]+/g,/([0-9a-zA-Z\s.,'!@%#)(:\;\"]{30})(.+)/i],
			rep		: ['',' ','', '$1']
		},
		url : {
			regx	: [/[^0-9a-zA-Z]+?/g,/[\-]+/g,/^[-]+/,/[-]+$/],
			rep		: ['-','-','','-']
		}
	}
	this.options 	= jQuery.extend(defaults, options);
	this.init = function(el, urlFlag) {
		var id 			= el;
		this.inputObj 	= $('#'+el);
		this.newUrl		= $('#'+id+'_url');
		this.updateUrl	= $('#'+id+'_update');
		this.edit		= $('#'+id+'_edit');
		this.ChangedURL = (!urlFlag ? false : urlFlag);
		this.events();
    };
	this.events = function() {
		var obj = this;
		this.inputObj.bind('keyup', function(e) {
		  	obj.loadUri(e, 'title');
		});
		this.newUrl.bind('keyup', function(e) {
		  	obj.loadUri(e, 'url');
		});
		this.edit.bind('mousedown', function(e) {
			e.preventDefault();
		  	obj.showURL(e.target);
		});
	};
	this.loadUri = function(e, str) {
		e.preventDefault();
		this.getValue(e.target, this.options[str]);
	};
	this.getUri = function(uri, o) {
		var collection = o.regx;
		for (index in collection) {
			uri = uri.replace(collection[index], o.rep[index]);
		}
		return uri;
	};
	this.getValue = function(e, o) {
		var input = $(e);
		if (input[0] == this.newUrl[0]) this.ChangedURL=true;
		var tmp = this.getUri(input.attr('value'), o);
		input.attr('value', tmp);
		if (input[0] != this.inputObj[0] || !this.ChangedURL) {
			tmp = this.getUri(tmp, this.options.url);
			this.newUrl.attr('value', tmp.toLowerCase());
			this.update(tmp + (tmp != '' ? '/' : ''));
		}
	};
	this.showURL = function(e) {
		var o = this.newUrl;
		var u = this.updateUrl;
		if (o.css('display') == 'none') {
			o.css('display', 'inline-block');
			u.css('display', 'none');
			this.edit.html('save');
		} else {
			o.css('display', 'none');
			u.css('display', '');
			this.edit.html('edit');
		}
	};
	this.update = function(s) {
		this.updateUrl.html(s);
	};
    this.init(el, urlFlag);
}

Usage

// MooTools
window.addEvent('domready', function() {
	new urlBuilder($('pTitle'));
});
// jQuery
$(document).ready(function() {
	new urlBuilder('pTitle');
});

The only thing to be aware of here is that I’m also giving you a field called ‘urlFlag’ set it to true in your call to urlBuilder like this if the user has previously edited the URL field.

        new urlBuilder($('pTitle'), true, { //options });

If not set it will default to false and assume the title will still update the URL field.

Options

	title : {
		regx : [/[^0-9a-zA-Z\s.,'!@%#)(:\;\"]+?/,/\s+/g,/^[\s]+/g,/([0-9a-zA-Z\s.,'!@%#)(:\;\"]{50})(.+)/i],
		rep : ['',' ','', '$1']
	},
	url : {
		regx : [/[^0-9a-zA-Z]+?/g,/[\-]+/g,/^[-]+/,/[-]+$/],
		rep : ['-','-','','-']
	}

Here is the best part of this little plugin. In the options you have two objects, ‘title’ and ‘url’ consisting of four simple regular expressions. You can overide these from your set-up calls, or you can leave them as is. Basically I’m just giving you control over what to filter out on the input and url, and what to leave in.

The ‘title’ option simply has four regex values in the array ‘regx’, and it has four matching replacment values in the array ‘rep’, so when the pattern from regx[0] is matched it will be replaced by the value of rep[0].

The ‘url’ option works in the exact same way. I’ve done it this way to provide simpler regex values for those that are not rocket scientists. Plus I highly doubt its possible to build a regex that accomplishes everything we need to do to strip a title down for publishing whilst turning it into a valid URL for location.

Required

• MooTools Core
• jQuery Core

Download

Contains both MooTools and jQuery versions

URL Builder

The original post was quite simply a way for you to get yours or someone elses public Twitter timeline and display it on your own site. Twitter decided to kill off basic authentication for their API preventing simple Ajaxian requests to the API. So here is the solution and it comes in the form of JSONP (cross site scripting request).

View Demo :: MooTools

Original excerpt

“Ever wondered where that missing second is in your blog or Web Sites loading time?

Chances are that it is getting eaten up by your feeds or third party API’s like Twitter, Facebook, Google and Flickr. We all love social media, if you don’t then you were probably the school captain throughout your education and don’t posses the intrinsic ability to Tweet, Blog at update your feed from that shiny Iphone at any given time of the day, rain, hail or shine. But for the rest of us, here is a simple solution……”

The New HTML

<div id="twitter-update"></div>

Add this to your web-site. It is the container which the JavaScript will look for to insert your Twitter posts

The MooTools Javascript

var twitterUpdate = new Class({
	Implements: [Options, Events],
	options: {
		count: 2,
		user_id: 'default_user',
		id: 'twitter-update'
	},
	initialize: function(options){
		this.setOptions(options);
		this.userName = this.options.user_id;
		this.update = $(this.options.id);
		if (this.update)
			this.getTweets();
	},
	getTweets: function() {
		new Request.JSONP({
		  url: 'http://twitter.com/statuses/user_timeline/' + this.userName + '.json',
			data: {
				count: this.options.count
			},
			onSuccess: function(tweets){
				tweets.each(function(tweet,i) {
					var tmp = this.tweetify(tweet.text)
					new Element('li',{
						html: '<p><a href="http://twitter.com/' + this.userName + '">#</a> ' + tmp + '</p>'
					}).inject('twitter-updates');
				}, this);
			}.bind(this)
		}).send();
	},
	/* Credit to David Walsh here */
	tweetify: function(str) {
		return str.replace(/(https?:\/\/\S+)/gi,'<a href="$1">$1</a>').replace(/(^|\s)@(\w+)/g,'$1<a href="http://twitter.com/$2">@$2</a>').replace(/(^|\s)#(\w+)/g,'$1<a href="http://search.twitter.com/search?q=%23$2">#$2</a>');
	}
});

Copy this into your JavaScript file. It will run on ‘domready’ to retrieve our twitter posts.

Usage

window.addEvent('domready',function(){
        // Get 2 tweets for simon_ilett and insert them into the element with id 'twitter-update'
	new twitterUpdate({ 'user_id' : 'simon_ilett'}); 
        // Get 5 tweets for bill_henry and insert them into the element with id 'twitter-feed'
	new twitterUpdate({ 'user_id' : 'bill_henry', 'id' : 'twitter-feed', 'count' : 5}); 
});

Options

/* Default Options */
{
    count: 2,
    user_id: 'default_user',
    id: 'twitter_update'
}

Here is a quick idea of what each option is doing.

• count – How many tweets to return as JSON objects
• default user – A default user name to return tweets for
• id – A default element for the script to place return tweets in

Updating the output

Again very simple, all you do is change the following snippet

new Element('p',{
	html: '<a href="http://twitter.com/' + this.userName + '"><span>#</span> ' + tweet.text + ' </a>'
}).inject(this.update);

This way your not locked into any over-riding HTML output, easy to change to your liking.

Required

• MooTools Core
• MooTools More – JsonP

Enjoy!

Some people will immediatly notice the 32,767 as the programatic max value for an ‘Integer’, which is exactly what the problem is. Opera for some reason, and it is completly alone here, as all other browsers even the dreaded Internet Explorer 6, can handle CSS values that exceed this limit. Opera will silently fail, throw no warning about it and ignore all styles that follow non integer numbers in your selector.

There was no way around this I could find to make it work in Opera, simply put.

Any number bigger then 32,767 for a value in CSS when displaying with Opera 10, will be ignored and cause all following styles in that selector to be dropped.

Heres an example.

div #myElement {
    position:absolute;
    height:500px;
    width:50000px;
    background:#444;
    font-weight:bold;
}

The above code will cause the div ‘myElement’ to have no selectable width, and will never apply the background or font-weight properties!

Solutions

A bad solution

div #myElement {
    position:absolute;
    height:500px;
    background:#444;
    font-weight:bold;
    width:50000px;
}

The div ‘myElement’ will now get all styles applied correctly up until it hits the width:50000px property. But since no styles are applied after it is encountered the div is styled with all your properties correctly except of course for a width value. The div will still have no width.

Correct solution

div #myElement {
    position:absolute;
    height:500px;
    background:#444;
    font-weight:bold;
    width:32000px;
}

Now the div ‘myElement’ will be styled correctly and have a width property. Its no 50,000 pixels, but 32,000 which is a valid width in Opera, remember anything greater then 32,767 will fail. Should you need greater then 32,000 pixels of space in Opera, you may need to re-think your design, or go hassle the Opera development team.

Last I saw there were a couple bug reports if you knew what to search for, but nothing had been posted in reply. SO we can only hope that Opera know of the issue and are working to correct it. But in the meantime I’ve given you the power to detect and develop around this quite interesting bug.

Enjoy

Now yes there are some solutions out there for providing Ajaxified links that keep your back buttons working, they are complex and usually written in a specific framework, so if you want to use them well your going to be adding a lot more code then you thought to your web site. Plus this is how Gmail and Facebook do it, you won’t find there code or get any help from them on the topic so I decided to build it myself so everyone could get the benefits of Ajax URL navigation. Below is an example of a simple yet elegant Ajax Pagination system I’ve written to relieve the navigation hicups Ajax causes.

Demo

View Demo :: MooTools
View Demo :: jQuery

How it works

Very simply the pagination class is loading each successive request via ajax into the dom and slides it into view, it also replaces the pagination controls each time with the new correct numbering of the new pagination controls including highlighting, prev, next buttons etc… Replacing the pagination controls each time is by far the smartest way of doing things, as the Pagination class has nothing to do with manipulating the controls, saving complexity in a grand way because in an ajaxed pagination application the JavaScript should never be responsible for rebuilding the pagination controls, that should be handled by your server side code!

URL hash Now here is the kicker, after you have used the pagination controls, hit the Back Button, and there you go, BAM, you’ve gone back to your previously selected pagination results without causing a reload of your page. This is accomplished by updating the hash (#) value of the URL, we have full access to the hash section of a URL via JavaScript, we have no access to the URL though, it is a security measure built into JavaScript which denies us the power to edit it. So the answer to creating new linkable URL’s is the hash value. We can update and check it as we need to.

/* get hash value */

var tmp = window.location.hash;
/* set hash value */
window.location.hash = tmp;

The Pagination class simply sets the hash value everytime you click the pagination controls, allowing the browser a history of what you have been doing in the application, then the Pagination class checks every half second or so to see whether you the user have done something in the browser that changes the hash value from the last one it has set in the URL. If the Pagination class determines the hash values are not the same it will use the new hash from the URL, which is essentially an Ajaxed URL, that will load the correct page.

Browsing by URL The next cool thing is browsing by URL, on the demo page at the bottom there is a link that says, ‘Go To page 4′ that link has no javascript attached to it, the link simply updates the URL which the pagination class will check and then browse to. You can also navigate straight to an ajaxed URL without going to page 1 of the paginator first, in essence you’re browsing by hard URL which will allow linking to it and favouriting of the link.

• Goto page 6 – MooTools
• Goto page 6 – jQuery

Why is that important in an Ajax application you ask, well lets say that you have an image gallery with 100 pictures in it, each page displays 10 pics and a user really likes the images on page 7. In 99% of Ajaxified pagination applications it would be impossible for that user to favourite page 7, or send a link to a friend, or link to it from his own web-page because your pagination will either in the worst case, force a user to click seven times to get to page seven, or require you to load page 1 of the results every time before they can click on page number 7 and have it load. Neither way allows you to save the URL in your browser, or link to it from another page, essentially making your very valuable image library somewhat un-navigatable.

We should always give users a valid URL to save and navigate to later!

Usage

/* Load the paginator with default options */

new Paginator('http://local.dev.com.au/pagination/ajax.php');

/* Load paginator, but change time between hash/url check to one second */

new Paginator('http://local.dev.com.au/pagination/ajax.php', {
    'timer' : 1000
});

Options

/* Default Options */
{
    xString = {}
    qString : '?p=',
    items:10,
    pagination: 'pagination_pager',
    container:	'pagination_container',
    duration: 800,
    timer: 500
}

Here is a quick idea of what each option is doing.

• xParams – Allows extra params to be sent through the Ajax query
• qString – The query section of your URL. By default it is ‘?p=3′ . ie. Page number 3
• items – Items per page, defaults to 10
• pagination – The Id of the element that your pagination controls will be inserted into to
• container – The Id of the element that your pagination results will be inserted into to
• duration – Duration of the sliding animation, 800 = 8 tenths of a second
• timer – Time between checking for a new URL hash. Faster will make the application more responsive to changed hashes. I find 500 is a good number. ie. Half a second

Pagination on the server side

You will need a PHP function to calculate your pagination, the one provided in “functions.php” is a simple 5 number step sliding pagination, very similar to Facebook’s and extremely useable and friendly. It is included in zip file download. I mention it because you can change it to any pagination function you would like, you don’t have to keep mine. You have all the necessary variables you need for a healthy pagination method including, max item count, page number, current page, items per page and the base path, so you can get totally creative with you pagination outputs.

Download

Easy Ajax Pagination:: MooTools
Easy Ajax Pagination:: jQuery

Installing

Step 1. Change the URL in pagination.php or pagination_jquery.php

new Paginator('http://local.dev.com.au/pagination/ajax.php');

Step 2. Upload it

Upload it to your server or testing environment. Then your done, now you just use ajax.php to get your result desired set, make it look how ever you’d like with whatever data you want and style up the application to suit your need.

I will be posting more on this code soon as I’m going to submit it as an jQuery & MooTools plugin, so there will also be GitHub versions to check out and contribute to.

Extending the parameter list

A few people asked for ways to extend the parameters you send through the Ajax request, here is how I implemented it.

var pagination = new Paginator('http://local.dev.com.au/pagination/ajax.php');

// User event requiring extra data in Ajax request

pagination.options.xParams = { 'someData' : 'someValue' }

All new requests are now sending this parameter along with the pagination details. Any further changes to xParams just keeps merging the objects together to form your request.

Note: Edit your ‘pagination.php’ file to capture and use the extra params.

Enjoy!

]]> http://www.aplusdesign.com.au/blog/ajax-pagination-back-button/feed/ 17 http://www.aplusdesign.com.au/blog/javascript-optimisation/ http://www.aplusdesign.com.au/blog/javascript-optimisation/#comments Thu, 01 Apr 2010 10:40:03 +0000 Simon http://www.aplusdesign.com.au/blog/?p=84 Speed up JavaScript by making it execute exceedingly fast with these Google certified techniques

Ok everyone’s good friend David Walsh over at davidwalsh.name posted a link to a Google Talks presentation – Javascript and speed from back in 2009 in which they discuss some simple yet amazingly important JavaScript optimisation techniques. Ranging from Dom interaction and Scope , all the way through to Reflow. Now if your not sure what Reflow is I will explain that below, but put simple it is the name given when the browser has to redraw the page because user interaction or JavaScript has changed its geometry.

So here is what I’m going to cover in this post for you optimisation fanatics, with code examples of the good, the bad and the ugly!

• Scope Management
• Data Access
• Loops
• The DOM

Scope Management

As JavaScript developers we should all have a decent handle on what scope is, but managing the scope within our apps and functions is a little trickier. There is no real best practice solution for how to pass around variables, literals, arrays and properties in the language, and many developers will live by, “if it works, it works”. Well sure, but if your users perceive your web-site to be slow because of that attitude, you lose out big time. So here are a few key concepts when it comes to scope management to improve performance.

Key points

• The further into the scope chain, the longer it will take to resolve identifiers
• Local variables = fast!

1. The further into the scope chain, the longer it will take

When your functions are executed what is called an execution context is created, this execution context is intialised with a scope collection, the collection contains that functions scope members. Examples of this would be your function now has references to window and document.

Now if that seemed a little complicated, here are some simple slides to illustrate.

Scope chain for a typical function



Next the function will create what is called an activation object, which contains all your local variables and pushes them to the front of your context’s scope chain.

Scope chain for a function after activation object



So when the function is executed and it comes across a variable a process called Identifier resolution starts. It will always starts by looking in the first spot in the scope chain, and will make its way down the scope chain until that variable is found.

So quite simply, if you find your variable in position 0. Excellent, that is the best possible outcome and the fastest.

Anything beyond position 0 requires extra processing and time to find, and every step you go down the scope chains adds to how long it takes. So the further down the scope chain the bigger the hit to your performance. Hence why we try not to use Global variables, because they will always be in the last spot of the scope chain.

2. Local Variables = fast!

Local variables are extremely fast because they require only one step in the scope chain to find. Simple as that, and below are two pieces of code to demonstrate local variable importance.

A typical function

// slow
function (items) {
	var divs 	= document.getElementsByTagName("div");
	var images 	= document.getElementsByTagName("img");
	var button 	= document.getElementById("save-btn");
	for (var i=0; i < items.length; i++) {
		process(items[i], divs[i], images[i]);
	}
}

Same function but faster

// fast
function (items) {
	var doc = document;
	var divs 	= doc.getElementsByTagName("div");
	var images 	= doc.getElementsByTagName("img");
	var button 	= doc.getElementById("save-btn");
	for (var i=0; i < items.length; i++) {
		process(items[i], divs[i], images[i]);
	}
}

You will see a big difference when writing functions like this because instead of three global lookups, you now have one!

]]> http://www.aplusdesign.com.au/blog/javascript-optimisation/feed/ 2