Monthly Archives: May 2009

Ocultar texto con Javascript y DOM

Hay muchas personas que buscan cómo ocultar texto al hacer click en un botón o en una liga. Y no nada más texto, también imágenes y demás. Por eso escribí este pequeño TIP.

Digamos que tenemos un parrafo como este y que queremos ocultar sólo una parte del mismo. Simplemente colocamos una etiqueta span entre el contenido que deseamos desaparecer. (Este tip funciona con cualquier tipo de etiqueta HTML).

Supongamos que este es el código HTML dónde está la parte que queremos esconder.

Lorem ipsum dolor sit amet,
consectetuer adipiscing elit. <span id="contenidos_2">Sed mattis enim vitae orci. Phasellus
libero. Maecenas nisl arcu, consequat congue, commodo nec, commodo
ultricies, turpis. Quisque sapien nunc, posuere vitae, rutrum et,
luctus at, pede. Pellentesque massa ante, ornare id, aliquam vitae,
ultrices porttitor, pede.</span> Nullam sit amet nisl elementum elit convallis
malesuada. Phasellus magna sem, semper quis, faucibus ut, rhoncus non,
mi. < span id="contenidos_1">Duis pellentesque, felis eu adipiscing ullamcorper, odio urna
consequat arcu, at posuere ante quam non dolor. Lorem ipsum, dolor sit
amet, consectetuer adipiscing elit. Duis scelerisque.</span> 

<a id="enlace_1" href="#">Ocultar contenidos</a> 1
<a id="enlace_2" href="#">Ocultar contenidos</a> 2

Si se fijaron, las etiquetas span tienen un id, esto es necesario para poder detectar con DOM qué es lo que se quiere ocultar o descubrir, también los links tiene su propio id. Todos tienen un nombre diferente, pero tienen un número similar al final, esto es para que si tenemos más de una sección que queremos ocultar y develar con otro link, se pueda usar el mismo código, incluso con otras etiquetas HTML.

Ahora, el truco está con el código Javascript siguiente:

function interruptor() {
      numero = this.id.charAt(this.id.length-1);
      parrafo = document.getElementById("contenidos_" + numero);
      liga = document.getElementById("enlace_" + numero); 

      switch(parrafo.style.display) {
         case "inline"   :
         case ""         :   parrafo.style.display = "none";
                        liga.innerHTML = "Mostrar Contenido";
                        break;
         case "none"      :    parrafo.style.display = "inline";
                        liga.innerHTML = "Ocultar Contenido";
                        break;
      }
   }
   window.onload=function(){
      var enlaces = document.getElementsByTagName("a");
      enlaces[0].onclick=interruptor;
      enlaces[1].onclick=interruptor;
   }

Primero tenemos una función interruptor, que va a ser la función que ocultará el texto.

numero va a obtener es el número que pusimos al final del id del link al que se le dió click.

parrafo va a obtener el elemento que concuerde con el id que se llame contenidos_ y que además tenga el numero igual al que guardamos en la varibale numero

liga va a hacer referencia al id que tenga por nombre enlace_ y el número que guardamos en numero.

El switch lo que hará es cambiar lo que se vé a simple vista, tanto del parrafo que queremos ocultar como el texto del link.

Al final, llamamos la función que creamos cuando se cargue la página con window.onload=function().

Creamos otra variable que se llame enlaces para guardar todas las etiquetas que tengamos con a en un arreglo y así poder llamar la función interruptor.

Y listo, ya podemos ocultar y volver a mostrar el texto al hacer click en los links.

Advertisements

2 Comments

Filed under Tips

Clientes para utilizar Twitter

Es muy cansado utilizar Twitter desde el sitio web, porque se tiene que refrescar el sitio casi cada segundo para ver que está pasando y muchas veces es fácil perderse. Por esto, hay personas que han desarrollado aplicaciones de escritorio y así facilitar su uso.

Twitter

Twittastic

Características:

    Subir imagenes a twitpic de la forma Drag&Drop
    Puede sacar screenshots y compartirlos en un twit sin abrir otras aplicaciones
    Subir archivos a drop.io con un Drag&Drop
    Acortar URLs on un sólo click.
    Emoticos basados en texto incluidos.
    La habilidad de “callarse” hasta por 30 minutos si lo deseas.

OS: Windows.

Tweetie

Características

    Manejo de conversaciones.
    Busquedas en tiempo real con Twitter Search.
    Despliegue de mensajes directos como si fuera un chat.
    Información de usuarios.
    Separa ciertas busquedas en otra ventana.
    Diferentes cuentas de Twitter abiertas a la vez.
    Conteo de replies que te hace cada persona.

OS: Mac.

Twhirl

    Acorta URLs en automático.
    Se pueden mantener varias cuentas de Twitter, FriendFeed, laconi.ca y Seesmic abiertas al mismo tiempo
    Se pueden sincronizar sus updates a Jaiku, Facebook, MySpace, LinkedIn y más vía Ping.fm
    Subir imágenes a twitpic.
    Busquedas en tiempo real a través de Twitter Search y TwitScan.
    Checa la ortografía en inglés.
    Ver el perfil de un usuario.
    Separa los twits que has enviado, los que te han enviado como reply y DM, así como los favoritos.
    Puedes filtrar comentarios en tu linea de tiempo.

OS: Windows, Mac y Linux. (gracias por la corrección a renelc)

Tweetdeck

Características:

    Personalizar la manera en la que vez los twits.
    Crea grupos para seguir más fácilmente a todos.
    Actualiza Facebook y checa lo que hacen tus amigos desde allá.
    Sigue diferentes tópicos en tiempo real con Twitter Search.
    Checa tus @reply y mensajes directos.
    Menaja tus conversaciones.
    Nunca olvides twits importantes con notificaciones.
    Comparte fotos y videos con twitpic y 12seconds.
    Acortamiento de URLs.
    Y más…

OS: Windows, Mac y Linux.

DestroyTwitter

Características:

    Guardar twits importantes que se mezclan con los favoritos marcados desde la web.
    Busquedas con Search Twitter de palabras claves.
    Checa los twits enviados, los @reply y mensajes directos.
    Ver perfiles de usuarios.
    Manejar conversaciones hechos a través de reply.
    Importar imágenes a twitpic con Drag&Drop.
    Para enviar mensajes directos no pones d sino [message] antes del twitter.
    Al escribir @ aparece un cuadro para buscar usuarios.
    Puedes poner una pausa a todos los updates.

OS:Windows, Mac y Linux

Pruebalos y utiliza el que más te convenga.

Agradecimiento especial a Zguillez por decirme de la existencia de DestroyTwitter

2 Comments

Filed under Tips