AJAX

<div> help!!

Please support our JavaScript / DHTML / AJAX advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases

•

Join Date: Jul 2008

Posts: 147

Reputation: anuj576 is an unknown quantity at this point

Solved Threads: 10

anuj576

Offline

Junior Poster

<div> help!!

Aug 18th, 2008

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

•

Join Date: Aug 2008

Posts: 381

Reputation: langsor is an unknown quantity at this point

Solved Threads: 33

langsor

Offline

Posting Whiz

Re: <div> help!!

Aug 19th, 2008

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

 Help with Code Tags 
 JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
<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>
<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.

Last edited by langsor; Aug 19th, 2008 at 4:47 pm.

•

Join Date: Aug 2008

Posts: 954

Reputation: essential will become famous soon enough

Solved Threads: 131

essential

Offline

Posting Shark

Re: <div> help!!

Aug 20th, 2008

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

 Help with Code Tags 
 html Syntax (Toggle Plain Text) 
<!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>
<!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>

 Help with Code Tags 
 css Syntax (Toggle Plain Text) 
<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>
<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>

 Help with Code Tags 
 javascript Syntax (Toggle Plain Text) 
<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>
<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>

 Help with Code Tags 
 html Syntax (Toggle Plain Text) 
</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>
</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>