Archive for month: August, 2010

Jquery: ocultar mostrar varios elementos

Categories: javascript - Tags: ,

Hace un tiempo publiqué un tutorial explicando como como ocultar o mostrar un elemento, pero también es posible hacerlo con múltiples elementos sin tener que agregar un script por cada elemento, para eso hay que usar id que identifiquen a los elementos y clases para conocer su estado.


Simplemente con fines didácticos he planteado el ejemplo usando el evento onclick y usando clases sin embargo es posible simplificarlo mucho más asignando el click desde jquery y no usando clases sino atributos.

El HTML de los elementos

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<div class="visible" id="item1">
    <input type="text" size="25" />
</div>
<div class="visible" id="item2">
    <input type="text" size="25" />
</div>
<div class="visible" id="item3">
    <input type="text" size="25" />
</div>
<div class="visible" id="item4">
    <input type="text" size="25" />
</div>
<div class="visible" id="item5">
    <input type="text" size="25" />
</div>
<div class="visible" id="item6">
    <input type="text" size="25" />
</div>

Es posible usar cuantos elementos se requieran y puede usarse cualquier tipo de elemento no exclusivamente div, basta que les pongamos un id y la clase que me indica su estado (visible/invisible)

Para el menu que muestra u oculta los elementos, sería el siguiente script:

1
2
3
4
5
6
7
8
<ul>
    <li><a href="#" onclick="javascript:oculta('item1')">Oculta/Muestra</a></li>
    <li><a href="#" onclick="javascript:oculta('item2')">Oculta/Muestra</a></li>
    <li><a href="#" onclick="javascript:oculta('item3')">Oculta/Muestra</a></li>
    <li><a href="#" onclick="javascript:oculta('item4')">Oculta/Muestra</a></li>
    <li><a href="#" onclick="javascript:oculta('item5')">Oculta/Muestra</a></li>
    <li><a href="#" onclick="javascript:oculta('item6')">Oculta/Muestra</a></li>
</ul>

La función para ocultar/mostrar usando jquery

Como vemos el menu invoca a una función llamada “oculta” y le envía como parámetro el id del elemento que queremos ocultar o mostrar según sea el caso, una vez que capturamos ese elemento pasamos a verificar si esta o no visible para finalmente aplicarle una pequeña animación según sea el caso.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function oculta(elemento) {
        ///// capturamos el elemento
    item=$("#"+elemento);
       ///// verificamos su estado
    if($(item).hasClass('visible')) {
        $(item).removeClass('visible');
                //// cambiamos su estado
        $(item).addClass('invisible');
                //// animamos
        $(item).slideUp('fast');
    } else {
        $(item).removeClass('invisible');
        $(item).addClass('visible');
        $(item).slideDown('fast');
    }
}

Demo

Sammy: url ajax con soporte del boton atras

Categories: AJAX - Tags:

Seguramente han visto en Facebook que se carga contenido AJAX y al hacerlo se agrega una ruta en el browser(navegador) de tal forma que si apretamos el botón atrás se carga el contenido anterior a la llamada AJAX, pues existe una solución muy simple para hacer esto mismo usando Jquery allí es donde estra a jugar sammy.js

Lo primero es invocar a jquery y a sammy, algo como:

1
2
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/sammy.js"></script>

Luego en el body vamos a insertar un pequeño menu y el contenedor que nos va a servir para el ejemplo:

1
2
3
4
5
6
7
8
<div id="nav">
        <ul>
            <li><a href="#/inicio">inicio</a></li>
            <li><a href="#/formulario">formulario</a></li>
            <li><a href="#/label/drafts">drafts</a></li>
        </ul>
    </div>
<div id="content"></div>

Antes de complicar las cosas veamos como luce la versión más simple:

1
2
3
4
var ratPack = $.sammy(function() {
this.element_selector = '#content';
       // todas nuestras rutas irían aquí
});

En nuestro menu hay 3 rutas: #/inicio, #/formulario, #/label/drafts
Eso significa que por cada ruta debemos insertar un código similar a este:

1
2
3
4
this.get('#/inicio', function(context) {
              context.app.swap('');
              context.$element().append('<h1>inbox</h1>');
});

Lo único que hago allí es que al ingresar la ruta misitio.com#/inicio se va cargar en el div content un titulo H1
Pueden ver un ejemplo más complicado incluyendo envío de formularios AQUI

Para el envío de formularios usando el método POST el código sería algo así:

1
2
3
4
5
this.post('#/formulario', function(context) {
              context.app.swap('');
              var to = this.params['to'];
              context.$element().append('<h1>hola ' + to + '</h1>');
          });

Igualmente para los que hablan inglés pueden ver el tutorial que tomé como modelo AQUI

Jquery: Plugin para validar al estilo HTML5

Categories: javascript - Tags: ,

Anteriormente había hablado de un plugin de Bassistance para validar, pero esta opción me parece muy interesante ya que usa las propiedades nativas de HTML5, aunque hay algunas caracteristicas que se hacen extrañar de las que hablaré más adelante.

¿Cómo usarlo?

Lo primero es incluir el script y luego indicar que formulario debe afectar, personalmente creo que mejor es colocar un id.

1
2
3
4
5
<script>
        $(document).ready(function(){
            $('#miformulario').html5form(); // recibe un id, una clase o la etiqueta form    
        });
</script>

La forma de realizar la validación es usando las propiedades HTML5, es decir algo similar a:

1
   <input type="email" name="email" id="email"/>

¿Por qué usarlo?

Hay varios motivos:

  • Nos vamos acostumbrando a la sintaxis de HTML5
  • Incluye ciertas validaciones que no tiene el plugin de bassistance además de funciones tipo texto por defecto
  • El envío asíncrono de datos viene incluido

Puntos por pulir

  • Cuando se pega del portapapeles un texto a un textarea con un número máximo de caracteres este no se corta para validarlo
  • Los mensajes de error no son personalizables, aunque incluye por defecto mensajes en español e inglés modificables directamente sobre el código del script

Puedes ver más sobre este plugin AQUI, yo tuve problemas para acceder a dicha dirección, si no funciona en tu país usa un proxy anónimo como por ejemplo www.hidemyass.com

Facebook:Live stream chat en tu web

Categories: Otros, socializacion - Tags:

En estos tiempos que esta de moda la socialización de los sitios esta aplicación se ve muy interesante. Yo no le he encontrado mucho uso al twitter pero creo que Live Stream es mejor ya que permite hacer una página más participativa además de permitir la discusión en vivo mediante mini-posts.

Añadir este widget a nuestro sitio es muy sencillo, basta que ingresemos a este LINK y llenemos la información que corresponde luego le damos un click al botón “Get Code” y nos dará un pequeño script para insertar un iframes en cualquier parte de nuestro sitio.

Adicionalmente se puede insertar este script via FBML en una fanpage lo que combinado con algunos elementos seguro que lo podemos convertir en un punto de ventas.

Como ven las posibilidades son múltiples,a modo de ejemplo pueden ver esta radio online con un livestream para discutir en vivo

Photoshop: Dibujar el logo de Firefox

Categories: photoshop - Tags: ,

Con una poca de habilidad y una buena dosis de paciencia es posible dibujar el logo de Firefox usando Photoshop, para lo cual los estilos de capa ayudan bastante sobre todo a la hora de colocar los degradados.

Pueden ver el tutorial completo de como hacerlo AQUI Lo interesante es que además nos da el archivo PSD para bajarlo