PDA

View Full Version : Resizing/Hiding Elements losing their size data



siferion
Mar 27th, 2007, 05:09 PM
I recently ran into some trouble with resizing one table while hiding another and it's got me banging my head against the wall trying to solve it.

What I was attempting to do is create a menu pane that has an arrow to shrink the menu down to the left side of the screen (20px wide when shrunk, 210px when extended). How I've attempted to do it was to use the display.none and display.block to hide the navigation table, and a seperate table with just the click to show, click to hide which shows and hide cells based on if the navigation table is shrunk or not.

An example can be found here: RotfTestSite (https://home.comcast.net/~webb_r/RotfTestSite/index2.htm)

The problem is, when you click the arrow to hide it, all goes well, upon expanding it, the tables loose about 4px on each side of the cells, and the Min/Max table at the top loses the sizing data for the "click to hide" cell. It loses 4px worth of space each time show/hide is clicked.

Below is the javascript snippet that does this:


// This function will show or hide the navigation panel
function showhideNavi()
{
var tbl_navi = document.getElementById('tbl_navi');
var tbl_minmax = document.getElementById('tbl_minmax');
var img_minmax = document.getElementById('imgMinMax');
var div = document.getElementById('div_navi');
var content = document.getElementById('div_content');

if(tbl_navi.style.display == 'none')
{
tbl_navi.style.display = 'block';
img_minmax.src = 'images/buttons/LeftButton.png';

div.style.width = "210px";
content.style.left = "214px";

var txt_row = document.getElementById('txtMinMaxRow');
txt_row.style.display = 'none';

var txt_col = document.getElementById('txtMinMaxCol');
txt_col.style.display = 'block';
}
else
{
tbl_navi.style.display = 'none';
img_minmax.src = 'images/buttons/RightButton.png';

div.style.width = "20px";
content.style.left = "32px";

var txt_row = document.getElementById('txtMinMaxRow');
txt_row.style.display = 'block';

var txt_col = document.getElementById('txtMinMaxCol');
txt_col.style.display = 'none';
}
}

Also this is the stylesheet section that handles tables in case that has anything to do with it:

table
{
text-align: center;
text-indent: 2px;
border: solid 2px rgb(13, 42, 84);
border-collapse: collapse;
padding: 1px 6px 1px 6px;
}

shyam
Mar 27th, 2007, 09:05 PM
this is more a case of mismatched tags


<table id="tbl_minmax" class="navi" cellspacing="0" width="100%">
<tr>
<th><a style="border: none;" onclick="showhideNavi();"><img align="left" id="imgMinMax" src="images/buttons/LeftButton.png" /></a></th>
<th id="txtMinMaxCol" style="font-size: 12px;">click the arrow to hide</th>
</tr>
<tr>
<td id="txtMinMaxRow" style="display:none; font-size: 12px;">c<br />l<br />i<br />c<br />k<br /><br />t<br />h<br />e<br /><br />a<br />r<br />r<br />o<br />w<br /><br />t<br />o<br /><br />s<br />h<br />o<br />w</td>
<td></td>
</tr>
</table>
or u could use a rowspan

siferion
Mar 31st, 2007, 06:21 PM
Yeah I tried that but it created an entirely new problem where it doubled the MinMax tables height each click. But I got around all that by just rebuilding the table in javascript each click, still have about 4px shaved off each side, but it doesn't grow like before.

But now I'm encountering a problem where the Div elements aren't resizing in IE but working fine in firefox. The current link doesn't have the full rebuild table code, at least the version on the current link doesn't work in IE (had to use DOM to do it for both IE and Firefox).

But the Div resizing problem really kills the potential for this, the Firefox, Opera, and IE usage of the actual site is about 30% each with the last 10% being random mix of the 3.

iLLin
Apr 1st, 2007, 01:07 AM
Hmm put all this on one line if you can.



tbl_minmax.innerHTML = '<tbody><tr>' +
'<th style="width: 22px;"><img align="left" id="imgMinMax" src="images/buttons/RightButton.png" /></th>' +
'</tr>' +
'<tr>' +
'<td style="font-size: 12px; font-weight:bold; background-color: rgb(25, 29, 34);">c<br />l<br />i<br />c<br />k<br /><br />t<br />o<br /><br />s<br />h<br />o<br />w</td>' +
'</tr></tbody>';


And the same for the other one when it opens. IE7 doesn't like that.

iLLin
Apr 1st, 2007, 01:08 AM
If you want multiple lines maybe just do this


tbl_minmax.innerHTML = 'table stuff';
tbl_minmax.innerHTML .= 'more table stuff';


You get the idea.