Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

Using overflow:hidden to show and hide content

Posted on 2008-06-16
8
Medium Priority
?
980 Views
Last Modified: 2013-12-07
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


<!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>

Open in new window

0
Comment
Question by:Eternal_Student
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
8 Comments
 
LVL 5

Expert Comment

by:rabiei
ID: 21794133
the behaviour of visible/hidden for overflow is this:
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.
0
 
LVL 7

Expert Comment

by:ruscomp
ID: 21794734
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...
0
 
LVL 43

Expert Comment

by:David S.
ID: 21798096
That's a bug in IE6. This describes it in detail: http://www.positioniseverything.net/explorer/expandingboxbug.html
0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
LVL 18

Author Comment

by:Eternal_Student
ID: 21801920
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:




<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> 

Open in new window

0
 
LVL 18

Author Comment

by:Eternal_Student
ID: 21801930
Seems to work OK, I just thought that overflow:visible would re-size the div in FireFox but obviously not?
0
 
LVL 43

Accepted Solution

by:
David S. earned 750 total points
ID: 21806824
That's the difference between height and min-height. When you set the height, that's the height the element will have. If you set a min-height, the element will be at least that tall but will grow taller when needed.

IE6 doesn't support min-height, but wrongly treats height like min-height when overflow is set to visible.
0
 
LVL 18

Author Comment

by:Eternal_Student
ID: 21855459
This doesn't work in Safari btw ... anyone know why this would be?
0
 
LVL 18

Author Comment

by:Eternal_Student
ID: 21855467
I mean the overflow hidden works but the javascript does not toggle between hidden and visible.
0

Featured Post

Tech or Treat! - Giveaway

Submit an article about your scariest tech experience—and the solution—and you’ll be automatically entered to win one of 4 fantastic tech gadgets.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

If you are a web developer, you would be aware of the <iframe> tag in HTML. The <iframe> stands for inline frame and is used to embed another document within the current HTML document. The embedded document could be even another website.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
This Micro Tutorial will demonstrate how nuggets on the Web are formatted by using Chrome Developer Tools. These tools would not only view the site's CSS but it can also modify it and save the CSS to use on your own site.
How to create a custom search shortcut to site-search Experts Exchange using Google in the Firefox browser. This eliminates the need to type out site:experts-exchange.com whenever you want to search the site. Launch your Bookmark Menu: Press 'Ctrl +…

636 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question