Menu
Hi can anyone offer me any help/guidance with a small issue that I am currently having. I have a form on my page and what i want to do is display specific info/text in an info box on the form when a user is at a specific input field on my form.
my basic form is as follows.
<form>
<table summary=”whatever”>
<tr>
<td>PIN</td>
<td><input type=”text” name=”pin” value=”” size=”20″></td>
</tr>
<td>Phone</td>
<td><input type=”text” name=”phone” value=”” size=”20″></td>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td>Info Box</td>
<td> </td>
</tr>
<tr>
<td colspan=”2″><input type=”text” name”infobox” value=”” size=”20″><td>
</tr>
</table>
</form>
So what i want is when a user clicks on the Pin field “Please enter your personal PIN number in the box, this can be found in your registration email” and when on the phone field it displays “Please enter your phone number eg 03212 223478”
Kind regards
guzzer
<i>
</i><html>
<title></title>
<head>
</head>
<body>
<br>
<br>
The copied file may be corrupted with a space between Java and Script
<br>
<br>
<input type=text id="MyTextBox1" value="My Text Box 1" onfocus="javascript:InfoBox(this.id,22,-10,'Information for Text Box One');" onblur="javascipt:HideInfoBox();" onkeydown="javascipt:HideInfoBox();" >
<input type=text id="MyTextBox2" value="My Text Box 2" onfocus="javascript:InfoBox(this.id,-52,30,'Information for Text Box Two');" onblur="javascipt:HideInfoBox();" onkeydown="javascipt:HideInfoBox();" >
<script>
// InfoBox fields
// 0 - automatially contains the text box id
// 1 - the info box Y position from the top of the text box
// 2 - the info box X position from the left of the text box
// 3 - the message to be displayed in the text box
// Customise this line for the Info Box Appearance required.
document.write('<div id=InfoBoxPanel style="position:absolute;visibility:hidden;width:100px;height:50px;font-size:12px;text-align:center;padding:0px;background-color:white;border:solid black 1px;"></div>')
InfoBoxId=document.getElementById('InfoBoxPanel');
function InfoBox(id,top,left,message){
ThisId=document.getElementById(id);
ThisTop=top;
ThisLeft=left;
ThisMessage=message;
setTimeout('ShowInfoBox()',100);
}
function ShowInfoBox(){
InfoBoxId.style.top=(FindTop()+ThisTop)+'px';
InfoBoxId.style.left=(FindLeft()+ThisLeft)+'px';
InfoBoxId.innerHTML=ThisMessage;
InfoBoxId.style.visibility='visible';
}
function HideInfoBox(){
InfoBoxId.style.visibility='hidden';
}
function FindLeft(){
if (ThisId.offsetLeft) return ThisId.offsetLeft;
if (ThisId.style.left) return ThisId.style.left;
if (ThisId.style.pixelLeft) return ThisId.style.pixelLeft;
return (null);
}
function FindTop(){
if (ThisId.offsetTop) return ThisId.offsetTop;
if (ThisId.style.top) return ThisId.style.top;
if (ThisId.style.pixelTop) return ThisId.style.pixelTop;
return (null);
}
</SCRIPT>
</BODY>
</HTML>
[i]Originally posted by vwphillips [/i]
[B]Is this the sort of thing
<i>
</i><html>
<title></title>
<head>
</head>
<body>
<br>
<br>
The copied file may be corrupted with a space between Java and Script
<br>
<br>
<input type=text id="MyTextBox1" value="My Text Box 1" onfocus="javascript:InfoBox(this.id,22,-10,'Information for Text Box One');" onblur="javascipt:HideInfoBox();" onkeydown="javascipt:HideInfoBox();" >
<input type=text id="MyTextBox2" value="My Text Box 2" onfocus="javascript:InfoBox(this.id,-52,30,'Information for Text Box Two');" onblur="javascipt:HideInfoBox();" onkeydown="javascipt:HideInfoBox();" >
<script>
// InfoBox fields
// 0 - automatially contains the text box id
// 1 - the info box Y position from the top of the text box
// 2 - the info box X position from the left of the text box
// 3 - the message to be displayed in the text box
// Customise this line for the Info Box Appearance required.
document.write('<div id=InfoBoxPanel style="position:absolute;visibility:hidden;width:100px;height:50px;font-size:12px;text-align:center;padding:0px;background-color:white;border:solid black 1px;"></div>')
InfoBoxId=document.getElementById('InfoBoxPanel');
function InfoBox(id,top,left,message){
ThisId=document.getElementById(id);
ThisTop=top;
ThisLeft=left;
ThisMessage=message;
setTimeout('ShowInfoBox()',100);
}
function ShowInfoBox(){
InfoBoxId.style.top=(FindTop()+ThisTop)+'px';
InfoBoxId.style.left=(FindLeft()+ThisLeft)+'px';
InfoBoxId.innerHTML=ThisMessage;
InfoBoxId.style.visibility='visible';
}
function HideInfoBox(){
InfoBoxId.style.visibility='hidden';
}
function FindLeft(){
if (ThisId.offsetLeft) return ThisId.offsetLeft;
if (ThisId.style.left) return ThisId.style.left;
if (ThisId.style.pixelLeft) return ThisId.style.pixelLeft;
return (null);
}
function FindTop(){
if (ThisId.offsetTop) return ThisId.offsetTop;
if (ThisId.style.top) return ThisId.style.top;
if (ThisId.style.pixelTop) return ThisId.style.pixelTop;
return (null);
}
</SCRIPT>
</BODY>
</HTML>
It should be easy to customise but let me know if you want it changed
It should recognise the text box position but may be confused if in a table.
if you wanted to keep it realy simple you could use title="My message" in the text box [/B][/QUOTE]
[i]Originally posted by vwphillips [/i]
[B]Is this the sort of thing
<i>
</i><html>
<title></title>
<head>
</head>
<body>
<br>
<br>
The copied file may be corrupted with a space between Java and Script
<br>
<br>
<input type=text id="MyTextBox1" value="My Text Box 1" onfocus="javascript:InfoBox(this.id,22,-10,'Information for Text Box One');" onblur="javascipt:HideInfoBox();" onkeydown="javascipt:HideInfoBox();" >
<input type=text id="MyTextBox2" value="My Text Box 2" onfocus="javascript:InfoBox(this.id,-52,30,'Information for Text Box Two');" onblur="javascipt:HideInfoBox();" onkeydown="javascipt:HideInfoBox();" >
<script>
// InfoBox fields
// 0 - automatially contains the text box id
// 1 - the info box Y position from the top of the text box
// 2 - the info box X position from the left of the text box
// 3 - the message to be displayed in the text box
// Customise this line for the Info Box Appearance required.
document.write('<div id=InfoBoxPanel style="position:absolute;visibility:hidden;width:100px;height:50px;font-size:12px;text-align:center;padding:0px;background-color:white;border:solid black 1px;"></div>')
InfoBoxId=document.getElementById('InfoBoxPanel');
function InfoBox(id,top,left,message){
ThisId=document.getElementById(id);
ThisTop=top;
ThisLeft=left;
ThisMessage=message;
setTimeout('ShowInfoBox()',100);
}
function ShowInfoBox(){
InfoBoxId.style.top=(FindTop()+ThisTop)+'px';
InfoBoxId.style.left=(FindLeft()+ThisLeft)+'px';
InfoBoxId.innerHTML=ThisMessage;
InfoBoxId.style.visibility='visible';
}
function HideInfoBox(){
InfoBoxId.style.visibility='hidden';
}
function FindLeft(){
if (ThisId.offsetLeft) return ThisId.offsetLeft;
if (ThisId.style.left) return ThisId.style.left;
if (ThisId.style.pixelLeft) return ThisId.style.pixelLeft;
return (null);
}
function FindTop(){
if (ThisId.offsetTop) return ThisId.offsetTop;
if (ThisId.style.top) return ThisId.style.top;
if (ThisId.style.pixelTop) return ThisId.style.pixelTop;
return (null);
}
</SCRIPT>
</BODY>
</HTML>
It should be easy to customise but let me know if you want it changed
It should recognise the text box position but may be confused if in a table.
if you wanted to keep it realy simple you could use title="My message" in the text box [/B][/QUOTE]
<i>
</i><html>
<title></title>
<head>
</head>
<body>
<center>
<br>
<br>by VicPhillips (22-07-2004)
<br><a href="www.vicsJavaScripts.org.uk">www.vicsJavaScripts.org.uk</a>
<br>
The copied file may be corrupted with a space between Java and Script
<br>
<br>Much easier, put it where you want.
<br>
<br>Set the required position in the customising variables.
<br>If you want to fix it in a table cell set var InfoBoxFixIt='Yes';
<br>and the cell &lt;td id="InfoBoxFix" valign="top" >
<br>
<br>Concerened what would happen as you scrolled the page so have added a float.
<br>
<br>What is wrong with the status bar anyway??
<br>
<br>
<br>
<table width="200" border="1">
<tr>
<td>
<input type=text id="MyTextBox1" value="My Text Box 1" onfocus="javascript:InfoBox('Information for Text Box One');" onblur="javascipt:HideInfoBox();" onkeydown="javascipt:HideInfoBox();" >
</td>
</tr>
<tr>
<td>
<input type=text id="MyTextBox2" value="My Text Box 2" onfocus="javascript:InfoBox('Information for Text Box Two');" onblur="javascipt:HideInfoBox();" onkeydown="javascipt:HideInfoBox();" >
</td>
</tr>
<tr height=60>
<td id="InfoBoxFix" valign="top" >&nbsp;
</td>
</tr>
</table>
</center>
<script>
// InfoBox fields
// 0 - the message to be displayed in the text box
// Customising Variables
var InfoBoxFixIt='No';
var InfoBoxHeight=50;
var InfoBoxWidth=100;
var InfoBoxTop=450;
var InfoBoxLeft=400;
var InfoBoxFloat='Yes';
// Customise this line for the Info Box Appearance required.
InfoBoxCode='<div id=InfoBoxPanel style="position:absolute;visibility:hidden;width:'+InfoBoxWidth+'px;height:'+InfoBoxHeight+'px;font-size:12px;text-align:center;padding:0px;background-color:white;border:solid black 1px;"></div>';
if (InfoBoxFixIt=='Yes'){
document.getElementById('InfoBoxFix').innerHTML=InfoBoxCode
InfoBoxId=document.getElementById('InfoBoxPanel');
InfoBoxId.style.top='0px';
InfoBoxId.style.left='0px';
InfoBoxFloat='No';
}
else {
document.write(InfoBoxCode);
InfoBoxId=document.getElementById('InfoBoxPanel');
InfoBoxId.style.top=InfoBoxTop+'px';
InfoBoxId.style.left=InfoBoxLeft+'px';
}
function InfoBox(message){
ThisMessage=message;
setTimeout('ShowInfoBox()',100);
}
function ShowInfoBox(){
InfoBoxId.innerHTML=ThisMessage;
InfoBoxId.style.visibility='visible';
window.status=ThisMessage;
return true
}
function HideInfoBox(){
InfoBoxId.style.visibility='hidden';
}
var ScrollOld=0;
function Scroll() {
if (window.pageYOffset!= null){
return window.pageYOffset;
}
if (document.body.scrollWidth!= null){
return document.body.scrollTop;
}
return (null);
}
function FloatDo(){
if (ScrollOld!=Scroll()){
InfoBoxId.style.top=(parseInt(InfoBoxId.style.top)+Scroll()-ScrollOld)+'px';
ScrollOld=Scroll();
}
}
onload=ScrollInterval;
function ScrollInterval(){
setInterval('FloatDo()',100);
}
if (InfoBoxFloat=='Yes'){
ScrollInterval();
}
</SCRIPT>
<br>
<img width=1 height=1000 >
</BODY>
</HTML>
<i>
</i><html>
<head>
<title></title>
<meta name="description" content="">
<meta name="keywords" content="">
</head>
<body>
<html>
<title></title>
<head>
</head>
<body>
<center>
<br>
<br>by VicPhillips (22-07-2004)
<br><a href="www.vicsJavaScripts.org.uk">www.vicsJavaScripts.org.uk</a>
<br>
The copied file may be corrupted with a space between Java and Script
<br>
<br>Much easier, put it where you want.
<br>
<br>Set the required position in the customising variables.
<br>If you want to fix it in a table cell set var InfoBoxFixIt='Yes';
<br>and the cell &lt;td id="InfoBoxFix" valign="top" >
<br>
<br>Concerened what would happen as you scrolled the page so have added a float.
<br>
<br>What is wrong with the status bar anyway??
<br>
<br>
<br>
<table width="200" border="1">
<tr>
<td>
<input type=text id="MyTextBox1" value="My Text Box 1" onfocus="javascript:InfoBox('Information for Text Box One');" onblur="javascipt:HideInfoBox();" onkeydown="javascipt:HideInfoBox();" >
</td>
</tr>
<tr>
<td>
<input type=text id="MyTextBox2" value="My Text Box 2" onfocus="javascript:InfoBox('Information for Text Box Two');" onblur="javascipt:HideInfoBox();" onkeydown="javascipt:HideInfoBox();" >
</td>
</tr>
<tr height=60>
<td id="InfoBoxFix" valign="top" >
</td>
</tr>
</table>
</center>
<script>
// InfoBox fields
// 0 - the message to be displayed in the text box
// Customising Variables
var InfoBoxFixIt='Yes';
var InfoBoxHeight=50;
var InfoBoxWidth=100;
var InfoBoxTop=450;
var InfoBoxLeft=400;
var InfoBoxFloat='Yes';
// Customise this line for the Info Box Appearance required.
InfoBoxCode='<div id=InfoBoxPanel style=" position:absolute;visibility:hidden;width:'+InfoBoxWidth+'px;height:'+InfoBoxHeight+'px;font-size:12px;text-align:center;padding:0px;background-color:white;border:solid black 1px;"></div>';
if (InfoBoxFixIt=='Yes'){
document.getElementById('InfoBoxFix').innerHTML=InfoBoxCode
InfoBoxId=document.getElementById('InfoBoxPanel');
InfoBoxFloat='No';
}
else {
document.write(InfoBoxCode);
InfoBoxId=document.getElementById('InfoBoxPanel');
InfoBoxId.style.top=InfoBoxTop+'px';
InfoBoxId.style.left=InfoBoxLeft+'px';
}
function InfoBox(message){
ThisMessage=message;
setTimeout('ShowInfoBox()',100);
}
function ShowInfoBox(){
InfoBoxId.innerHTML=ThisMessage;
InfoBoxId.style.visibility='visible';
window.status=ThisMessage;
return true
}
function HideInfoBox(){
InfoBoxId.style.visibility='hidden';
}
var ScrollOld=0;
function Scroll() {
if (window.pageYOffset!= null){
return window.pageYOffset;
}
if (document.body.scrollWidth!= null){
return document.body.scrollTop;
}
return (null);
}
function FloatDo(){
if (ScrollOld!=Scroll()){
InfoBoxId.style.top=(parseInt(InfoBoxId.style.top)+Scroll()-ScrollOld)+'px';
ScrollOld=Scroll();
}
}
onload=ScrollInterval;
function ScrollInterval(){
setInterval('FloatDo()',100);
}
if (InfoBoxFloat=='Yes'){
ScrollInterval();
}
</SCRIPT>
<br>
<img width=1 height=1000 >
</BODY>
</HTML>
</body>
</html>
0.1.9 — BETA 5.19