I have been trying to set the height of a <DIV> to zero but with no success.
when there is some text inside div, the minimum number possible is 1. for example:
this works ok:
<div style={height:10;overflow:auto}>
some text, some text, some text.
</div>
but this one just displays the default height of the div instead of height 0 (zero);
<div style={height:10;overflow:auto}>
some text, some text, some text.
</div>
and why am I interested in height 0:
I want to create a menu which appears like a waterfall (I don't know how else i describe it.) when users put their mouse over the menu header, the menu will appear gradually. this happens by increasing the hieght of a div. I am going to use setInterval to increase the height but I have to set it to zero onmouseout again.Could you use display: none; to achieve this effect?thanks.
I tested it but the problem is that when i set it back to "block", the heigth suddenly jumps to default again and if i first enlarge my div and the display it the user wouldn't see anything during the enlargement.Hi there amahmood,
try this, it may suit your requirements...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>expose and unexpose</title>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
<style type="text/css">
/*<![CDATA[*/
body {
background:#ccc;
}
#foo,#blah {
width:650px;
background:#fff;
font-family:verdana;
font-size:20px;
color:#000;
text-align:center;
border:solid 1px #000;
margin: auto;
}
#foo {
height:0px;
overflow:hidden;
}
#blah {
border-bottom:0px;
}
/*//]]>*/
</style>
<script type="text/javascript">
//<![CDATA[
var i=0;
var exposer;
var unexposer;
function expose() {
clearTimeout(unexposer);
document.getElementById("foo").style.height=i+"px";
i++;
if(i>26) {
i=26;
return;
}
exposer=setTimeout("expose()",58);
}
function unExpose() {
clearTimeout(exposer);
document.getElementById("foo").style.height=i+"px";
i--;
if(i<0) {
i=0;
return;
}
unexposer=setTimeout("unExpose()",58);
}
//]]>
</script>
</head>
<body>
<div id="blah" onmouseover="expose()">Header</div>
<div id="foo">
<div onmouseout="unExpose()">EXPOSED</div>
</div>
</body>
</html>
cootheadthat' it.
exactly what i needed.
thanks coothead.Awsome script! Could you tell me where I could find how the setTimeout() function works please? And what is the css comment /*//]]>*/ for? XHTML? Or am I mistaken. As you can tell I am new to css but I can pretty much understand what is happening if someone puts code infront of me.The setTimeout() function in Javascript will basically call a function after a certain amount of miliseconds have elapsed. So:
exposer=setTimeout("expose()",58);
Calls the function expose() after 58 miliseconds.
This: /*<![CDATA[*/ and this: /*//]]>*/ indicated Character data. The page given was done in XHTML, which is the forumulation HTML into XML. Similar syntax as HTML with the same purpose, but created in XML rather than SGML, which is what HTML was developed in. Anywho, they let the XML parser know that what follows is character data, not markup. It's kind of like saying "Hands off, you don't need to bother with this".
when there is some text inside div, the minimum number possible is 1. for example:
this works ok:
<div style={height:10;overflow:auto}>
some text, some text, some text.
</div>
but this one just displays the default height of the div instead of height 0 (zero);
<div style={height:10;overflow:auto}>
some text, some text, some text.
</div>
and why am I interested in height 0:
I want to create a menu which appears like a waterfall (I don't know how else i describe it.) when users put their mouse over the menu header, the menu will appear gradually. this happens by increasing the hieght of a div. I am going to use setInterval to increase the height but I have to set it to zero onmouseout again.Could you use display: none; to achieve this effect?thanks.
I tested it but the problem is that when i set it back to "block", the heigth suddenly jumps to default again and if i first enlarge my div and the display it the user wouldn't see anything during the enlargement.Hi there amahmood,
try this, it may suit your requirements...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>expose and unexpose</title>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
<style type="text/css">
/*<![CDATA[*/
body {
background:#ccc;
}
#foo,#blah {
width:650px;
background:#fff;
font-family:verdana;
font-size:20px;
color:#000;
text-align:center;
border:solid 1px #000;
margin: auto;
}
#foo {
height:0px;
overflow:hidden;
}
#blah {
border-bottom:0px;
}
/*//]]>*/
</style>
<script type="text/javascript">
//<![CDATA[
var i=0;
var exposer;
var unexposer;
function expose() {
clearTimeout(unexposer);
document.getElementById("foo").style.height=i+"px";
i++;
if(i>26) {
i=26;
return;
}
exposer=setTimeout("expose()",58);
}
function unExpose() {
clearTimeout(exposer);
document.getElementById("foo").style.height=i+"px";
i--;
if(i<0) {
i=0;
return;
}
unexposer=setTimeout("unExpose()",58);
}
//]]>
</script>
</head>
<body>
<div id="blah" onmouseover="expose()">Header</div>
<div id="foo">
<div onmouseout="unExpose()">EXPOSED</div>
</div>
</body>
</html>
cootheadthat' it.
exactly what i needed.
thanks coothead.Awsome script! Could you tell me where I could find how the setTimeout() function works please? And what is the css comment /*//]]>*/ for? XHTML? Or am I mistaken. As you can tell I am new to css but I can pretty much understand what is happening if someone puts code infront of me.The setTimeout() function in Javascript will basically call a function after a certain amount of miliseconds have elapsed. So:
exposer=setTimeout("expose()",58);
Calls the function expose() after 58 miliseconds.
This: /*<![CDATA[*/ and this: /*//]]>*/ indicated Character data. The page given was done in XHTML, which is the forumulation HTML into XML. Similar syntax as HTML with the same purpose, but created in XML rather than SGML, which is what HTML was developed in. Anywho, they let the XML parser know that what follows is character data, not markup. It's kind of like saying "Hands off, you don't need to bother with this".