popups in javascript

[Bob Wightman]

I've had a look through the archives but cannot find anything that
really answers this so...

I have a menu system composed of a series of "buttons" (actually span
elements) that react to the usual onMouseOver; onMouseClick &
onMouseOut events. I wish to have descriptive popups associated with
each button that are shown using the onMouseOver event.

Now I can do this with one caveat: if I scroll the page down and hover
the mouse over a button, the popup appears, but it is in the same
position as if I still had the top of the document visible. I.e. the
popup appears in a fixed position with regards to the document origin
rather than next to the button it describes. Is there any way to get
around this so that the popup appears in its relative position with
regards to the button rather than the page?

TIA

Bob

 

[Richard Cornford]

I've had a look through the archives but cannot find anything that
really answers this so...

I have a menu system composed of a series of "buttons" (actually span
elements) that react to the usual onMouseOver; onMouseClick &
onMouseOut events. I wish to have descriptive popups associated with
each button that are shown using the onMouseOver event.

Now I can do this with one caveat: if I scroll the page down and hover
the mouse over a button, the popup appears, but it is in the same
position as if I still had the top of the document visible. I.e. the
popup appears in a fixed position with regards to the document origin
rather than next to the button it describes. Is there any way to get
around this so that the popup appears in its relative position with
regards to the button rather than the page?

Obviously you need to add the amount by which the page is scrolled
vertically and horizontally to the top and left values respectively when
you set them. See:-

<URL: jibbering.com/faq/faq_notes/not_browser_detect.html#bdScroll >

Richard.

 

[Steven Daedelus]

Obviously you need to add the amount by which the page is scrolled
vertically and horizontally to the top and left values respectively when
you set them. See:-

<URL: jibbering.com/faq/faq_notes/not_browser_detect.html#bdScroll >

Richard.

IIRC, position:absolute positions elements relative to their enclosing
box. Confusing but true. So if your rollovers are inside a span, you can
position the popups relative to that span by putting the code inside the
span tags and specifying position:aboslute, plus whatever offsets you
want.

You could also position the popups relative to the mouse, I believe...

 

[Lee]

Bob Wightman said:

I've had a look through the archives but cannot find anything that
really answers this so...

I have a menu system composed of a series of "buttons" (actually span
elements) that react to the usual onMouseOver; onMouseClick &
onMouseOut events. I wish to have descriptive popups associated with
each button that are shown using the onMouseOver event.

Now I can do this with one caveat: if I scroll the page down and hover
the mouse over a button, the popup appears, but it is in the same
position as if I still had the top of the document visible. I.e. the
popup appears in a fixed position with regards to the document origin
rather than next to the button it describes. Is there any way to get
around this so that the popup appears in its relative position with
regards to the button rather than the page?

Another simple option is to position the popup relative to the
pointer, which you can obtain from the onmouseover event.

 

[Thomas 'PointedEars' Lahn]

"Richard Cornford" <[email protected]> wrote:

Please don't write attribution novels, see

IIRC, position:absolute positions elements relative to their enclosing
box. [...]

It doesn't. position:absolute positions elements relative to their next
ancestor that is positioned absolute or, if there is none, to the viewport.


PointedEars

 

[Ron]

IIRC, position:absolute positions elements relative to their enclosing
box. [...]

It doesn't. position:absolute positions elements relative to their next
ancestor that is positioned absolute or, if there is none, to the viewport.

Heya Thomas,
According to the W3C recommendation, position:absolute positions
elements relative to the nearest ancestor that is not positioned
"static". I've used position:relative several times in the past in order
to use position:absolute on a descendent without having to explicitly
position its container relative to the viewport. Of course, I test
mostly in Mozilla, so I'm not sure whether IE does the same.
Reference: http://www.w3.org/TR/CSS21/visudet.html#containing-block-details

 

[Thomas 'PointedEars' Lahn]

IIRC, position:absolute positions elements relative to their enclosing
box. [...]

You seem to have confused the quotation levels.

Heya Thomas,

Please stop that. This is a public newsgroup, not private e-mail.

According to the W3C recommendation, position:absolute positions
elements relative to the nearest ancestor that is not positioned
"static".
Indeed.

[...] Of course, I test mostly in Mozilla, so I'm not sure whether
IE does the same.
Reference: http://www.w3.org/TR/CSS21/visudet.html#containing-block-details

I have tested with Mozilla/5.0 for Windows as well and they follow the spec
in this regard. IE 6 for Windows does follow it, too. Thanks for pointing
this out. However, do not cite CSS 2.1 as a reference, it is still only a CR:

| Publication as a Candidate Recommendation does not imply endorsement by
| the W3C Membership. It is inappropriate to cite this document as other
| than work in progress.

Cite CSS2 instead which states the case as well:

<http://www.w3.org/TR/CSS2/visudet.html#containing-block-details>


PointedEars

 

[Steven Daedelus]

IIRC, position:absolute positions elements relative to their enclosing
box. [...]

You seem to have confused the quotation levels.

Heya Thomas,

Please stop that. This is a public newsgroup, not private e-mail.

Chill. This is a public newsgroup, not a courtroom.