Eternal_Student
asked on
Using overflow:hidden to show and hide content
If you consider the attached code, I am wondering why this is not working in Firefox? The JavaScript seems to expand/contract the div in Internet Explorer 6 toggling between overflow:hidden and overflow:visible but not Firefox? Ive never really used overflow:hidden before in this way and the reason I am doing so is because visibility:hidden and display:none are both no good when it comes to speaking browsers.
Thanks
Thanks
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Overflow hidden</title>
<style type="text/css">
#special{width:900px; height:200px; background-color:#FFFF99; border:1px dashed #999999; position:relative;}
#special img{float:right; margin-left:10px;}
#show-all{width:900px;position:absolute;bottom:0;z-index:99;background-color:#FFFFFF;padding:4px;opacity: .5;filter: alpha(opacity=80);}
#show-all a{display:block; padding:2px; background-color:#0000FF; float:right;color:#FFFFFF;margin-right:4px;}
</style>
<script type="text/javascript">
function showhide(id){
if (document.getElementById){
obj = document.getElementById(id);
if (obj.style.overflow == "hidden"){
obj.style.overflow = "visible";
} else {
obj.style.overflow = "hidden";
}
}
}
</script>
</head>
<body>
<div id="special" style="overflow:hidden;">
<div id="show-all"><a href="#" onclick="showhide('special'); return(false);">Show all</a></div>
<div style="padding:10px;">
<img src="images/service.jpg" alt="" style="height:1000px" />
<h1>Atom Bomb</h1>
<p>Aftermath of an atomic bomb explosion - The aftermath of an atom bomb dropped on Japan by the United States in 1945. <br />Category: Social Studies - America History<br />Film Name: The Fragile Balance<br />Key Words: atom bomb, World War II, Hiroshima, Nagasaki<br /></p>
<p>Copyrighted Material, AIMS Multimedia. </p>
</div>
<br style="clear:both" />
</div>
</body>
</html>
I viewed the code you gave in both IE7 and Firefox 2. I do beleive that your overflow is working correctly, but the appearance is incorrect because of the way that the two browsers are handling the css.... I don't see the immeadiate culprit but I'm pretty sure it's in the css...
That's a bug in IE6. This describes it in detail: http://www.positioniseverything.net/explorer/expandingboxbug.html
ASKER
OK, I think the problem here was the fact that the height of the div with the overflow was set to 200px and when you then set the overflow to visible it reveals the content but the div is still 200px high.
So, I have amended the JavaScript to the following:
So, I have amended the JavaScript to the following:
<script type="text/javascript">
function showhide(id){
if (document.getElementById){
obj = document.getElementById(id);
if (obj.style.overflow == "hidden"){
obj.style.overflow = "visible";
obj.style.height = "auto";
} else {
obj.style.overflow = "hidden";
obj.style.height = "200px";
}
}
}
</script>
ASKER
Seems to work OK, I just thought that overflow:visible would re-size the div in FireFox but obviously not?
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
This doesn't work in Safari btw ... anyone know why this would be?
ASKER
I mean the overflow hidden works but the javascript does not toggle between hidden and visible.
visible: The content is not clipped. It renders outside the element
hidden: The content is clipped, but the browser does not display a scroll-bar to see the rest of the content
as you see they cant do what you expect. i prefer using visibility and display options, it works correctly in both.