Dynamic Placement

ClaireB · #1 (**permalink**) Sep 7th, 2005, 13:43

Here's the code:

<head>
<script language="javascript">
function Depshow()
{
if (document.Appraisal.Question2H.options[document.Appraisal.Question2H.selectedIndex].value=='1')
{
document.getElementById("Question2H21").innerHTML= "<tr <%=rowstyle%>><td>Dependant 1:<\/td><\/tr>";
}
else
{
document.getElementById("Question2H21").innerHTML= "";
}
}
</script>
<style>
.lightBG {
background-color: #dddffd;
}
</style>
</head>

<body>
<form name="Appraisal">
<% rowstyle = "class=lightBG" %>
<select name="Question2H" onChange="Depshow();">
<option value="">Please select</option>
<option value="1">1</option>
<option value="2">2</option>
</select>

<table border="0">
<tr><td>Line 1</td></tr>
<div id="Question2H21"></div>
<tr><td>Line 2</td></tr>
</table>
</form>
</body>
</html>

This has been stripped down as it was rather a long page. It's an ASP page where the row colour changes depending on which row it is (but that's been taken out here). I want the middle row in the table to be displayed if the user clicks 1 in the select menu, otherwise the middle row is to remain hidden. The above code does not show the line no matter what value is selected. If I change the code to have the <tr> and <td> tags around the <div> tag, the row does appear when it's suppose to but there is a small line of colour left when the row is hidden which my boss doesn't like. Does anyone know how I can get the row to appear as it should but to also leave no trace when it's hidden?

Webforumz Staff · #2 (**permalink**) Sep 7th, 2005, 17:13

If you look at this example, the middle row exists it's just hidden with CSS:

Code: Select all

<table cellspacing="0" cellspacing="0" cellpadding="0" border="1">
<tr><td>a</td></tr>
<tr style="display:none;"><td>b</td></tr>
<tr><td>c</td></tr>
</table>

So rather than trying to add the row to the table using .innerHTML I'd recommend writing the row in from the start and hiding/showing it using CSS display:none; and display:show; and Javascript.

ClaireB · #3 (**permalink**) Sep 8th, 2005, 10:45

Thanks Catalyst,

That worked a treat, had to tweak the display:show to a different value but other than that it was plain sailing.

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
a little help - image placement	stupid dog	Web Page Design	5	Jul 30th, 2007 17:49
New Adsense placement	craig	Webforumz Suggestions and Feedback	26	Dec 19th, 2006 19:22
Problem with CSS/Java graphic placement	MikeX	Web Page Design	4	Aug 21st, 2006 19:26
Strange text placement (IE)	Tino	Web Page Design	3	Aug 7th, 2006 15:10

		Webforumz.com > Main Forums > Program Your Website > JavaScript Forum
Dynamic Placement