popup menu questions

PJ6 · Sep 9, 2005

On doubleclick of a table cell, I want to pop up a menu just under it. Right
now I've only figured out how to get the cursor position, I'd like whatever
element that pops up to be directly under the cell... can't seem to get a
workable left or height value.

Also, I've found 2 methods for hiding elements - one is to set the innerHTML
of a placeholder to different items in hidden divs, the other is to
physically move elements to negative coordinates. I'm leaning towards the
second solution because it's the simplest, and my menus need to float over
existing elements anyway. Will using negative coordinates to hide elements
work OK in most browsers?

TIA,
Paul

ASM · Sep 9, 2005

PJ6 said:
On doubleclick of a table cell, I want to pop up a menu just under it. Right
now I've only figured out how to get the cursor position, I'd like whatever
element that pops up to be directly under the cell... can't seem to get a
workable left or height value.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
"http://www.w3.org/TR/1998/REC-html40-19980424/loose.dtd">
<html><head>
<style type="text/css">
td { position: relative }
td span { display: none; position: absolute; background: #ffc;
border:1px solid red; padding: 4px; margin-top: 4px;
white-space: nowrap;}
td.iepop span { margin-top: 20px; }
td:hover span, td.iepop span { display: block }
</style>
<script type="text/javascript">
function pop(what) {
what.className = what.className==''? 'iepop' : '' ;
}
function init() {
var T = document.getElementsByTagName('TD');
ie = !!document.getElementsByTagName
&& !!document.getElementsByTagName('*')
&& !!document.getElementsByTagName('*').length
&& document.getElementsByTagName('*')[0].tagName=='!';
if(ie)
for(var i=0;i<T.length;i++) {
T.onmouseover= function() {pop(this)};
T.onmouseout= function() {pop(this)};
}
}
onload=init;
</script>
</head><body>
<table width=200 border=1>
<tr>
<td width=50%> one
<span>This is a popup<br>to see what it is<br>possible with CSS
</span>
</td>
<td> two
<span>This is an other popup, once more to see<br>
what css can make possible
</span>
</td>
</tr>
</table>
</body>
</html>

RobG · Sep 10, 2005

PJ6 said:
On doubleclick of a table cell, I want to pop up a menu just under it. Right
now I've only figured out how to get the cursor position, I'd like whatever
element that pops up to be directly under the cell... can't seem to get a
workable left or height value.

How are you attempting to get access to them? Search for
getComputedStyle (Mozill et al) and currentStyle (IE) - be prepared for
some messy code.

Also, I've found 2 methods for hiding elements - one is to set the innerHTML
of a placeholder to different items in hidden divs, the other is to
physically move elements to negative coordinates. I'm leaning towards the
second solution because it's the simplest, and my menus need to float over
existing elements anyway. Will using negative coordinates to hide elements
work OK in most browsers?

Maybe, but the bestr way is to toggle the display attribute between ''
(empty string) and 'none'. 'none' takes the element completely out of
the flow, so it is as if it wasn't in the page at all. '' (empty
string) allows the display attribute to be returned to the default (it
may not have been 'block' or any other particular value).

Some suggest toggleing between 'block' and 'none', but don't be fooled.

PJ6 · Sep 12, 2005

I like this approach but the popups tend to get overwritten by the other
cells - I can't seem to get the <SPAN> element to pay attention to any
z-index I give it, looks like it's inheriting the z-index from the
containing <TD> element. Is there any way to make a <SPAN> always on top of
any cell, even if it's contained within one?

Paul

ASM said:
PJ6 said:

On doubleclick of a table cell, I want to pop up a menu just under it.
Right now I've only figured out how to get the cursor position, I'd like
whatever element that pops up to be directly under the cell... can't seem
to get a workable left or height value.

Click to expand...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
"http://www.w3.org/TR/1998/REC-html40-19980424/loose.dtd">
<html><head>
<style type="text/css">
td { position: relative }
td span { display: none; position: absolute; background: #ffc;
border:1px solid red; padding: 4px; margin-top: 4px;
white-space: nowrap;}
td.iepop span { margin-top: 20px; }
td:hover span, td.iepop span { display: block }
</style>
<script type="text/javascript">
function pop(what) {
what.className = what.className==''? 'iepop' : '' ;
}
function init() {
var T = document.getElementsByTagName('TD');
ie = !!document.getElementsByTagName
&& !!document.getElementsByTagName('*')
&& !!document.getElementsByTagName('*').length
&& document.getElementsByTagName('*')[0].tagName=='!';
if(ie)
for(var i=0;i<T.length;i++) {
T.onmouseover= function() {pop(this)};
T.onmouseout= function() {pop(this)};
}
}
onload=init;
</script>
</head><body>
<table width=200 border=1>
<tr>
<td width=50%> one
<span>This is a popup<br>to see what it is<br>possible with CSS
</span>
</td>
<td> two
<span>This is an other popup, once more to see<br>
what css can make possible
</span>
</td>
</tr>
</table>
</body>
</html>

ASM · Sep 13, 2005

PJ6 said:
I like this approach

It was a very simple way of doing
(with css)

but the popups tend to get overwritten by the other
cells -

Yes ... try that :

td:hover span, td.iepop span, span:hover {
display: block;
z-index: 100;
}

wich fixes the problem (except with IE)

I can't seem to get the <SPAN> element to pay attention to any
z-index I give it,

Ha Ha ... your little tricks can't bother IE

It does too the same with hidden/visible forms
but, I think, a hack would exists.
As IE is soon to send to garbage ... is there very usefull to bother
about this little trouble ?

I had to create a special JS with very special IE detection
to set to each td some rollover functions
that any other browser needs ...
Delete the JS then IE will let us quiet with no more semi visible layer.

looks like it's inheriting the z-index from the
containing <TD> element. Is there any way to make a <SPAN> always on top of
any cell, even if it's contained within one?

You can heavyer try to get position of mouse (see examples below)
then at this position to get back a layer displayed
on top of html in absolute somewhere outside of window

but ... in pure css it will not be possible
and you will need JS for all navigators (caramba ! beurk !)
(the trick I gave works without JS, if the navigator isn't IE)

examples :
on-mouse-over :
http://perso.wanadoo.fr/stephane.moriaux/truc/td_info_bulle_layers.htm
on-click :
http://perso.wanadoo.fr/stephane.moriaux/truc/td_info_bulle_layers_click.htm

Newbie expand/collapsible menu problem	6	Oct 14, 2009
Minor table layout vs. popup menu question.	0	Jan 28, 2004
popup rollover menu hiding behind frame	1	Sep 25, 2003
2 menu questions	0	Aug 13, 2008
Firefox onmousedown popup/layer focus/blur	3	Nov 12, 2006
Dynamically Revealed Menu Disappearing Before It Should	1	Dec 22, 2008
trouble with popup menu	4	Sep 29, 2006
PyGTK Popup menu?	0	Mar 18, 2005

popup menu questions

PJ6

ASM

RobG

PJ6

ASM

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads