Log in

View Full Version : Popup menu (like ipb)


gonny
04-10-2007, 09:04 PM
Hi all!

Has anyone some idea how can make a popup menu like in Invision power board in "Forum Option" or like at Vbulletin in "Tools" or "Search".

So, I mean when click on button open menu and when click in second time to close (on button or out ... some where in page).
mburt
04-10-2007, 09:11 PM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<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);
if (el.style.display == "block") {
el.style.display = "none";
}
else {
el.style.left = cur.offsetLeft+"px";
el.style.top = cur.offsetTop+cur.offsetHeight+"px";
el.style.display = "block";
}
return false;
}
</script>
</head>
<body>
<a href="#" onclick="return show(this,'dlg1');">Test</a>
<div id="dlg1" class="dialog">
Text to show.
</div>
</body>
</html>
gonny
04-10-2007, 09:39 PM
mburt thanx for replying me but there is a litle problem.
Menu disapear if I click in "Test". I want to disapear menu if I click in page too.
mburt
04-10-2007, 10:11 PM
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<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);
if (el.style.display == "block") {
el.style.display = "none";
}
else {
el.style.left = cur.offsetLeft+"px";
el.style.top = cur.offsetTop+cur.offsetHeight+"px";
el.style.display = "block";
}
return false;
}
</script>
</head>
<body>
<a href="#" onclick="return show(this,'dlg1');" onblur="this.style.display='none';">Test</a>
<div id="dlg1" class="dialog">
Text to show.
</div>
</body>
</html>
gonny
04-11-2007, 05:03 PM
Lol this disapear "Test" not menu on click somewhere in page.
I dont know if have understand what I want...
mburt
04-11-2007, 07:14 PM
Lol... Point taken.
Replace the "this" with:

document.getElementById('dlg1')
gonny
04-11-2007, 08:09 PM
not work again.

and menu show on top of page not where I want (ex. in a cell table)
thetestingsite
04-11-2007, 10:50 PM
The only thing that I can really help out with in this matter is the disappearing link 'Test'. Simply go back to the original script that mburt has posted, then remove the onblur part from the link. That will stop the 'Test' link from disappearing and also get the menu to show up underneath the link.

As for getting the menu to close when the user clicks outside of the div, no clue. I was playing around with it, but could not figure it out.

Anyways, hope this helps.
mburt
04-12-2007, 12:13 AM
Sorry, I posted the code really quickly, in a rush:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<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');">Test</a>
<div id="dlg1" class="dialog">
Text to show.
</div>
</body>
</html>
Should work, but I'm on my dad's laptop, and can't test in Firefox.
thetestingsite
04-12-2007, 12:17 AM
Tested and works like a charm. The only thing that I could see that could be better is this part:



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


Change it to:



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


Hope this helps.

//EDIT: To see a test of this code, go to http://phphost.smackum.com/test2.html
gonny
08-27-2007, 01:28 PM
Thanks a lot.
But how I can put it where I want, because this example works on the left-top page. For example to put it on a table somewhere when menu open deform the table.