CSS - Javascript - Showhide Layers Problem

Hi there,

I'm have some problem getting some DIV tags to move correctly.

When a user clicks on a left menu item I want to display all the sub items
for this menu - No problem works fine.

Trouble is the other menu items do not move down at the same time so they all overlap.

Can someone have a look at the attached code and point me in the right direction

Thanks in advance


<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="mycss.css" rel="stylesheet" type="text/css" />
<script language="JavaScript" type="text/javascript" src="menu_system.js"></script>
</head>
<body>
<div id="container"> 
  <div class="header">	
	<div class="logo">Logo</div>
	<div class="banner"><a onclick="show_banner_summary()" href="#">Banner</a></div>  
  </div>
  <div id="banner_summary">aa</div>
  <div class="leftNav">
    <div class="LeftMenuHeader1"><a onclick="show_menu1()" href="#">Menu 1 Header</a>
	  <div id="leftmenu1" class="leftmenu1">1.1<br>1.2<br>1.3<br></div>
	</div>
	<div class="LeftMenuHeader2"><a onclick="show_menu2()" href="#">Menu 2 Header</a>
	  <div id="leftmenu2" class="leftmenu2">2.1<br>2.2<br>2.3<br></div>
	</div>	
  </div>
  <div class="rightNav">left nav<br><br>left nav<br><br>left nav<br><br>left nav<br><br></div>
  <div class="pagecontent">pagecontent<br><br>pagecontent<br><br>pagecontent<br><br>pagecontent<br><br></div>
  <div style="clear:both;"></div>
  <div class="footer">footer</div>
</div>
</body>
</html>
 
 
***************************************** CSS
body,html{
 padding:0px;
 margin:0px
 background-color: #dedede;
}
 
html {
     overflow: -moz-scrollbars-vertical;  
}
 
#container{
position: relative;
width:800px;
top: 5px;
left: 50%;
margin-left:-400px;
background-color: #ffffff;
}
 
.header{
 background-color:red;
 height:80px;
}
 
.logo {
width:80px;
height:80px;
background-color: orange;
float:left;
}
 
.banner {
width:720px;
height:80px;
background-color: red;
float:right;
}
 
#banner_summary{
 background-color:yellow;
 height:80px;
 display:none;
}
 
.leftNav{
background-color:green;
width:160px;
float:left;
}
 
.LeftMenuHeader1{
background-color:red;
width:160px;
height:20px;
float:left;
}
 
.leftmenu1{
background-color:red;
width:160px;
height:20px;
float:left;
display:none;
}
 
.LeftMenuHeader2{
background-color:orange;
width:160px;
height:20px;
float:left;
}
 
.leftmenu2{
background-color:red;
width:160px;
height:20px;
float:left;
display:none;
}
 
.LeftMenuHeader3{
background-color:red;
width:160px;
height:20px;
float:left;
}
 
.rightNav{
background-color:blue;
width:160px;
float:right;
}
 
.pagecontent{
 background-color:pink;
float:left;
left:160px;
width:480px;
top:0px;
overflow:hidden;
}
 
.pagecontent_no_right{
 background-color:pink;
float:left;
left:160px;
width:640px;
top:0px;
overflow:hidden;
}
 
.footer{
background-color:orange;
width:100%;
height:20px;
}
 
************************************ Javascript
 
function show_banner_summary(){
var obj = document.getElementById("banner_summary");
if (obj.style.display == 'block') {
obj.style.display = "none";
}
else
{ 
obj.style.display = 'block';
}
}
 
function show_menu1(){
var obj = document.getElementById("leftmenu1");
if (obj.style.display == 'block') {
obj.style.display = "none";
}
else
{ 
obj.style.display = 'block';
}
}
 
function show_menu2(){
var obj = document.getElementById("leftmenu2");
if (obj.style.display == 'block') {
obj.style.display = "none";
}
else
{ 
obj.style.display = 'block';
}
}

Open in new window

LVL 1
PaulEllAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

scrathcyboyCommented:
Without actually running the code, I am assuming all the menu items are there in the list, you are just hiding them with the --
obj.style.display = 'none';

The problem is, this hiding does not REMOVE them from the display, it only hides them.  Save what you have and do this replacement -- for every -- obj.style.display = 'block';
add after it --  obj.style.visibility = visible';
And for every -- obj.style.display = 'none';
add after it -- obj.style.visibility = 'invisible';

That should actually remove the menu items and replace them.  As long as all items are in the list, it should work.
0
ASPSQLServerCOMCommented:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="mycss.css" rel="stylesheet" type="text/css" />
<script language="JavaScript" type="text/javascript" src="menu_system.js"></script>
<style type="text/css">
<!--
body,html{
 padding:0px;
 margin:0px
 background-color: #dedede;
}
 
html {
     overflow: -moz-scrollbars-vertical;  
}
 
#container{
position: relative;
width:800px;
top: 5px;
left: 50%;
margin-left:-400px;
background-color: #ffffff;
}
 
.header{
 background-color:red;
 height:80px;
}
 
.logo {
width:80px;
height:80px;
background-color: orange;
float:left;
}
 
.banner {
width:720px;
height:80px;
background-color: red;
float:right;
}
 
#banner_summary{
 background-color:yellow;
 height:80px;
 display:none;
}
 
.leftNav{
background-color:green;
width:160px;
float:left;
}
 
.LeftMenuHeader1{
background-color:red;
width:160px;
height:20px;
float:left;
}
 
.leftmenu1{
background-color:red;
width:160px;
height:20px;
float:left;
display:none;
}
 
.LeftMenuHeader2{
background-color:orange;
width:160px;
height:20px;
float:left;
}
 
.leftmenu2{
background-color:red;
width:160px;
height:20px;
float:left;
display:none;
}
 
.LeftMenuHeader3{
background-color:red;
width:160px;
height:20px;
float:left;
}
 
.rightNav{
background-color:blue;
width:160px;
float:right;
}
 
.pagecontent{
 background-color:pink;
float:left;
left:160px;
width:480px;
top:0px;
overflow:hidden;
}
 
.pagecontent_no_right{
 background-color:pink;
float:left;
left:160px;
width:640px;
top:0px;
overflow:hidden;
}
 
.footer{
background-color:orange;
width:100%;
height:20px;
}-->
</style>
 
<script type="text/javascript">
<!--
 
 
 
function show_banner_summary(){
var obj = document.getElementById("banner_summary");
if (obj.style.display == 'block') {
obj.style.display = "none";
obj.style.visibility = 'hidden'; 
}
else
{ 
obj.style.display = 'block';
obj.style.visibility = 'visible'; 
}
}
 
function show_menu1(){
var obj = document.getElementById("leftmenu1");
if (obj.style.display == 'block') {
obj.style.display = "none";
obj.style.visibility = 'hidden'; 
}
else
{ 
obj.style.display = 'block';
obj.style.visibility = 'visible'; 
}
}
 
function show_menu2(){
var obj = document.getElementById("leftmenu2");
if (obj.style.display == 'block') {
obj.style.display = "none";
obj.style.visibility = 'hidden'; 
 
}
else
{ 
obj.style.display = 'block';
obj.style.visibility = 'visible'; 
}
}
 
//-->
</script>
 
 
 
 
</head>
<body>
<div id="container"> 
  <div class="header">  
        <div class="logo">Logo</div>
        <div class="banner"><a onclick="show_banner_summary()" href="#">Banner</a></div>  
  </div>
  <div id="banner_summary">aa</div>
  <div class="leftNav">
    <div class="LeftMenuHeader1"><a onclick="show_menu1()" href="#">Menu 1 Header</a>
          <div id="leftmenu1" class="leftmenu1">1.1<br>1.2<br>1.3<br></div>
        </div>
        <div class="LeftMenuHeader2"><a onclick="show_menu2()" href="#">Menu 2 Header</a>
          <div id="leftmenu2" class="leftmenu2">2.1<br>2.2<br>2.3<br></div>
        </div>  
  </div>
  <div class="rightNav">left nav<br><br>left nav<br><br>left nav<br><br>left nav<br><br></div>
  <div class="pagecontent">pagecontent<br><br>pagecontent<br><br>pagecontent<br><br>pagecontent<br><br></div>
  <div style="clear:both;"></div>
  <div class="footer">footer</div>
</div>
</body>
</html>

Open in new window

0
PaulEllAuthor Commented:
Thanks for your help.

I've tried the solution but the DIV tags still overlap.

I think it has do with the fact that they are contained within a floating div i.e leftnav.

I'm sure I have seen a work around for this, but as always you can never find it again !

Thanks

Paul
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

ASPSQLServerCOMCommented:
try this code
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="mycss.css" rel="stylesheet" type="text/css" />
<script language="JavaScript" type="text/javascript" src="menu_system.js"></script>
<style type="text/css">
<!--
body,html{
 padding:0px;
 margin:0px
 background-color: #dedede;
}
 
html {
     overflow: -moz-scrollbars-vertical;  
}
 
#container{
position: relative;
width:800px;
top: 5px;
left: 50%;
margin-left:-400px;
background-color: #ffffff;
}
 
.header{
 background-color:red;
 height:80px;
}
 
.logo {
width:80px;
height:80px;
background-color: orange;
float:left;
}
 
.banner {
width:720px;
height:80px;
background-color: red;
float:right;
}
 
#banner_summary{
 background-color:yellow;
 height:80px;
 display:none;
}
 
.leftNav{
background-color:green;
width:160px;
float:left;
}
 
.LeftMenuHeader1{
background-color:red;
width:160px;
height:20px;
float:left;
}
 
.leftmenu1{
background-color:red;
width:160px;
height:20px;
float:left;
display:none;
}
 
.LeftMenuHeader2{
background-color:orange;
width:160px;
height:20px;
float:left;
}
 
.leftmenu2{
background-color:red;
width:160px;
height:20px;
float:left;
display:none;
}
 
.LeftMenuHeader3{
background-color:red;
width:160px;
height:20px;
float:left;
}
 
.rightNav{
background-color:blue;
width:160px;
float:right;
}
 
.pagecontent{
 background-color:pink;
float:left;
left:160px;
width:480px;
top:0px;
overflow:hidden;
}
 
.pagecontent_no_right{
 background-color:pink;
float:left;
left:160px;
width:640px;
top:0px;
overflow:hidden;
}
 
.footer{
background-color:orange;
width:100%;
height:20px;
}-->
</style>
 
<script type="text/javascript">
<!--
 
 
 
function show_banner_summary(){
var obj = document.getElementById("banner_summary");
if (obj.style.display == 'block') {
obj.style.display = "none";
obj.style.visibility = 'hidden'; 
}
else
{ 
obj.style.display = 'block';
obj.style.visibility = 'visible'; 
}
}
 
function show_menu1(){
var obj = document.getElementById("leftmenu1");
if (obj.style.display == 'block') {
obj.style.display = "none";
obj.style.visibility = 'hidden'; 
}
else
{ 
obj.style.display = 'block';
obj.style.visibility = 'visible'; 
}
}
 
function show_menu2(){
var obj = document.getElementById("leftmenu2");
if (obj.style.display == 'block') {
obj.style.display = "none";
obj.style.visibility = 'hidden'; 
 
}
else
{ 
obj.style.display = 'block';
obj.style.visibility = 'visible'; 
}
}
 
//-->
</script>
 
 
 
 
</head>
<body>
<div id="container"> 
  <div class="header">  
        <div class="logo">Logo</div>
        <div class="banner"><a onclick="show_banner_summary()" href="#">Banner</a></div>  
  </div>
  <div id="banner_summary">aa</div>
  <div class="leftNav">
    <div class="LeftMenuHeader1"><a onclick="show_menu1()" href="#">Menu 1 Header</a>
        </div>    <div id="leftmenu1" class="leftmenu1">1.1<br>1.2<br>1.3<br></div>
      
        <div class="LeftMenuHeader2"><a onclick="show_menu2()" href="#">Menu 2 Header</a>
        </div>    <div id="leftmenu2" class="leftmenu2">2.1<br>2.2<br>2.3<br></div>
        
  </div>
  <div class="rightNav">left nav<br><br>left nav<br><br>left nav<br><br>left nav<br><br></div>
  <div class="pagecontent">pagecontent<br><br>pagecontent<br><br>pagecontent<br><br>pagecontent<br><br></div>
  <div style="clear:both;"></div>
  <div class="footer">footer</div>
</div>
</body>
</html>

Open in new window

0
PaulEllAuthor Commented:
Hi there,

Thanks for your help, unfortunately it still didn't work.
The problem was due to the fact that the left menu was set as a float.
You also need a bit of javascript to help.
This site explains all http://tutorials.alsacreations.com/deroulant/

Thanks again for all your help
0
ASPSQLServerCOMCommented:
are you still facing any problem or your problem is resolved?
0
PaulEllAuthor Commented:
Hi there,

I've resolved the problem.

The code that worked is attached should anyone else need help in ths area.

Thank you very much for you help and assistance.

Regards

Paul
*********** HTML ******************************************
 
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="mycss.css" rel="stylesheet" type="text/css" />
<script language="JavaScript" type="text/javascript" src="menu_system.js"></script>
 
</head>
<body onload="left_menu_load()">
<!-- page container - start -->
<div id="page_container"> 
  <!-- header no advert- start -->
  <div id="header_no_advert"> 
    <div id="logo"></div>
    <div id="topmenu_no_advert_item1_selected"><a href="#"><img id="item1_selected" onmouseover="swap_banner_images('item1_selected','home-on.gif')" onmouseout="swap_banner_images('item1_selected','home-selected.gif')" src="images/banner/home-selected.gif" width="72" height="80" border="0"></a></div>
    <div id="topmenu_no_advert_item_spacer"><img src="images/banner/spacer.gif" width="100%" height="100%" border="0"></div>
    <div id="topmenu_no_advert_item_last"><img src="images/banner/contact.gif" width="91" height="80" border="0"></div>
  </div>
  <!-- menu summary - start 
  <div id="menu_summary" onmouseout="show_hide_menu_summary()">a</div> -->
  <!-- menu summary - end -->
  <!-- header no advert- end -->
  <!--content container - start -->
  <div id="content_container"> 
    <dl id="leftmenu">
      <dt onclick="javascript:left_menu_change('sub-menu1');"><a href="#">Menu 
        1</a></dt>
      <dd id="sub-menu1"> 
        <ul>
          <li><a href="#">Opt 1.1</a></li>
          <li><a href="#">Opt 1.2</a></li>
          <li><a href="#">Opt 1.1</a></li>
          <li><a href="#">Opt 1.2</a></li>
          <li><a href="#">Opt 1.1</a></li>
          <li><a href="#">Opt 1.2</a></li>
          <li><a href="#">Opt 1.1</a></li>
          <li><a href="#">Opt 1.2</a></li>
          <li><a href="#">Opt 1.1</a></li>
          <li><a href="#">Opt 1.2</a></li>
          <li><a href="#">Opt 1.1</a></li>
          <li><a href="#">Opt 1.2</a></li>
        </ul>
      </dd>
      <dt onclick="javascript:left_menu_change('sub-menu2');">Menu 2</dt>
      <dd id="sub-menu2"> 
        <ul>
          <li><a href="#">Opt 2.1</a></li>
          <li><a href="#">Opt 2.2</a></li>
        </ul>
      </dd>
      <dt onclick="javascript:left_menu_change('sub-menu3');">Menu 3</dt>
      <dd id="sub-menu3"> 
        <ul>
          <li><a href="#">Opt 3.1</a></li>
          <li><a href="#">Opt 3.2</a></li>
        </ul>
      </dd>
      <dt onclick="javascript:left_menu_change('sub-menu4');">Menu 4</dt>
      <dd id="sub-menu4"> 
        <ul>
          <li><a href="#">Opt 4.1</a></li>
          <li><a href="#">Opt 4.2</a></li>
        </ul>
      </dd>
    </dl>
    <!-- page content - start -->
    <div id="page_content_no_right_menu">a</div>
    <!-- page content - end -->
    <!-- right menu - start 
	<div id="right_menu" >a</div>-->
    <!-- right menu - end -->
  </div>
  <!--content container - end -->
  <!-- page container - end -->
</div>
<div id="footer">footer</div>
 
</body>
</html>
 
********* Javascript ************
 
function show_hide_menu_summary(){
var obj = document.getElementById("menu_summary");
if (obj.style.display == 'block') {
obj.style.display = "none";
obj.style.visibility = 'hidden'; 
}
else
{ 
obj.style.display = 'block';
obj.style.visibility = 'visible'; 
}
}
 
function left_menu_load() {
for (var i = 1; i<=4; i++) {
var obj = document.getElementById("sub-menu" +i);
obj.style.display = "none";
}
}
 
function left_menu_change(id) {
var obj = document.getElementById(id);
 
if (obj.style.display == 'block') {
obj.style.display = "none";
obj.style.visibility = 'hidden'; 
}
else
{ 
obj.style.display = 'block';
obj.style.visibility = 'visible'; 
}
}
 
function swap_banner_images(id,graphic)
{
document.getElementById(id).src = '../images/banner/' + graphic;
}
 
//-->
 
 
*************** CSS **********************
 
 
/* Generic Tags */ 
body{
 padding:0px;
 margin:0px;
 background-color: #f2f2f2;
}
 
/* Make sure there is always a scroll bar for firfox */ 
html {
     overflow: -moz-scrollbars-vertical;  
}
 
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
 
/* Page Layout */ 
#page_container{
position: relative;
width:770px;
top: 5px;
left: 50%;
margin-left:-385px;
background-color: #ffffff;
border: 1px solid #acacac;
}
 
/* Header - Start */
#header_with_advert{
 background-color:red;
 height:120px;
}
 
#header_no_advert{
 height:80px;
}
 
/* Header - No Advert */
#logo {
width:174px;
height:80px;
background-image: url('../images/banner/logo.gif');
float:left;
}
 
#topmenu_no_advert_item1_selected {
width:72px;
height:80px;
left:147px;
float:left;
}
 
#topmenu_no_advert_item_spacer{
left:219px;
width:430px;
height:80px;
float:left;
}
 
#topmenu_no_advert_item_last{
 
width:91px;
height:80px;
float:left;
}
 
#advert{
width:690px;
height:80px;
background-color: yellow;
float:right;
}
 
#topmenu_summary{
 background-color:yellow;
 height:80px;
 display:none;
}
/* Header - No Advert */
/* Header - End */
 
/* content container - start */
#content_container{
position: relative;
width:770px;
overflow: visible;
top: 3px;
left: 50%;
margin-left:-385px;
background-color: #fff;
margin-bottom: 5px
}
/* content container - end */
 
/* left menu - start */
#leftmenu {
position: relative;
top: 0;
left: 0;
}
dl#leftmenu {
width: 150px;
}
dl#leftmenu dt {
cursor: pointer;
height: 20px;
line-height: 20px;
text-align: center;
font-weight: bold;
border: 1px solid gray;
background: #ccc;
}
dl#leftmenu dd {
border: 1px solid gray;
}
dl#leftmenu li {
text-align: center;
background: #fff;
}
dl#leftmenu li a, dl#leftmenu dt a {
color: #000;
text-decoration: none;
display: block;
border: 0 none;
height: 100%;
}
 
dl#leftmenu li a:hover, dl#leftmenu dt a:hover {
background: #eee;
}
/* left menu - end */
 
/* page content - start */
#page_content_no_right_menu{
position: absolute;
overflow: visible;
top: 0;
left: 152px;
width:618px;
background-color: blue;
}
 
#page_content_with_right_menu{
position: absolute;
overflow: visible;
top: 0;
left: 152px;
width:466px;
background-color: blue;
}
/* page content - end */
 
/* right menu - start */
#right_menu{
position: absolute;
background-color:orange;
top: 0;
width:150px;
right:0;
}
/* right menu - end */
 
#footer{
position: relative;
width:770px;
top: 7px;
left: 50%;
margin-left:-385px;
background-color: #ffffff;
border: 1px solid #acacac;
}

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Web Languages and Standards

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.