473,320 Members | 2,094 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,320 software developers and data experts.

Hide 'div'

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
1 2902
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 thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

4
by: jerryyang_la1 | last post by:
I've found this script that allows be to hide/show form elements.. <script language="JavaScript"><!-- var toggle = true; function show(object) { if (document.layers && document.layers)...
4
by: bridgemanusa | last post by:
Hi All: I have a very long page of html that I want to take portions and hide them in divs, then show when a link is clicked. I have the hide show part working when the link is clicked, however...
7
by: FP | last post by:
I'm new to Java Script. I'm displaying comments people have made. Below each persons' comment I want to add 2 buttons "Reply" and "Amend". Clicking "Reply" would display an empty text field...
1
by: asilverpeach | last post by:
Hey Guys! Found some great scripts here on this topic but have to make to changes to the code that I can't seem to figure out. First, In the following code clicking on the headers shows the...
6
by: michael941 | last post by:
Hi, I have 2 tables in an html page. I have div them separately and id them as id1 and id2. I have a link there. What I need is click the link to hide one table and show the other and verse when...
5
by: ali | last post by:
Hello every one i need you help regarding div hide and show. i am having a link like <a href="#" onClick="expandWin()">show/hide </a> <div id=showHide> </div> within div i have lots of...
1
by: pamate | last post by:
hi, I want to show hide layers. I am able to show and hide layers but i am facing problem that, cant view the cursor in Mozilla,but i can type in input text box, its overlapping the layers. ...
15
by: worked | last post by:
I have a script that hides / shows form elements, and wrapped in a tab script (tab navigation). When the code is duplicated (per tab content), the hide / show function works for the first tab but...
2
by: dusk | last post by:
Hi, I have a page with lots of hidden divs which are revealed based on choices made at each 'layer'. So I've used naming convention which represents the order in which each div becomes...
18
by: ryrocks | last post by:
Hi, Im making a 'contact us' page. The user click on the div, this then reveals another larger div displaying more information giving the effect of the box expanding or dropping down. I have 3...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...
1
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: Vimpel783 | last post by:
Hello! Guys, I found this code on the Internet, but I need to modify it a little. It works well, the problem is this: Data is sent from only one cell, in this case B5, but it is necessary that data...
0
by: jfyes | last post by:
As a hardware engineer, after seeing that CEIWEI recently released a new tool for Modbus RTU Over TCP/UDP filtering and monitoring, I actively went to its official website to take a look. It turned...
0
by: ArrayDB | last post by:
The error message I've encountered is; ERROR:root:Error generating model response: exception: access violation writing 0x0000000000005140, which seems to be indicative of an access violation...
1
by: Defcon1945 | last post by:
I'm trying to learn Python using Pycharm but import shutil doesn't work
1
by: Shællîpôpï 09 | last post by:
If u are using a keypad phone, how do u turn on JavaScript, to access features like WhatsApp, Facebook, Instagram....
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 3 Apr 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome former...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.