pop out menu

[Tony]

when my mouse moves over a word a menu appears....if I don't select one of those links, how do I make my menu retract?

 

[MD Websunlimited]

Hi Tony,

You have to place a transparent image between the menu layer and the rest of the page content. When the mouse moves over the image
the onmouseover event handler will fire and from there you can set the visibility of the menu layer to hidden.

 

[Jon Spivey]

That's probably the easiest way - although you could also attach an
onmouseout to the div and detect where the mouse ends up when the event
fires. If it's still inside the div do nothing - if it ends up outside the
div hide it.

I can't think of any other ways to accomplish it easily and cross browser

Jon
Microsoft MVP - FP

 

[MD Websunlimited]

Because of the event object difference in NS and IE this becomes more browser dependant than using the transparent gif and IMHO,
harder to implement.

 

[Jon Spivey]

It shouldn't be browser dependant - every browser supports capturing a
mouseout and detecting the event target in some fashion. I've never used it
just thought it might make an interesting alternative to the transparent gif
idea. For the sake of experiment
http://myweb.tiscali.co.uk/jonspivey/mouseout.htm

Looks ugly, especially in NN4 because I did it quick. Script is pretty
trivial, should be robust and cross browser.

Jon
Microsoft MVP - FP

 

[MD Websunlimited]

The point Jon is that the event object is different from IE and NS and you need the event object to determine the firing element.
Therefore it become dependant upon the browser.

 

[Jon Spivey]

I think I know that Mike There's 3 different ways to capture an event
depending on browser - just as there's 3 different ways to show/hide a div
and do pretty much anything else DOM related. By that reckoning everything
you might want to do is browser dependant - including the transparent gif
idea.

My point is that capturing and tracking an event is easy to do on any 4+
browser. To me browser dependant means something that cannot be done in
every browser - such as the add to favourites javascript is browser
dependant because it's plain impossible to do in anything except IE.


Jon

 

[MD Websunlimited]

Wow, that is a different view of browser dependence than any other web programmers I know. ;>)

To me browser dependant means that I have to detect the browser (sniffing) in use then use different code fragments based upon the
browser, e.g., if(document.layers) or if(document.all)

I'm curious, you said that there are three ways to capture an event, what are they? I only know of one, define the event handler on
the object. There are numerous ways to define the handler on the object, however.

BTW, I took a look at your experiment and it is an interesting implementation. But it is not what you suggested, "... attach an
onmouseout to the div and detect where the mouse ends up when the event fires. If it's still inside the div do nothing - if it ends
up outside the div hide it." Based upon this statement, I assumed that you were going to compute the location of the mouse at the
time of the event.

--
Mike -- FrontPage MVP '97-'02
http://www.websunlimited.com
Wish you could calculate form field totals? Well, you can with Form Calculator
http://www.websunlimited.com/order/Product/FormCalc/formcalc.htm
FrontPage Add-ins Since '97 2003 / 2002 / 2000 Compatible

 

[Jon Spivey]

Mike,

see inline

Wow, that is a different view of browser dependence than any other web programmers I know. ;>)

To me browser dependant means that I have to detect the browser (sniffing)

in use then use different code fragments based upon the

browser, e.g., if(document.layers) or if(document.all)

Well, by your deifnition everything would be browser dependant - theres
hardly anything you can do with the same code for evey browser. I was
addressing your initial comment that this method is "more browser dependant"
than the trasnsparent gif method. Clearly it isnt - both methods need object
detection and 3 different methods depending on browser. Of course both
methods will work equally well on all 4+ browsers.

I'm curious, you said that there are three ways to capture an event, what

are they? I only know of one, define the event handler on

the object. There are numerous ways to define the handler on the object,

however.
Fair point - I should have said 3 different methods to capture an event and
then track where the mouse ends up. Of course for modern browsers we can
just define the handler on the object - for NN4 we need to explicity capture
the event first. Having said that there's no point just capturing an event
we need to do something with it Hence my 3 methods comment.

BTW, I took a look at your experiment and it is an interesting

implementation. But it is not what you suggested, "... attach an

onmouseout to the div and detect where the mouse ends up when the event

fires. If it's still inside the div do nothing - if it ends

up outside the div hide it." Based upon this statement, I assumed that

you were going to compute the location of the mouse at the

time of the event.

There's no need to actually compute the mouse location ( I assume you mean
its x/y coordinates) - we just need to find out wether the mouse is still
in the div (in which case ignore the event) or wether its moved outside the
div (in which case hide the div). It's precise location is irrelevant. As
you know an onmouseout on a div will fire when you mouseout out of anything
within the div - I think it was Jim's book that built a menu this way. The
downside of course is the mouseout will fire repeatedly as the mouse moves
around within the div and cause the menu to flicker repeatedly on and off -
not good

Jon