Archivo para la categoría ‘Mootools’

History Manager for AJAX. Fix the back button on AJAX

Saturday, 5 de July, 2008

One of the major issues on AJAX web applications is the accesibility and usability lacks. Many users have manies and don¡t undestands about AJAX, they only expects that if they click the back button then it must works as always and get them back to the previous screen.

Digitarald.de have developed a solution HistoryManager - The Ajax Back-Button (v1.0) for  Mootools   developers. You can test some samples there and also I have implementerd it on my company web www.equipo24.com

But I also use to develop using Prototype so I have rewritten that library using Prototype, the usage is very similar to the original library.

Download prototype.historyManager.js

Validate target attribute XHTML Strict or HTML 4.0 Strict

Saturday, 17 de May, 2008

For the standards lovers here we have a trick to simulate the “target” attribute behavior without break HTML 4.0 Strict o XHTML 1.0 Strict standards.

We will use the “rel”attribute with the ”external” value that validates correctly with the above standards. We will make an script that will look for all “<a>” elements with “rel” attribute equals to “external” and then will assign a new “onclick” event to it that open in a new window the URL stored on the “href” attribute .

<a href="http://www.equipo24.com" rel="external">Nice site developed with mootools</a>

Here we have the javascript for Mootools and another general solution without need of externals libraries.

Mootools

function fix_external_links() {
	$ES('a').each(function(el) {
		if (el.getProperty('rel') == 'external') {
			el.addEvent('click', function(e) {
				e = new Event(e);
				e.stop();	
				window.open(this.getProperty('href'));
			}.bind(el));
		}	
	});
}

window.addEvent('domready', function() { 
	fix_external_links();
});

Without external libraries

function fix_external_links() {
	if (!document.getElementsByTagName) return;
	var anchors = document.getElementsByTagName("a");
	for (var i = 0; i < anchors.length; i++) {
		var anchor = anchors[i];
		if (anchor.getAttribute("rel") && anchor.getAttribute("rel") == "external") {
			anchor.target = "_blank";
		} 
	}
}
window.onload = fix_external_links;