Foros del Web » Programando para Internet » Javascript » Frameworks JS »

Problema con slideDown

Estas en el tema de Problema con slideDown en el foro de Frameworks JS en Foros del Web. Hola amigos. Llevo tiempo echando un vistazo y no veo manera de porque pasa. En el código que pongo a continuación, el enlace de Búsqueda ...
  #1 (permalink)  
Antiguo 01/10/2010, 02:42
 
Fecha de Ingreso: febrero-2002
Ubicación: Valladolid
Mensajes: 83
Antigüedad: 19 años, 9 meses
Puntos: 1
Problema con slideDown

Hola amigos. Llevo tiempo echando un vistazo y no veo manera de porque pasa. En el código que pongo a continuación, el enlace de Búsqueda avanzada me visualiza una capa con slideDown, hasta ahí bien. Lo malo viene cuando descomento del código css, donde pone float:right, para posicionar una capa al lado de la otra, entonces falla. ¿que estoy haciendo mal?

Saludos.



Código PHP:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<
html xmlns="http://www.w3.org/1999/xhtml">
<
head>
    <
title></title>
    <
meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    
    <
style>
        
body background-color#c0d0d9; }
        #contenido { background-color:#ffffff; width:960px; position:relative; margin:0 auto; text-align:center; padding: 40px 0; min-height:400px;}
        #busqueda  { border:1px solid #6a9695; height:67px; width:940px; margin:0 auto; position:relative;}
        #busquedaAv { background-color:#cae7f5; border:1px solid #6a9695; border-top:none; height:100%; height:auto; width:940px; margin:0 auto; display:none; position:relative;}
        #busquedaAv  #bloque1 { width:430px; position:relative; float:left; text-align:right; padding-right:15px;}
        #busquedaAv  #bloque2 { width:430px; position:relative; float:right; text-align:right; padding-right:15px;}
        #busquedaAv .capaInput      { position:relative; /*float:right;*/ width:430px; font-size:14px; color:#000000; padding:10px 0;}
        #busquedaAv .capaInput span { padding-right:12px; text-align:left; font-weight:bold;}
        #busquedaAv .capaInput input{ position:relative; float:right; width:280px; height:18px;  font-weight:normal; border:1px solid #7f9db9;}
    
</style>

   
    <
script type="text/javascript" src="http://code.jquery.com/jquery-1.4.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $("#verBusqAv").click(function() {
                if ($("#busquedaAv").is(":hidden")) {
                    $("#busquedaAv").slideDown("slow");
                } else {
                    $("#busquedaAv").slideUp("slow");
                }
            });
        });
    </script>

</head>
<body>
        <div id="contenido">
                <div id="busqueda"><div id="verBusqAv"><a href="javascript:void(0)">Búsqueda Avanzada</a></div>
          </div>        
                <div class="both"></div>
                <div id="busquedaAv">
                  <div id="bloque1">
                    <div class="capaInput"><span>input1</span><input type="text" name="xxx" /></div>
                    <div class="capaInput"><span>input2</span><input type="text" name="xxx" /></div>
                    <div class="capaInput"><span>input3</span><input type="text" name="xxx" /></div>
                  </div>
                  <div id="bloque2">
                    <div class="capaInput"><span>input1</span><input type="text" name="xxx" /></div>
                    <div class="capaInput"><span>input2</span><input type="text" name="xxx" /></div>
                    <div class="capaInput"><span>input3</span><input type="text" name="xxx" /></div>
                  </div>
                </div>   
          <div class="both"></div>
        </div>
</body>
</html> 
  #2 (permalink)  
Antiguo 01/10/2010, 08:17
Avatar de mayid
Colaborador
 
Fecha de Ingreso: marzo-2009
Ubicación: BsAs
Mensajes: 4.014
Antigüedad: 12 años, 8 meses
Puntos: 101
Respuesta: Problema con slideDown

Por que necesitas divs, que son elementos de bloque? Con el span no bastaría?

Al tener contenidores flotantes, y ademas item flotantes, todo dentro de <div id="busquedaAv"> que tiene height automatico, imagino que todo se descalabra. Si mal no recuerdo eso se soluciona con un simple overflow: auto para el elemento "busquedaAv"

Fijate si podes mover tu tema a css, desde el menu Herramientas->mover tema.


Etiquetas: jquery, slidedown, slideup
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 20:37.