469,902 Members | 1,944 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,902 developers. It's quick & easy.

popup menu questions

PJ6
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
Sep 9 '05 #1
4 1513
ASM
PJ6 wrote:
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[i].onmouseover= function() {pop(this)};
T[i].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>

--
Stephane Moriaux et son [moins] vieux Mac
Sep 9 '05 #2
PJ6 wrote:
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.

<URL:http://www.quirksmode.org/dom/getstyles.html>
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.

TIA,
Paul

--
Rob
Sep 9 '05 #3
PJ6
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" <st*********************@wanadoo.fr.invalid> wrote in message
news:43**********************@news.wanadoo.fr...
PJ6 wrote:
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[i].onmouseover= function() {pop(this)};
T[i].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>

--
Stephane Moriaux et son [moins] vieux Mac

Sep 12 '05 #4
ASM
PJ6 wrote:
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.mor...lle_layers.htm
on-click :
http://perso.wanadoo.fr/stephane.mor...yers_click.htm

--
Stephane Moriaux et son [moins] vieux Mac
Sep 13 '05 #5

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

2 posts views Thread by ouech | last post: by
18 posts views Thread by Colin McGuire | last post: by
2 posts views Thread by SamSpade | last post: by
7 posts views Thread by anthony.turcotte | last post: by
3 posts views Thread by RahimAsif | last post: by
9 posts views Thread by john | last post: by
5 posts views Thread by SQACSharp | last post: by
1 post views Thread by Waqarahmed | last post: by
reply views Thread by Salome Sato | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.