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

error con .show .hide y <div>

Estas en el tema de error con .show .hide y <div> en el foro de Frameworks JS en Foros del Web. por primera vez notengo problemas con ie, ahora es el crome, firefox y safari. Estoy manejando las capas con <div> para agrupar los contenidos, colocando ...
  #1 (permalink)  
Antiguo 19/05/2011, 12:18
Avatar de Eddy Ramos  
Fecha de Ingreso: marzo-2004
Ubicación: Tuxtla Gutiérrez, Chiapas
Mensajes: 98
Antigüedad: 16 años, 8 meses
Puntos: 1
error con .show .hide y <div>

por primera vez notengo problemas con ie, ahora es el crome, firefox y safari.
Estoy manejando las capas con <div> para agrupar los contenidos, colocando los efectos de jquery .show .hide, para hacer un acordeon que se mueve de forma horizontal.
El problemas es que en los navegadores que mencioné el contenedor se baja y se coloca en la parte inferior
el ejemplo esta en
http://studiobuque.com/demo/acordeon/prueba-acorden.html

index.html
Código HTML:
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <script src="script/jquery.js"></script>
  4. <script src="script/jquery-acordeon-1.1.js"></script>
  5.  
  6. </head>
  7.  
  8. <div class="grid_6 cuerpo">
  9.     <div style="display:block;">
  10.      
  11. <!--  Inicio -->
  12.         <div class="caja" id="caja_inicio">
  13.             <div class="caja_contenido" id="caja_cont_0">
  14.             <div class="entrada"">          
  15.  
  16. <!--  El texto aqui-->
  17.  
  18.             </div>
  19.             </div><!-- /caja_contenido -->
  20.         </div>
  21.        
  22. <!-- presentacion -->
  23.         <div class="caja" id="caja_presentacion">
  24.             <div class="caja_imagen">
  25.                 <a href="#" id="caja_img_1">
  26.                     <img id="caja_imagen_mostrar" src="img/boton.jpg" />
  27.                 </a>           
  28.             </div><!-- /caja_imagen -->
  29.             <div class="caja_contenido" id="caja_cont_1" style="">
  30.             <div class="entrada">
  31.  
  32. <!--  Mas texto aqui-->
  33.  
  34.             </div>
  35.             </div><!-- /caja_contenido -->
  36.         </div>
  37.        
  38. <!-- servicios -->
  39.         <div class="caja" id="caja_servicios">
  40.             <div class="caja_imagen">
  41.                 <a href="#" id="caja_img_2">
  42.                     <img id="caja_imagen_mostrar" src="img/boton.jpg" />                </a>            </div><!-- /caja_imagen -->
  43.             <div class="caja_contenido" id="caja_cont_2" style="">
  44.             <div class="entrada" >
  45.  
  46.             </div>
  47.             </div><!-- /caja_contenido -->
  48.         </div>
  49.        
  50. <!-- proyectos -->
  51.         <div class="caja" id="caja_proyectos">
  52.             <div class="caja_imagen">
  53.                 <a href="#" id="caja_img_3">
  54.                     <img src="img/boton.jpg" />
  55.                 </a>
  56.             </div><!-- /caja_imagen -->
  57.             <div class="caja_contenido" id="caja_cont_3" style="">
  58.             <div class="entrada" style=" padding-top:0px; overflow:hidden;">
  59.                
  60.             </div>
  61.             </div><!-- /caja_contenido -->
  62.         </div>
  63.        
  64. <!-- contacto -->
  65.         <div class="caja" id="caja_contacto" style="margin-top:20px;">
  66.           <div class="caja_imagen">
  67.                 <a href="#" id="caja_img_4">
  68.                     <img src="img/boton.jpg" />
  69.                 </a>   
  70.       </div><!-- /caja_imagen -->
  71.             <div class="caja_contenido" id="caja_cont_4" style="">
  72.             <div class="entrada">
  73.            
  74.             </div>
  75.             </div><!-- /caja_contenido -->
  76.         </div>
  77.     </div>
  78. </div><!-- /cuerpo -->
  79.  
  80. </body>
  81. </html>

jquery-acordeon-1.1.js
Código Javascript:
Ver original
  1. $(document).ready(function(){
  2.    
  3.     $("#caja_img_1").click(function(event){
  4.        $("#caja_cont_0").hide("slow");
  5.        $("#caja_cont_2").hide("slow");
  6.        $("#caja_cont_3").hide("slow");
  7.        $("#caja_cont_4").hide("slow");
  8.        $("#caja_cont_1").show("slow");
  9.     });
  10.     $("#caja_img_2").click(function(event){
  11.        $("#caja_cont_0").hide("slow");
  12.        $("#caja_cont_1").hide("slow");
  13.        $("#caja_cont_3").hide("slow");
  14.        $("#caja_cont_4").hide("slow");
  15.        $("#caja_cont_2").show("slow");
  16.     });
  17.     $("#caja_img_3").click(function(event){
  18.        $("#caja_cont_0").hide("slow");
  19.        $("#caja_cont_1").hide("slow");
  20.        $("#caja_cont_2").hide("slow");
  21.        $("#caja_cont_4").hide("slow");
  22.        $("#caja_cont_3").show("slow");
  23.     });
  24.     $("#caja_img_4").click(function(event){
  25.        $("#caja_cont_0").hide("slow");
  26.        $("#caja_cont_1").hide("slow");
  27.        $("#caja_cont_2").hide("slow");
  28.        $("#caja_cont_3").hide("slow");
  29.        $("#caja_cont_4").show("slow");
  30.     });
  31.  
  32. });


Ya busque en google pero no encontré la solución
Graciass
  #2 (permalink)  
Antiguo 19/05/2011, 14:03
Avatar de Eddy Ramos  
Fecha de Ingreso: marzo-2004
Ubicación: Tuxtla Gutiérrez, Chiapas
Mensajes: 98
Antigüedad: 16 años, 8 meses
Puntos: 1
Respuesta: error con .show .hide y <div>

el problema es que se pasa el div de los contenidos a la parte inferior y no logro arreglarlo, estoy comenzando a utilizar jquery
  #3 (permalink)  
Antiguo 19/05/2011, 14:53
Avatar de Eddy Ramos  
Fecha de Ingreso: marzo-2004
Ubicación: Tuxtla Gutiérrez, Chiapas
Mensajes: 98
Antigüedad: 16 años, 8 meses
Puntos: 1
Respuesta: error con .show .hide y <div>

Ya listo
El problema no fue de jquery lo probe cambiando el .hide y . show entre "slow" "fast", no funciono seguian saltando las cajas abajo.
Solo quite el div que de caja

Código HTML:
Ver original
  1. <!-- presentacion -->
  2.         <div class="caja" id="caja_presentacion">
  3.             <div class="caja_imagen">
  4.                 <a href="#" id="caja_img_1">
  5.                     <img id="caja_imagen_mostrar" src="img/boton.jpg" />
  6.                 </a>            
  7.             </div><!-- /caja_imagen -->
  8.             <div class="caja_contenido" id="caja_cont_1" style="">
  9.             <div class="entrada">
  10.  
  11. <!--  Mas texto aqui-->
  12.  
  13.             </div>
  14.             </div><!-- /caja_contenido -->
  15.         </div>

quedando así

Código HTML:
Ver original
  1. <!-- presentacion -->
  2.             <div class="caja_imagen">
  3.                 <a href="#" id="caja_img_1">
  4.                     <img id="caja_imagen_mostrar" src="img/boton.jpg" />
  5.                 </a>            
  6.             </div><!-- /caja_imagen -->
  7.             <div class="caja_contenido" id="caja_cont_1" style="">
  8.             <div class="entrada">
  9.  
  10. <!--  Mas texto aqui-->
  11.  
  12.             </div>
  13.             </div><!-- /caja_contenido -->

Etiquetas: hide, javascript, jquery, show
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 23:08.