Foros del Web » Programando para Internet » Jquery »

[SOLUCIONADO] Columnas en Javascript, mediaqueries y jQuery

Estas en el tema de Columnas en Javascript, mediaqueries y jQuery en el foro de Jquery en Foros del Web. Hola a todos, Estoy buscando la solucion para activar y desactivar una funcion la cual mantiene la altura de dos columnas iguales cada vez que ...
  #1 (permalink)  
Antiguo 27/05/2013, 13:51
 
Fecha de Ingreso: abril-2010
Mensajes: 11
Antigüedad: 14 años
Puntos: 0
De acuerdo Columnas en Javascript, mediaqueries y jQuery

Hola a todos,

Estoy buscando la solucion para activar y desactivar una funcion la cual mantiene la altura de dos columnas iguales cada vez que cambie el tamaño de la pantalla como en los temas adaptables, pero la funcion se mantiene activa y me gustaria que si la pantalla tiene un ancho menor a 760px, el codigo quedara inactivo porque si no las columnas tendrian siempre el mismo tamaño; estoy usando la libreria jQuery 1.7.2; ya se me acabaron las ideas y por eso recurro en su ayuda para resolver este imprevisto:


Código HTML:
Ver original
  1. <div id="main">
  2.  
  3. <div id="caja" class="col1 columna">
  4. <div class="contenido">
  5. <h2>Blog</h2>
  6. <p>Contenido texto</p>
  7. </div>
  8. <div>
  9. </div>
  10. </div>
  11.  
  12.  
  13.  
  14. <div id="caja" class="col2 columna">
  15. <div class="contenido">
  16. <h2>Sidebar</h2>
  17. <p>Contenido texto</p>
  18. </div>
  19. </div>
  20.  
  21.  
  22. </div>



Código Javascript:
Ver original
  1. var ajusCOL = jQuery.noConflict();
  2. function checkWidth(init){
  3. ajusCOL.fn.equalHeight = function(){
  4.     var maxHeight = 0;
  5.     return this.each(function(index, box){
  6.         var boxHeight = ajusCOL(box).height();
  7.         maxHeight = Math.max(maxHeight, boxHeight);
  8.     }).height(maxHeight);
  9. };
  10.  
  11. if( document.documentElement.clientWidth > 760 ){      
  12. ajusCOL('.columna').css('height','auto');
  13. ajusCOL('.columna').equalHeight();
  14. } else {
  15.     if (!init){
  16. return;
  17.     }
  18.   }  
  19. }
  20.  
  21. ajusCOL(document).ready(function() {
  22.         checkWidth(true);
  23.     ajusCOL(window).resize(function() {
  24.         checkWidth(false);
  25.     });
  26. });

Para que vean como funciona, monte un ejemplo en el siguiente vinculo http://cyberiastudio.com/columnas/


Agradezco su ayuda.
  #2 (permalink)  
Antiguo 27/05/2013, 15:29
Avatar de chwc  
Fecha de Ingreso: julio-2008
Ubicación: Buenos Aires ! :D
Mensajes: 814
Antigüedad: 15 años, 8 meses
Puntos: 103
Respuesta: Columnas en Javascript, mediaqueries y jQuery

mira, te digo que vas excelente. lo modfique y lo probe y funciona a la perfección !
Código Javascript:
Ver original
  1. function checkWidth(init){
  2. ajusCOL.fn.equalHeight = function(){
  3.     var maxHeight = 0;
  4.     return this.each(function(index, box){
  5.         var boxHeight = ajusCOL(box).height();
  6.         maxHeight = Math.max(maxHeight, boxHeight);
  7.     }).height(maxHeight);
  8. };
  9.  
  10. if( document.documentElement.clientWidth > 760 ){      
  11. ajusCOL('.columna').css('height','auto');
  12. ajusCOL('.columna').equalHeight();
  13. } else {
  14.     ajusCOL('.columna').css('height','auto');
  15.   }  
  16. }

de paso, no tenes alguna idea de como hacerlo con css ¿?

y otra cosa, me encanta el esquema de colores que usas !
__________________
Hangouts de JavaScript todos los jueves 20hs GMT, Unite !
https://plus.google.com/u/0/108504944676960830886
  #3 (permalink)  
Antiguo 27/05/2013, 16:15
 
Fecha de Ingreso: abril-2010
Mensajes: 11
Antigüedad: 14 años
Puntos: 0
De acuerdo Respuesta: Columnas en Javascript, mediaqueries y jQuery

Hola amigo, muchas gracias por tu ayuda, funciono de maravilla, vi algunas maneras con css buscando en google, pero ninguna de ellas funciona, por eso queria usar este codigo.

Muchas gracias por tus comentarios, tu ayuda me sirvio muchisimo.


Etiquetas: adaptable, javascript, responsive
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:42.