PDA

Click to See Complete Forum and Search --> : Problem with Show / Hide DIV

TomaHawK.PT
04-27-2003, 12:16 AM
Hello,

I have the following code to show some hidden DIVs, but I want the button not to have all that space from the first row and instead to come down as the DIVs are showing (if you know what I mean).

If I uncomment the second line of hideDiv function it does almost what I want, but the last DIV showed doesn't show at all... Although I know it is on the top of the page because of the blinking cursor.

Can anyone help me with this?

Thank you in advance,
TomaHawK



<html>
<head>
<title></title>
<SCRIPT LANGUAGE="JavaScript">
<!--
function hideDiv( strDivName )
{
document.all[strDivName].style.visibility = "hidden";
// document.all[strDivName].style.position = "absolute";
}

function showDiv( strDivName )
{
document.all[strDivName].style.visibility = "visible";
document.all[strDivName].style.position = "relative";
}
// -->
</SCRIPT>
</head>

<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<br>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td colspan="2">
<form name="form1" method="post" action="">
<input name="PhasesNO" type="hidden" value="1">
<table width="100%" border="0" cellspacing="5" cellpadding="0">
<tr>
<td width="25%">Phase 1</td>
<td width="75%"><input name="Phase_1" type="text" class="formelement" value="" size="50" maxlength="60"></td>
</tr>
</table>
<div id="divPhase2">
<table width="100%" border="0" cellspacing="5" cellpadding="0">
<tr>
<td width="25%">Phase 2</td>
<td width="75%"><input name="Phase_2" type="text" class="formelement" value="" size="50" maxlength="60"></td>
</tr>
</table>
</div>
<div id="divPhase3">
<table width="100%" border="0" cellspacing="5" cellpadding="0">
<tr>
<td width="25%">Phase 3</td>
<td width="75%"><input name="Phase_3" type="text" class="formelement" value="" size="50" maxlength="60"></td>
</tr>
</table>
</div>
<div id="divPhase4">
<table width="100%" border="0" cellspacing="5" cellpadding="0">
<tr>
<td width="25%">Phase 4</td>
<td width="75%"><input name="Phase_4" type="text" class="formelement" value="" size="50" maxlength="60"></td>
</tr>
</table>
</div>
<div id="divPhase5">
<table width="100%" border="0" cellspacing="5" cellpadding="0">
<tr>
<td width="25%">Phase 5</td>
<td width="75%"><input name="Phase_5" type="text" class="formelement" value="" size="50" maxlength="60"></td>
</tr>
</table>
</div>
<div id="divPhaseAdd" style="visibility:visible">
<table width="100%" border="0" cellspacing="5" cellpadding="0">
<tr>
<td><input type="button" name="Input" value="Add Phase" onClick="
var inpPhasesNO = document.forms[0].PhasesNO;
inpPhasesNO.value++;
showDiv( &quot;divPhase&quot;+inpPhasesNO.value);
if (inpPhasesNO.value==&quot;5&quot;) hideDiv( &quot;divPhaseAdd&quot; );
document.forms[0][&quot;Phase_&quot;+inpPhasesNO.value].focus();
return false;">
</td>
</tr>
</table>
</div>
</form>
</td>
</tr>
</table>
<script language="JavaScript">
<!--
hideDiv("divPhase2");
hideDiv("divPhase3");
hideDiv("divPhase4");
hideDiv("divPhase5");
-->
</script>
</body>
</html>




Take care with the button onClick code. Instead add this function to the file

function showNext( id )
{
showDiv("divPhase"+id);
if (id=="5") hideDiv("divPhaseAdd");
document.forms[0]["Phase_"+id].focus();
}

and put this code on the onClick=""
<input type="button" name="Input" value="Add Phase" onClick="
var inpPhasesNO = document.forms[0].PhasesNO;
inpPhasesNO.value++;
showNext(inpPhasesNO.value);
return false;">
Nevermore
04-27-2003, 04:58 AM
<a onclick="show('divid')">Show</a>

function show(ident) {
document.getElementById(ident).style.visibility="visible";
}

Try something based on that. Document.all is IE only.
TomaHawK.PT
04-27-2003, 09:07 AM
That shouldn't be the problem, as I was testing in IE, thanks anyway, with this I can now "port" to Netscape.

But as the problem remains, I'd like to ask all js pro's out there to run the code and see what I mean, and try to help me get it right.

Thanks
TomaHawK.PT
04-27-2003, 09:13 AM
Problem solved
I was missing the disply property
I leave here the functions now correctly running


function hideDiv( strDivName )
{
document.all[strDivName].style.visibility = "hidden";
document.all[strDivName].style.display = "none";

// document.all[strDivName].style.position = "absolute";
}

function showDiv( strDivName )
{
document.all[strDivName].style.visibility = "visible";
document.all[strDivName].style.display = "";
document.all[strDivName].style.position = "relative";
}