By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,947 Members | 1,505 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,947 IT Pros & Developers. It's quick & easy.

Hide 'div'

P: n/a
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.visibilit y='hidden';
}
Jul 23 '05 #1
Share this Question
Share on Google+
1 Reply


P: n/a
Andre wrote:
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.visibilit y='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.

--
Grant Wagner <gw*****@agricoreunited.com>
comp.lang.javascript FAQ - http://jibbering.com/faq

Jul 23 '05 #2

This discussion thread is closed

Replies have been disabled for this discussion.