how do i show/hide a div within a table cell properly?

S

Susanne West

hi...

i'm trying to sort out a problem with a table containing multiple
entries and one div-overlay for each entry (let's call it entry-
details), and i just can't get it to work properly:

in one version i tried, the div that i'm showing/hiding scales the
whole table up and down because it thinks it's part of the regular text.
that i definately don't want!

the second version i tried looks fine somehow, but the z-index seems
to be completely disrespected and then the text seems to be flowing
out of the containing cell if it becomes too long...


what the hell am i doing wrong??? it seems like such a simple problem,
but every idea i come up brings in new problems.

any help is deeply appreciated (see testcase below).




---------------------html starts here---------------------------

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>

<script language="JavaScript" type="text/JavaScript">
<!--

function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document;
if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++)
x=d.forms[n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++)
x=MM_findObj(n,d.layers.document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function toggleDiv(divId,onoff) {
var db = MM_findObj(divId);
if (onoff == 1){
db.style.display = 'block';
} else {
db.style.display = 'none';
}
}
//-->
</script>
</head>

<body>
<table width=100% border="1" cellpadding="0" cellspacing="0">
<tr>
<td width="13">&nbsp;</td>
<td align="left">
<table width="96%" border="0" cellspacing="0">


<tr>
<td bgcolor=#cc7777>&nbsp;</td>
<td bgcolor=#cc7777>&nbsp;</td>
</tr>



<!-- variant 1 -->

<tr align=right onMouseOver="toggleDiv('shows_1','1');"
onMouseOut="toggleDiv('shows_1','0');">
<td width="500" align=left bgcolor=#cccccc><strong>mouseover
here to open details</strong></td>
<td class=bar_l2_small valign=top>&nbsp;</td>
</tr>
<tr>
<td width="500" valign=top>
<div style="position:relative; top:0; left:0; width:500;">
<div align=right style="z-index:1; width:350;
position:absolute; right:0; border:1px;">
this is basically the 'look' of what i'd like to achieve, with the
drawback, that i have to
manually force the text to the right. if i don't do that, the text
will show up above the div,
although z-index is set. the second drawback is, that if the
reserved space is too small, this
text will hang down into the next entry. both problems are made
visible in the last example at
the bottom...
</div>
<div id="shows_1" style="display:none; width:100;
border-top:1px solid #db2b2b; border-bottom:1px solid #db2b2b;
background-color:#cccccc; z-index:10; padding: 0 5 0 5;">
<strong>
<nobr>this div contains </nobr><br>
<nobr>details</nobr><br>
</strong>
</div>
&nbsp;
</div></td>
<td valign="_top">&nbsp;
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
</td>
</tr>


<tr>
<td bgcolor=#cc7777>&nbsp;</td>
<td bgcolor=#cc7777>&nbsp;</td>
</tr>



<!-- variant 2 -->

<tr align=right onMouseOver="toggleDiv('shows_2','1');"
onMouseOut="toggleDiv('shows_2','0');">
<td width="500" bgcolor=#dddddd align=left><strong>mouseover
here to open details</strong></td>
<td valign=top>&nbsp;</td>
</tr>
<tr>
<td width="500" valign=top>
<div style="position:relative; top:0; left:0; width:500; border=1px
solid #999999">
<div id="shows_2" style="display:none; width:100;
border-top:1px solid #db2b2b; border-bottom:1px solid #db2b2b;
background-color:#cccccc; z-index:10; padding: 0 5 0 5;">
<strong>
<nobr>this div should </nobr><br>
<nobr>open over the text</nobr><br>
<nobr>and not scale the table</nobr><br>
</strong>
</div>

<span align=right>
<strong>this text and should be right-aligned and the details should
open over the text, without the whole table scaling up</strong><Br>
A Olórin i yáresse Mentaner i Númeherui Tírien i Rómenóri, Maiaron i
oiosaila Manan elye etevanne Nórie i malanelye? Ú-reniathach i amar
galen I reniad lín ne môr, nuithannen In gwidh ristennin, i fae
narchannen I Lach Anor ed ardhon gwannen Calad veleg, ethuiannen. Melme
nóren sina núra ala Eäro. Ilfirin nairelma ullume nucuvalme Nauva i
nauva.A Elbereth Gilthoniel, silivren penna miriel o menel aglar
elenath, na-chaered palan diriel o
<br>
</span>

&nbsp;
</div></td>
<td valign="_top" style="padding-left:10">second try with
only one div. sadly, the whole table is scaled... bad, bad, bad...
<br>
<br>
<br>
<br>
<br>
</td>
</tr>


<tr>
<td bgcolor=#cc7777>&nbsp;</td>
<td bgcolor=#cc7777>&nbsp;</td>
</tr>



<!-- variant 3 -->


<tr align=right onMouseOver="toggleDiv('shows_3','1');"
onMouseOut="toggleDiv('shows_3','0');">
<td width="500" align=left bgcolor=#cccccc><strong>mouseover
here to open details (second variant)</strong></td>
<td class=bar_l2_small valign=top>&nbsp;</td>
</tr>
<tr>
<td width="500" valign=top>
<div style="position:relative; top:0; left:0; width:500;">
<div align=right style="z-index:1; width:500;
position:absolute; right:0; border:1px;">
<strong>alignment of both elements is fine, but the text is still
over the detail-div and flows out of the containing cell-box</strong><Br>
A Olórin i yáresse Mentaner i Númeherui Tírien i Rómenóri, Maiaron
i oiosaila Manan elye etevanne Nórie i malanelye? Ú-reniathach i amar
galen I reniad lín ne môr, nuithannen In gwidh ristennin, i fae
narchannen I Lach Anor ed ardhon gwannen Calad veleg, ethuiannen. Melme
nóren sina núra ala Eäro. Ilfirin nairelma ullume nucuvalme Nauva i
nauva.A Elbereth Gilthoniel, silivren penna miriel o menel aglar
elenath, na-chaered palan diriel o
</div>
<div id="shows_3" style="display:none; width:100;
border-top:1px solid #db2b2b; border-bottom:1px solid #db2b2b;
background-color:#cccccc; z-index:10; padding: 0 5 0 5;">
<strong>
<nobr>this div should open over the text</nobr><br>
<nobr>bla</nobr><br>
<nobr>bla</nobr><br>
</strong>
</div>
&nbsp;
</div></td>
<td valign="_top" style="padding-left:10">in here, the
problems of the first entry are made visible: the detail-div lies below
the text, although z-index is set. The second problem: if the text gros
too big, it flows out of the containing cell...

</td>
</tr>




</table></td>
</tr>
</table>
<br>
<br>
<br>

</body>
</html>
 
B

Ben C

hi...

i'm trying to sort out a problem with a table containing multiple
entries and one div-overlay for each entry (let's call it entry-
details), and i just can't get it to work properly:
Click to expand...

In the first version, also set position: relative on div#shows_1.
z-index only applies to positioned elements, which is why your z-index:
10 wasn't doing anything.
in one version i tried, the div that i'm showing/hiding scales the
whole table up and down because it thinks it's part of the regular text.
that i definately don't want!
Click to expand...

In the second example, set position: absolute on div#shows_2. That takes
it out of the normal flow (so the table doesn't grow to fit it in), and
also puts it on top (positioned things are drawn on top of normal-flow
descendents anyway, no need to set z-index).
the second version i tried looks fine somehow, but the z-index seems
to be completely disrespected and then the text seems to be flowing
out of the containing cell if it becomes too long...
Click to expand...

Set position: relative on div#shows_3 to get the z-index working (or
just set position: absolute and don't bother setting z-index).

It overflows the containing cell because you use <nobr> (which amounts
to whitespace: nowrap) and you've set a width. There just isn't room for
the text and you've told the browser not to break lines, so it
overflows.

If you set position: absolute, get rid of z-index which is no longer
necessary (absolute things go on top anyway), and remove width: 100,
then the div gets a shrink-to-fit width (that's what absolutely
positioned things with auto width do), which means it grows to the right
size for the text.

Incidentally you should use "100px" not just "100".
 
S

Susanne West

hi

thanks for your effort!

i followed your suggestions but the problem remains (IE6)
In the first version, also set position: relative on div#shows_1.
z-index only applies to positioned elements, which is why your z-index:
10 wasn't doing anything.
Click to expand...

jep. but that version has enough space anyway..


In the second example, set position: absolute on div#shows_2. That takes
it out of the normal flow (so the table doesn't grow to fit it in), and
also puts it on top (positioned things are drawn on top of normal-flow
descendents anyway, no need to set z-index).
Click to expand...
right, but the larger text still disrespects the span align=right and
alings to the left of the cell. if i could get the text right-aligned,
that would be the solution i'd go for.


Set position: relative on div#shows_3 to get the z-index working (or
just set position: absolute and don't bother setting z-index).

It overflows the containing cell because you use <nobr> (which amounts
to whitespace: nowrap) and you've set a width. There just isn't room for
the text and you've told the browser not to break lines, so it
overflows.
Click to expand...

can't follow you here. i was referring to the cell that contains the
larger amount of text 'alignment of both...'). that has no NOBR and
is encapsulated in a div which should result in normal textflow
within the div.

If you set position: absolute, get rid of z-index which is no longer
necessary (absolute things go on top anyway), and remove width: 100,
then the div gets a shrink-to-fit width (that's what absolutely
positioned things with auto width do), which means it grows to the right
size for the text.
Click to expand...

not true. there's a <div><div></div><div></div></div> structure
in the third example and i still get the first encapsulated div on
top of the second (text on top of 'details').


Incidentally you should use "100px" not just "100".
Click to expand...
jup. true.



updated code

-------------------------------------------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>

<script language="JavaScript" type="text/JavaScript">
<!--

function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document;
if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++)
x=d.forms[n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++)
x=MM_findObj(n,d.layers.document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function toggleDiv(divId,onoff) {
var db = MM_findObj(divId);
if (onoff == 1){
db.style.display = 'block';
} else {
db.style.display = 'none';
}
}
//-->
</script>
</head>

<body>
<table width=100% border="1" cellpadding="0" cellspacing="0">
<tr>
<td width="13">&nbsp;</td>
<td align="left">
<table width="96%" border="0" cellspacing="0">


<tr>
<td bgcolor=#cc7777>&nbsp;</td>
<td bgcolor=#cc7777>&nbsp;</td>
</tr>



<!-- variant 1 -->

<tr align=right onMouseOver="toggleDiv('shows_1','1');"
onMouseOut="toggleDiv('shows_1','0');">
<td width="500" align=left bgcolor=#cccccc><strong>mouseover
here to open details</strong></td>
<td class=bar_l2_small valign=top>&nbsp;</td>
</tr>
<tr>
<td width="500" valign=top>
<div style="position:relative; top:0; left:0; width:500;">
<div align=right style="z-index:1; width:500;
position:relative; right:0; border:1px;">
this is basically the 'look' of what i'd like to achieve, with the
drawback, that i have to
manually force the text to the right. if i don't do that, the text
will show up above the div,
although z-index is set. the second drawback is, that if the
reserved space is too small, this
text will hang down into the next entry. both problems are made
visible in the last example at
the bottom...
</div>
<div id="shows_1" style="display:none; width:100px;
border-top:1px solid #db2b2b; border-bottom:1px solid #db2b2b;
background-color:#cccccc; z-index:10; padding: 0 5 0 5;">
<strong>
<nobr>this div contains </nobr><br>
<nobr>details</nobr><br>
</strong>
</div>
&nbsp;
</div></td>
<td valign="_top">&nbsp;
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
</td>
</tr>


<tr>
<td bgcolor=#cc7777>&nbsp;</td>
<td bgcolor=#cc7777>&nbsp;</td>
</tr>



<!-- variant 2 -->

<tr align=right onMouseOver="toggleDiv('shows_2','1');"
onMouseOut="toggleDiv('shows_2','0');">
<td width="500" bgcolor=#dddddd align=left><strong>mouseover
here to open details</strong></td>
<td valign=top>&nbsp;</td>
</tr>
<tr>
<td width="500" valign=top>
<div style="position:relative; top:0; left:0; width:500; border=1px
solid #999999">
<div id="shows_2" style="position:absolute; display:none;
width:100px; border-top:1px solid #db2b2b; border-bottom:1px solid
#db2b2b; background-color:#cccccc; z-index:10; padding: 0 5 0 5;">
<strong>
<nobr>this div should </nobr><br>
<nobr>open over the text</nobr><br>
<nobr>and not scale the table</nobr><br>
</strong>
</div>

<span align=right>
<strong>this text and should be right-aligned and the details should
open over the text, without the whole table scaling up</strong><Br>
A Olórin i yáresse Mentaner i Númeherui Tírien i Rómenóri, Maiaron i
oiosaila Manan elye etevanne Nórie i malanelye? Ú-reniathach i amar
galen I reniad lín ne môr, nuithannen In gwidh ristennin, i fae
narchannen I Lach Anor ed ardhon gwannen Calad veleg, ethuiannen. Melme
nóren sina núra ala Eäro. Ilfirin nairelma ullume nucuvalme Nauva i
nauva.A Elbereth Gilthoniel, silivren penna miriel o menel aglar
elenath, na-chaered palan diriel o
<br>
</span>

&nbsp;
</div></td>
<td valign="_top" style="padding-left:10">second try with
only one div. sadly, the whole table is scaled... bad, bad, bad...
<br>
<br>
<br>
<br>
<br>
</td>
</tr>


<tr>
<td bgcolor=#cc7777>&nbsp;</td>
<td bgcolor=#cc7777>&nbsp;</td>
</tr>



<!-- variant 3 -->


<tr align=right onMouseOver="toggleDiv('shows_3','1');"
onMouseOut="toggleDiv('shows_3','0');">
<td width="500" align=left bgcolor=#cccccc><strong>mouseover
here to open details (second variant)</strong></td>
<td class=bar_l2_small valign=top>&nbsp;</td>
</tr>
<tr>
<td width="500" valign=top>
<div style="position:relative; top:0; left:0; width:500;">
<div align=right style="z-index:1; width:500;
position:absolute; right:0; border:1px;">
<strong>alignment of both elements is fine, but the text is still
over the detail-div and flows out of the containing cell-box</strong><Br>
A Olórin i yáresse Mentaner i Númeherui Tírien i Rómenóri, Maiaron
i oiosaila Manan elye etevanne Nórie i malanelye? Ú-reniathach i amar
galen I reniad lín ne môr, nuithannen In gwidh ristennin, i fae
narchannen I Lach Anor ed ardhon gwannen Calad veleg, ethuiannen. Melme
nóren sina núra ala Eäro. Ilfirin nairelma ullume nucuvalme Nauva i
nauva.A Elbereth Gilthoniel, silivren penna miriel o menel aglar
elenath, na-chaered palan diriel o
</div>
<div id="shows_3" style="position:absolute; display:none;
border-top:1px solid #db2b2b; border-bottom:1px solid #db2b2b;
background-color:#cccccc; padding: 0 5 0 5;">
<strong>
<nobr>this div should open over the text</nobr><br>
<nobr>bla</nobr><br>
<nobr>bla</nobr><br>
</strong>
</div>
&nbsp;
</div></td>
<td valign="_top" style="padding-left:10">in here, the
problems of the first entry are made visible: the detail-div lies below
the text, although z-index is set. The second problem: if the text gros
too big, it flows out of the containing cell...

</td>
</tr>




</table></td>
</tr>
</table>
<br>
<br>
<br>

</body>
</html>
 
B

Ben C

On 2006-11-15 said:
right, but the larger text still disrespects the span align=right and
alings to the left of the cell. if i could get the text right-aligned,
that would be the solution i'd go for.
Click to expand...

You can't set "align=right" on a span, it's invalid HTML for one thing,
but also doesn't make sense. Right-alignment is something you set on a
block, which determines how the block lays out the inline things inside
it.

You can set "align=right" (or 'style="text-align: right"') on the td, or
you could change that span to a div, and set style=text-align: right on
that.

[snip]
can't follow you here. i was referring to the cell that contains the
larger amount of text 'alignment of both...'). that has no NOBR and
is encapsulated in a div which should result in normal textflow
within the div.
Click to expand...

Ah, I thought you were talking about the bit that pops up. But I can't
not true. there's a <div><div></div><div></div></div> structure
in the third example and i still get the first encapsulated div on
top of the second (text on top of 'details').
Click to expand...

That's because you've set a z-index (of 1) on the thing #shows_3 is
supposed to be appearing on top of. Actually #shows_3 appears behind it
but it has a transparent background (the default) which is why you can
see #shows_3 at all.

Unless I've misunderstood what you're talking about.
 
S

Susanne West

fist things first: it works! koudos! thanks a bunch!


i think i just tangled myself up in all the variations and
tests to get this working! you know how that can be - looking
in all the wrong places...

to the details:

You can't set "align=right" on a span, it's invalid HTML for one thing,
but also doesn't make sense. Right-alignment is something you set on a
block, which determines how the block lays out the inline things inside
it.

You can set "align=right" (or 'style="text-align: right"') on the td, or
you could change that span to a div, and set style=text-align: right on
that.
Click to expand...

totally true! switched span to div and got what i wanted.
had not tried that, because that div had yielded to bad results in
a different context, had to switch it to a span and ignored it from
then on.



[snip]
can't follow you here. i was referring to the cell that contains the
larger amount of text 'alignment of both...'). that has no NOBR and
is encapsulated in a div which should result in normal textflow
within the div.
Click to expand...


Ah, I thought you were talking about the bit that pops up. But I can't
follow _you_ here, I can't see anything overflowing the <td> in my
browser (Firefox).
Click to expand...
caveat: we were talking about the third example. that clearly flows
out of the td, even in firefox (just tested that). but as i said, the
second variant was the one of choice. nevermind this bugger...



That's because you've set a z-index (of 1) on the thing #shows_3 is
supposed to be appearing on top of. Actually #shows_3 appears behind it
but it has a transparent background (the default) which is why you can
see #shows_3 at all.

Unless I've misunderstood what you're talking about.
>
Click to expand...
again: in the version i had attached in the reply(!), i had removed the
z-index of the div below and it still didn't do it. you were right for
the first bits of code i posted.



just for the sake of it, i attach a cleaned version of the code with
the solution of choice and two different amounts of text...



--------------------------------------------------------------

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>

<script language="JavaScript" type="text/JavaScript">
<!--

function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document;
if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++)
x=d.forms[n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++)
x=MM_findObj(n,d.layers.document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function toggleDiv(divId,onoff) {
var db = MM_findObj(divId);
if (onoff == 1){
db.style.display = 'block';
} else {
db.style.display = 'none';
}
}
//-->
</script>
</head>

<body>
<table width=100% border="1" cellpadding="0" cellspacing="0">
<tr>
<td width="13">&nbsp;</td>
<td align="left">
<table width="96%" border="0" cellspacing="0">


<tr>
<td bgcolor=#cc7777>&nbsp;</td>
<td bgcolor=#cc7777>&nbsp;</td>
</tr>




<!-- variant 2 -->

<tr align=right onMouseOver="toggleDiv('shows_2','1');"
onMouseOut="toggleDiv('shows_2','0');">
<td width="500" bgcolor=#dddddd align=left><strong>mouseover
here to open details</strong></td>
<td valign=top>&nbsp;</td>
</tr>
<tr>
<td width="500" valign=top>
<div style="position:relative; top:0; left:0; width:500; border=1px
solid #999999">
<div id="shows_2" style="position:absolute; display:none;
width:100px; border-top:1px solid #db2b2b; border-bottom:1px solid
#db2b2b; background-color:#cccccc; z-index:10; padding: 0 5 0 5;">
<strong>
<nobr>this div should </nobr><br>
<nobr>open over the text</nobr><br>
<nobr>and not scale the table</nobr><br>
</strong>
</div>

<div align=right>
<strong>this text and should be right-aligned and the details should
open over the text, without the whole table scaling up</strong><Br>
A Olórin i yáresse Mentaner i Númeherui Tírien i Rómenóri, Maiaron i
oiosaila Manan elye etevanne Nórie i malanelye? Ú-reniathach i amar
galen I reniad lín ne môr, nuithannen In gwidh ristennin, i fae
narchannen I Lach Anor ed ardhon gwannen Calad veleg, ethuiannen. Melme
nóren sina núra ala Eäro. Ilfirin nairelma ullume nucuvalme Nauva i
nauva.A Elbereth Gilthoniel, silivren penna miriel o menel aglar
elenath, na-chaered palan diriel o
<br>
</div>

&nbsp;
</div></td>
<td valign="_top" style="padding-left:10">second try with
only one div. sadly, the whole table is scaled... bad, bad, bad...
<br>
<br>
<br>
<br>
<br>
</td>
</tr>


<tr>
<td bgcolor=#cc7777>&nbsp;</td>
<td bgcolor=#cc7777>&nbsp;</td>
</tr>




<!-- variant 2 -->

<tr align=right onMouseOver="toggleDiv('shows_3','1');"
onMouseOut="toggleDiv('shows_3','0');">
<td width="500" bgcolor=#dddddd align=left><strong>mouseover
here to open details</strong></td>
<td valign=top>&nbsp;</td>
</tr>
<tr>
<td width="500" valign=top>
<div style="position:relative; top:0; left:0; width:500; border=1px
solid #999999">
<div id="shows_3" style="position:absolute; display:none;
width:100px; border-top:1px solid #db2b2b; border-bottom:1px solid
#db2b2b; background-color:#cccccc; z-index:10; padding: 0 5 0 5;">
<strong>
<nobr>this div should </nobr><br>
<nobr>open over the text</nobr><br>
<nobr>and not scale the table</nobr><br>
</strong>
</div>

<div align=right>
almost no text
</div>

&nbsp;
</div></td>
<td valign="_top" style="padding-left:10">
<br>
<br>
<br>
<br>
<br>
</td>
</tr>


<tr>
<td bgcolor=#cc7777>&nbsp;</td>
<td bgcolor=#cc7777>&nbsp;</td>
</tr>





</table></td>
</tr>
</table>
<br>
<br>
<br>

</body>
</html>
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Can someone tell me if this a real tracker? Or is it one designed to show you a different message at certain times, ie. acting like one? 0
How to wrap <td> content . 16
How can I get my menu inside of a menu to function properly? 1
Nested Loop Insert Page Break 1
Slideshow not working properly 2
Image shifts to the right when export the page to pdf 4
How to have two html audio players on one page? 0
Having trouble centering contents of td ? 3

Members online

Total: 35 (members: 1, guests: 34)
Robots: 197

Forum statistics

Threads
473,766
Messages
2,569,569
Members
45,042
Latest member
icassiem

Latest Threads

Top