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.g etElementById(b tn).offsetTop);
xPos = eval(document.g etElementById(b tn).offsetLeft) ;

var noteDiv=documen t.createElement ('div');
document.body.a ppendChild(note Div);
noteDiv.id='not eDiv';
noteDiv.style.p osition='absolu te';
noteDiv.style.t op=yPos-100;
noteDiv.style.l eft=xPos+20;
noteDiv.style.b ackground='ligh tyellow';
noteDiv.style.f ontFamily='Verd ana';
noteDiv.style.f ontSize='x-small';
noteDiv.style.w idth=200;
noteDiv.style.h eight=85;
noteDiv.style.p adding=8;
noteDiv.style.t extAlign='cente r';
noteDiv.style.b order='1 solid black';
noteDiv.innerHT ML=txt;
}

function close_Help(){
document.getEle mentById('noteD iv').style.visi bility='hidden' ;
}

[Grant Wagner]

Re: Hide 'div'

Andre wrote:
[color=blue]
> 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.g etElementById(b tn).offsetTop);
> xPos = eval(document.g etElementById(b tn).offsetLeft) ;[/color]

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.getEle mentById(btn).o ffsetTop;
var xPos = document.getEle mentById(btn).o ffsetLeft;
[color=blue]
> var noteDiv=documen t.createElement ('div');
> document.body.a ppendChild(note Div);[/color]

I wouldn't appendChild() until the new node is completely configured and ready
to be displayed.
[color=blue]
> noteDiv.id='not eDiv';
> noteDiv.style.p osition='absolu te';
> noteDiv.style.t op=yPos-100;[/color]

noteDiv.style.t op = (yPos - 100) + 'px';
[color=blue]
> noteDiv.style.l eft=xPos+20;[/color]

noteDiv.style.l ef = (xPos + 20) + 'px';
[color=blue]
> noteDiv.style.b ackground='ligh tyellow';
> noteDiv.style.f ontFamily='Verd ana';
> noteDiv.style.f ontSize='x-small';
> noteDiv.style.w idth=200;[/color]

noteDiv.style.w idth = '200px';
[color=blue]
> noteDiv.style.h eight=85;[/color]

noteDiv.style.h eight = '85px';
[color=blue]
> noteDiv.style.p adding=8;[/color]

noteDiv.style.p adding = '9px';
[color=blue]
> noteDiv.style.t extAlign='cente r';
> noteDiv.style.b order='1 solid black';[/color]

noteDiv.style.b order='1px solid black';
[color=blue]
> noteDiv.innerHT ML=txt;[/color]

Move document.body.a ppendChild(note Div); here.
[color=blue]
> }
>
> function close_Help(){
> document.getEle mentById('noteD iv').style.visi bility='hidden' ;
> }[/color]

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.getEl ementById) {
var n = document.getEle mentById('noteD iv');
if (n && n.parentNode && n.parentNode.re moveChild) {
n.parentNode.re moveChild(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.

--
Grant Wagner <gwagner@agrico reunited.com>
comp.lang.javas cript FAQ - http://jibbering.com/faq