Hide 'div'

[Andre]

Hi,

I create and display a 'div' on mouseOver on a button, and hide it on
mouseOut. But my script work only for the first button. after this, the div
is displayed, but the close function doeas'nt work anymore...

Did someone have any idea ?

Thank you..

Here's my code..


function dHelp(btn,txt){
yPos = eval(document.getElementById(btn).offsetTop);
xPos = eval(document.getElementById(btn).offsetLeft);

var noteDiv=document.createElement('div');
document.body.appendChild(noteDiv);
noteDiv.id='noteDiv';
noteDiv.style.position='absolute';
noteDiv.style.top=yPos-100;
noteDiv.style.left=xPos+20;
noteDiv.style.background='lightyellow';
noteDiv.style.fontFamily='Verdana';
noteDiv.style.fontSize='x-small';
noteDiv.style.width=200;
noteDiv.style.height=85;
noteDiv.style.padding=8;
noteDiv.style.textAlign='center';
noteDiv.style.border='1 solid black';
noteDiv.innerHTML=txt;
}

function close_Help(){
document.getElementById('noteDiv').style.visibility='hidden';
}

 

[Grant Wagner]

Hi,

I create and display a 'div' on mouseOver on a button, and hide it on
mouseOut. But my script work only for the first button. after this, the div
is displayed, but the close function doeas'nt work anymore...

Did someone have any idea ?

Thank you..

Here's my code..

function dHelp(btn,txt){
yPos = eval(document.getElementById(btn).offsetTop);
xPos = eval(document.getElementById(btn).offsetLeft);

The calls to "eval()" here is entirely unnecessary. Also, by not declaring yPos
and xPos using "var", they are global in scope. You should probably be using:

var yPos = document.getElementById(btn).offsetTop;
var xPos = document.getElementById(btn).offsetLeft;

var noteDiv=document.createElement('div');
document.body.appendChild(noteDiv);

I wouldn't appendChild() until the new node is completely configured and ready
to be displayed.

noteDiv.id='noteDiv';
noteDiv.style.position='absolute';
noteDiv.style.top=yPos-100;

noteDiv.style.top = (yPos - 100) + 'px';

noteDiv.style.left=xPos+20;

noteDiv.style.lef = (xPos + 20) + 'px';

noteDiv.style.background='lightyellow';
noteDiv.style.fontFamily='Verdana';
noteDiv.style.fontSize='x-small';
noteDiv.style.width=200;

noteDiv.style.width = '200px';

noteDiv.style.height=85;

noteDiv.style.height = '85px';

noteDiv.style.padding=8;

noteDiv.style.padding = '9px';

noteDiv.style.textAlign='center';
noteDiv.style.border='1 solid black';

noteDiv.style.border='1px solid black';

noteDiv.innerHTML=txt;

Move document.body.appendChild(noteDiv); here.

}

function close_Help(){
document.getElementById('noteDiv').style.visibility='hidden';
}

You keep creating new DIV elements everytime you do this, seems particularly
wasteful, but if you are going to create a new one each time you mouseover
something, don't just set the visibility of it to hidden, remove it from the
DOM tree entirely when you're done with it:

function close_Help() {
if (document.getElementById) {
var n = document.getElementById('noteDiv');
if (n && n.parentNode && n.parentNode.removeChild) {
n.parentNode.removeChild(n);
}
}
}

A better approach might be to create a single DIV when the page loads, then
just change it's content and it's "display" style from "block" to "none" and
back.