Solved

Scroll to specific location within a div

Posted on 2003-11-26
10
1,235 Views
Last Modified: 2012-06-27
I have the following div
<div id="inlineScroll" style="margin: 0; padding: 0; overflow: auto; height:250">
</div>

within the div is a form and a dynamically generated table which can have from 0 to 10 elements, each element is approximately 250 px high, currently if the user submits the form the incomplete required field receives the focus, which brings most of the element into display however the element name and description are not displayed as they are above the form element, i would like to scroll to the top of the element as well as set the focus on the incomplete text box. at the top of the element is a named anchor with an identiofier to the element
0
Comment
Question by:James Rodgers
  • 5
  • 5
10 Comments
 
LVL 25

Expert Comment

by:devic
ID: 9828305
hi Jester_48,

here example:
=====================
<div id="inlineScroll" style="margin: 0; padding: 0; overflow: auto; height:250; width:100">
<a href=#aaa>scroll to AAAA</a>
sdffffffffffffffffff<br>
sdffffffffffffffffff<br>
sdffffffffffffffffff<br>
sdffffffffffffffffff<br>
sdffffffffffffffffff<br>
sdffffffffffffffffff<br>
sdffffffffffffffffff<br>
sdffffffffffffffffff<br>
sdffffffffffffffffff<br>
sdffffffffffffffffff<br>
sdffffffffffffffffff<br>
sdffffffffffffffffff<br>
sdffffffffffffffffff<br>
sdffffffffffffffffff<br>
sdffffffffffffffffff<br>
<a name=#aaa></a>AAAA
sdffffffffffffffffff<br><br>
sdffffffffffffffffff
sdffffffffffffffffff
</div>
0
 
LVL 25

Expert Comment

by:devic
ID: 9828334
here is with form:

=======================
<div id="inlineScroll" style="margin: 0; padding: 0; overflow: auto; height:250; width:300">
<a href=javascript:document.forms[0].q12.focus()>focus q12</a>
<form action=http://www.google.com/search>
      <input type=text name=q1 value=q1><br>
      <input type=text name=q2 value=q2><br>
      <input type=text name=q3 value=q3><br>
      <input type=text name=q4 value=q4><br>
      <input type=text name=q5 value=q5><br>
      <input type=text name=q6 value=q6><br>
      <input type=text name=q7 value=q7><br>
      <input type=text name=q8 value=q8><br>
      <input type=text name=q9 value=q9><br>
      <input type=text name=q10 value=q10><br>
      <input type=text name=q11 value=q11><br>
      <input type=text name=q12 value=q12><br>
      <input type=text name=q13 value=q13><br>
      <input type=text name=q14 value=q14><br>
      <input type=text name=q15 value=q15><br>
      <input type=text name=q16 value=q16><br>
      <input type=text name=q17 value=q17><br>
      <input type=text name=q18 value=q18><br>
      <input type=text name=q19 value=q19><br>
      <input type=submit>
</form>
</div>
0
 
LVL 25

Author Comment

by:James Rodgers
ID: 9828340
i need to do it from within the validation routine

something like

function validateForm(objForm){
...
if(!document.getElementById(secCom1).value.replace(/^\s+|\s+$/g,"").length && !document.getElementById(secCom1).value.replace(/^\s+|\s+$/g,"").length){
document.getElementById(secCom1).focus();
//go to named anchor here
err=err+"You have not provided your developement goals.\n";
bValid=false;
                  }
else if((document.getElementById(secCom1).value.replace(/^\s+|\s+$/g,"").length || document.getElementById(secCom1).value.replace(/^\s+|\s+$/g,"").length) &&!document.getElementById(secSup).value.replace(/^\s+|\s+$/g,"").length ){
document.getElementById(secSup).focus();
// go to named anchor here
err=err+"You have not provided your supporting facts.\n";
                        bValid=false;
                  }
            }
      if(err){
            alert(err);
      }
      return false;
      }
0
 
LVL 25

Author Comment

by:James Rodgers
ID: 9828383
what i have in the scrolling div is
-----------------------------------------------------------------------  // if the user does not
sectionid : section description
-----------------------------------------------------------------------  // complete the required fields the focus is set on the
text area1                                                                            // required field, which will hide the section id and
                                                                                          // description, i need to scroll to show the
              ------------------------------------------------------------ // id and description
text area2
             
              ------------------------------------------------------------
text area3
             
              ------------------------------------------------------------
0
 
LVL 25

Expert Comment

by:devic
ID: 9828392
ok call from you validation function

document.forms[0].field.focus();

if you want complete solution, post complete code :)
0
How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

 
LVL 25

Author Comment

by:James Rodgers
ID: 9828454
no, there is a focus call within the validation, but i need to scroll up about from the focused filed to the section header
so that this
                                                               
              ------------------------------------------------------------
text area2  this area has focus
             
              ------------------------------------------------------------
text area3
             
              ------------------------------------------------------------
becomes this

-----------------------------------------------------------------------  
sectionid : section description
-----------------------------------------------------------------------  
text area1                                                                          
                                                                                         
              ------------------------------------------------------------
text area2 this area has focus
                but section header shows
              ------------------------------------------------------------
text area3
             
              ------------------------------------------------------------


0
 
LVL 25

Expert Comment

by:devic
ID: 9828462
do you want to sroll inside of textarea?
0
 
LVL 25

Author Comment

by:James Rodgers
ID: 9828501
no not the text area within the div, here is the entire page code, it might give a better idea of teh problem and wht it is i am trying to do



  <style type="text/css">
      body
      {
       scrollbar-3d-light-color:FFFFCC;
       scrollbar-arrow-color:000000;
       scrollbar-base-color:525252;
       scrollbar-dark-shadow-color:F2F2F2;
       scrollbar-face-color:D8DFF3;
       scrollbar-highlight-color:808080;
       scrollbar-shadow-color:000000;
       }
       </style> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
      <title>Untitled</title>
      <style>
      table,th,td{
      font-size:10pt;
      vertical-align:top;
}

table{
      align:center;
}
      
      </style>
      <script>
      function resizeToContent(){
            var x =document.getElementById("dynamTbl").scrollHeight;
            var z = x;
            var y =screen.availHeight-100;
            while (x < y){
                  x+=1;
            }
            x-=z;
            document.getElementById("inlineScroll").style.height=x
      }
      
      function validateForm(objForm){
            var bValid=true;
            var err="";      
            for(var x=0; x<arrID.length && bValid;x++){
                  secCom1=arrID[x]+'COMMENTS12';
                  secCom2=arrID[x]+'COMMENTS35';
                  secSup=arrID[x]+'SUPPORTINGCOMMENTS';
                  secAnchor ='anchor'+arrID[x];
                  if(!document.getElementById(secCom1).value.replace(/^\s+|\s+$/g,"").length && !document.getElementById(secCom1).value.replace(/^\s+|\s+$/g,"").length){
                        document.getElementById(secCom1).focus();
                        err=err+"You have not provided your developement goals.\n";
                        bValid=false;
                  }
                  else if((document.getElementById(secCom1).value.replace(/^\s+|\s+$/g,"").length || document.getElementById(secCom1).value.replace(/^\s+|\s+$/g,"").length) &&!document.getElementById(secSup).value.replace(/^\s+|\s+$/g,"").length ){
                        document.getElementById(secSup).focus();
                        err=err+"You have not provided your supporting facts.\n";
                        bValid=false;
                  }
            }
      if(err){
            alert(err);
      }
      return false;
      }
      </script>
</head>

<body>
 
 
 
 
 
 
 
 
 
 
       
                                       
                      
                      
                          
                                       
                      
                      
                          
                                       
                      
                      
                          
                                       
                      
                      
                          
                                       
                      
                      
                          
                                       
                      
                      
                          
                                       
                      
                      
                          
                                       
                      
                      
                          
                     
                   
                                       
                      
                      
                          
                                       
                      
                      
                          
                                       
                      
                      
                          
                                       
                      
                      
                          
                                       
                      
                      
                          
                                       
                      
                      
                          
                         
                     
                                 
                      
                      
                          
                                       
                      
                      
                          
                                       
                      
                      
                          
                         
                                       
                      
                      
                          
                         
                         
                     
                   
                         
                         
                                       
                      
                      
                          
                         
                         
                     
                   
                         
                                       
                      
                      
                          
                         
                         
                     
                   
                                       
                      
                      
                          
                         
                         
                     
                                 
                      
                      
                          
                         
                         
                     
                   
                         
                     
                  
</script>
            <table align="center" width="600" id="dynamTbl" border="0">
      <tr>
            <td>
                  <table border="0">
                        <caption>What are my development goals</caption>
                        <tr>
                              <td>The previous activity helped you consider various development directions. Those that received the height realism scores (listed below) are probably the most realistic.
                              
                              </td>
                        </tr>
                        <tr>
                              <td>
                                    You will now target specific development goals. It  is both acceptable and advisable to target several. You should always have some goals related to your current position, even if you eventually expect to move on. For example it is always necessary to have some development goals related top improving your skills and staying current regardless of what other goals you may have.
                                    You can also have several goals related to the same development direction. For example, you may decide on several development challenges you would like to build into your current position.
                              </td>
                        </tr>
                        <tr>
                              <td>Your goals should communicate what you want to accomplish and be as specific as possible(for example, the improvement of a specific skill or preparation for a specific assignment) and the amount of time achieving your goal will take.</td>
                        </tr>
                        <tr>
                              <td>
                                    <ul style="margin-bottom:0">
                                          <li>"Improve my managerial skills" and "prepare for lateral rotation are too general</li>
                                          <li>"Improve my team building skills during the next quarter in my current position" or "prepare for lateral rotation to hub operations within the next two years" are specific</li>
                                    </ul>
                              </td>
                        </tr>
                        <tr>
                              <td>
                                    Using these guidelines, write your developmental goals for the next 1-2 years, 3-5 years and the supporting factors<span style="color:red">*</span> on the appropriarte area for each development direction.
                              </td>
                        </tr>
                        <tr>
                              <td>
                                    <span style="color:red; font-size:12pt">*</span>Setting development goals also reqires demonstrating that they are supported by by facts that show tha goals are compatible with both your needs and UPS's needs. Thes supporting facts should point out how your targeted development goals are
                                    <ul style="margin-bottom:0;margin-top:0">
                                          <li>relevant to your skills, interests, values, and development needs</li>
                                          <li>realistic in relation to your capabilities and development potential</li>
                                          <li>relevant to UPS's current and future business needs</li>
                                          <li>realistic in relation to potential opportunities within UPS</li>
                                    </ul>
                              </td>
                        </tr>
                  </table>
            
            </td>
      </tr>
      <tr>
            <td>
                  <table>
                        <tr>
                              <th width="303">Development Directions</th>
                              <th width="78">Mgr. Support</th>
                              <th width="78">Bus. Needs</th>
                              <th width="78">Your Needs</th>
                              <th width="78">Realism Score</th>
                        </tr>
                  </table>
            </td>
       </tr>
       <tr>
             <td>
      
       <form name="devGoals" action="" method="post" onSubmit="return validateForm(this)">
<div id="inlineScroll" style="margin: 0; padding: 0; overflow: auto; height:250">
      <table  border="1" style="border:2px outset #d8dff3">

      

              
            
            
                  <tr>
                              <td>
                                    <table width="300">
                                          <tr>
                                                <th width="30">H<a name="anchorH"></a></th>
                                                <th align="left">Prepare for a lateral rotation </th>
                                          </tr>
                                          <tr>
                                                <td></td>
                                                <td> Preparing to move to another assignment at the same level of responsibility.</td>
                                          </tr>
                                    </table>
                              </td>
                              <td>
                                    <table width="75">
                                          <tr>
                                                <td align="center">
                                                            5
                                                      </td>
                                          </tr>
                                    </table>
                              </td>
                              <td>
                                    <table width="75">
                                          <tr>
                                                <td align="center">
                                                            3
                                                      </td>
                                          </tr>
                                    </table>
                              </td>
                              <td>
                                    <table width="75">
                                          <tr>
                                                <td align="center">
                                                            5
                                                      </td>
                                          </tr>
                                    </table>
                              </td>
                              <td>
                                    <table width="75">
                                          <tr>
                                                <td align="center">
                                                            13
                                                      </td>
                                          </tr>
                                    </table>
                              </td>
                        </tr>      
                        <tr>
                              <td colspan="5">
                                    <table>
                                          <tr valign="top">
                                                <td>1-2 Year Goals</td>
                                                <td><textarea name="HCOMMENTS12" cols="60" rows="3" wrap="soft"></textarea></td>
                                          </tr>
                                          <tr valign="top">
                                                <td>3-5 Year Goals</td>
                                                <td><textarea name="HCOMMENTS35" cols="60" rows="3" wrap="soft"></textarea></td>
                                          </tr>
                                          <tr valign="top">
                                                <td>Supporting Factors</td>
                                                <td><textarea name="HSUPPORTINGCOMMENTS" cols="60" rows="3" wrap="soft"></textarea></td>
                                          </tr>
                                    </table>
                              </td>
                           </tr>            

   



              
            
            
                  <tr>
                              <td>
                                    <table width="300">
                                          <tr>
                                                <th width="30">D<a name="anchorD"></a></th>
                                                <th align="left">Incorporate more of the interests in your current position </th>
                                          </tr>
                                          <tr>
                                                <td></td>
                                                <td> Getting involved in aspects of your work that you would find interesting and enjoyable.</td>
                                          </tr>
                                    </table>
                              </td>
                              <td>
                                    <table width="75">
                                          <tr>
                                                <td align="center">
                                                            2
                                                      </td>
                                          </tr>
                                    </table>
                              </td>
                              <td>
                                    <table width="75">
                                          <tr>
                                                <td align="center">
                                                            4
                                                      </td>
                                          </tr>
                                    </table>
                              </td>
                              <td>
                                    <table width="75">
                                          <tr>
                                                <td align="center">
                                                            5
                                                      </td>
                                          </tr>
                                    </table>
                              </td>
                              <td>
                                    <table width="75">
                                          <tr>
                                                <td align="center">
                                                            11
                                                      </td>
                                          </tr>
                                    </table>
                              </td>
                        </tr>      
                        <tr>
                              <td colspan="5">
                                    <table>
                                          <tr valign="top">
                                                <td>1-2 Year Goals</td>
                                                <td><textarea name="DCOMMENTS12" cols="60" rows="3" wrap="soft"></textarea></td>
                                          </tr>
                                          <tr valign="top">
                                                <td>3-5 Year Goals</td>
                                                <td><textarea name="DCOMMENTS35" cols="60" rows="3" wrap="soft"></textarea></td>
                                          </tr>
                                          <tr valign="top">
                                                <td>Supporting Factors</td>
                                                <td><textarea name="DSUPPORTINGCOMMENTS" cols="60" rows="3" wrap="soft"></textarea></td>
                                          </tr>
                                    </table>
                              </td>
                           </tr>            

   



              
            
            
                  <tr>
                              <td>
                                    <table width="300">
                                          <tr>
                                                <th width="30">E<a name="anchorE"></a></th>
                                                <th align="left">Better satisfy your values in your current position </th>
                                          </tr>
                                          <tr>
                                                <td></td>
                                                <td> Getting involved in job activities to which you feel a strong sense of commitment.</td>
                                          </tr>
                                    </table>
                              </td>
                              <td>
                                    <table width="75">
                                          <tr>
                                                <td align="center">
                                                            2
                                                      </td>
                                          </tr>
                                    </table>
                              </td>
                              <td>
                                    <table width="75">
                                          <tr>
                                                <td align="center">
                                                            4
                                                      </td>
                                          </tr>
                                    </table>
                              </td>
                              <td>
                                    <table width="75">
                                          <tr>
                                                <td align="center">
                                                            5
                                                      </td>
                                          </tr>
                                    </table>
                              </td>
                              <td>
                                    <table width="75">
                                          <tr>
                                                <td align="center">
                                                            11
                                                      </td>
                                          </tr>
                                    </table>
                              </td>
                        </tr>      
                        <tr>
                              <td colspan="5">
                                    <table>
                                          <tr valign="top">
                                                <td>1-2 Year Goals</td>
                                                <td><textarea name="ECOMMENTS12" cols="60" rows="3" wrap="soft"></textarea></td>
                                          </tr>
                                          <tr valign="top">
                                                <td>3-5 Year Goals</td>
                                                <td><textarea name="ECOMMENTS35" cols="60" rows="3" wrap="soft"></textarea></td>
                                          </tr>
                                          <tr valign="top">
                                                <td>Supporting Factors</td>
                                                <td><textarea name="ESUPPORTINGCOMMENTS" cols="60" rows="3" wrap="soft"></textarea></td>
                                          </tr>
                                    </table>
                              </td>
                           </tr>            

   



              
            
            
                  <tr>
                              <td>
                                    <table width="300">
                                          <tr>
                                                <th width="30">F<a name="anchorF"></a></th>
                                                <th align="left">Building development challenges into your current position </th>
                                          </tr>
                                          <tr>
                                                <td></td>
                                                <td> Incorporating tasks that stretch you and provide opportunities for learning and growth.</td>
                                          </tr>
                                    </table>
                              </td>
                              <td>
                                    <table width="75">
                                          <tr>
                                                <td align="center">
                                                            2
                                                      </td>
                                          </tr>
                                    </table>
                              </td>
                              <td>
                                    <table width="75">
                                          <tr>
                                                <td align="center">
                                                            3
                                                      </td>
                                          </tr>
                                    </table>
                              </td>
                              <td>
                                    <table width="75">
                                          <tr>
                                                <td align="center">
                                                            5
                                                      </td>
                                          </tr>
                                    </table>
                              </td>
                              <td>
                                    <table width="75">
                                          <tr>
                                                <td align="center">
                                                            10
                                                      </td>
                                          </tr>
                                    </table>
                              </td>
                        </tr>      
                        <tr>
                              <td colspan="5">
                                    <table>
                                          <tr valign="top">
                                                <td>1-2 Year Goals</td>
                                                <td><textarea name="FCOMMENTS12" cols="60" rows="3" wrap="soft"></textarea></td>
                                          </tr>
                                          <tr valign="top">
                                                <td>3-5 Year Goals</td>
                                                <td><textarea name="FCOMMENTS35" cols="60" rows="3" wrap="soft"></textarea></td>
                                          </tr>
                                          <tr valign="top">
                                                <td>Supporting Factors</td>
                                                <td><textarea name="FSUPPORTINGCOMMENTS" cols="60" rows="3" wrap="soft"></textarea></td>
                                          </tr>
                                    </table>
                              </td>
                           </tr>            

   



              
            
            
                  <tr>
                              <td>
                                    <table width="300">
                                          <tr>
                                                <th width="30">A<a name="anchorA"></a></th>
                                                <th align="left">Improve your skills </th>
                                          </tr>
                                          <tr>
                                                <td></td>
                                                <td> Continuously improving to ensure career success.</td>
                                          </tr>
                                    </table>
                              </td>
                              <td>
                                    <table width="75">
                                          <tr>
                                                <td align="center">
                                                            4
                                                      </td>
                                          </tr>
                                    </table>
                              </td>
                              <td>
                                    <table width="75">
                                          <tr>
                                                <td align="center">
                                                            2
                                                      </td>
                                          </tr>
                                    </table>
                              </td>
                              <td>
                                    <table width="75">
                                          <tr>
                                                <td align="center">
                                                            3
                                                      </td>
                                          </tr>
                                    </table>
                              </td>
                              <td>
                                    <table width="75">
                                          <tr>
                                                <td align="center">
                                                            9
                                                      </td>
                                          </tr>
                                    </table>
                              </td>
                        </tr>      
                        <tr>
                              <td colspan="5">
                                    <table>
                                          <tr valign="top">
                                                <td>1-2 Year Goals</td>
                                                <td><textarea name="ACOMMENTS12" cols="60" rows="3" wrap="soft"></textarea></td>
                                          </tr>
                                          <tr valign="top">
                                                <td>3-5 Year Goals</td>
                                                <td><textarea name="ACOMMENTS35" cols="60" rows="3" wrap="soft"></textarea></td>
                                          </tr>
                                          <tr valign="top">
                                                <td>Supporting Factors</td>
                                                <td><textarea name="ASUPPORTINGCOMMENTS" cols="60" rows="3" wrap="soft"></textarea></td>
                                          </tr>
                                    </table>
                              </td>
                           </tr>            

   



              
            
            
                  <tr>
                              <td>
                                    <table width="300">
                                          <tr>
                                                <th width="30">G<a name="anchorG"></a></th>
                                                <th align="left">Prepare for promotion </th>
                                          </tr>
                                          <tr>
                                                <td></td>
                                                <td> Preparing to move up a level in responsibility.</td>
                                          </tr>
                                    </table>
                              </td>
                              <td>
                                    <table width="75">
                                          <tr>
                                                <td align="center">
                                                            4
                                                      </td>
                                          </tr>
                                    </table>
                              </td>
                              <td>
                                    <table width="75">
                                          <tr>
                                                <td align="center">
                                                            2
                                                      </td>
                                          </tr>
                                    </table>
                              </td>
                              <td>
                                    <table width="75">
                                          <tr>
                                                <td align="center">
                                                            3
                                                      </td>
                                          </tr>
                                    </table>
                              </td>
                              <td>
                                    <table width="75">
                                          <tr>
                                                <td align="center">
                                                            9
                                                      </td>
                                          </tr>
                                    </table>
                              </td>
                        </tr>      
                        <tr>
                              <td colspan="5">
                                    <table>
                                          <tr valign="top">
                                                <td>1-2 Year Goals</td>
                                                <td><textarea name="GCOMMENTS12" cols="60" rows="3" wrap="soft"></textarea></td>
                                          </tr>
                                          <tr valign="top">
                                                <td>3-5 Year Goals</td>
                                                <td><textarea name="GCOMMENTS35" cols="60" rows="3" wrap="soft"></textarea></td>
                                          </tr>
                                          <tr valign="top">
                                                <td>Supporting Factors</td>
                                                <td><textarea name="GSUPPORTINGCOMMENTS" cols="60" rows="3" wrap="soft"></textarea></td>
                                          </tr>
                                    </table>
                              </td>
                           </tr>            

   



              
            
            
                  <tr>
                              <td>
                                    <table width="300">
                                          <tr>
                                                <th width="30">I<a name="anchorI"></a></th>
                                                <th align="left">Prepare for temporary assignment/special project </th>
                                          </tr>
                                          <tr>
                                                <td></td>
                                                <td> Preparing for a brief assignment usually to provide a brief exposure to/awareness of a new area.</td>
                                          </tr>
                                    </table>
                              </td>
                              <td>
                                    <table width="75">
                                          <tr>
                                                <td align="center">
                                                            3
                                                      </td>
                                          </tr>
                                    </table>
                              </td>
                              <td>
                                    <table width="75">
                                          <tr>
                                                <td align="center">
                                                            2
                                                      </td>
                                          </tr>
                                    </table>
                              </td>
                              <td>
                                    <table width="75">
                                          <tr>
                                                <td align="center">
                                                            4
                                                      </td>
                                          </tr>
                                    </table>
                              </td>
                              <td>
                                    <table width="75">
                                          <tr>
                                                <td align="center">
                                                            9
                                                      </td>
                                          </tr>
                                    </table>
                              </td>
                        </tr>      
                        <tr>
                              <td colspan="5">
                                    <table>
                                          <tr valign="top">
                                                <td>1-2 Year Goals</td>
                                                <td><textarea name="ICOMMENTS12" cols="60" rows="3" wrap="soft"></textarea></td>
                                          </tr>
                                          <tr valign="top">
                                                <td>3-5 Year Goals</td>
                                                <td><textarea name="ICOMMENTS35" cols="60" rows="3" wrap="soft"></textarea></td>
                                          </tr>
                                          <tr valign="top">
                                                <td>Supporting Factors</td>
                                                <td><textarea name="ISUPPORTINGCOMMENTS" cols="60" rows="3" wrap="soft"></textarea></td>
                                          </tr>
                                    </table>
                              </td>
                           </tr>            

   








<tr>
      <td colspan="5" align="center"><input type="submit" value="submit"></td>
</tr>
</table>
</div>
</form>
      </td>
      </tr>
</table>
<script>
 var arrID= new Array();
 
 arrID[0]='H';
 
 arrID[1]='D';
 
 arrID[2]='E';
 
 arrID[3]='F';
 
 arrID[4]='A';
 
 arrID[5]='G';
 
 arrID[6]='I';
 
 arrID[7]='C';
 
 arrID[8]='J';
 
 arrID[9]='B';
 
</script>

</body>
</html>
0
 
LVL 25

Accepted Solution

by:
devic earned 300 total points
ID: 9828568
here:
==============
 <style type="text/css">
     body
    {
     scrollbar-3d-light-color:FFFFCC;
     scrollbar-arrow-color:000000;
     scrollbar-base-color:525252;
     scrollbar-dark-shadow-color:F2F2F2;
     scrollbar-face-color:D8DFF3;
     scrollbar-highlight-color:808080;
     scrollbar-shadow-color:000000;
     }
     </style> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
    <title>Untitled</title>
    <style>
    table,th,td{
    font-size:10pt;
    vertical-align:top;
}

table{
    align:center;
}
   
     </style>
    <script>
    function resizeToContent(){
         var x =document.getElementById("dynamTbl").scrollHeight;
         var z = x;
         var y =screen.availHeight-100;
         while (x < y){
              x+=1;
         }
         x-=z;
         document.getElementById("inlineScroll").style.height=x
    }
   
     function validateForm(objForm){
         var bValid=true;
         var err="";    
          for(var x=0; x<arrID.length && bValid;x++){
              secCom1=arrID[x]+'COMMENTS12';
              secCom2=arrID[x]+'COMMENTS35';
              secSup=arrID[x]+'SUPPORTINGCOMMENTS';
              secAnchor ='anchor'+arrID[x];
              if(!document.getElementById(secCom1).value.replace(/^\s+|\s+$/g,"").length && !document.getElementById(secCom1).value.replace(/^\s+|\s+$/g,"").length){
                   //document.getElementById(secCom1).focus();
                           document.location.href="#anchor"+arrID[x]
                   err=err+"You have not provided your developement goals.\n";
                   bValid=false;
              }
              else if((document.getElementById(secCom1).value.replace(/^\s+|\s+$/g,"").length || document.getElementById(secCom1).value.replace(/^\s+|\s+$/g,"").length) &&!document.getElementById(secSup).value.replace(/^\s+|\s+$/g,"").length ){
                   //document.getElementById(secSup).focus();
                            document.location.href="#anchor"+arrID[x]
                   err=err+"You have not provided your supporting facts.\n";
                   bValid=false;
              }
         }
    if(err){
         alert(err);
    }
    return false;
    }
    </script>
</head>

<body>          

         <table align="center" width="600" id="dynamTbl" border="0">
    <tr>
         <td>
              <table border="0">
                   <caption>What are my development goals</caption>
                   <tr>
                        <td>The previous activity helped you consider various development directions. Those that received the height realism scores (listed below) are probably the most realistic.
                       
                         </td>
                   </tr>
                   <tr>
                        <td>
                             You will now target specific development goals. It  is both acceptable and advisable to target several. You should always have some goals related to your current position, even if you eventually expect to move on. For example it is always necessary to have some development goals related top improving your skills and staying current regardless of what other goals you may have.
                             You can also have several goals related to the same development direction. For example, you may decide on several development challenges you would like to build into your current position.
                        </td>
                   </tr>
                   <tr>
                        <td>Your goals should communicate what you want to accomplish and be as specific as possible(for example, the improvement of a specific skill or preparation for a specific assignment) and the amount of time achieving your goal will take.</td>
                   </tr>
                   <tr>
                        <td>
                             <ul style="margin-bottom:0">
                                  <li>"Improve my managerial skills" and "prepare for lateral rotation are too general</li>
                                  <li>"Improve my team building skills during the next quarter in my current position" or "prepare for lateral rotation to hub operations within the next two years" are specific</li>
                             </ul>
                        </td>
                   </tr>
                   <tr>
                        <td>
                             Using these guidelines, write your developmental goals for the next 1-2 years, 3-5 years and the supporting factors<span style="color:red">*</span> on the appropriarte area for each development direction.
                         </td>
                   </tr>
                   <tr>
                        <td>
                             <span style="color:red; font-size:12pt">*</span>Setting development goals also reqires demonstrating that they are supported by by facts that show tha goals are compatible with both your needs and UPS's needs. Thes supporting facts should point out how your targeted development goals are
                             <ul style="margin-bottom:0;margin-top:0">
                                  <li>relevant to your skills, interests, values, and development needs</li>
                                  <li>realistic in relation to your capabilities and development potential</li>
                                  <li>relevant to UPS's current and future business needs</li>
                                  <li>realistic in relation to potential opportunities within UPS</li>
                             </ul>
                        </td>
                   </tr>
              </table>
         
         </td>
    </tr>
    <tr>
         <td>
              <table>
                   <tr>
                        <th width="303">Development Directions</th>
                        <th width="78">Mgr. Support</th>
                        <th width="78">Bus. Needs</th>
                        <th width="78">Your Needs</th>
                        <th width="78">Realism Score</th>
                   </tr>
              </table>
          </td>
     </tr>
     <tr>
          <td>
     
     <form name="devGoals" action="" method="post" onSubmit="return validateForm(this)">
<div id="inlineScroll" style="margin: 0; padding: 0; overflow: auto; height:250">
    <table  border="1" style="border:2px outset #d8dff3">

   

           
         
         
               <tr>
                        <td>
                             <table width="300">
                                  <tr>
                                       <th width="30">H<a name="anchorH"></a></th>
                                       <th align="left">Prepare for a lateral rotation </th>
                                  </tr>
                                  <tr>
                                       <td></td>
                                       <td> Preparing to move to another assignment at the same level of responsibility.</td>
                                  </tr>
                             </table>
                        </td>
                        <td>
                             <table width="75">
                                  <tr>
                                       <td align="center">
                                                 5
                                            </td>
                                  </tr>
                             </table>
                        </td>
                        <td>
                             <table width="75">
                                  <tr>
                                       <td align="center">
                                                 3
                                            </td>
                                  </tr>
                             </table>
                        </td>
                        <td>
                             <table width="75">
                                  <tr>
                                       <td align="center">
                                                 5
                                            </td>
                                  </tr>
                             </table>
                        </td>
                        <td>
                             <table width="75">
                                  <tr>
                                       <td align="center">
                                                 13
                                            </td>
                                  </tr>
                             </table>
                        </td>
                   </tr>    
                    <tr>
                        <td colspan="5">
                             <table>
                                  <tr valign="top">
                                       <td>1-2 Year Goals</td>
                                       <td><textarea name="HCOMMENTS12" cols="60" rows="3" wrap="soft"></textarea></td>
                                  </tr>
                                  <tr valign="top">
                                       <td>3-5 Year Goals</td>
                                       <td><textarea name="HCOMMENTS35" cols="60" rows="3" wrap="soft"></textarea></td>
                                  </tr>
                                  <tr valign="top">
                                       <td>Supporting Factors</td>
                                       <td><textarea name="HSUPPORTINGCOMMENTS" cols="60" rows="3" wrap="soft"></textarea></td>
                                  </tr>
                             </table>
                        </td>
                      </tr>          

 



           
         
         
               <tr>
                        <td>
                             <table width="300">
                                  <tr>
                                       <th width="30">D<a name="anchorD"></a></th>
                                       <th align="left">Incorporate more of the interests in your current position </th>
                                  </tr>
                                  <tr>
                                       <td></td>
                                       <td> Getting involved in aspects of your work that you would find interesting and enjoyable.</td>
                                  </tr>
                             </table>
                        </td>
                        <td>
                             <table width="75">
                                  <tr>
                                       <td align="center">
                                                 2
                                            </td>
                                  </tr>
                             </table>
                        </td>
                        <td>
                             <table width="75">
                                  <tr>
                                       <td align="center">
                                                 4
                                            </td>
                                  </tr>
                             </table>
                        </td>
                        <td>
                             <table width="75">
                                  <tr>
                                       <td align="center">
                                                 5
                                            </td>
                                  </tr>
                             </table>
                        </td>
                        <td>
                             <table width="75">
                                  <tr>
                                       <td align="center">
                                                 11
                                            </td>
                                  </tr>
                             </table>
                        </td>
                   </tr>    
                    <tr>
                        <td colspan="5">
                             <table>
                                  <tr valign="top">
                                       <td>1-2 Year Goals</td>
                                       <td><textarea name="DCOMMENTS12" cols="60" rows="3" wrap="soft"></textarea></td>
                                  </tr>
                                  <tr valign="top">
                                       <td>3-5 Year Goals</td>
                                       <td><textarea name="DCOMMENTS35" cols="60" rows="3" wrap="soft"></textarea></td>
                                  </tr>
                                  <tr valign="top">
                                       <td>Supporting Factors</td>
                                       <td><textarea name="DSUPPORTINGCOMMENTS" cols="60" rows="3" wrap="soft"></textarea></td>
                                  </tr>
                             </table>
                        </td>
                      </tr>          

 



           
         
         
               <tr>
                        <td>
                             <table width="300">
                                  <tr>
                                       <th width="30">E<a name="anchorE"></a></th>
                                       <th align="left">Better satisfy your values in your current position </th>
                                  </tr>
                                  <tr>
                                       <td></td>
                                       <td> Getting involved in job activities to which you feel a strong sense of commitment.</td>
                                  </tr>
                             </table>
                        </td>
                        <td>
                             <table width="75">
                                  <tr>
                                       <td align="center">
                                                 2
                                            </td>
                                  </tr>
                             </table>
                        </td>
                        <td>
                             <table width="75">
                                  <tr>
                                       <td align="center">
                                                 4
                                            </td>
                                  </tr>
                             </table>
                        </td>
                        <td>
                             <table width="75">
                                  <tr>
                                       <td align="center">
                                                 5
                                            </td>
                                  </tr>
                             </table>
                        </td>
                        <td>
                             <table width="75">
                                  <tr>
                                       <td align="center">
                                                 11
                                            </td>
                                  </tr>
                             </table>
                        </td>
                   </tr>    
                    <tr>
                        <td colspan="5">
                             <table>
                                  <tr valign="top">
                                       <td>1-2 Year Goals</td>
                                       <td><textarea name="ECOMMENTS12" cols="60" rows="3" wrap="soft"></textarea></td>
                                  </tr>
                                  <tr valign="top">
                                       <td>3-5 Year Goals</td>
                                       <td><textarea name="ECOMMENTS35" cols="60" rows="3" wrap="soft"></textarea></td>
                                  </tr>
                                  <tr valign="top">
                                       <td>Supporting Factors</td>
                                       <td><textarea name="ESUPPORTINGCOMMENTS" cols="60" rows="3" wrap="soft"></textarea></td>
                                  </tr>
                             </table>
                        </td>
                      </tr>          

 



           
         
         
               <tr>
                        <td>
                             <table width="300">
                                  <tr>
                                       <th width="30">F<a name="anchorF"></a></th>
                                       <th align="left">Building development challenges into your current position </th>
                                  </tr>
                                  <tr>
                                       <td></td>
                                       <td> Incorporating tasks that stretch you and provide opportunities for learning and growth.</td>
                                  </tr>
                             </table>
                        </td>
                        <td>
                             <table width="75">
                                  <tr>
                                       <td align="center">
                                                 2
                                            </td>
                                  </tr>
                             </table>
                        </td>
                        <td>
                             <table width="75">
                                  <tr>
                                       <td align="center">
                                                 3
                                            </td>
                                  </tr>
                             </table>
                        </td>
                        <td>
                             <table width="75">
                                  <tr>
                                       <td align="center">
                                                 5
                                            </td>
                                  </tr>
                             </table>
                        </td>
                        <td>
                             <table width="75">
                                  <tr>
                                       <td align="center">
                                                 10
                                            </td>
                                  </tr>
                             </table>
                        </td>
                   </tr>    
                    <tr>
                        <td colspan="5">
                             <table>
                                  <tr valign="top">
                                       <td>1-2 Year Goals</td>
                                       <td><textarea name="FCOMMENTS12" cols="60" rows="3" wrap="soft"></textarea></td>
                                  </tr>
                                  <tr valign="top">
                                       <td>3-5 Year Goals</td>
                                       <td><textarea name="FCOMMENTS35" cols="60" rows="3" wrap="soft"></textarea></td>
                                  </tr>
                                  <tr valign="top">
                                       <td>Supporting Factors</td>
                                       <td><textarea name="FSUPPORTINGCOMMENTS" cols="60" rows="3" wrap="soft"></textarea></td>
                                  </tr>
                             </table>
                        </td>
                      </tr>          

 



           
         
         
               <tr>
                        <td>
                             <table width="300">
                                  <tr>
                                       <th width="30">A<a name="anchorA"></a></th>
                                       <th align="left">Improve your skills </th>
                                  </tr>
                                  <tr>
                                       <td></td>
                                       <td> Continuously improving to ensure career success.</td>
                                  </tr>
                             </table>
                        </td>
                        <td>
                             <table width="75">
                                  <tr>
                                       <td align="center">
                                                 4
                                            </td>
                                  </tr>
                             </table>
                        </td>
                        <td>
                             <table width="75">
                                  <tr>
                                       <td align="center">
                                                 2
                                            </td>
                                  </tr>
                             </table>
                        </td>
                        <td>
                             <table width="75">
                                  <tr>
                                       <td align="center">
                                                 3
                                            </td>
                                  </tr>
                             </table>
                        </td>
                        <td>
                             <table width="75">
                                  <tr>
                                       <td align="center">
                                                 9
                                            </td>
                                  </tr>
                             </table>
                        </td>
                   </tr>    
                    <tr>
                        <td colspan="5">
                             <table>
                                  <tr valign="top">
                                       <td>1-2 Year Goals</td>
                                       <td><textarea name="ACOMMENTS12" cols="60" rows="3" wrap="soft"></textarea></td>
                                  </tr>
                                  <tr valign="top">
                                       <td>3-5 Year Goals</td>
                                       <td><textarea name="ACOMMENTS35" cols="60" rows="3" wrap="soft"></textarea></td>
                                  </tr>
                                  <tr valign="top">
                                       <td>Supporting Factors</td>
                                       <td><textarea name="ASUPPORTINGCOMMENTS" cols="60" rows="3" wrap="soft"></textarea></td>
                                  </tr>
                             </table>
                        </td>
                      </tr>          

 



           
         
         
               <tr>
                        <td>
                             <table width="300">
                                  <tr>
                                       <th width="30">G<a name="anchorG"></a></th>
                                       <th align="left">Prepare for promotion </th>
                                  </tr>
                                  <tr>
                                       <td></td>
                                       <td> Preparing to move up a level in responsibility.</td>
                                  </tr>
                             </table>
                        </td>
                        <td>
                             <table width="75">
                                  <tr>
                                       <td align="center">
                                                 4
                                            </td>
                                  </tr>
                             </table>
                        </td>
                        <td>
                             <table width="75">
                                  <tr>
                                       <td align="center">
                                                 2
                                            </td>
                                  </tr>
                             </table>
                        </td>
                        <td>
                             <table width="75">
                                  <tr>
                                       <td align="center">
                                                 3
                                            </td>
                                  </tr>
                             </table>
                        </td>
                        <td>
                             <table width="75">
                                  <tr>
                                       <td align="center">
                                                 9
                                            </td>
                                  </tr>
                             </table>
                        </td>
                   </tr>    
                    <tr>
                        <td colspan="5">
                             <table>
                                  <tr valign="top">
                                       <td>1-2 Year Goals</td>
                                       <td><textarea name="GCOMMENTS12" cols="60" rows="3" wrap="soft"></textarea></td>
                                  </tr>
                                  <tr valign="top">
                                       <td>3-5 Year Goals</td>
                                       <td><textarea name="GCOMMENTS35" cols="60" rows="3" wrap="soft"></textarea></td>
                                  </tr>
                                  <tr valign="top">
                                       <td>Supporting Factors</td>
                                       <td><textarea name="GSUPPORTINGCOMMENTS" cols="60" rows="3" wrap="soft"></textarea></td>
                                  </tr>
                             </table>
                        </td>
                      </tr>          

 



           
         
         
               <tr>
                        <td>
                             <table width="300">
                                  <tr>
                                       <th width="30">I<a name="anchorI"></a></th>
                                       <th align="left">Prepare for temporary assignment/special project </th>
                                  </tr>
                                  <tr>
                                       <td></td>
                                       <td> Preparing for a brief assignment usually to provide a brief exposure to/awareness of a new area.</td>
                                  </tr>
                             </table>
                        </td>
                        <td>
                             <table width="75">
                                  <tr>
                                       <td align="center">
                                                 3
                                            </td>
                                  </tr>
                             </table>
                        </td>
                        <td>
                             <table width="75">
                                  <tr>
                                       <td align="center">
                                                 2
                                            </td>
                                  </tr>
                             </table>
                        </td>
                        <td>
                             <table width="75">
                                  <tr>
                                       <td align="center">
                                                 4
                                            </td>
                                  </tr>
                             </table>
                        </td>
                        <td>
                             <table width="75">
                                  <tr>
                                       <td align="center">
                                                 9
                                            </td>
                                  </tr>
                             </table>
                        </td>
                   </tr>    
                    <tr>
                        <td colspan="5">
                             <table>
                                  <tr valign="top">
                                       <td>1-2 Year Goals</td>
                                       <td><textarea name="ICOMMENTS12" cols="60" rows="3" wrap="soft"></textarea></td>
                                  </tr>
                                  <tr valign="top">
                                       <td>3-5 Year Goals</td>
                                       <td><textarea name="ICOMMENTS35" cols="60" rows="3" wrap="soft"></textarea></td>
                                  </tr>
                                  <tr valign="top">
                                       <td>Supporting Factors</td>
                                       <td><textarea name="ISUPPORTINGCOMMENTS" cols="60" rows="3" wrap="soft"></textarea></td>
                                  </tr>
                             </table>
                        </td>
                      </tr>          

 








<tr>
    <td colspan="5" align="center"><input type="submit" value="submit"></td>
</tr>
</table>
</div>
</form>
    </td>
    </tr>
</table>
<script>
var arrID= new Array();

 arrID[0]='H';

 arrID[1]='D';

 arrID[2]='E';

 arrID[3]='F';

 arrID[4]='A';

 arrID[5]='G';

 arrID[6]='I';

 arrID[7]='C';

 arrID[8]='J';

 arrID[9]='B';

</script>

</body>
</html>
0
 
LVL 25

Author Comment

by:James Rodgers
ID: 9828595
that did the trick

kept in the focus() processes tho, after the element block is scrolled to still need to set focus on the required field

thanks
0

Featured Post

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

Suggested Solutions

International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

747 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

8 Experts available now in Live!

Get 1:1 Help Now