Foros del Web » Programando para Internet » Jquery »

Usar height en un elemento invisible (hidden)

Estas en el tema de Usar height en un elemento invisible (hidden) en el foro de Jquery en Foros del Web. Estoy creando un menú superior desplegable que tiene otro debajo que se queda fijado en la parte superior cuando se hace scrolldown. El problema es ...
  #1 (permalink)  
Antiguo 18/05/2014, 05:18
Avatar de seozeta  
Fecha de Ingreso: junio-2013
Mensajes: 98
Antigüedad: 11 años, 5 meses
Puntos: 66
Usar height en un elemento invisible (hidden)

Estoy creando un menú superior desplegable que tiene otro debajo que se queda fijado en la parte superior cuando se hace scrolldown. El problema es que el funcionamiento del menú fijado depende del alto que sea el menú desplegable de arriba. Cuando está plegado mide 34px, pero cuando está abierto puede variar el alto según los enlaces que contenga.

Cuando se carga la página, el menú óbviamente está plegado y HEIGHT me calcula los 34px automáticamente. Cuando lo despliego, hay otro elemento que se hace visible (.menuwrap), pero me sigue tomando los 34px porque son los que HEIGHT calculó al cargar la página, y en ese momento .menuwrap estaba invisible (hidden).

Os pongo mi código a ver qué podemos hacer:

Código Javascript:
Ver original
  1. $("document").ready(function($){
  2.     if ($('#condensed-header').length){ //Si hay esta versión del menú
  3.         var nav = $('#condensed-header');
  4.         if ($('#topnav').length){ //Comprueba que tenga activada la navegación superior
  5.            
  6.             if ($(".mobile-top-button").is(":hidden")) { //Si no es versión responsive
  7.                 var height = 3 + $("#topnav .menuwrap").height();
  8.             } else {
  9.                
  10.                 //Si el menú no está desplegado
  11.                 if($("#topnav .menuwrap").is(":hidden")) {
  12.                     height = 3 + $(".mobile-top-button").height();
  13.                 } else {
  14.                     height = 3 + $("#topnav").height(); //NO CALCULA ESTE HEIGHT
  15.                 }
  16.             }          
  17.            
  18.         } else {
  19.             height = 3;
  20.         }
  21.  
  22.     $(window).scroll(function () {
  23.             if ($(this).scrollTop() > height) {
  24.                 nav.addClass("f-nav");
  25.             } else {
  26.                 nav.removeClass("f-nav");
  27.             }
  28.     });
  29.     }
  30. });
  #2 (permalink)  
Antiguo 18/05/2014, 10:01
Avatar de seozeta  
Fecha de Ingreso: junio-2013
Mensajes: 98
Antigüedad: 11 años, 5 meses
Puntos: 66
Respuesta: Usar height en un elemento invisible (hidden)

El funcionamiento del despliegue del menú era culpa de no estar incluído dentro la función click:

Código Javascript:
Ver original
  1. height = 3 + $("#topnav .mobile-top-button").height();
  2.                
  3. $(".mobile-top-button").click(function() {
  4.                
  5. if($("#topnav .menuwrap").is(":visible"))  {
  6.     height = 3 + $("#topnav .mobile-top-button").height() + height_open;
  7. }
  8. });

Cuando es responsive, la altura es la del botón del menú. En caso de click, se comprueba si el contenedor es visible y se asigna una nueva altura. Ahora el problema que tengo es que cuando cierro el menú, no me devuelve la altura inicial. Alguna sugerencia?

Etiquetas: elemento, height, invisible, usar
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 09:09.