Foros del Web - Ver Mensaje Individual

emprear · #9 (**permalink**) 14/12/2012, 20:34

Repuesto de la sorpresa del forzoso retiro de @furoya, quiero dejar aqui, para cerrar este capítulo, un último código de su autoría que me pasó oportunamente con el objeto que que lo testease en las diferentes versiones de IE, ya que el no disponía de como hacer dichas pruebas, dejo el código "as is" por si alguien quiere experimentar con el

html

Código HTML:

Ver original<!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>
<style type="text/css">
.contenedor0 {background-color: blue; padding: 10px; text-align: right; 
font: bold 16px/120% sans-serif; white-space: nowrap; }
 
.columna0 {display: inline-block; background-color: fuchsia; border: 10px outset lime; 
vertical-align: top; text-align: left; }
 
.contenedor1 {background: orange; font: bold 18px/120% monospace; text-align: center; 
white-space: nowrap; }
 
.columna1 {display: inline-block; background-color: silver; border: 5px solid maroon; 
vertical-align: top; padding: 5px; }
 
.contenedor2 {background-color: teal; display: block; width: 50%; min-width: 7em; 
overflow: auto; }
 
.contenedor2 li {font: bold 20px/120% serif; width: 1em; word-wrap: break-word; 
text-align: center; background-color: white; list-style-type: none; float: left; 
display: block; margin: 0 2px; height: auto; }
 
.contenedor3 {background-color: red; overflow: auto; white-space: nowrap; padding: 10px; }
 
.contenedor3 a {font: bold 18px/120% serif; color: white; text-decoration: none; 
background-color: maroon; margin: 0 0 0 5px;}
 
.contenedor3 img {vertical-align: middle; }
 
.contenedor3 a:hover {color: maroon; background-color: white; }
 
p {font: bold 18px/1.2 cursive; margin-top: 32px; }
p span {font: normal 18px/1.2 sans-serif; }
</style>
 
<script defer type="text/javascript" src="fquery_colEqCompat0_2.js"></script>
</head>
<body>
 
<h2>Un menú. (<code>inline-block</code> y <code>padding</code>)</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ú. (<code>inline-block</code>)</h2>
<div class="contenedor1 $eq">
<div class="columna1"> <a href= "about:blank">Kilo</a></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>
 
 
<h2>Uno más. (<code>float</code>)</h2>
<ul class="$eq contenedor2">
<li>UNO</li> <li>DOS</li> <li>TRES</li> <li>CUATRO</li> 
</ul>
 
 
<h2>Y el último. (fluido)</h2>
<div class="$eq contenedor3">
<a href="http://imageshack.us/photo/my-images/715/grafiti04.jpg/" 
target="blank">Grafiti. &raquo; </a>
<img src="http://img715.imageshack.us/img715/9418/grafiti04.th.jpg" alt="Grafiti.">
<a href="http://imageshack.us/photo/my-images/824/franciscotruffo.jpg/" 
target="blank">Francisco Truffo. &raquo; </a>
<img src="http://img824.imageshack.us/img824/2043/franciscotruffo.th.jpg" alt="Francisco Truffo.">
<a href="http://imageshack.us/photo/my-images/38/grafiti05.jpg/" 
target="blank">Grafiti. &raquo; </a>
<img src="http://img38.imageshack.us/img38/9316/grafiti05.th.jpg" alt="Grafiti.">
<a href="http://imageshack.us/photo/my-images/13/inesarostegui.jpg/" 
target="blank">Inés Aróstegui. &raquo; </a>
<img src="http://img13.imageshack.us/img13/4983/inesarostegui.th.jpg" alt="Inés Aróstegui.">
</div>
 
 
<hr>
<p>El script "<span>fquery_colEqCompat0_2.js</span>" iguala las alturas de las 
<em>'columnas'</em> dentro de un bloque contenedor con clase "<code>$eq</code>".<br>
Los dos primeros ejemplos están maquetados con CSS <code>display:inline-block</code>, 
que no es soportado por versiones anteriores a <span>Internet Explorer 8</span>, por lo 
que para esos navegadores solamente valen los ejemplos con <code>float:left</code> y 
con diseño fluido (en este último iguala la altura de las imágenes).<br>
</p>
 
</body>
</html>

fquery_colEqCompat0_2.js

Código Javascript:

Ver original/* COMPATIBLE IE6+, CHROME, FIREFOX, OPERA. */
 
 
 var p4d70p, p4dB0770m, a17ur45, a17ur4M4x;
 
 function p4ddin6L(PC){
  p4d70p = (PC.currentStyle)? parseInt(PC.currentStyle["paddingTop"]) 
  : parseInt(document.defaultView.getComputedStyle(PC, null).getPropertyValue("padding-top"));
  p4dB0770m = (PC.currentStyle)? parseInt(PC.currentStyle["paddingBottom"]) 
  : parseInt(document.defaultView.getComputedStyle(PC, null).getPropertyValue("padding-bottom"));
 }
 
 function p4ddin6L3(PC){
  PC.style.paddingTop = p4d70p;
  PC.style.paddingBottom = p4dB0770m;
 }
 
 function aju5t4(){
 var t0d05 = document.getElementsByTagName("*");
  for(c=0; c<t0d05.length; c++){
   if(t0d05[c].className.indexOf("$eq") != -1){
    a17ur4M4x = 0;
    var c01umn4 = t0d05[c];
    var c01umn45 = c01umn4.childNodes;
 
    for(d=0; d<c01umn45.length; d++){
     if(c01umn45[d].nodeType == 1){ 
      a17ur45 = c01umn45[d].clientHeight;
      p4ddin6L(c01umn45[d]); 
      a17ur4M4x = (a17ur45 - (p4d70p + p4dB0770m)) > a17ur4M4x ? 
      (a17ur45 - (p4d70p + p4dB0770m)) : a17ur4M4x; 
     }
    }
 
    for(d=0; d<c01umn45.length; d++){
     if(c01umn45[d].nodeType == 1){ 
     c01umn45[d].style.height = a17ur4M4x+"px"; 
     }
    }
   }
  }
 }
 
 if (document.addEventListener){
  document.addEventListener("readystatechange", function(){aju5t4()}, false);
 }
 else if (document.attachEvent){
  document.attachEvent("onreadystatechange", function(){aju5t4()});
 }

Demo:

http://foros.emprear.com/javascript/...-equilibradas/

Salu2