Tag Archive for: javascript

01Feb 2010 7 Comments

Agregar Borrar campos usando ajax parte 2

Categories: AJAX - Tags: , ,

En un post anterior expliqué como se podían agregar campos usando jquery, varias personas me preguntaron como hacer para borrar un campo específico, pues es muy simple en realidad, veamos:

Agregando campos

Necesitamos hacer que se agreguen campos pero además que estos aparezcan con un link que nos permita borrarlos, además para poder identificarlos vamos a ponerle un contador.

1
2
3
4
5
emails=0;
function agregar() {
    emails=emails+1;
    $("#campos").append('<li class="email'+emails+'"><input type="text" name="email[]" size="25" />&nbsp;&nbsp;<a href="#" onclick="javascript:borrar('+emails+');">Borrar</a></li>');
}

De esta forma se creará un li con una clase email1, email2, email3, etc. y un link con un javascript que invoca a la función borrar(1), borrar(2), etc.

Borrando los campos

La función que borra los campos que ya no requerimos es muy simple, únicamente un selector jquery que busca la clase email1, email2… o la que corresponda y con remove se elimina, ese return false evita que “salte” la página cuando le damos click al link borrar.

1
2
3
4
function borrar(cual) {
    $("li.email"+cual).remove();
    return false;
}

Como ven con sólo un par de líneas ya esta funcionando, espero les sea util este post.

Demo

26Dec 2009 9 Comments

AJAX ocultar mostrar secciones de nuestro sitio

Categories: Otros - Tags: , ,

En este tutorial explicaré como hacer aparecer secciones de un formulario o cualquier otro elemento de nuestro sitio usando jquery, yo lo suelo usar cuando tengo un formulario de búsqueda y deseo mostrar opciones de búsqueda avanzada por ejemplo o también es posible usarlo a modo de acordeón

Ocultar un elemento

Si bien es cierto que podemos ocultar un elemento cualquiera lo mejor es colocar un div que agrupe el elemento o elementos que deseamos ocultar si es un formulario y estas basado en una estructura de OL/UL y LI le asignamos u ID a es LI que deseamos ocultar, nuestro código sería algo así:

1
2
3
4
5
<div id="paraocultar">
<p>Aqui el texto o elementos del formulario que se ocultarán</p>
</div>
<p>Para ocultar podemos usar link o un boton</p>
<a id="oculta">Click para ocultarlo</a>

Nuestro código jquery para detectar que se ha hecho click sería:

1
2
3
4
5
6
7
8
9
10
11
12
$(document).ready(function(){
    estado=0;                          
    $("#oculta").click(function () {
       if(estado==0) {
         $('#paraocultar').slideUp('fast');
         estado=1;
      } else {
         $('#paraocultar').slideDown('fast');
         estado=0;
      }
    });
});

//////// Actualización ///////
He modificado el script para funcionar con múltiples elementos, pueden ver el ejemplo aqui

Download - Jquery ocultar mostrar secciones
Demo

24Nov 2009 1 Comment

Acelerando nuestra página web

Categories: html - Tags: , , ,

Cuando hacemos una página web debemos considerar que a nuestros visitantes no les gusta esperar mucho tiempo para ver un sitio, si demora más de 15 o 20 segundos es probable que prefieran ver otro sitio. Veamos algunos tips para mantener agil nuestro sitio, es importante desarrollar imaginando que todos tienen una muy lenta conexión de prehistoricos modems de 56Kbps :)

Flash inmensos

Yo se que estaba muy de moda tener intros de flash muy espectaculares pero luego de 2 o 3 visitas ya nadie quiere verlas y menos aun esperar a que carguen asi que siempre es conveniente ponerles un boton “Saltar Intro” u olvidarnos de ellas y tal vez colocar un banner o un encabezado vistoso suele resultar más efectivo.

Usando CSS

Nunca debemos usar un CSS independiente por cada página de nuestro sitio, debemos usar una hoja de estilos global asi se cargará una sola vez y luego se compartirá entre todo nuestro sitio. Este suele ser un error muy común en aquellos que empiezan a programar usando Dreamweaver aunque no sólo es un tema de dar velocidad sino que ayuda a mantener coherencia en el diseño de todo el sitio.

Además podemos optimizar nuestro código CSS para pasar de algo así:

1
2
3
4
padding-top: 10px;
padding-bottom: 5px;
padding-left: 20px;
padding-right: 15px;

A algo mucho más optimizado como esto:

1
padding:10px 15px 5px 20px;

Es más rápido invocar imágenes via CSS además tiene la ventaja que estas se guardan en cache y nuestro sitio funcionará más rápido sin embargo no es conveniente abusar de este recurso ya que podría jugar en nuestra contra.

AJAX Frameworks

Muchas veces usamos un script que de un efecto, otro para otro pequeño efecto, hacemos llamados AJAX con gigantescos y confusos códigos, todo eso resulta innecesario ya que usando uno de los tantos frameworks existentes(mootols, jquery….) pueden realizar esos trabajos con pocas lineas de código, asi que resulta absurdo querer reinventar la rueda eso no sólo le dará velocidad a nuestro sitio sino a nuestra programación.

Optimizando imágenes

Este es uno de los puntos claves ya que las imágenes suelen ser los elementos más pesados de nuestro sitio, debemos usar cada formato para lo que fue creado

  • JPG: Este es el formato por excelencia para fotos con la calidad alta(60) basta no requerimos usar la muy alta ni la máxima ya que crecerá el tamaño y dificilmente alguien puede notar la diferencia, si somos fotografos y si es un factor muy relevante mejor usamos una imagen a baja calidad y un link para los interesados en la version de alta resolución
  • GIF/PNG 8: Estos formatos son similares y son los más adecuados para imágenes de pocos colores o imágenes que originalmente eran vectoriales como logotipos, botones, barras, etc con un máximo de 256 colores
  • PNG 24 bits: Este es un formato que guarda fotos sin perder calidad y hasta permite semitransparencia pero es muy pesado y no soportdo adecuadamente por IE6(aun con hacks) asi que su uso debe ser mínimo

Remover código innecesario

Cuando se desarrolla un sitio se crean cabeceras y comentarios muy utiles para los desarrolladores si trabajamos en equipo o para nosotros mismos pero cuando la página esta completa, los comentarios terminan resultando inútiles y consumiendo espacio en los archivos asi que es mejor eliminarlos o al menos reducirlos al máximo dejando solo aquellos estrictamente necesarios.

03Nov 2009 2 Comments

Como poner link agregar a favoritos

Categories: html, javascript - Tags: ,

Muchos usuario o no tienen idea o les da un poco de flojera poner nuestro sitio en su lista de favoritos, asi que podemos hacerselo más fácil y de pasada ganar un nuevo visitante con un link que agregue nuestro sitio a los favoritos.

Este script funciona directamente en Internet Explorer pero en Firefox mostrará un mensaje con la tecla rápida para hacerlo.

La función javascript para esto la pegas dentro de las etiquetas head de tu sitio

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<script type="text/javascript">
function agregar(){
//Para internet explorer
if ((navigator.appName=="Microsoft Internet Explorer") && (parseInt(navigator.appVersion)>=4)) {
var url="http://www.tudireccion.com/"; //Aqui la direccion de tu web
var titulo="El nombre de mi web"; //Aqui el nombre de tu web
window.external.AddFavorite(url,titulo);
}
//Para Firefox
else {
if(navigator.appName == "Netscape")
alert ("Presione Crtl+D para agregar a este sitio en sus Favoritos");  //Aqui el mensaje que desees para Firefox
}
}
</script>

Y el link en tu página web sería

1
<a href="javascript:agregar()">Agregame a tus favoritos</a>
24Sep 2009 0 Comments

javascript redirigir actualizar pasado un tiempo

Categories: html, javascript - Tags: ,

Muchas veces requerimos que una página se redirija a otra automáticamente por ejemplo para mostrar mensajes del tipo “esta página no esta disponible”, “estamos en mantenimiento”, “hemos cambiado a la siguiente direccion, por favor espere unos segundos para ser redirigido”, etc.

Es muy fácil crear este tipo de mensajes, primero debemos hacer que se llame al cargar la página web, para eso usamos un código como este:

1
<body onLoad="redireccionar()">

Y ahora faltaría crear la función que redirija nuestra página web, que sería algo como esto en nuestro encabezado:

1
2
3
4
5
<script language="JavaScript">
  function redireccionar() {
    setTimeout("location.href='http://www.miweb.com'", 5000);
  }
  </script>

El comando setTimeout nos permite que transcurrido un tiempo, en este caso 5000 milisegundos (5 segundos) se produzca la redirección.

Actualización automática de la página

En este caso vamos a usar otro comando dentro del setTimeout

1
setTimeout('document.location.reload()',10000);

En este caso se actualizará automáticamente cada 10 segundos

Regresar a la página anterior

Si quisieramos mostrar un mensaje y que luego se dirija a la página anterior sería

1
setTimeout('history.back()',10000);

Suscribete

Ahora también puedes suscribirte via correo electrónico

Ingresa tu dirección de correo:

Delivered by FeedBurner


Facebook

Mi Galeria flickr

[ Ver más ]

© Copyright - Miguel Manchego - Design by Kriesi