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=http://www.webdeveloper.com/forum/archive/index.php/"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( "divPhase"+inpPhasesNO.value);
if (inpPhasesNO.value=="5") hideDiv( "divPhaseAdd" );
document.forms[0]["Phase_"+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;">
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=http://www.webdeveloper.com/forum/archive/index.php/"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( "divPhase"+inpPhasesNO.value);
if (inpPhasesNO.value=="5") hideDiv( "divPhaseAdd" );
document.forms[0]["Phase_"+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;">