Tema: Imposible posicionar divs al cargar la pagina con jQuery?
Ver Mensaje Individual
  #1 (permalink)  
Antiguo 02/05/2013, 11:05
Avatar de Carlmycol
Carlmycol
 
Fecha de Ingreso: diciembre-2007
Ubicación: Los Teques, Venezuela
Mensajes: 240
Antigüedad: 16 años, 11 meses
Puntos: 3
Imposible posicionar divs al cargar la pagina con jQuery?
Hola!

Les cuento el siguiente problema que no hallo como resolver: estoy haciendo una página en la cual posiciono un div con javascript, para que quede perfectamente centrado verticalmente y luego con respecto a ciertos elementos que están dentro de éste posiciono otros divs que en realidad son solo decoración (lineas).

El problema en cuestión es que al cargar la página no posiciona perfectamente las "líneas" (divs con 2px de ancho posicionados con javascript respecto a otros elementos)

Va más o menos así:


Código Javascript: 
Ver original
  1. <script type="text/javascript">
  2.     $(document).ready(function()
  3.     {       
  4.         if ($(window).height()>600)
  5.         {
  6.             centrar_vertical( $("#texto_intro"), $("body"));
  7.         } else {
  8.             centrar_vertical( $("#texto_intro"), $("#frame_1"));
  9.         }
  10.         
  11.         posicionar_lineas_decorativas();
  12.         
  13.         $(window).resize(function()
  14.         {
  15.             if ($(window).height()>600)
  16.             {
  17.                 centrar_vertical( $("#texto_intro"), $("body"));
  18.             } else {
  19.                 centrar_vertical( $("#texto_intro"), $("#frame_1"));
  20.             }
  21.             posicionar_lineas_decorativas();
  22.             
  23.             
  24.         });
  25.         
  26.         
  27.         
  28.     });
  29. </script>
Código HTML: 
Ver original
  1. ...
  2. <body>
  3. <div class="line" id="line3"></div>
  4. <div class="line" id="line4"></div>
  5.  
  6. <div id="wrapper">
  7.  
  8.     <div class="frame" id="frame_1">
  9.     
  10.         <div id="texto_intro">
  11.         
  12.             <p><span id="primera_linea">...</span><br/>
  13. ...
  14.             <span id="dar_recorrido">...</span>         </p>
  15.                 
  16.  
  17.    
  18.                 
  19.             
  20.             </div>
  21.         </div>
  22.     
  23.     </div>


Código Javascript: 
Ver original
  1. function posicionar_lineas_decorativas()
  2. {
  3. ...
  4.  
  5.         top_line_1 = $("#dar_recorrido").offset().top + $("#dar_recorrido").height() - 27;
  6.         left_line_1 = $("#dar_recorrido").offset().left + 5;
  7.         $("#line3").css('top', top_line_1 + 'px');
  8.         $("#line3").css('width', left_line_1 + 'px');
  9.         
  10.         top_line_1 = $("#dar_recorrido").offset().top + $("#dar_recorrido").height() - 33;
  11.         left_line_1 = $("#dar_recorrido").offset().left + 5;
  12.         $("#line4").css('top', top_line_1 + 'px');
  13.         $("#line4").css('width', left_line_1 + 'px');   
  14. ...
  15. }

Intenté llamando la funcion posicionar_lineas_decorativas() con un setTimeOut() pero no funcionó, lo intenté porque asumí que era porque el navegador tarde milésimas de segundos en posicionar el #texto_intro, y porque al hacer un alert dentro del javascript, logré que funcionara en mozilla.

No obstante... no creo que sea muy bonito un alert al entrar a un página xD Y aparte cuando le hago un resize a la ventana si se posicionan perfectamente o.O

Agradecería cualquier ayuda!

Muchas gracias de antemano!