html_code_clinic thread: Popups on entering form controls..
Got it all working in IE and NS... (mouseover-popups)
<!-- popup.css -->
body {
font-family : Arial, Helvetica, sans-serif;
font-size : 10pt;
color : Black;
}
td {
font-family : Arial, Helvetica, sans-serif;
font-size : 10pt;
color : Black;
}
p {
font-family : Arial, Helvetica, sans-serif;
font-size : 10pt;
color : Black;
}
#help {
visibility : hidden;
left : 0px;
top : 0px;
position : absolute;
background-color : #FFFFCC;
}
<!-- popup.htm -->
<html>
<head>
<title>Popup example</title>
<link rel="stylesheet" type="text/css" href="popup.css">
<SCRIPT LANGUAGE="Javascript">
<!--
var posX=10,posY=10;
var isIE,isNS
var intervalID;
isIE=false;
isNS=false;
//get browser data...
if(navigator.appName=='Microsoft Internet Explorer') {
isIE=true;
}
if(navigator.appName=='Netscape') {
isNS=true;
//anchor-tag doesn't support the onmousemove-event in NS so use the
document.onmousemove
//NOTE: This wil allways move the help even if it is hidden
document.captureEvents(Event.MOUSEMOVE)
document.onmousemove=movehelp;
}
//popup the help-item
function popuphelp(text,evt) {
if(isIE) {
help.innerHTML=text;
help.style.left=window.event.clientX+posX;
help.style.top=window.event.clientY+posY;
help.style.visibility='visible';
}
if(isNS) {
document.layers['help'].document.clear();
document.layers['help'].document.write("<table cellspacing=0
cellpaddin=0 border=0><tr><td bgcolor=#FFFFCC>" + text +
"</td></tr></table>");
document.layers['help'].document.close();
document.layers['help'].left = evt.pageX+posX;
document.layers['help'].top = evt.pageY+posY;
document.layers['help'].visibility='visible';
}
}
//popdown the help-item
function popdownhelp() {
if(isIE) {
help.style.visibility='hidden';
}
if(isNS) {
clearInterval(intervalID);
document.layers['help'].visibility='hide';
}
}
//move the help-item
function movehelp(evt) {
if(isIE) {
help.style.left=window.event.clientX+posX;
help.style.top=window.event.clientY+posY;
}
if(isNS) {
document.layers['help'].left=evt.pageX+posX;
document.layers['help'].top=evt.pageY+posY;
}
}
//-->
</SCRIPT>
</head>
<body>
<!-- Help - layer -->
<span id="help" src="about:blank"></span>
<div align="center">
<a href="#" onmouseover="popuphelp('Test number 1',event)"
onmouseout="popdownhelp()" onmousemove="movehelp(event)">Popup number
1</a><br><br>
<a href="#" onmouseover="popuphelp('Test number 2<br>Test number
2',event)" onmouseout="popdownhelp()" onmousemove="movehelp(event)">Popup
number 2</a><br><br>
<a href="#" onmouseover="popuphelp('Test number 3<br>Test number
3<br>Test number 3',event)" onmouseout="popdownhelp()"
onmousemove="movehelp(event)">Popup number 3</a><br><br>
<a href="#" onmouseover="popuphelp('Test number 4<br>Test number
4<br>Test number 4<br>Test number 4',event)" onmouseout="popdownhelp()"
onmousemove="movehelp(event)">Popup number 4</a>
</div>
</body>
</html>
Greetz,
Arjan Bosboom.
-----Original Message-----
From: Danger Stevens [mailto:manofgod@u...]
Sent: donderdag 16 augustus 2001 7:11
To: HTML Code Clinic
Subject: [html_code_clinic] Re: Popups on entering form controls..
The technique used at www.webacademy.com are great but use DIV tags so are
only good for IE. If I were in your position, I would have a small gif icon
next to each input box. clicking the icon would open a dialog box
('window.alert' or the like) that would briefly explain the item in
question. It would be more user-controlled than an OnFocus event and might
work across browsers. Hope you get it all working!
- Danger
----- Original Message -----
From: "Andrew Haslett" <scooter@p...>
To: "HTML Code Clinic" <html_code_clinic@p...>
Sent: Wednesday, August 15, 2001 3:02 PM
Subject: [html_code_clinic] Popups on entering form controls..
> Hi all,
>
> I've got a rather large form (split into pages) where I need to gather a
> fair bit of info from the user.
>
> I'm looking to use the onfocus() and onblur() events to pop up a small
> dialog box alongside the current input field (or control) which displays a
> few lines of 'helpful' info to aid the user in entering their data. (Sort
> of similar to the 'alt' tag)
>
> Does anyone know of any scripts that I could use to do this? I found one
> called 'overlib' (http://www.bosrup.com/web/overlib/) however that is
> aimed relative to the mouse position rather than the current cursor
> position.
>
> Scripts which produce an absolute position for the 'popup' box aren't any
> good either due to poor positioning in different browser resolutions..
etc.
>
> Any ideas??
>
> Thanks in advance,
>
> Andrew
View Cart
