[SOLUCIONADO] Columnas en Javascript, mediaqueries y jQuery

[xavierlight]

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:

<div id="main">
 
<div id="caja" class="col1 columna">
<section>
<div class="contenido">
<h2>Blog</h2>
<p>Contenido texto</p>
</div>
</section>
<div>
</div>
</div>
 
 
 
<div id="caja" class="col2 columna">
<aside>
<div class="contenido">
<h2>Sidebar</h2>
<p>Contenido texto</p>
</div>
</aside>
</div>
 
 
</div>
 

Código Javascript:

var ajusCOL = jQuery.noConflict();
function checkWidth(init){
ajusCOL.fn.equalHeight = function(){
    var maxHeight = 0;
    return this.each(function(index, box){
        var boxHeight = ajusCOL(box).height();
        maxHeight = Math.max(maxHeight, boxHeight);
    }).height(maxHeight);
};
 
if( document.documentElement.clientWidth > 760 ){       
ajusCOL('.columna').css('height','auto');
ajusCOL('.columna').equalHeight();
} else {
    if (!init){
return;
    }
  }  
}
 
ajusCOL(document).ready(function() {
        checkWidth(true);
    ajusCOL(window).resize(function() {
        checkWidth(false);
    });
});
 

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


Agradezco su ayuda.

[chwc]

mira, te digo que vas excelente. lo modfique y lo probe y funciona a la perfección !

Código Javascript:

function checkWidth(init){
ajusCOL.fn.equalHeight = function(){
    var maxHeight = 0;
    return this.each(function(index, box){
        var boxHeight = ajusCOL(box).height();
        maxHeight = Math.max(maxHeight, boxHeight);
    }).height(maxHeight);
};
 
if( document.documentElement.clientWidth > 760 ){       
ajusCOL('.columna').css('height','auto');
ajusCOL('.columna').equalHeight();
} else {
    ajusCOL('.columna').css('height','auto');
  }  
}
 

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

y otra cosa, me encanta el esquema de colores que usas !

[xavierlight]

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.