JMiur [E]

Cuando insertamos un bloque con cierto contenido, utilizamos una etiqueta. Dependiendo de cómo lo hacemos o el uso que le daremos, estará en una etiqueta DIV, P, UL, IMG, TABLE, etc. Sin importar cuál sea, a los efectos prácticos, esa etiqueta no es otra cosa que un rectángulo donde adentro "hay algo" que puede ser cualquier cosa, incluyendo otras etiquetas.

Esos rectángulos pueden ser controlados de manera individual si les colocamos un nombre único, es decir si los identificamos con precisión y para eso, usamos un parámetro llamado ID. Por ejemplo:
<div id="pepito"> ....... </div>
<img id="unaImagen" src="laImagen" />
<p id="TEXTO1234"> ....... </p>
El nombre que le ponemos no importa, puede ser cualquiera y contener letras, números o guiones pero no espacios en blanco. Puede estar en mayúsculas, minúsculas o ambas cosas aunque debemos recordar que JavaScript es sensible a eso así que cuando usamos esos nombres en un código, hay que usar el mismo criterio ya que id="TEXTO1234" e id="texto1234" no serán el mismo.

Los IDs deben ser únicos, es decir, no debe haber dos iguales en una misma página porque si luego los queremos manipular, el navegador no sabrá a cuál nos referimos.

Es gracias a esos IDs que podemos usar JavaScript para cambiar dinámicamente (cuando la pagina ya se ha cargado) las propiedades de esos bloques; por ejemplo, mostrarlos u ocultarlos a voluntad.

Usando CSS es sencillo ocultar el contenido de algo, basta colocarle la propiedad display: none:
<div style="display: none;"> ... este es el contenido ... </div>
Esa propiedad es común a todas las etiquetas así que, podemos ocultar cualquier parte de una página web pero ¿para qué sirve ocultar algo? Muchos creen que ocultar algo utilizando este método alivia la carga de una página pero, eso no es cierto. Justamente, el que eso no sea cierto es lo que nos permite hacer el proceso inverso, es decir, mostrarlo, sin necesidad de recargar nada y por lo tanto, el efecto es casi instantáneo por una sencilla razón, ya está allí desde el inicio, ya se cargó junto con el resto, no lo vemos pero está ACÁ ABAJO.
Para hacerlo visible, usamos la propiedad contraria que es display:block y que es la propiedad por defecto de la mayoria de las etiquetas así que:
<div style="display: block;"> ... este es el contenido ... </div>
y:
<div> ... este es el contenido ... </div>
serán visibles y:
<div style="display: none;"> ... este es el contenido ... </div>
será invisible.

Pero ¿cómo hacemos para permutar entre ambos estados? ¿cómo hacemos para que algo oculto se muestre y algo visible se oculte? Para eso usamos JavaScript, dándole una instrucción que cambie el estilo CSS de algún elemento al que le hemos dado un nombre. En general, sería así:

nombreID.style.propiedad = 'valor';

Para que no tengamos problemas a la hora de indicarle al navegador cuál es la etiqueta que vamos a modificar, en lugar de usar nombreID, usamos una función interna:

getElementById('nombreID').propiedad = 'valor';

o bien:

document.getElementById('nombreID').propiedad = 'valor';

La forma de identificar la propiedad suele ser similar a la propiedad CSS aunque hay variaciones. En este caso serán:

getElementById('nombreID').style.display = 'block';
getElementById('nombreID').style.display = 'none';

¿Cómo aplicamos esto? Para que funcione siempre, sin importar el navegador, lo mejor es utilizar enlaces. En estos enlaces, basta agregar un parámetro más, un evento. El más común sería onclick:
<a href="javascript:void(0);" onclick="getElementById('ejemplo').style.display='block';">TEXTO O IMAGEN</a>
<div id="ejemplo" style="display:none;'> ....... </div>
En ese ejemplo, haciendo click sobre el TEXTO O IMAGEN, el bloque oculto llamado ejemplo, se mostraría.

¿Y cómo lo ocultamos otra vez? Una forma sería agregarle otro enlace dentro del elemento oculto que lo cierre:
<a href="javascript:void(0);" onclick="getElementById('ejemplo').style.display='block';">TEXTO O IMAGEN</a>
<div id="ejemplo" style="display:none;'>
.......
<a href="javascript:void(0);" onclick="getElementById('ejemplo').style.display='none';">CERRAR</a>
</div>

Funciona pero podemos hacerlo mejor y simplificarlo. Por ejemplo, es muy común usar una función que agregamos antes de </head> y que nos permite permutar entre dos estados. A esto, suele llamarsele efecto toggle:
<script type='text/javascript'>
//<![CDATA[
function toggle(cual) {
var elElemento=document.getElementById(cual);
if(elElemento.style.display == 'block') {
elElemento.style.display = 'none';
} else {
elElemento.style.display = 'block';
}
}
//]]>
</script>
¿Que hace eso? Cuando lo ejecutamos, enviamos el nombre de un ID y la función verifica el estado. Si está visible, lo oculta y si está oculto lo muestra. Un ejemplo de MOSTRAR/OCULTAR

Lo usamos de manera similar, con un enlace y el evento onclick:
<a href="javascript:void(0);" onclick="toggle('ejemplo');">TEXTO O IMAGEN</a>
<div id="ejemplo" style="display:none;'> ....... </div>
Para que ese efecto estuviera completo, faltaría algo, hacer que el texto del enlace cambie de tal modo que un usuario supiera que basta hacer click otra vez en el mismo para cambiar de un estado a otro.

Hay muchos métodos para eso pero, aqui va otro script más que podemos agregar antes de </head>:
<script type='text/javascript'>
//<![CDATA[
function toggleEnlace(accion, cual) {
if (accion == "mostrar") {
document.getElementById("miContenido"+cual).style.display = "block";
document.getElementById("miEnlace"+cual).href="javascript:toggleEnlace('ocultar',"+cual+")";
document.getElementById("miEnlace"+cual).innerHTML = "CONTRAER";
}
if (accion == "ocultar") {
document.getElementById("miContenido"+cual).style.display = "none";
document.getElementById("miEnlace"+cual).href="javascript:toggleEnlace('mostrar',"+cual+")";
document.getElementById("miEnlace"+cual).innerHTML = "EXPANDIR";
}
}
//]]>
</script>
Y lo usamos de esta manera:
<a id="miEnlace1" href="javascript:toggleEnlace('mostrar', 1)">EXPANDIR</a>
<div id="miContenido1" style="display:none;"> ... CONTENIDO OCULTO 1 ... </div>

<a id="miEnlace2" href="javascript:toggleEnlace('mostrar', 2)">EXPANDIR</a>
<div id="miContenido2" style="display:none;"> ... CONTENIDO OCULTO 2 ... </div>

EJEMPLO 1 EXPANDIR | EJEMPLO 2 EXPANDIR | EJEMPLO 3 EXPANDIR

20 comentarios:

Quitz  

Buen post JMiur, no sabía que se pudiese navegar por las propiedades CSS con javascript :D
Se me ha ocurrido hacerle una broma a mi hermano, que también es aficionado de Waldo, no le fué muy difícil encontrarlo. Solo pulsar en el enlace ;)

Responder
LacraX  

Ya sé que no tiene nada que ver con esto , pero nose si habras visto esta noticia sobre Google Chrome ;) http://elezeta.net/2009/04/01/google-chrome-usa-la-estereoscopia-para-ver-en-3d-usando-anteojos-april-fools-day/

Responder
JMiur  

Quitz: Pues yo jamás logro encontrarlo :D

LacraX: La verdad, no lo sabía. Es curioso.

Responder
Gem@  

Guardo esta entrada para probarlo ;)

Responder
Bocha y Franco  

Hola

Una duda...

Yo coloque en mi blog la fecha tipo calendario, y me quedo de esta manera "09 de ABRIL" (Una palabra bajo la otra)... eso esta perfecto, pero me gustaria que dijera "9 de ABRIL", lo que quiero es sacarle el "0"... como hago?

Abrazo...

Responder
|ANDRES|  

soy nuevo aki y keria saber si me dijeran como expando una plantilla como en esta plantilla xq la tiene expandida de lo q no lo es gracias!!!

Responder
JMiur  

Bocha:
No ve el script que estás usando. Sólo puedeo darte una idea pero no sé si son las variables que usas:

var verCero=lafecha[0].substr(0,1);
if (verCero == "0") {
lafecha[0]=lafecha[0].substr(1)
}


fday = "<div class='lafechaDia'>"+lafecha[0]+"</div>";

Eso en negrita sería una forma de elimianr ese cero extra.

Andres: No entiendo la pregunta.

Responder
|ANDRES|  

mmmm bueno lo que quiero decir esque yo consegui la plantilla Theme Beckett y como sabras es muy distinta a la que tu tienes solo quiero que quede ampliado eso seria editandola o solo cambio alguna cosa??? gracias

Responder
|ANDRES|  

tambien te keria pedir si me recomendarias alguna plantilla.... estilo como la que tu tienes o una mas obscura te lo agradeceria muchisimo de verdad muchisimo

Responder
JMiur  

Andres:
Recomendaciones, no tengo, eso es algo muy personal.

Esta plantilla sigue siendo la Beckett excepto por una cosa, tiene encima casi tres años de modificaciones :)

Hay un tutorial de cómo ampliar el blog. Eso puede darte una idea pero, en el caso de la Beckett, como utiliza varias imágenes como fondos, esas imágenes también deben ser redimensionadas y vueltas a subir. Es un trabajo delicado.

Responder
|ANDRES|  

mmm bueno ah y muy bueno el blog te felicito debes sentirte orgulloso al rato talvez me pase por aki denuebo ok... adios

Responder
Theemilio_crazy  

Mil Gracias Amigo, Si me funciono :D

Responder
JMiur  

Me alegro que se entendiera y funcionara :D

Responder
Luciano  

Genial. Pueden ver como lo he puesto en funcionamiento en mi sitio.


Muchas Gracias!!!

Saludos

Responder
EPA  

Hola !!!!.Estoy en un lio!!!..
a partir de la plantilla minima he modificado las entradas a "ancho total" y puse condicionales para ocultar cabecera, sidebar, menu, etc....
No sé que pasó ahora pero en el lugar de la cabecera (bien arriba) aparece javascript:void(0) !!! no es un link, le hago click y es texto!!...ya revisé mil veces la plantilla y no sé que puede ser y quiero borrarlo por supuesto...me ayudarias?...mil gracias por adelantado....
Saludos desde Paraguay...

Responder
JMiur  

Es posible que lo que veo en el código fuente n osea exactamente lo que se muestra en tu plantilla pero, veo eso texto colocado así:

<style>.fullpost{display:inline;}</style>javascript:void(0)

Si lo encuentras en la plantilla, simplemente borra ese javascript:void(0)

Responder
EPA  

Gracias!! Solucionado !!!..no me animaba a borrarlo !!!
(gracias por todos los trucos!!...muchos de ellos los he usado en el blog!!)
Muchos Saludos!!!

Responder
JMiur  

Perfecto :D

Responder
MariaMercedes Orueta  

Hola! en la sección de PAGINAS de mi blog había un sector que decía OCULTO y no sé porqué, desapareció. Cómo lo vuelvo a poner? gracias!

JMiur  

Es imposible responder eso.

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
De todos modos, también puede accederse a ellos a través de SkyDrive

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR