how to align and prevent jumping of textfields..

Collapse
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • prathna
    New Member
    • Jun 2007
    • 7
    #1

    how to align and prevent jumping of textfields..

    Hi I have this following code

    Code:
    <script> function displayFields() {             document.getElementById('Label12').style.display = 'none';       document.getElementById('Label13').style.display = 'none';       document.getElementById('Label22').style.display = 'none';       document.getElementById('Label23').style.display = 'none'; }  function dispHideFileds() { alert("");    if (document.forms[0].number.value == 'One') {        document.getElementById('Label13').style.display = '';        document.getElementById('Label12').style.display = 'none';    } else {        document.getElementById('Label12').style.display = '';        document.getElementById('Label13').style.display = '';    } }  function dispHideFields1() {   if (document.forms[0].number1.value == 'One') {       document.getElementById('Label23').style.display = '';   } else {       document.getElementById('Label22').style.display = '';       document.getElementById('Label23').style.display = '';   } } </script></HEAD> <BODY pageLoaded="displayFields()">//pageLoaded must be replaced onLoad<form><table  border="0" cellpadding="0" cellspacing="0">       <tr>         <td>           <table width="100%" border="0" cellpadding="0" cellspacing="0">             <tr>                  <td  width="25%">Select :</td>                               <td align="left" width="25%" id="Label11"><selectname="number" onchange="dispHideFileds()">                                     <option value="">Select</option>                                 <option value="One">One</option>                                 <option value="Two">Two</option>                               </select>                           </td>                   <td align="left" width="25%" id="Label12"><selectname="fruit" >                               <option value="">Please Select One</option>                               <option value="Apple">Apple</option>                               <option value="Orange">Orange</option>                                  </select>                           </td>                           <td align="left" width="25%" id="Label13">This messagehas to be displayed here so that the user can read this and takeappropriate action.</td>               </tr>               <tr>                  <td width="25%">Select Direct Deposit:</td>                               <td align="left" width="25%" id="Label21"><selectname="number1" onchange="dispHideFields1()">                                    <option value="">Select</option>                                 <option value="One">One</option>                                 <option value="Two">Two</option>                               </select>                           </td>                   <td align="left" width="25%" id="Label22"><selectname="fruit1" >                              <option value="">Please Select One</option>                               <option value="Apple">Apple</option>                               <option value="Orange">Orange</option>                                  </select>                           </td>                           <td align="left" width="25%" id="Label23">This messagehas to be displayed here so that the user can read this and takeappropriate action.</td>               </tr>               </table> </td> </tr> </table></form></BODY></html>
    Now when i run this code based on what value is selected in the first dropdown i show or hide the dropdown next to it.

    If the first dropdown value is"one" then i only show a message next to it.
    If the first dropdown value is"two"then i show another dropdown next to it and then the message.

    Now i have two such rows which has the same behaviour as above .If i select value "One" for the first row .and In the second row i select value"Two" from the dropdown you can see that the fields jump and also the message will not be properly aligned how do i make it align properly.I would really appreciate your help.I have no idea how to make it work without jumping and also the message is properly aligned for bothe rows.
    If someone could help me with above code that would be really great.

    Thnaks
    Prathna
    Tags: None
    • RamananKalirajan
      Contributor
      • Mar 2008
      • 608
      #2
      Hi just try this one, i had added a div with some blank spaces i had done for one row, just check it out. any doubts post back in the forum

      [HTML]<html>
      <head>
      <script type="text/javascript">
      function doThis1()
      {
      var x=document.getE lementById("myS elect");
      if(x.options[x.selectedIndex].value=="1")
      {
      document.getEle mentById("spc1" ).style.display ='none';
      document.getEle mentById("selDi v").style.displ ay='block';
      }
      if(x.options[x.selectedIndex].value=="2")
      {
      document.getEle mentById("spc2" ).style.display ='none';
      document.getEle mentById("msgDi v").style.displ ay='block';
      }
      }
      </script>
      </head>
      <body>
      <table border="1">
      <tr>
      <td>
      <select id="mySelect" onchange="doThi s1();">
      <option value="0">selec t</option>
      <option value="1">One</option>
      <option value="2">Two</option>
      </select>
      </td>
      <td>
      <div style="height:2 0px; width=80px " id="spc1">
      </div>
      <div id="selDiv" style="display: none;">
      <select id="myFruit" >
      <option value="1">Apple </option>
      <option value="2">Orang e</option>
      </select>
      </div>
      </td>
      <td>
      <div style="height:2 0px; width=200px " id="spc2">
      </div>
      <div id="msgDiv" style="display: none;">
      This is the message to be displayed
      </div>
      </td>
      </tr>
      </table>
      </body>
      </html>[/HTML]

      Regards
      Ramanan Kalirajan

        Comment

        Previous template Next
        Working...