Email conversation
| From | Nathan Zinner |
|---|
| To | Me |
|---|
| Subject | Help with basic delay/highlight menu |
|---|
| Date | 14 July 2004 16:15 |
|---|
First of all, I want to say I appreciated you menu script. Have looked at a
lot, tried using others, and so far, it does pretty much what I want it to do.
It loads very early in the page load process and behaves nicely.
I am building a website that uses a mixture of layers and tables. 8 layers are
used for a rollover locator map using image maps. I then position the menu in
a horizontal format about 75 pixels closer to the top than the image map. The
problem arises when the drop-down menu expands. The Background goes behind the
locator map, and the text appears on top of the image map. What it would
appear I need to do is assign a higher z-index to the drop down layers. I have
tried a number of things, but so far have been unable to get it to work. Could
you please point me in the right direction?
The code in your newer delay/highight menu looks nicer and I would use it, but
there seems to be a number of issues in NS 4 with the border width appearing
too large around the menu and adding a large gap between cells where there are
pictures, thus I have played with the basic delay/highlight script to get it
where I want it for now, except for the menu layer issue. I know NS 4 is quite
ancient and has a number of issues, but a good percentage of our visitors are
using NS 4 (the website has a number of different purposes, one being a portal
to documents for employees who are located in the field and many of those
people still use NS4).
You may also notice some other glitches, depending on what browswer you are
using. For now though, this is the most important issue. Your assistance
witht this would be greatly appreciated. If you feel like dealing with the
other glitches right now as well, that would be great. One of them is the drop
down menu under ministries, when you roll over anything below schools, a border
changes color, but not the actual cell.
I notice both of these issues on all browsers I have tested it with: Mozilla
1.6, Safari 1.2.2, Netscape 4.79 and Internet Explorer 5.2.3.
There is an example at http://xxx.xxxxxx.xxx/xxxx/xxxxxxxxxxxxxxxx.xxxx
I hope there is enough information here to help with the issue. I believe this
could also be an improvement to your scripts, considering the increased use of
layers in website developement.
Please respond as quickly as possible as the rest of the site is just waiting
for menu implementation before it can move on to the next phase.
as the menu system is still being developed,
right now the layer issue is noticed when you go to 'Ministries' | 'Schools'.
I will try to keep the link I gave you updated with my most recent edition as
the menu system progresses.
Look forward to hearing your solution,
Nathan Zinner
| From | Nathan Zinner |
|---|
| To | Me |
|---|
| Subject | update on request for help with basic delay/highlight menu |
|---|
| Date | 14 July 2004 17:37 |
|---|
As I was working on the rest of the menu system, I tried a variation of
something I had tried before, adding a z-index value to the style tag in the
javascript creation of a layer to hold the popo-out menu in.
Here is the new code in case you are interested in applying it to your code:
<script language="javascript1.2" type="text/javascript">
if( document.layers ) {
document.write(' </layer>\n');
document.write(' <layer onmouseover="window.clearTimeout(oDelay);"
onmouseout="oDelay = window.setTimeout(\'hideAll(1);\',500);" left="580" top=
"168" width="162" visibility="hide" z-index="10"id="Young_People">\n');
} else {
document.write(' </div>\n');
document.write(' <div onmouseover="window.clearTimeout(oDelay);" onmouseout=
"oDelay = window.setTimeout(\'hideAll(1);\',500);" style="width:162px;position:
absolute;left: 580px;top: 168px;visibility: hidden;z-index: 10" id=
"Young_People">\n');
}
</script>
When you compare it with your code, there is no z-index value in the old
script.
If you like though, have a look at the site and see what you think of the
implementation of your script (note that the site is still being developed).
There may be some bugs that you find that you may have a solution for.
Sorry for the previous e-mails,
Nathan Zinner
| From | Me |
|---|
| To | Nathan Zinner |
|---|
| Subject | Re: Help with basic delay/highlight menu |
|---|
| Date | 14 July 2004 18:06 |
|---|
Nathan,
> What it would appear I need to do is assign a higher z-index to the
> drop down layers.
You are quite correct, yo do need to assign a high z-index to every 'layer'
[each of the tags created by my if(document.layers) detects], since you
define the menu _before_ you define the other layers.
Many people actually feel that the menu should be the last thing to load,
since navigation (while important) is often the least important thing on
the page - one would hope that the actual information on the page is more
important. I guess this is upto you, but since you position the layers with
CSS or layers tags, you could actually put them last (don't put z-indexes
on any other tags) and position them in the right place.
My auto-generation menu does actually say to put the call to generate the
code at the end of the page. I did not put this on the demo page for the
one you are using since I had hoped that people would use the auto-
generation menu instead.
> The code in your newer delay/highight menu looks nicer and I would use it,
> but there seems to be a number of issues in NS 4 with the border width
> appearing too large around the menu and adding a large gap between cells
> where there are pictures
That is because Netscape 4 is old and pathetic and a security risk, and for
your own sanity, it is easier and far better to persuade people to upgrade.
However, I guess you are stuck with it for now.
I am aware that Netscape 4 (only _some_ versions - from the sound of it,
you are using a Mac, I have never bothered to install Netscape 4 on my mac,
since it is a lousy piece of software) add extra thick borders or gaps.
However, the menu still works, even though it still doesn't look so great,
and I have no intention of putting loads of extra work in to make it pixel
perfect in a browser that should by all accounts have died the death it
deserved so many years ago.
I know this is not such great news to you, but if people will insist on
continuing to use broken software, they will have to expect at least a few
minor problems like that.
The code is actually correct, and does tell Netscape in several different
ways to size the boxes correctly, but it seems the broken code of some
releases just refuses to do what it is told. I cannot really fix this
without several hacks. I could not actually find one that works, short of
removing the images altogether:
layer td img { display: none; }
In Netscape 4 on Windows (all versions I have tested anyway), the display
is pixel perfect, but on linux, it acts like you say.
As it is, your menu will suffer from several glitches because it still
writes the layer tags, even though non-layers browsers do not need them.
Some browsers (namely mozilla 1) have problems when two tags simultaneously
try to detect the same events, and for some unknown reason, mozilla detects
events on <layer> tags, even though it does not actually support them.
Also, you have a few glitches where you have failed to position the tags
correctly (the ones that still contain some of my demo text).
> I hope there is enough information here to help with the issue. I believe
> this could also be an improvement to your scripts, considering the
> increased use of layers in website developement.
by layers, I hope you are referring to positioned elements. yes, they are
becomming more common (and Netscape 4 screws most of them up beautifully
unless countless hacks are applied), but browsers that properly support
positioning also properly display the auto-generation menu.
Mark 'Tarquin' Wilton-Jones - author of http://www.howtocreate.co.uk/
| From | Nathan Zinner |
|---|
| To | Me |
|---|
| Subject | Re: Help with basic delay/highlight menu |
|---|
| Date | 14 July 2004 21:55 |
|---|
> Many people actually feel that the menu should be the last thing to load,
> since navigation (while important) is often the least important thing on the
> page -
That is true, however with the animated gif on the bottom of the page, when the
menu loads last, as in onpageLoad, the menu has to wait until after the
animated gif has loaded. Not a problem on highspeed connections, but on slow
dialup is where we noticed the problem. The IT department wants to stay away
from flash technology so am stuck with animated gif for now. Spose I could
write the menu after the rest of the page like you suggested, but put the tags
before the animated gif so that is the last thing to load.
Thanks for your quick response.
Nathan Zinner
| From | Me |
|---|
| To | Nathan Zinner |
|---|
| Subject | Auto-generation Popup Menus with delay fix |
|---|
| Date | 17 July 2004 13:39 |
|---|
Nathan,
Just thought you might be interested; I have managed to resolve the giant
border bug in a new version. Basically the problem was that Netscape 4 on
Linux and Mac would leave space for some text that was not even there. I
found that by telling them not to allow the non-existent text to use any
space, it made the menus look almost normal. The borders are still about a
pixel too wide, but this is not enough to cause any problems.
However, since the menus do not have any way to automatically apply z-index,
they would still need to be put at the end of the document. What I do find
strange is that you said that the menus would not load until the image had
loaded. With the exception of Netscape 4, all browsers lay out the HTML
without waiting for the images to load. As my menus are laid out during the
HTML stage (they do not wait for any load event), they should appear while
the images are still loading.
Of course, in Netscape 4, users may have to wait for the image information
to be retrieved, since Netscape 4 does not lay out a page until it is
certain that it knows exactly how much space the images will require.
However, this usually means just the image headers, not the whole image.
Anyway, the new menu is available from my scripts page:
http://www.howtocreate.co.uk/jslibs/
And you can see the menu running on the demo page:
http://www.howtocreate.co.uk/tutorials/jsexamples/showhidedelayarray.html
Tarquin