ORIDOKI

Bueno, hoy vamos a ver como podemos sobrescribir, el ‘horrible’ alert de javascript por uno más ‘moderno’, o por lo menos poder aplicarle estilos.

Para ello reaprovecharemos la función del último post:

function $(objID){
	return document.getElementById(objID);
}

Creamos entonces la clase que va a sustituir la que tiene por defecto JavaScript,

	function MyAlert( sAlert ) {
		var alt;
		if ((this.NS4) || (this.NS6)) {//[ Netscape ]//
			alt = window.pageYOffset;
		} else {
			alt = document.documentElement.scrollTop;
		}
		resizeMessage();

		myAlert = $("myAlert");
		if(!myAlert){
			var myAlert = document.createElement("div");
			myAlert.id = 'myAlert';
			document.body.appendChild(myAlert);

			var inMyAlert = document.createElement("div");
			inMyAlert.className = 'myAlert';
			myAlert.appendChild(inMyAlert);

			var myAlertText = document.createElement("div");
			myAlertText.id = 'myAlertText';
			inMyAlert.appendChild(myAlertText);

			var closeAlert = document.createElement("div");
			closeAlert.className = 'closeAlert';
			closeAlert.onclick = function(){closeMessage();}
			inMyAlert.appendChild(closeAlert);
		}
	  $("myAlertText").innerHTML = sAlert;
	  myAlert.style.display = "block";  

		myAlert.style.marginTop = alt+"px";
		myAlert.style.display = 'block';
	}

y luego claro está le decimos a la página que a partir de ahora esta será la función alert por defecto.

	window.alert = MyAlert;

Creamos un botón para cerrar el alert:

	function closeMessage(){
		$("message").style.display = 'none';
		$("myAlert").style.display = 'none';
	}

Hasta aquí ya lo tenemos pero debemos tener cuidado con la capa gris transparente del fondo hay que hacer que ocupe el máximo de la página, para ello tenemos la siguiente función.

	function resizeMessage(){
		var body = document.getElementsByTagName("body")[0];
		var message = $('message')

		if(!message){
			var message = document.createElement("div");
			message.className = 'message';
			message.id = 'message';
			document.body.appendChild(message);
		}

		message.style.display = 'block';

		var isIE = '\v' == 'v';
		if (isIE){
			var body = document.getElementsByTagName("body")[0];
			message.style.height = body.offsetHeight-4+"px";
			message.style.width = body.offsetWidth-20+"px";
		} else {
			message.style.height = window.offsetHeight+"px";
			message.style.width = window.offsetWidth+"px";
		}
	}

Incluimos en la cabecera algún CSS para hacerlo bonito

y para llamar a la función.

Si queréis descargaros el código podéis hacerlo desde aqui.

Dicen que a lo bueno siempre se acostumbra uno y por eso las veces que después de haber utilizado prototype o JQuery siempre he echado en falta el simular la función document.getElementById() por la función $().
Por eso hoy vamos a ver como podemos habilitar este cambio, es una cosa muy simple, que busqué durante bastante tiempo pero que al no encontrarla la hice yo mismo

function $(objID){
	return document.getElementById(objID);
}

Así de simple

Incompatiblidad Internet Explorer con objetos DOM

Hace unos días se me presentó la necesidad de crear inputs de tipo radio en javascript mediante DOM. Como sería normal utilicé el código siguiente:

var o = document.createElement('input');
o.name = 'r1';
o.value = '0':
myParent.appendChild(o);

Todo perfecto hasta que lo testeas para cualquier versión de IE. En Internet Explorer aparecen los inputs, pero no se pueden seleccionar, parece que por DOM no le puedes asignar a este tipo de objetos la propiedad name.
La solución que he adoptado aunque ’sucia’ es funcional, por lo que hasta que encuentre otra solución me quedo con esta.

var name = 'r1';
var value = '0';
document.getElementById("myParent").innerHTML = "
";

Como siempre nos toca ‘ensuciar’ el nuestro código javascript por culpa de Internet Explorer.

Bucle en PHP que recorre todos los elementos enviados por post, dándonos acceso tanto al nombre de las variables, como al valor de las mismas

while (list($key, $value) = each($_POST)){
	echo "\n$key => $value 
";
}

Hasta ahora cuando quería hacer un gráfico de datos simplemente utilizaba JPGraph con el que se pueden conseguir resultados sorprendentes.

Sin embargo en la actualidad a cada instante intento evitar un poco más el PHP para hacer todo lo que pueda en la máquina del cliente con Javascript. Por este motivo me ha sorprendido gratamente encontrar esta librería con la que podemos realizar gráficos de datos en Javascript.

A continuación podéis ver algunos ejemplos de que tipo de gráficos podemos hacer.

Como podéis ver es una librería bastante completa. Espero poder probarla pronto para explicaos su funcionamiento con más detalle, hasta entonces podéis encontrar ejemplos en su página web o descargarla desde aquí.

Decir por último que ofrece una compatibilidad casi absoluta:

Windows
Firefox 1.5 +
Internet Explorer 7
Internet Explorer 6
Safari 3.1 +
Opera 9 +
y otros buscadores
Mac
Firefox 1.5+
iPhone 1+
Safari 2+

Dock Menú en Javascript y CSS

Hacia tiempo que buscaba algo parecido a esto, pero hasta hoy no había encontrado uno Dock similar al Dock Menú de OS X que me convenciera.

Hay que felicitar el trabajo realizado por los chicos de N.DESIGN STUDIO, que han conseguido una librería sencilla, y con unos acabados fantásticos.

La librería está desarrollada bajo JQuery, y es bastante sencilla de utilizar.

Primero: Descargar los ficheros.
Descargar desde aquí.

Segundo: Insertar el código
Insertamos el código entre las etiquetas head de nuestra página.

Tercero: Configuración.
Tenemos que incluir el siguiente código en cualquier lugar de la etiqueta de nuestra página

Cuarto: Añadir o borrar elementos

Para añadir elementos :

	Home

Abro esta nueva sección para poner aquellos pequeños trozos de código que me han costado más de lo normal, que en el fondo no son difíciles, pero que en un determinado momento son más complicados de desarrollar.

Empezamos con una función javascript para vaciar un desplegable o select.

/**********************
* Vaciar desplegable: recibe el ID del elemento
********/
function emptySelect(objID){
	while($(objID).childNodes[0]){
		$(objID).removeChild($(objID).childNodes[0]);
	}
}

Simplemente va eliminando elementos de un objeto de uno en uno hasta que esta vacio.

Cuando estamos desarrollando un sitio multiidioma, a veces, nos sería de lo más útil que el propio PHP nos hiciera una traducción de algunos contenidos, para guardarlos o para mostrarlos directamente.

En cualquier caso hoy os presento esta función que tenia por aquí hace unos meses, y que la verdad es bastante funcional cuando realizamos algún parseo.

/***
Hay que pasarle las siguientes variables:
$content -> String a traducir
$ini -> idioma desde el que queremos traducir
$fin -> idioma al que queremos que nos traduzca
*/
function translate($content, $ini, $fin){
	$buff = "";
	$ini = strtolower($ini);
	$fin = strtolower($fin);
	$url = "http://translate.google.com/translate_a/t?client=t&text=".urlencode($content)."&sl=".$ini."&tl=".$fin."";

	$curl_handle = curl_init();
	curl_setopt($curl_handle, CURLOPT_URL, $url);
	curl_setopt($curl_handle, CURLOPT_CONNECTTIMEOUT, 2);
	curl_setopt($curl_handle, CURLOPT_RETURNTRANSFER, 1);
	curl_setopt($curl_handle, CURLOPT_USERAGENT, 'Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.1; .NET CLR 1.0.3705; .NET CLR 1.1.4322; Media Center PC 4.0)');
	curl_setopt($curl_handle, CURLOPT_HTTPHEADER, array("Content-type: application/x-www-form-urlencoded;charset=UTF-8"));

	$buffer = curl_exec($curl_handle);
	curl_close($curl_handle);

	if (empty($buffer))
		{
	  $buffer = '';
		}
	else
		{
	  $buffer = substr(trim($buffer), 1, -1);
		}

	$buffer = utf8_decode($buffer);
	$buffer = str_replace("\\n", "", $buffer);
	return $buffer;
}

//[ Ejemplo ]//
echo translate("Mi perro se llama Pedro", "es", "en");

Es necesario tener las librerías de CURL instaladas en nuestro servidor, así como tenerlas enlazadas con PHP.
Espero que os sirva