Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations SkipVought on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Problem with Show / Hide DIV 1

Status
Not open for further replies.
TomaHawKPT

TomaHawKPT

Programmer
Apr 26, 2003
6
0
0
PT
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


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

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

function showNext( id )
{
  showDiv(&quot;divPhase&quot;+id);
  if (id==&quot;5&quot;) hideDiv(&quot;divPhaseAdd&quot;);
  document.forms[0][&quot;Phase_&quot;+id].focus();
}
// -->
</SCRIPT>
</head>

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

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

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

function showDiv( strDivName )
{
document.all[strDivName].style.visibility = &quot;visible&quot;;
document.all[strDivName].style.display = &quot;&quot;;
document.all[strDivName].style.position = &quot;relative&quot;;
}
 
Upvote 0 Downvote
Thank you very much friendlyposter, that solved my problem ;)
 
Upvote 0 Downvote
document.all doesn't work with most browsers but only with Internet Explorer. Why not use the standard compliant document.getElementById instead?

function hideDiv( strDivName )
{
document.getElementById(strDivName).style.visibility = &quot;hidden&quot;;
document.getElementById(strDivName).style.display = &quot;none&quot;;

// document.getElementById(strDivName).style.position = &quot;absolute&quot;;
}

function showDiv( strDivName )
{
document.getElementById(strDivName).style.visibility = &quot;visible&quot;;
document.getElementById(strDivName).style.display = &quot;&quot;;
document.getElementById(strDivName).style.position = &quot;relative&quot;;
}

Gary Haran
==========================
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

Kennelbloke
  • Locked
  • Question
Can't Get Markers to show on Map
Replies
0
Views
167
Kennelbloke
Kennelbloke
jomat
  • Locked
  • Question
JS to show the timer in html under title instead of in the status bar
Replies
2
Views
175
xwb
xwb
amrmnabil
  • Locked
  • Question
React Problem
Replies
0
Views
81
amrmnabil
amrmnabil
JScannell
  • Locked
  • Question
Programmatically inserting a newline in a &lt;textarea&gt;, &lt;span&gt;, or &lt;div&gt;
Replies
5
Views
300
ggriffit
ggriffit
chrisjchrisj
  • Locked
  • Question
Allow camera access - show camera view -- don’t start recording video
Replies
0
Views
49
chrisjchrisj
chrisjchrisj

Part and Inventory Search

Sponsor

Back
Top