Foros del Web - Ver Mensaje Individual - Cómo calculo height de un div y se lo pongo al css?

furoya · #6 (**permalink**) 07/07/2012, 21:32

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>AJJJJ.</title>
<script type="text/javascript">

var charly, eco;

function hovering0(){
charly = document.getElementById("descripcion"); 
charly.style.height = "auto"; //alert(charly.outerHTML)
setTimeout(hovering1, 1250)
}

function hovering1(){
eco = charly.offsetHeight; //alert(eco)
charly.removeAttribute("style",false); //alert(charly.outerHTML)
var delta = document.getElementById("bravo").innerHTML; //alert(delta)
delta = delta.replace(/666/g,eco); //alert(delta)
document.getElementById("bravo").innerHTML = delta;
}

onload = hovering0;

</script>
<style type="text/css" id="bravo">

body{background-color:black}

#descripcion{
    background-color:rgba(255,255,255,0.7);
    filter:alpha(opacity=70);
    position:fixed;
    top:100%;
    margin-top:-65px;
    padding:6px;
    height: 75px;
    width:275px;
    overflow:hidden;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
    -webkit-transform: rotate(4deg); 
    -moz-transform: rotate(4deg); 
    -ms-transform: rotate(4deg); 
    -o-transform: rotate(4deg); 
    transform: rotate(4deg); 
}   
 
#descripcion h1{margin-top:10px;font-size:28px;}

#descripcion:hover{ 
    width: 275px; 
    height: 666px; 
    margin-top: -666px; 
    -webkit-transform: rotate(0deg); 
    -moz-transform: rotate(0deg); 
    -ms-transform: rotate(0deg); 
    -o-transform: rotate(0deg); 
    transform: rotate(0deg); 
    -webkit-transition: all 0.5s ease; 
    -moz-transition: all 0.5s ease; 
    -ms-transition: all 0.5s ease; 
    -o-transition: all 0.5s ease; 
    transition: all 0.5s ease; 
}  
</style>
</head>
<body>

<div id="descripcion">
<h1><b>Título</b></h1>
<div id="metadescription"><h7><i>Lorem ipsum ad his scripta blandit partiendo, eum fastidii accumsan euripidis in, eum liber hendrerit an. Qui ut wisi vocibus suscipiantur, quo dicit ridens inciderint id. Quo mundi lobortis reformidans eu, legimus senserit definiebas an eos. Eu sit tincidunt incorrupte definitionem, vis mutat affert percipit cu, eirmod consectetuer signiferumque eu per. In usu latine equidem dolores.</i></h7></div>
</div>
 
</body>
</html>

P.D. : Por favor, quiero el emoticón del chanchito.