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.