I know this is not the right place to post web development questions,
but the code is done work only with firefox (1.0.6). Ok, here is it:
---------------------------------------.---------------------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>DHTML / floating div problem</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
body {
margin: 0px;
padding-top: 50px;
}
#toolbar {
background: black;
color: white;
position: fixed;
width: 98%;
left: 1%;
top: 0px;
height: 50px;
}
#toolbar #home {
width: 25px;
height: 25px;
position: relative;
background: red;
float: left;
top: 10px;
left: 10px;
}
</style>
<script language="javascript" type="text/javascript">
function init() {
setInterval(showSmoothly,100);
}
function showSmoothly() {
bar = document.getElementById('toolbar');
//_debug(bar.offsetHeight);
height = bar.style.height;
if(height)//alternative: use bar.offsetHeight instead
height = parseInt(height);
else
height = 0;
if(height >= 50) return;
_debug(height);
height += 4;
bar.style.height = height + 'px';
}
function _debug(argv) {
o = document.getElementById('_devel');
o.value = argv + "\n" + o.value;
}
window.addEventListener('load',init,true);
</script>
</head>
<body>
<div id="toolbar">
<span id="home"></span>
</div>
<textarea name="_devel" cols="80" rows="20" id="_devel"></textarea>
<br />hello world out there
<br />hello world out there
</body>
</html>
--------------------------------------EOF--------------------------------------
The problem is the floating element #home, which is supposed to be a
link sometime in the future. I'd like it to fade in at the same time
with the toolbar. I'm looking for a "clean" solution, ideally CSS-only.
Thanks.
--
It's not right. It's not even wrong.
Similar Threads
