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!

On-Click Form Input Box Scrolling

Status
Not open for further replies.
Krus1972

Krus1972

Programmer
Mar 18, 2004
145
0
0
US
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.
 
Sort by date Sort by votes
Hi

Something like this ?
JavaScript: 
document[teal].[/teal][COLOR=orange]getElementById[/color][teal]([/teal][i][green]'id-of-your-info-input'[/green][/i][teal]).[/teal][COLOR=orange]addEventListener[/color][teal]([/teal][i][green]'click'[/green][/i][teal],[/teal] [b]function[/b][teal]() {[/teal]
    document[teal].[/teal][COLOR=orange]getElementById[/color][teal]([/teal][i][green]'id-of-your-form'[/green][/i][teal]).[/teal][COLOR=orange]scrollIntoView[/color][teal]()[/teal]
[teal]},[/teal] [b]false[/b][teal])[/teal]


Feherke.
feherke.ga
 
Upvote 0 Downvote
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:

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.
 
Upvote 0 Downvote
Hi

Make sure that JavaScript gets executed after the [tt]input[/tt] with [tt]id[/tt] display was rendered.


Feherke.
feherke.ga
 
Upvote 0 Downvote
It works perfectly, thanks for your help!
 
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
158
Kennelbloke
Kennelbloke
coldbohemia
  • Locked
  • Question
jquery function always returns contents of the same table cell, no matter which table cell i click
Replies
0
Views
119
coldbohemia
coldbohemia
rogerte
  • Locked
  • Question
Code that works on Windows, Android and Iphone
Replies
0
Views
116
rogerte
rogerte
chikwendu
  • Locked
  • Question
How do I display an extra input box for editing an existing data?
Replies
1
Views
64
chikwendu
chikwendu
JScannell
  • Locked
  • Question
Javascript issue on iPhone/iMac platforms
Replies
0
Views
119
JScannell
JScannell

Part and Inventory Search

Sponsor

Back
Top