Solved

CSS - Javascript - Showhide Layers Problem

Posted on 2008-10-20
7
312 Views
Last Modified: 2013-11-19
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

0
Comment
Question by:PaulEll
  • 3
  • 3
7 Comments
 
LVL 44

Expert Comment

by:scrathcyboy
ID: 22760502
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
 
LVL 7

Expert Comment

by:ASPSQLServerCOM
ID: 22763541

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

Author Comment

by:PaulEll
ID: 22764411
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
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
LVL 7

Expert Comment

by:ASPSQLServerCOM
ID: 22764485
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
 
LVL 1

Author Comment

by:PaulEll
ID: 22811976
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
 
LVL 7

Expert Comment

by:ASPSQLServerCOM
ID: 22816295
are you still facing any problem or your problem is resolved?
0
 
LVL 1

Accepted Solution

by:
PaulEll earned 0 total points
ID: 22819788
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

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Error in page 3 44
WordPress Themes 10 34
How to make interactive HTML code pages like w3school or Codecademy? 3 29
Materializecss - Different Behaviors in Browser's 1 17
Preface This is the third article about the EE Collaborative Login Project. A Better Website Login System (http://www.experts-exchange.com/A_2902.html) introduces the Login System and shows how to implement a login page. The EE Collaborative Logi…
What is Node.js? Node.js is a server side scripting language much like PHP or ASP but is used to implement the complete package of HTTP webserver and application framework. The difference is that Node.js’s execution engine is asynchronous and event…
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…

930 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

Need Help in Real-Time?

Connect with top rated Experts

19 Experts available now in Live!

Get 1:1 Help Now