INTELLIGENT WORK FORUMS
FOR COMPUTER PROFESSIONALS

Log In

Come Join Us!

Are you a
Computer / IT professional?
Join Tek-Tips Forums!
  • Talk With Other Members
  • Be Notified Of Responses
    To Your Posts
  • Keyword Search
  • One-Click Access To Your
    Favorite Forums
  • Automated Signatures
    On Your Posts
  • Best Of All, It's Free!

*Tek-Tips's functionality depends on members receiving e-mail. By joining you are opting in to receive e-mail.

Posting Guidelines

Promoting, selling, recruiting, coursework and thesis posting is forbidden.

Jobs

On-Click Form Input Box Scrolling

On-Click Form Input Box Scrolling

(OP)
I have a input form box at the very top of my webpage that is used solely for displaying text for reference to the visitor. This input box is used because the look and feel of a form input box fits the look and feel of the webpage. I do NOT want to use it as an actual form entry. The real form input boxes, in which the user can enter and update information, are located at the very bottom of the webpage. I was wondering if there is a way, in Javascript, to make the browser automatically scroll to the bottom of the webpage if the form input at the top of the page is clicked...???


Any help would be well appreciated.

RE: On-Click Form Input Box Scrolling

Hi

Something like this ?

CODE --> JavaScript

document.getElementById('id-of-your-info-input').addEventListener('click', function() {
    document.getElementById('id-of-your-form').scrollIntoView()
}, false) 

Feherke.
feherke.ga

RE: On-Click Form Input Box Scrolling

(OP)
Hello,

Thanks for your response. That is not working. The browser does not scroll to the "display2" when the the "display1" input box is clicked. I've tried placing the above Javascript in the head and then within the body of the document. Here is the code I am using:

CODE --> HTML

<html>
<head>
<title>The Page Title</title>
</head>
<body>

<script type="text/javascript">
document.getElementById('display').addEventListener('click', function() 
{document.getElementById('display2').scrollIntoView()
}, false)

</script> 

<TABLE width="100%"  CELLSPACING=0 CELLPADDING=0 border="0" bordercolor="#000000">	 
<tr>
<td>
<INPUT id="display"  type="text" size="40"  style="FONT-SIZE: 14px; FONT-WEIGHT: normal; FONT-FAMILY: Arial, Verdana; font-weight: bold;" />

</td>
</tr>

<tr>
<td height="2000">
</td>
</tr>

<tr>
<td>

<form id="display2">
<INPUT type="text" size="40" style="FONT-SIZE: 14px; FONT-WEIGHT: normal; FONT-FAMILY: Arial, Verdana; font-weight: bold;" />
</form>

</td>
</tr>

</TABLE>
</body>
</html> 





Any additional help would be well appreciated.

RE: On-Click Form Input Box Scrolling

Hi

Make sure that JavaScript gets executed after the input with id display was rendered.

Feherke.
feherke.ga

RE: On-Click Form Input Box Scrolling

(OP)
It works perfectly, thanks for your help!

Red Flag This Post

Please let us know here why this post is inappropriate. Reasons such as off-topic, duplicates, flames, illegal, vulgar, or students posting their homework.

Red Flag Submitted

Thank you for helping keep Tek-Tips Forums free from inappropriate posts.
The Tek-Tips staff will check this out and take appropriate action.

Reply To This Thread

Posting in the Tek-Tips forums is a member-only feature.

Click Here to join Tek-Tips and talk with other members!

Resources

Close Box

Join Tek-Tips® Today!

Join your peers on the Internet's largest technical computer professional community.
It's easy to join and it's free.

Here's Why Members Love Tek-Tips Forums:

Register now while it's still free!

Already a member? Close this window and log in.

Join Us             Close