Siempre aparece alguien con la "Gran Solución JQuery".
No hace falta cargar una library por esta güevada. Como dije recién, con un simple escript, alcanza. Tiene que estar por ahí, yo estoy seguro de haber hecho uno para dos columnas. En los menúes suele haber más botones (que se comportan como "columnas a igualar"), así que a ése habría que mejorarlo.
· · ·
· · ·
Estee... para no cargar un jquery, se puede cargar otra library, que sea exclusivamente para ajustar columnas en un contenedor; y no un "multipropósito". Sería más chica y liviana.
La idea es crear un documento con "columnas" (pueden ser
div's como bloques en línea) dentro de un contenedor (o "caja" del menú) y a éste darle una clase como referencia, para saber que es el elemento al que hay que igualarle los botones que tiene adentro.
Con este framework, se igualan las alturas de todos/as los/las botones/columnas que tenga adentro una caja con clase
'eq'. Que como es clase, puede ir combinada con cualquier otra para darle su formato al bloque.
No tengo de dónde descargar el archivo, pero les dejo una copia.
fquery_colEq0_1.fur
Código:
var nodoRaiz;
function arbol(TW){
return document.createTreeWalker(nodoRaiz[c], NodeFilter.SHOW_ELEMENT, null, false);
}
function ajusta(){
nodoRaiz = document.getElementsByClassName("eq");
for(c=0; c<nodoRaiz.length; c++){
var alturaMax = 0;
var ref0 = arbol(c);
var ref1 = arbol(c);
var comparaIni= ref0.firstChild();
alturaMax = comparaIni.clientHeight;
while (ref0.nextSibling()){
alturaMax = ref0.currentNode.clientHeight > alturaMax ? ref0.currentNode.clientHeight : alturaMax;
}
var igualaIni= ref1.firstChild();
igualaIni.style.height = alturaMax+"px";
while (ref1.nextSibling()){
ref1.currentNode.style.height = alturaMax+"px";
}
}
}
onload = ajusta;
Y un documento de ejemplo para probarlo sería.
Código:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<meta http-equiv=Content-Type content="text/html; charset=utf-8">
<title>BOTONERAS CON IGUAL ALTURA DE BOTONES.</title>
<script type="text/javascript" src="fquery_colEq0.1.fur"></script>
<style type="text/css">
.contenedor0 {background-color: blue; padding: 10px;
font: bold 16px/120% sans-serif; }
.contenedor1 {background: lime; font: bold 18px/120% monospace; text-align: center; }
.columna0 {display: inline-block; background-color: red; border: 10px solid green;
vertical-align: top; }
.columna1 {display: inline-block; background-color: silver; border: 5px solid maroon;
vertical-align: top; padding: 5px; }
</style>
</head>
<body>
<h2>Un menú.</h2>
<div class="contenedor0 eq">
<div class=columna0>Alfa</div>
<div class=columna0>Bravo <br>Charly</div>
<div class=columna0>Delta <br>Eco <br>Foxtrot</div>
<div class=columna0>Golf <br>Hotel <br>Indio <br>Julieta</div>
</div>
<h2>Otro menú.</h2>
<div class="contenedor1 eq">
<div class=columna1>Kilo</div>
<div class=columna1>Lima <br>Mike <br>Noviembre <br>Oscar</div>
<div class=columna1>Papa <br>Quebec <br>Romeo</div>
<div class=columna1>Sierra <br>Tango</div>
<div class=columna1>Uniforme <br>Victor <br>Wisky <br>Xrayo </div>
<div class=columna1>Yankee <br>Zulu</div>
</div>
</body>
</html>
Por supuesto que para probar, los dos archivos van en el mismo directorio.
Un detalle importante, es que la extensión puede no ser reconocida por algún navegador. Va a funcionar igual, pero en la consola seguramente va a avisar que es un *.fur .
Otro detalle, mucho más importante, es que olvidé que ese método no es compatible con versiones viejas de IE. Así que en la 7 o inferiores seguro no anda.
Pero supongo que se puede arreglar.
P.D.: Soy una porquería...
pero bueno, mi intención es aprender.
por que para height px si, y porcentajes no?
.
