JMiur [E]

Por ahí se dice que las transiciones con CSS, a la larga, reemplazarán a los scripts pero, eso es una exageración ya que, como toda herramienta, sólo suma posibilidades en lugar de restarlas y eso es lo bueno; nos permite tener más opciones y no tener que atarnos a determinadas cosas.

Veamos los casos típicos de mostrar y ocultar elementos; inevitablemente, requerimos alguna clase de script porque con CSS no podemos interactuar con clicks del ratón. Una función elemental que hace esto podría ser así:
function SINO(cual) {
   var elElemento=document.getElementById(cual);
   if(elElemento.style.display == 'block') {
      elElemento.style.display = 'none';
   } else {
      elElemento.style.display = 'block';
   }
}
Que usaríamos de este modo, ya sea con un enlace o con cualquier otra etiqueta:
<div id="demo1" style="display:none;">El elemento que está oculto.</div>
<a href="javascript:void(0);" onclick="SINO('demo1')">Mostar / Ocultar</a>
Mostar / Ocultar

Lo que hace esa función es permutar el estado de la propiedad display; si no se ve la mostramos (display:block) y si está visible la ocultamos (display:none). Como ese DIV "oculto" no ocupa espacio, al estar arriba del botón, cuando se "ve", desplaza el contenido hacia abajo pero no hace falta usar esa propiedad, podemos usar otras como visibility en cuyo caso, el contenido no se verá pero el espacio que ocuparía si:

function SINO(cual) {
   var elElemento=document.getElementById(cual);
   if(elElemento.style.visibility == "visible") {
      elElemento.style.visibility = "hidden";
   } else {
      elElemento.style.visibility = "visible";
   }
}

Mostar / Ocultar

O la propiedad opacity donde pasaría lo mismo que en el caso anterior, ese DIV ocupa espacio aunque su contenido no sea visible:

function SINO(cual) {
   var elElemento=document.getElementById(cual);
   if(elElemento.style.opacity == "1" || elElemento.style.filter == "alpha(opacity=100)") {
        elElemento.style.opacity = "0";
        elElemento.style.filter = "alpha(opacity=0)";
   } else {
        elElemento.style.opacity = "1";
        elElemento.style.filter = "alpha(opacity=100)";
   }
}

El elemento que está oculto.
Mostar / Ocultar

En JavaScript Fade Tutorial – Fading Elements In/Out nos muestran un script para mostrar y ocultar elementos con un efecto de fade que podemos aplicar a cualquier elemento que se nos ocurra.

<script>
var fadeEffect=function() {
  return{
    init:function(id, flag, target){
      this.elem = document.getElementById(id);
      clearInterval(this.elem.si);
      this.target = target ? target : flag ? 100 : 0;
      this.flag = flag || -1;
      this.alpha = this.elem.style.opacity ? parseFloat(this.elem.style.opacity) * 100 : 0;
      this.si = setInterval(function(){fadeEffect.tween()}, 20);
    },
    tween:function() {
      if(this.alpha == this.target){
        clearInterval(this.si);
      } else {
        var value = Math.round(this.alpha + ((this.target - this.alpha) * .05)) + (1 * this.flag);
        this.elem.style.opacity = value / 100;
        this.elem.style.filter = 'alpha(opacity=' + value + ')';
        this.alpha = value
      }
    }
  }
}();
</script>

<style>
  .divbotones {
    height:35px;
    margin:0 auto;
    width: 500px;
  }
  .elboton {
    background-color: #CCC;
    border: 1px solid #EEE;
    border-radius: 3px;
    color:#555;
    cursor:pointer;
    padding: 4px 0 5px;
    text-align:center;
    width:200px;
  }
  .elboton:hover {
    background-color: #D9D9D9;
    border: 1px solid #FFF;
    color: #333;
  }
  .sinodemos {
    background:#355C33;
    border:1px solid #548954;
    border-radius:3px;
    color:#79AF72;
    height:26px;
    margin-bottom:10px;
    padding:9px 10px 0;
    text-shadow:1px 1px #21341D;
  }
  #demoFADE {
    opacity:0;
    filter:alpha(opacity=0);
  }
</style>

<div id="demoFADE" class="sinodemos"> El elemento que está oculto. </div>
<div class="divbotones">
  <div class="elboton" onclick="fadeEffect.init('demoFADE', 1)" style="float:left">Fade In</div>
  <div class="elboton" onclick="fadeEffect.init('demoFADE',0)" style="float:right">Fade Out</div>
</div>

El elemento que está oculto.
Fade In
Fade Out

Es interesante ver la entrada de ese sitio porque se han tomado el trabajo de escribir una explicación muy detallada de lo que hace el código (está en inglés) y sin embargo, algunos comentarios dicen cosas tales como: "bah, usando jQuery.fadeIn() se consigue lo mismo". De alguna manera, esa clase de comentarios que pretenden ser "modernos" sólo muestran ignorancia porque, si bien la afirmación es cierta, parecería que cierto tipo de personas estan realmente convencidas del fin de la historia así que mejor quedarse quieto, no aprender, no experimentar, no jugar, total, ya todo está inventado. Y eso es falso y recontra-falso.

Por suerte, hay quienes no creen así: "las librerías son importantes y claro, nos ahorran tiempo pero también es importante tanto para principiantes como para personas con conocimientos medios, tener tutoriales que expliquen cómo funcionan las cosas".

Concuerdo con esa idea y agregaría que el uso de cualquier herramienta (las librerías son eso) siempre debe estar acompañado de una mínima dosis de entendimiento. Usar una librería para poner un efecto simple en un botón es, como mínimo, un desperdicio porque en última instancia, lo que hacen no es otra cosa que facilitarnos tareas pero de ninguna manera son códigos más simples; por el contrario, son mucho más sofisticados y requieren muchos más procesos.

No hay nada malo ni nada bueno en estas cosas ya que están fuera de cualquier ética, sólo son herramientas que usamos o no usamos. Ya sé, estamos en plena moda de jquerismo y habrá que soportar el temporal pero también habrá que recordar que nunca hay solo un método para conseguir un resultado; que siempre hay alternativas y que toda moda, decía mi abuela, es pasajera.

Por ejemplo, esta sería una forma de hacer algo similar a lo anterior con un script más rudimentario pero aprovechándose de la propiedad transition por lo que su resultado final estará limitado a todos los navegadores modernos a excepción de Internet Explorer:
function fadeEffectTRANS(id,valor) {
  var cual = document.getElementById(id);
  cual.style.opacity = valor;
  cual.style.filter = 'alpha(opacity=' + valor + ')';
}

El elemento que está oculto.
Fade In
Fade Out

Obviamente, nadie sugiere cambiar una cosa por otra ya que el script original es soportado por todos los navegadores pero, para quien quiera arriesgarse, bastaria modificar el CSS y que quedara así:
#demoFADE {
  opacity:0;
  filter:alpha(opacity=0);
  -moz-transition: all 1s ease-in-out;
  -webkit-transition: all 1s ease-in-out;
  -o-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;
}

Algo similar podemos hacer con el primer script, tambien allí basta que agreguemos la propiedad transition al CSS para que se anime el efecto aunque, en ese caso, siempre debemos hacerlo con propiedades que tengan valores progresivos; display y visibility no nos sirven ya que pasan de un estado a otro de manera inatantánea; así que lo más cómodo es usar opacity; y en este caso, aunque en IE seguirá funcionando igual aunque sin esa animación:

El elemento que está oculto.
Mostar / Ocultar

37 comentarios:

admin  

hola JMiur,
Como se puede ocultar los gadgets al expandir las entradas? se puede hacer eso? y como se pueden ocultar del todo. Gracias

Responder
JMiur  

Se puede ocultar la sidebar completa, se pueden ocultar widgets o gadgets específicos condicionándolos o usando CSS, hay muchas formas pero todo depende de lo que realmente se quiera hacer, de que gadgets son, etc.

Responder
Tapestryworkerman  

Hola JMiur.
Te leo desde hace tiempo, incluso te tengo en mi paginilla como referente, pero hasta ahora no he tenido la imperiosa necesidad de dar la total conformidad a tus palabras.
No entiendo nada de códigos y casi todo lo que explicas, me suena a chino del chungo... y no es por tu culpa, que te quede claro ;)
Así que me guardo lo de los fades para cuando tenga unos días para trastear, por cierto: ¿el elemento oculto ocupa el mismo espacio que cuando es visible?, y si es así ¿hay alguna manera de que desaparezca dicho hueco?.
Muchas gracias por tus sabios consejos y hasta pronto.
Un saludo.

Responder
JMiur  

Tapestryworkerman:

Un elemento se puede ocultar de varias formas pero, digamos que hay dos básicas:

usando la propiedad visible: hidden; el espacio que ocupa sigue existiendo y lo que no se ve es el contenido así que se ve un "hueco". Eso se usa en determinados casos.

usando la propeidad display:none; desaprece el contenido y también desaparece el contenedor así que no queda un "hueco"; es como si tuviera una dimensión de cero y supongo que es esa la que debes usar:

display:none; oculta el elemento
display:block; muestra el elemento

Responder
m3nd3z  

Disculpa salirme del tema, pero....conoces alguna forma de mostrar un reloj con hora UTC?

Responder
JMiur  

Cualquier reloj realizado con JavaScript podrá hacer eso porque es un lenguaje que permite formatear ese dato de distintas maneras; es cuestión que simplemente busques en al web.

Responder
Beben Koben  

cool cool :D

Responder
Tapestryworkerman  

Agradecido sobremanera... hasta te he entendido y todo ;)
Lo dicho, en cuanto encuentre hueco en la agenda lo intento.
Muchas gracias por tu tiempo.
Un saludo.

Responder
deathdan93  

Me gustaría saber como se podría aplicar a esto un efecto "TOOGLE" sin usar ninguna librería JavaScript. ¿Hay alguna manera?

Responder
JMiur  

Eso es lo que muestra la función function SINO(cual) {}

Responder
Music  

Hola, ya hace tiempo he buscando por toda la red algo que tengo en mi cabeza hacer, pues no se como hacerlo porque en sí, no sé nada sobre html o css, pero leyendo mucho he logrado aprender, pero al grano, mi pregunta es la siguiente y creo que se puede hacer con este tema escrito en esta entrada.
Aver, me explico trato de reproducir videos (que no son de youtube)en una sola pagina sin tener que cargar otra, pero de una forma asi tipo pestañas (tabs), osea en uno se sus entradas (http://vagabundia.blogspot.com/2009/03/tres-tabs-tres.html) intente hacer eso, colocando en cada pestaña un video distinto, lo que sucede es que al abrir la pagina todos los videos, que se reproducen automaticamente, se reproducen a la vez y es todo un caos total, lo que queria hacer es que cada vez que des click en una pestaña se reprodusca recien el video y quizas el que ya se ah estado viendo antes, al dar click en otro, este se pare y así. Y yo me digo que esto debe tener algo que ver con esta entrada de "ver y mostrar" quizas necesite colocar una variante como esta a cada pestaña para que pueda reproducir solo el video que se da click en la pestaña mientras los otros no se reprodustan. O la otra opcion que pense hacer, y no se como hacerlo, es el caso del ejemplo CUARTO de esta entrada, que digamos al dar clic a "fade out" desaparesca el elemento anterior y a la vez aparesca otro, asi a lo tiempo pestañas como pensaba hacer. Realmente, NO SÉ, como hacer la idea que tengo, y espero que me alla entendido, y que quizas me ayude un poco a hacer eso que trato, se lo agradecería demasiado.

Responder
JMiur  

Que el video se auto-ejecute o no, depende de las opciones que tenga el servicio o reproductor que se esté utilizando. Si posee la posibilidad de definir el autoplay o no.
Los objetos de Flash tienen sus particularidades y los reproductores objetos de Flash.
Ver y ocultar algo no implica que el contenido se ejecute o deje de ejecutarse, mira los demos de la entrada que indico para ver qué ocurre en cada caso pero, insisto, muchas de esas cosas dependen del tipo de reproductor que se usa.

Responder
Music  

Sí, entiendo muy bien lo que dice, pero quisiera darle un ejemplo de lo que quiero hacer y en esta página lo encontré: http://play.tuteve.tv cómo se da cuenta figuran 4 canales y al dar clic a otro canal el otro se apaga y se reproduce el que se dió clic, esto es lo que quiero hacer, no sé, realmente, cómo hacerlo, no me sale, y quisiera saber si tiene una idea de cómo se hizo eso, y que me diga cómo hacerlo, o que bueno que le dedique una entrada a algo como esto, que lo noto muy interesante. Muchas gracias, por su molesta. Saludos desde Perú.

Responder
Music  

Lo encontré, esto: http://smple.com/videoGallery/ Esto es lo que quiero hacer, lo que buscaba, con la unica cosa es que NO SE como insertarlo en una entrada, no entiendo como hacerlo. T_T

Responder
JMiur  

Eso es distinto ya que no se trata de tener vaios videos cada uno en una solapa sin ode tener uno solo y cambair su contenido mediante un enlace. Es una idea similar a esta o a cualquier otra que escriba el código HTML mediante JavaScript.

No puedo darte detalles de esa en particular porque no la he probado y no uso jQuery.

Responder
ISRAEL JOSUE PARRA ROSALES  

Buen aporte da buen diseño a la pagina!!!

Responder
tifa  

Excelente! me encanta :D gracias por compartir !!!

Responder
Erico  

Hola mi problema es que añadi un slider jquery, y me gustaria que esté solo en la portada, y no,por ejemplo, cuando seleccionamos algo del menu,saludos

JMiur  

Utiliza los condicionales de Blogger; hay uno en particular para que algo sólo funcione en el home del sitio.

Responder
Marcelo  

Muy bueno tu blog, y aprovecho a preguntarte ya que soy bastante novato. Estoy haciendo unas paginas de presentación que tienen mucho texto -unos 10 párrafos mas o menos-, y quiero realizar un efecto en el que al abrir la página cada párrafo vaya apareciendo automáticamente (uno por vez) en un tiempo determinado y que quede visible, (no se vuelva a ocultar).
Puedes darme una mano en cómo realizar esto o por donde buscar? se agradece!

JMiur  

Eso es imposible de responder. Habría que hacer un script y probarlo. Deberías buscar en al web algo parecido a lo que quieres hacer y partir desde allí.

Responder
Adrian Fabrizio  

En que parte del código pongo el elemento a mostrar/ocultar ???...

JMiur  

Allí donde quiereas mostrarlo.

ARIEL EL  

hola queria saber si podias dar una ayuda, veo tu codigo y no encuentro un ejemplo como lo que quiero hacer, te comento lo que quiero hacer, tengo dos divs con dos listados cada uno, entonces en un div el listado 1 esta ordenado alfabeticamente, en el otro div el listado 2, entonces necesito por medio de dos botones mostrar el div 1 con sus listas y si preciono el otro boton oculto el div 1 y muestro el dos luego si precione el boton anterior oculto el div 2 y muestro el 1. pero con un efecto slidetoggle, cosa que no encuentro en tus ejemplos, si bien se puede hacer con jquery entiendo tu postura de que asi no se aprende y me gustaria aprender a hacerlo sin depender de librerias. si puedes ayudarme gracias saludos ariel.

JMiur  

Para simular el efecto slideToggle de jQuery, tal vez puedas usar transiciones CSS con la propiedad height si es que sabe la altura del elemento o posicionar de modo absolutouy usar la propiedad top pero, todo eso dependerá del ejemplo concreto.

ARIEL EL  

JMiur gracias por responder. en realidad lo tengo echo en jquery pero no puedo lograr el efecto que al mostrar un div me oculte el otro si estava visible y viceversa. Si no es molestia te paso el codigo asi los ves y si tienes una idea de como hacer me dices.

te paso el codigo que tengo

script type="text/javascript">
$(document).ready(function(){
$("#botontiaz").click(function () {
$("#tituloaz").each(function() {
displaying = $(this).css("display");
if(displaying == "block") {
$(this).slideToggle('2500',function() {
$(this).css("display","none");
});
} else {
$(this).slideToggle('2500',function() {
$(this).css("display","block");
$("traduccionaz").css("display","none");
});
}
});
});
});
$(document).ready(function(){
$("#botontraz").click(function () {
$("#traduccionaz").each(function() {
displaying = $(this).css("display");
if(displaying == "block") {
$(this).slideToggle('4500',function() {
$(this).css("display","none");
});
} else {
$(this).slideToggle('4500',function() {
$(this).css("display","block");
});
}
});
});
});
/script>


espero me puedas ayudar. muchas gracias

JMiur  

Tendría que saber cuál es la estructura HTML de eso para entender qué quieres hacer.

Por otro lado, se ven varios detalles:

1. no es necesario tener dos $(document).ready() ya que ambas cosas pueden estar en el mismo

2. Haces esto $("#tituloaz").each(function() sobre un elemento con un ID y eso no es correcto ya que si el elemento se identifica con un ID, solo debe haber uno y por lo tanto el each es innecesario, se puede acceder directamente a su contenido:
$("#tituloaz").css("display");

3.Estás evaluando la propiedad display de un elemento y en función de esa propiedad, ejecutas dos cosas un slideToggle() y luego lo ocultas con lo que algo no debe andar ya que slideToggle() permuta la visibilidad. Es confuso ya que no se que estás evaluando.

4. En jQuery, se puede usar el selector para saber si un elemento está oculto o es visible:

if($(this).is(':visible')) { /* es visible */ } else { /* esta oculto */ }

o la inversa:

if($(this).is(':hidden')) { /* esta oculto */ } else { /* es visible */ }

ARIEL EL  

HOLA JMiur buenos dias
antes que nada muchas gracias por responder.

con respecto a lo que me comentas anteriormente, como te decia no tengo mucha experiencia en jquery, asi que estube revisando varios blogs donde encontraba las funciones y trataba de interpretar como se arma la estructura y poder aplicarla a mi html, con lo que encontre esta funcion armada y al aplicarla logre que hiciera el efecto que quiero pero no puedo lograr que se muestre un div y ocultar el otro al mismo tiempo si te sirve te paso por mail el html para que lo veas funcionando. confirmame tu mail y te lo envio

JMiur  

Como te dije,para poder responder con más exactitud, debería ver el código completo.

En general, suponiendo que hay dos botones y dos divs o cualquier otro contenedor donde al hacer click en esos botones, se permuta la visibilidad de los contenedores todo se resuelve de modo más sencillo. Por ejemplo si en contenedor 1 es visible por defecto yel 2 está oculto:

$("#boton1,#boton2").click(function () {
$("#contenedor1,#contenedor2").toggle();
});

ARIEL EL  

JMiur

te parece que te pase el codigo completo por mail para que veas lo que arme y me puedas alludar. entiendo la estructura que me planteas voy a intentar armarla y si no me funciona te vuelvo a preguntar

ARIEL EL  

ahi te mande un mail con el html a la direccion de vagabundia@gmail.com, avisame si encontras alguna solucion o me podes decir que hago mal.

JMiur  

Recibido y respondido.

Responder
ARIEL EL  

Hola MJiur
ya te pase el mail con la descripcion que me pedias para entender la estructura que arme y que es lo que intento hacer. espero me puedas ayudar gracias

ARIEL EL  

HOLA JMiur
muchas gracias por la ayuda realmente quedo como queria hace lo que queria, anda espectacular. la verdad con el otro codigo no iva a llegar nunca al resultado por lo que veo en el que me pasaste. muchas gracias de verdad. ahora voy a empezar a intentar armar el buscador si no es molestia te puedo pedri ayuda.

Responder
Patricio Olivares Saldaña  

Realmente te felicito por la simpleza y limpieza del código.

Hoy en día todo lo que uno busca por simple que sea incluye JQuery o AJAX...cuando lo realmente simple y sencillo sigue existiendo en JavaScript y es multiplataforma :)

Muchas gracias!

Responder
fgutiro  

buenas tardes, queria saber como se puede ocultar de una pagina, segun el usuario que ingrese, es decir su roll, como se podria hacer para validarlo, gracias

JMiur  

Las publicaciones en Blogger son privadas o públicas; no hay términos medios.

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