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

Buscar la posición de un objeto con Javascript

Diciembre 7th, 2006 | 2 Comments | Posted in html-y-css, javascript

He encontrado en firetree.net un estupendo script que permite conocer la posición de cualquier objeto de una página html.

Es un script muy pequeño que funciona correctamente en, al menos, Firefox, Internet Explorer, Safari y Opera.

Tenemos que agradecérselo a: Peter-Paul Koch y Alex Tingle.

  function findPosX(obj)
  {
    var curleft = 0;
    if(obj.offsetParent)
        while(1)
        {
          curleft += obj.offsetLeft;
          if(!obj.offsetParent)
            break;
          obj = obj.offsetParent;
        }
    else if(obj.x)
        curleft += obj.x;
    return curleft;
  }

  function findPosY(obj)
  {
    var curtop = 0;
    if(obj.offsetParent)
        while(1)
        {
          curtop += obj.offsetTop;
          if(!obj.offsetParent)
            break;
          obj = obj.offsetParent;
        }
    else if(obj.y)
        curtop += obj.y;
    return curtop;
  }

Introducción a Google Maps

Abril 25th, 2006 | No Comments » | Posted in google, javascript

Desde hace un tiempo Google maps deja disponible gratuitamente acceso a su API (¿qué es una API?) para que cualquiera pueda desarrollar aplicaciones con imágenes vía satélite y mapas de todo el mundo.

Lo primero que debes hacer es entrar en Google Maps API y crearte una cuenta. Te darán un código (API Key) que podrás usar únicamente en la web que indiques.

Basándonos en su ejemplo básico podemos hacer unas modificaciones para que muestre una imagen de nuestra ciudad. El ejemplo que he creado puedes verlo aquí, que muestra una imágen satélite de Bilbao.

Los únicos cambios que he hecho han sido:

1) Indicarle que centre el mapa en Bilbao: para eso he cambiado las coordenadas (latitud y longitud) que vienen en el ejemplo:

        map.setCenter(new GLatLng(37.4419, -122.1419), 13);

por las de Bilbao (Latitud 43º 16′ N, Longitud 2º 56′ O):

     map.setCenter(new GLatLng(43.2647,-2.93798), 13);

Quizá te preguntes ¿cómo es que conoces las coordenadas de tu ciudad? ¿acaso llevas un GPS encima? No, mi secreto es éste.

2) He añadido los controles de deplazamiento y zoom (la barra vertical a la izquierda):

	map.addControl(new GLargeMapControl());

3) Dado que no hay mapas de Bilbao disponibles le he indicado que muestre la vista satélite en lugar de los mapas:

	map.setMapType(G_SATELLITE_TYPE);

(actualización: Casualidad, hoy día 25/04/2006 han añadido un montón de mapas, entre ellos de Bilbao.).

A partir de aquí se puede ir haciendo cada vez más complejo el script con ayuda de la documentación y los foros.

Alternar imágenes con JavaScript

Abril 19th, 2006 | 1 Comment | Posted in javascript

He encontrado aquí un ejemplo de código que permite mostrar alternativamente un número indeterminado de imágenes. El sencillo ejemplo se ajusta al número de imágenes que queramos.

Tiene un pequeño problema, y es que si las imágenes son de distitas alturas las página se desplazará verticalmente (como sucede en el ejemplo) haciendo la lectura de la misma bastante incómoda.

Una posible solución sería añadir estas líneas al fichero JavaScript:

var altura = 0;
function inicializar() {
	imagen = new Image();
	for(i=0;i<bannerImg.length;i++) {
		document.banner.src = bannerImg[i];
		alert(document.banner.height);
		if (altura<document.banner.height)
			altura = document.banner.height;
	}
	cycleBan();
}

y sustituir:

window.onload=cycleBan;

por:
window.onload=inicializar;

La función inicializar calcula la altura máxima de las imágenes y la almacena en la variable “altura”. Este valor podría usarse para establecer la altura de la capa o celda de una tabla que contenga las imágenes.

Actualización: Añado aquí el código por si lo borran [Fuente: The JavaScript Source]



/* This script and many more are available free online at
The JavaScript Source :: http://javascript.internet.com
Created by: Lee Underwood :: http://javascript.internet.com/ */

var bannerImg = new Array();
  // Enter the names of the images below
  bannerImg[0]="image_jss.gif";
  bannerImg[1]="image_js.gif";
  bannerImg[2]="image_wr.gif";

var newBanner = 0;
var totalBan = bannerImg.length;

function cycleBan() {
  newBanner++;
  if (newBanner == totalBan) {
    newBanner = 0;
  }
  document.banner.src=bannerImg[newBanner];
  // set the time below for length of image display
  // i.e., "4*1000" is 4 seconds
  setTimeout("cycleBan()", 4*1000);
}
window.onload=cycleBan;












Free JavaScripts provided
by The JavaScript Source

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

¿Atrapado en un frame?

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

Seguramente habrás visto alguna vez cómo otras webs enlazan con la tuya pero encerrándola dentro de un frame. De esta forma puede dar la impresión al visitante que tu web es parte de la otra.

Este es un tema ya un poco antiguo pero recientemente he descubierto que una de mis webs, El Rincón del C, estaba siendo enlazada desde emagister usando esta técnica. Incluso llegan a decir que El Rincón del C está alojado en su servidor.

¿Cómo librarse de un frame?

Es muy fácil, basta una línea de código Javascript que podremos colocar justo debajo de la etiqueta “body” encerrado entre un par de etiquetas “script”.

En este sencillo ejemplo vamos a comprobar si la página sin_frames.html está dentro de un frame y si es así vamos a sacarla de ahí:

if (top != self) top.location.href = ’sin_frames.html’;

Cuando se evalúa la condición top!=self el miniscript comprueba si es la ventana principal. En caso de no ser así quiere decir que la página está atrapada en un frame y gracias a top.location.href podemos liberarla.

Nota: si no funcionara probar con top.location en lugar de top.location.href.