Nideaderedes » javascript

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

gorkau — Wed, 21 Oct 2009 07:00:45 +0000

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”:

y en la etiqueta body debemos añadir:

<script language="javascript"  type="text/javascript">

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).

Cambiar el tamaño de un iframe desde el iframe

gorkau — Thu, 15 Oct 2009 07:00:28 +0000

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:

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';

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

gorkau — Fri, 01 Aug 2008 07:00:27 +0000

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:

[ Visitar ]

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:

[ Visitar ]

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.

Números aleatorios en JavaScript

gorkau — Mon, 23 Apr 2007 07:39:33 +0000

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.

Evitar a los spambots

g.urrutia — Sat, 08 Apr 2006 09:58:00 +0000

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.