| Subcribe via RSS

Código para actualizar el contenido de una capa con Scriptaculous

Octubre 21st, 2009 | No Comments » | Posted in ajax, javascript

Aquí os dejo un código JavaScript que actualiza el contenido de una capa mediante Ajax. La transición entre el contenido de la capa y el nuevo se hace mediante un efecto de difuminado con Scriptaculous. El efecto se repite cíclicamente.

Usa Protoype y Scriptaculous.

La capa que se actualiza debe llamarse “capa”:

<div id="capa"></div>

y en la etiqueta body debemos añadir:

<body onload="start_fading()">
<script language="javascript"  type="text/javascript"><!--
function start_fading(){
	var fade=setTimeout("fadeout()",4000);
}
 
function fadeout(){
    new Effect.Opacity("capa", {duration:0.5, from:1.0, to:0.0});
	var fade=setTimeout("change()",600);
}       
function change(){
	new Ajax.Request('/script.php',
	  {
	    method:'get',
	    onSuccess: function(transport){
	      var response = transport.responseText || "no response text";
	      $('specials_sidebox').innerHTML = response;
		  new Effect.Opacity("capa", {duration:0.5, from:0.0, to:1.0});
		  var fade=setTimeout("fadeout()",4000);
	    },
	    onFailure: function(){  }
	  });
}
//--></script>

El funcionamiento es el siguiente:

1) El evento onload() de la etiqueta body llama a la función start_fading() que pone en marcha un cronómetro que llamará a la función fadeout() al de 4000 milisegundos.

2) La función fadeout() hace que el elemento “capa” vaya desapareciendo difuminándose. Además establece un nuevo cronómetro que llamará al de 600 milisegundos a la función change.

3) La función change hace una llamada al fichero ’script.php’ mediante ajax para cambiar el contenido de capa (que está todavía oculto). Cuando se ha terminado de ejecutar script.php se ejecuta automáticamente la función dentro de ‘onSuccess’.

4) Esta función sustituye el contenido de ‘capa’ por lo que haya devuelto script.php, hace un fade in (vuelve a mostrar capa) y establece un nuevo cronómetro para empezar el proceso de nuevo.

NOTAS:

* Hay que tener en cuenta que cada vez que se repite el proceso se hace una llamada a script.php. Si este script consume muchos recursos podemos estar sobrecargando el servidor (cada usuario que tenga la ventana abierta estará haciendo llamadas cada 4600 milisegundos aproximadamente.

* Si es posible quizá fuera mejor precargar los disintos contenidos de ‘capa’ e ir rotándolos en cada ciclo sin hacer una llamada Ajax (eso os lo pongo otro día).

Tags: , ,

Cambiar el tamaño de un iframe desde el iframe

Octubre 15th, 2009 | No Comments » | Posted in javascript

En ocasiones, cuando estamos usando JavaScript e iframes, nos encontramos con que hemos añadido algún elemento al iframe y no encaja en el espacio asignado originalmente. Por ejemplo, si tenemos un iframe:

<iframe src="loquesea.html" id="cosas"></iframe>

Y desde el fichero loquesea.html queremos cambiar su altura seguramente pensaremos en hacer:

document.getElementById('cosas').style.cols = '150px';

Pero cmo el iframe es parte del documento “padre” no podemos acceder a él así. En su lugar podemos usar:

parent.document.getElementById('cosas').style.cols = '150px';
Tags: ,

Javascript: pedir al usuario confirmación de una acción

Agosto 1st, 2008 | 1 Comment | Posted in javascript, php, programacion

Un código muy útil para pedir al usuario confirmación antes de ejecutar una acción, por ejemplo borrar algún elemento de una base de datos. Para esto basta con crear esta función JavaScript:

<script>
function confirmar(url)
{
	if(confirm('¿Estas seguro de visitar esta url?'))
	{
		window.location=url;
	}
	else
	{
		return false;
	}	
}
</script>

y usarla de la siguiente forma:

<a href="accion.html?phpMyAdmin=A6sBNzTXbBTxwYwRKDS6YOhdSF8" onclick="return confirmar('accion.html')">[ Visitar ]</a>

Actulización 14/08/2008: Acabo de darme cuenta que a la cabecera de la función le faltaba el parámetro ‘url’. Ya está corregido.

Actualización 27/04/2009: También valdría la función así:

<script>
function confirmar()
{
	if(confirm('¿Estas seguro de visitar esta url?'))
		return true;
	else
		return false;
}
</script>

y usarla de la siguiente forma:

<a href="accion.html?phpMyAdmin=A6sBNzTXbBTxwYwRKDS6YOhdSF8" onclick="return confirmar()">[ Visitar ]</a>

En el primer ejemplo de arriba era necesario parar la URL como parámetro, pero aquí no es necesario, se usará la que se especifique en href.

Tags: , , ,

Números aleatorios en JavaScript

Abril 23rd, 2007 | 1 Comment | Posted in javascript

Aquí va un pequeño código para generar números aleatorios con JavaScript para que lo tengáis a mano:

<script type="text/javascript">
var MAX = 10;
var num_aleatorio = Math.round(Math.random()*(MAX));
document.write(num_aleatorio);
</script>

La variable num_aleatorio tomará valores comprendidos entre 0 y MAX.

Tags: , ,

Evitar a los spambots

Abril 8th, 2006 | No Comments » | Posted in javascript

He encontrado en Profressor’s Coding Corner un interesante script que evita que los spambots (1) puedan recopilar los emails que publicas en tu web. La única pega que tiene es que si el visitante tiene JavaScript desactivado no se muestra el email. Es una pega pequeña dado que hoy en día casi todo el mundo lo tiene activado. De todas formas se recomienda disponer de otra forma de contacto, como por ejemplo un formulario.

Aquí va el enlace:

http://www.professorscodingcorner.com/snippets/stopspambots.shtml

También hay otra forma de ocultar el email usando CSS. Este método tiene varios problemas:

  • Necesita que el navegador sea compatible con CSS2.
  • Se muestra un email pero no se puede hacer click sobre él.
  • En Thunderbird ni siquiera se puede seleccionar el email (lo acabo de comprobar).

El enlace al artículo.

(1) Un spambot es un programa que se dedica a navegar por las webs recopilando emails para, después, bombardearlos con toda esa basura que tanto nos gusta recibir.

(2) Supongo que estos métodos no serán válidos si el spambot es capaz de analizar JavaScript y CSS2 pero seguramente usando estos métodos se reducirá notablemente la cantidad de spammers con acceso a nuestro email.

Tags: ,