Javascript Help

mrjokers · 11-30-2007, 07:10 PM

Im new to javascript but I found some code on the internet that allows me to display a hidden <div> when a link is clicked on. The <div> disappears when any other part of the page is clicked on. It is similar to google.com's "more" link at the top of the page.

My question is that when I click on the link the div does not disappear. however, when any other part of the page is clicked, it does. How do I make it so that the div disappears when the link is clicked?

Here is my current code:

<html>
<head>
<title>Hover</title>

<style type="text/css">
.dialog {
position:absolute;
padding: 3px;
border: 1px solid gray;
font: 10pt arial;
display: none;
}
</style>

<script type="text/javascript">
function show(cur,element) {
var el = document.getElementById(element);
el.style.left = cur.offsetLeft+"px";
el.style.top = cur.offsetTop+cur.offsetHeight+"px";
el.style.display = "block";
document.onclick = function(e) {
var obj = document.all ? event.srcElement : e.target;
if (obj != el && obj != cur) {
el.style.display = "none";
}
}
}
</script>

</head>

<body>

<a href="#" onClick="show(this,'dlg1'); return false;">Test</a>

<div id="dlg1" class="dialog">
Text to show.
</div>

</body>
</html>

Costin Trifan · 12-01-2007, 03:25 PM

Firstly, welcome to v7n, mrjokers!

Now, to answer your question:
1. you need to delete one line from your code (the bolded comented one):

Code:

    var el = document.getElementById(element);
        el.style.left = cur.offsetLeft+"px";
        el.style.top = cur.offsetTop+cur.offsetHeight+"px";
        //el.style.display = "block";

2. add this lines of code:

Code:

	if ( el.style.display == 'none' ) {
		el.style.display = 'block';
	}
	else {
		el.style.display = 'none';
	}

3. finally, your code should look like this:

Code:

function show(cur,element) {
    var el = document.getElementById(element);
        el.style.left = cur.offsetLeft+"px";
        el.style.top = cur.offsetTop+cur.offsetHeight+"px";
        
    document.onclick = function(e)
    {
        var obj = document.all ? event.srcElement : e.target;
        
        if (obj != el && obj != cur) {
        el.style.display = "none";
        }
    }
     
     if ( el.style.display == 'none' ) {
	el.style.display = 'block';
     }
      else {
             el.style.display = 'none';
       }
}

nasty.web · 12-01-2007, 03:41 PM

Change

Code:

if ( el.style.display == 'none' )

into

Code:

if ( el.style.display != 'block' )

(because the first code has a bug when you have to click on a link two times to get it working)