Member Avatar for anuj_sharma

hey guys,
I have made a web page which comprises of two divisions.The first div is used to display a table which shows the inhouse trainess and the other div also displays a table which shows the outside trainess.
Initially when the page loads both the divisions are hidden.I have also made two buttons which show respective divisions.if one division is visible then the other is hidden and vice-versa.
The problem I am having is that one division is displayed at the bottom of the other of the other division which means that when the top division is hidden and the other is visible,the div is displayed leaving some space at the top which doen't look nice.
What i want is that if both the divisions can be displayed at the same place.
PLEASE HELP

  • 3 Contributors
  • 2 Replies
  • 92 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by essential
Member Avatar for langsor

When you use the css declaration visibility to hide elements, it does not change the page layout, so you will end up with unwanted whitespace in your layout -- which is my guess what you are doing.

Use the declaration: display: none|block

<html>
<html>
<head>
<style type="text/css">
#tbl1,
#tbl2 {
  display: none; /* REQUIRED */
  width: 200px; /* emulate content for example */
  height: 200px; /* emulate content for example */
  border: 1px solid indigo; /* emulate content for example */
  background: silver; /* emulate content for example */
}
#tbl2 {
  background: yellow; /* emulate content for example */
}
</style>
<script type="text/javascript">
function toggle_tables ( show, hide ) {
  var active = document.getElementById( show ).style.display = 'block';
  var hidden = document.getElementById( hide ).style.display = 'none';
}
</script>
</head>
<body>
  <input type="button" onclick="toggle_tables('tbl1','tbl2')" value="table 1" />
  <input type="button" onclick="toggle_tables('tbl2','tbl1')" value="table 2" />
  <div id="tbl1"> ... table one content goes here ... </div>
  <div id="tbl2"> ... table two content goes here ... </div>
</body>
</html>

Hope this helps

P.S. You could skip the <div> wrappers and just place those ids on the tables if you want to.

Member Avatar for essential

Pardon me if im bein rushy on this 1. Just a quick overview to the issue on how to work with those div tags! And hope it brighten u up...

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 

<html> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Manipulating the table</title>
<style type="text/css">
form { margin: 6px; padding: 2px; }
form input {  margin: 0 2px 0 0; padding: 0; }

#wrap { position: absolute;  top: 60%; }
.samp { position: absolute; left: 10px; }

.samp td { background-color: gold; color: bronze; font-size: 20px; font-weight: bold; }
.samp table { width: 50%; background-color: dimgrey; }
</style>
<script type="text/javascript">
<!-- BEGIN HIDING
function tbl0()
{ emp = [ 'name1', 'name2', 'name3' ];
  epos = ['item1', 'item2', 'item3' ];
  var btn = document.getElementsByTagName('input')[0];
  div = document.getElementsByTagName('div')[0];
  
    del = document.getElementsByTagName('div')[1];
  div.removeChild(del);
 div1 = document.createElement('div');
  var tbl = document.createElement('table');
  var tblbody = document.createElement('tbody');

for ( var i = 0; i < 3; i++ )
{ var row = document.createElement('tr');
  var cell = document.createElement('td');
  var cell2 = document.createElement('td');
  var _emp = document.createTextNode(emp[i]);
  var _epos = document.createTextNode(epos[i]);
  cell.appendChild(_emp); 
  row.appendChild(cell); 
  cell2.appendChild(_epos);
  row.appendChild(cell2);
  tblbody.appendChild(row); }
  tbl.appendChild(tblbody);
  div1.appendChild(tbl);
    div.insertBefore(btn);
    div.appendChild(div1);
  tbl.setAttribute('border', '2');
  div1.setAttribute('class', 'samp');
  div1.setAttribute('id', 'mdiv');

/* Lets clock the user instead of using those classes! Just change the time value 4 how long do you want the table to stay in place */

stop = setTimeout('hide()', 5000);
}

function hide()
{ clearTimeout(stop);
div.removeChild(div1);
 var ndiv = document.createElement('div');
 div.appendChild(ndiv);
 
}

function tbl1()
{
/* Simply rewrite another code on this one, that will represent new date to the 2nd table */  
 return tbl0();
} 
//Hope this brighten you up!
//Have fun on your script
 // Done Hiding -->
</script>
</head>
<body>
<div>
<div>&nbsp;
</div>
</div>

<div id="wrap">
<form name="myform">
<input name="b1" onclick="tbl0();" type="button" value="Table1" />
<input name="b2" onclick="tbl1();" type="button" value="Table2" />
</div>
</form>
</body>
</html>
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.