Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > Select menus above flyout menus? help?

Reply
Thread Tools

Select menus above flyout menus? help?

 
 
news.west.cox.net
Guest
Posts: n/a
 
      12-08-2004
I have been asked to troubleshoot this problem. Not being a user of html
normally, I have not been able to find a solution.

http://southernpine.com/joinlocator.shtml

On the page above, there is a set of flyour menus using javascript. Each of
the menus appears in a div tag. When activated the contents of the div
slide out.

If you roll over "International Buyers", "Education", "Sustainability",
"Media Center" or the "FAQs" link, the flyout appears below the select menus
on the form.

How can I correct this? I have tried putting - style="z-index:10;" - on
the flyour divs and tried - style="z-index:1;" on the form itself as well
as the individual select menus.

Any ideas are appreciated.


 
Reply With Quote
 
 
 
 
rf
Guest
Posts: n/a
 
      12-09-2004
news.west.cox.net wrote
>
> http://southernpine.com/joinlocator.shtml
>
> If you roll over "International Buyers", "Education", "Sustainability",
> "Media Center" or the "FAQs" link, the flyout appears below the select

menus
> on the form.


This is a well known problem.

Some browsers use Windows Common Controls for their form controls. IE in
particular uses a dropdown combo box for a select box.

This is a seperate Windows window, a child of the browsers client window.
This child window lives in front (in the Windows sense) of anything that is
drawn on its parent window. So, your slide out menu slides under the select
box. There is nothing you can do to change this behaviour.

> How can I correct this? I have tried putting - style="z-index:10;" - on
> the flyour divs and tried - style="z-index:1;" on the form itself as well
> as the individual select menus.


z-index won't help. Nothing you can specify in HTML/CSS will help. There are
two workarounds:

1) Ensure that the area that the slideout menu uses does not have any select
boxes in it, and other form controls for that matter, you don't know which
browsers use which common controls for form controls. I have seen browsers
that use an edit box for an <input type="text"> field.

2) Hide the select boxes while the slideout menu is in place.

--
Cheers
Richard.


 
Reply With Quote
 
 
 
 
SpaceGirl
Guest
Posts: n/a
 
      12-09-2004
rf wrote:
> news.west.cox.net wrote
>
>>http://southernpine.com/joinlocator.shtml
>>
>>If you roll over "International Buyers", "Education", "Sustainability",
>>"Media Center" or the "FAQs" link, the flyout appears below the select

>
> menus
>
>>on the form.

>
>
> This is a well known problem.
>
> Some browsers use Windows Common Controls for their form controls. IE in
> particular uses a dropdown combo box for a select box.
>
> This is a seperate Windows window, a child of the browsers client window.
> This child window lives in front (in the Windows sense) of anything that is
> drawn on its parent window. So, your slide out menu slides under the select
> box. There is nothing you can do to change this behaviour.
>
>
>>How can I correct this? I have tried putting - style="z-index:10;" - on
>>the flyour divs and tried - style="z-index:1;" on the form itself as well
>>as the individual select menus.

>
>
> z-index won't help. Nothing you can specify in HTML/CSS will help. There are
> two workarounds:
>
> 1) Ensure that the area that the slideout menu uses does not have any select
> boxes in it, and other form controls for that matter, you don't know which
> browsers use which common controls for form controls. I have seen browsers
> that use an edit box for an <input type="text"> field.
>
> 2) Hide the select boxes while the slideout menu is in place.
>


there's a trick for this; write and empty iframe in your stack of DIVs
used for the menus. Form elements on the container page CANNOT show
through an iframe, however further DIVs can be stacked on top of
iframes. The solution is to have an iframe the same size as your menu
that appears WITH your menu, but at a lower z-index. Works in IE.

--


x theSpaceGirl (miranda)

# lead designer @ http://www.dhnewmedia.com #
# remove NO SPAM to email, or use form on website #
 
Reply With Quote
 
(Pete Cresswell)
Guest
Posts: n/a
 
      12-09-2004
RE/
>
>http://southernpine.com/joinlocator.shtml


I kind of like it.

What is the consensus on this scheme? My agenda is to settle on a method of
presenting heirarchical menu choices....preferably as concisely as possible.
--
PeteCresswell
 
Reply With Quote
 
(Pete Cresswell)
Guest
Posts: n/a
 
      12-09-2004
RE/
>http://southernpine.com/joinlocator.shtml


I should add that, as a user, I *don't* care for the clickability of the parent
topics....In fact I find this confusing in many web pages: more than one way to
get to the same place.

In this case, clicking a parent topic just opens up a new page that lists the
flyout choices all over again - or is this a fallback position in case the
user's PC does not support whatever it is (Java, I guess...) that makes the
flyout menus work? If so, I'd think one should check to see if (Java?) is
enabled on the user's machine and suppress those flyout-equivalent/duplicate
screens. ?
--
PeteCresswell
 
Reply With Quote
 
rf
Guest
Posts: n/a
 
      12-09-2004
SpaceGirl wrote:
> rf wrote:


[menus under form elements]

> > This is a well known problem.


<snip>

> there's a trick for this; write and empty iframe in your stack of DIVs
> used for the menus. Form elements on the container page CANNOT show
> through an iframe, however further DIVs can be stacked on top of
> iframes. The solution is to have an iframe the same size as your menu
> that appears WITH your menu, but at a lower z-index. Works in IE.


What a lot of hoops to jump through to fix a problem that should not be
there in the first place

Do you have an example where this actually *works*? An iframe is another
Windows window as well, just like the offending select element, with the
same sort of problems.

--
Cheers
Richard.


 
Reply With Quote
 
Jan Faerber
Guest
Posts: n/a
 
      12-09-2004
(Pete Cresswell) wrote:

> RE/
>>http://southernpine.com/joinlocator.shtml

>
> I should add that, as a user, I *don't* care for the clickability of the
> parent topics....In fact I find this confusing in many web pages: more
> than one way to get to the same place.


I don't have any problem with that. Quite the contrary:
It is more the structure that is missing when you have clicked on a child
topic which has grandchildren aswell.

e.g.:
[parent] - [child] - [grandchild]
[International Buyers] - [Metric] - [Sizes ...]

.... and you click on 'Metric' you come to
http://southernpine.com/metric.shtml

Where can you see now what parent topic you chose?

> In this case, clicking a parent topic just opens up a new page that lists
> the flyout choices all over again - or is this a fallback position in case
> the user's PC does not support whatever it is (Java, I guess...) that
> makes the
> flyout menus work? If so, I'd think one should check to see if (Java?)
> is enabled on the user's machine and suppress those
> flyout-equivalent/duplicate
> screens. ?


A clickable submenu [International Buyers] - [Metric] below the pics would
be fine here.




--
Jan

http://linux.janfaerber.com
 
Reply With Quote
 
SpaceGirl
Guest
Posts: n/a
 
      12-09-2004
rf wrote:
> SpaceGirl wrote:
>
>>rf wrote:

>
>
> [menus under form elements]
>
>
>>>This is a well known problem.

>
>
> <snip>
>
>>there's a trick for this; write and empty iframe in your stack of DIVs
>>used for the menus. Form elements on the container page CANNOT show
>>through an iframe, however further DIVs can be stacked on top of
>>iframes. The solution is to have an iframe the same size as your menu
>>that appears WITH your menu, but at a lower z-index. Works in IE.

>
>
> What a lot of hoops to jump through to fix a problem that should not be
> there in the first place


It's quite simple tho....


> Do you have an example where this actually *works*? An iframe is another
> Windows window as well, just like the offending select element, with the
> same sort of problems.


I think there are examples on www.alistapart.com, but basically;

<div "base" style="z-index:1;width:200;height:200">
<iframe width="200" height="200" ></iframe>
</div>
<div "content" style="z-index:2;width:200;height:200">
content here
</div>


>



--


x theSpaceGirl (miranda)

# lead designer @ http://www.dhnewmedia.com #
# remove NO SPAM to email, or use form on website #
 
Reply With Quote
 
rf
Guest
Posts: n/a
 
      12-09-2004
SpaceGirl wrote:
> rf wrote:
> > SpaceGirl wrote:


> > What a lot of hoops to jump through to fix a problem that should not be
> > there in the first place

>
> It's quite simple tho....


So if it is quite simple then please post a URL to a simple page that
exhibits this solution to the OP's problem.

> I think there are examples on www.alistapart.com, but basically;


<snip example>

What does this do? It puts one dive at the top of the page (with an iframe
in it) and then puts another div under that one. So?

Anyway I have visited alistapart before. I consider it *not* a place to
learn modern web techniques. The site sucks.

I want your example of where an iframe solves the OP's problem.

--
Cheers
Richard.


 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
We are currently buying Foundy Networks - primarily NetIron MLX andXMR but are also looking for BigIron RX, ServerIron WMS7, and FastIronFESX's. If you have the above or have access to the above from a clientlooking ro recover value, please sen Network/Software Buyer Cisco 1 07-30-2010 01:25 AM
Vertical Navigation Flyout Gordon3d HTML 1 08-18-2007 07:35 PM
Help with flyout menus aerotops Javascript 0 09-14-2006 03:36 PM
Flyout menus Todd Cary Javascript 1 02-03-2005 12:35 AM
problems with flyout menus and positioning Philip Townsend Javascript 1 09-30-2003 01:52 AM



Advertisments