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

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');">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:

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:

Code:

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:

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);
  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:

Code:

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

Change it to:

Code:

<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

Thread: Popup menu (like ipb)

Thread Tools

Search Thread

Popup menu (like ipb)

Bookmarks

Bookmarks

Posting Permissions