Prev: Item for button
Next: What are your users using? IE vs FF and everyone else
From: jodleren on 8 Jan 2008 02:14
Hi

I have the code below. I have used something similar before (also in
tables), but this time the span in visible all the time - the idea is
to show the <tr> row only when needed.
What do I do wrong?

TIA
Sonnich


<html>
<head>
<script type="text/javascript">
function showInlineItem(input)
{
var objSearch=document.getElementById(input);
if(objSearch)
objSearch.style.display = "inline";
}
function hideInlineItem(input)
{
var objSearch=document.getElementById(input);
if(objSearch)
objSearch.style.display = "none";
}
</script>
</head>
<body>

<table width="100%">
<tr><td>
<p><input type="button" name="btn_search" value="Show"
onclick="showInlineItem('searchblock');"></p>
</td></tr>

<span id="searchblock" style="display: none;">
<tr><td><p>
<input type="button" name="btn_search" value="Hide"
onclick="hideInlineItem('searchblock');">
test
<a href="#" onclick="hideInlineItem('searchblock'); return false;"
rel="nofollow">hide</a></p>
</td></tr>
</span>
</table>

</body>
</html>
From: David Dorward on 8 Jan 2008 02:33
On Jan 8, 7:14 am, jodleren <sonn...(a)hot.ee> wrote:
> I have the code below. I have used something similar before (also in
> tables), but this time the span in visible all the time - the idea is
> to show the <tr> row only when needed.
> What do I do wrong?

You are trying to make a span element a child of a table element or
tbody element (only caption, col, colgroup, tbody, thead and tfoot
elements may be children of a table element[1], and only tr elements
may be children of tbody elements.

You are also trying to make tr elements children of span elements, and
only tbody, thead or tfoot elements may be parent elements of tr
elements.

Basically, you didn't validate and it doesn't work.

Also, trying to have an element display: inline within a table tends
to break the table layout model (which expects things which render
like tables to be made up of elements with display values which use
the table-* properties.

I could suggest playing with the display value of the tr element and
forgetting about using extra markup at all, but it looks rather like
you are using tables for layout so read http://www.hotdesign.com/seybold/
instead.

And href="#"? Please use sensible fallbacks for your JavaScript. "Call
hideInlineItem, or, if JS is not available or the function fails, go
to the top of the page" probably doesn't qualify.
http://www.wait-till-i.com/2007/11/12/the-seven-rules-of-unobtrusive-javascript/
is a worthwhile read.

[1] although the start and end tags of tbody elements are optional, so
it looks like tr elements are allowed there

--
David Dorward
http://dorward.me.uk/
http://blog.dorward.me.uk/
From: Ben C on 8 Jan 2008 05:03
On 2008-01-08, jodleren <sonnich(a)hot.ee> wrote:
> Hi
>
> I have the code below. I have used something similar before (also in
> tables), but this time the span in visible all the time - the idea is
> to show the <tr> row only when needed.
> What do I do wrong?

Set display: none on the tr instead.

Putting <span> in a <table> like that is such invalid HTML the browser
has assumed it can't possibly be what you meant and moved the span
somewhere else-- quite likely out of the table altogether.

This is why you have to validate. Not just anything goes.
 | 
Pages: 1
Prev: Item for button
Next: What are your users using? IE vs FF and everyone else