Flash hidden by menu - please explain a simple solution

Poster: Nick
Dated: Thursday October 30 2003 - 11:36:36 GMT

I realise this is an old subject. I have spent ages customising the free 3.3.19 version and I was really pleased.
But my site is full of flash movies. Suddenly I find I have a major problem.
I am new to javascript, and my htm skills are not exactly brilliant.
I am prepared to pay for the upgrade if this will mean the menu works on my site.
I have done the search and read the previous messages about flash and I am struggling to understand whether I have a fundemental problem and have to move on, or whether it is possible to sort out.
[/url]=http://www.delvsie.com/new
Thanks for any help

Poster: kevin3442
Dated: Thursday October 30 2003 - 16:56:20 GMT

Hi Nick,

Well... the main problem is that v3.3.19 is older than dirt So, two options:

(1) Update to the most recent release of version 3, which I believe is v3.5.15. You should be able to get it here. The later releases of v3 included updated code to layer the menus over flash movies, at least in some browsers. For older browsers, the flash will always want to be on top of dhtml (any dhtml, not just the menus), no matter what. The only option you have then is to hide the flash when the menu opens. You'll find several threads in this forum about hiding divs containing flash and other embedded objects. The advantage to staying with version 3 is that you apparently already have a working menu. The disadvantage is that v3 is very old now.

(2) Upgrade to the current version, which is version 5, RC19. You can get it here. This would probably be the best path in the long run, because version 3 is no longer supported, and you will soon find less and less support for it even here. Version 5 is current, and is a lotr better than version 3 in many ways. The drawback is that you'd have to convert your menu code (currently in your menu_array.js) to the new syntax. There is a converter you can use, but it isn't perfect yet, as far as I can tell, so you'll still probably have some manual editing to do.

Hope that helps,

Kevin

Poster: tepidarium
Dated: Thursday October 30 2003 - 19:36:10 GMT

I have this similar problem. There is one other isue to consider - hiding the Flash movie in Version 5 does not work via "hidediv" as this function has been disabled - from what we hear on the boards it may return.

As Kevin mentioned, youur only other option is to imploy a flash hiding script - Kevin has updated his scripts for version 5. - However, the major drawback here is that these scripts are incompatible with the major offending browser - Netscape 4.7

So...we may all have to wait for hidediv to return in some form at some point... ::fingers crossed::

Poster: kevin3442
Dated: Thursday October 30 2003 - 20:32:20 GMT


Hi Tepidarium,

Just a point of clarrification please... when you say "...these scripts are incompatible with... Netscape 4.7" are you referring to my scripts? I ask only because my tests of those div hiding scripts worked perfectly with NS4.75/Win2k when applied to flash. I just tried it again to verify, and it works. Have you tried using my mm_hideDiv stuff with NS4.7 and had it not work? If so, perhaps there's some other explanation that we should explore... it should be able to work!

Cheers,

Kevin

Poster: tepidarium
Dated: Thursday October 30 2003 - 21:25:34 GMT

Hi Kevin,

I thought it didn't work in NS 4.7 - I checked the old discussion thread and now I can't find that statement...

hmm..in any event I have never been able to get it to work. Maybe I'm just doing something wrong. Here's the sample:

http://www.citytech.cuny.edu/mm-pop.html

Here is the main menu code (in a seperate js file)

Poster: kevin3442
Dated: Thursday October 30 2003 - 22:29:21 GMT

Hi Tep,

Ok... you haven't implemented the hiding function quite right. Here's how it works:

mm_hideDiv(divID, menuNames);

You call the function from a menu item that opens a submenu that will overlap the object that you want to hide (flash in your case). You've got it right, in that you're using the onfunction property from various main menu items to call the mm_hideDiv() function. However, you are calling mm_hideDiv() from some menu items that do not open submenus that overlap your flash. For example, you call it in the "Academics" main menu item. But it opens the "Academics" submenu, which does not itself overlap the flash (granted, you can open additional subsubmenus from the "Academics" submenu that do overlap, but that's handled downstream, in the "Academics" menu definition.)

divID is the id of the div surrounding the object you want to hide, a flash object in your case. So far so good; your div is id="hider", so that part is ok.

menuNames is a comma-separated list of menu name, as they are named in your menu_data.js file. This list should contain the name of the submenu you are opening, as well as any adjacent menus that would also overlap the flash, that the user could get to before the previous menu closes. It's like saying "OK... hide this div and keep it hidden as long as any of these menus are open". For example, you have two items in the main menu that open submenus that will overlap your scolling flash: "Faculty/Staff" and "Students". The "Faculty/Staff" main menu item opens the "Faculty" submenu and the "Students" main menu item opens the "Students" submenu. Since they are close to each other, and since you don't close your submenus imediately upon mouseout from the main menu item (i.e., your _menuCloseDelay = 500), a user could open the "Faculty" submenu, then browse over to open the "Students" submenu beofer the "Faculty" submenu closes. So, the "Faculty/Staff" main menu item would be like this:

(note that I added a couple of line feeds to wrap the code above for easier reading) In English, this would mean,

Similarly, your "Students" main menu item would look like this:

Notice that the menuNames list is the same for both items, becuase order does not matter (it could be 'Students,Faculty' as well).

Something else important to note: Your "Admissions" main menu item is currently missing the closing parenthesis to the mm_hideDiv() function call. Newer browsers will handle this better, but you'll still get some sort of syntax error (e.g., you should at least see an error condition in the lower left corner of IE. Double click it and it'll tell you that a ')' is expected on some line or other). But NS4 will completely choke, crash, and burn as soon as you point to any menu item past "About Us" and it'll tell you that document.layers[divID] has no properties. How rude of it. Fortunately, you can eliminate that function call completely from that menu item, because it won't be needed there. Also, -- not crucial, but -- you should probably include a ; at the end of the onfunction= part, just like you would with any other menu item property.

Focusing on just the main menu, your code would be:


The other subsubmenus that overlap the flash should be attacked at a level further into the submenus. But we can visit that next (or, you'll probably figure it out as you go). For now, how about you try the main menu first, and see if that gets you anywhere.

Let me know if my explanations didn't make sense. They make great sense to me, but that's only because I have a comprehensive understaning of own inane ramblings!

Kevin

Poster: tepidarium
Dated: Friday October 31 2003 - 14:43:50 GMT

Kevin -Thank you for your detailed explanation. I'm going to try it right now and get back to you...

Poster: tepidarium
Dated: Friday October 31 2003 - 14:59:16 GMT

Hi Kevin,

Ok, I made the changes you specified. Right now I will only tackle the main menu sub menus that overlap and after I get this ironed out I will apply the function directly to the appropriate submenu -submenu spawns (if that makes sense).

THe problem is, I still can't get this hidediv to work - and now, after making the changes, the affected menu items (those with the function called) do not display their submenus in Netscape 4.7 - also, I see no evidence in any brwoser that the flash movie is being hidden at all.

Here is the new main menu code:



Thanks for all your help.

Poster: kevin3442
Dated: Saturday November 1 2003 - 7:11:26 GMT

Hi Tep,

Isn't NS4 just a royal pain in the a... uh... side? It's almost as annoying as mosquitos!

I see two main problems.


(1) When you mouse over one of the items that uses mm_hideDiv(), it's probably generating an error, that "document.layers[divId] has no properties." That would explain the submenus not appearing. You won't see that error unless you open the "Communicator Console", which you can do manually by enterin the "javascript:" command (no quotes) into the "Go to:" field, where you would normally enter a URL. Try that before making any changes, to see if you do have that error condition. So... how to fix it? In my example that you downloaded, I use an absolutely positioned div. That won't work for you, because you have a centered page and your div/flash is in a table cell. So, try adding

to your "hider" div. See if that doesn't give nutscrape the properties it so desperately wants (bloody piece of crap browser). If that works, then your menus should start opening.


(2) Your div will hide, but with some settings you currently have, only so briefly that you may not notice it! On line 9 of mm_hideDiv.js, you'll notice a variable called mm_initialDelay. This variable lets you set how long, in milliseconds (msec = 1000 of a second), the hiding function will wait to start the hiding process. To understand it's place in the scheme of things, let me explain how the process works. When you call mm_hideDiv(), it tells the browser to do the following: Hide the div identified by divID. Wait initialDelay msec, then check to see if any menu named in menuNames is open. If one is open, then keep the div hidden. Check again every mm_reshowInterval msec until none of the menus named in menuNames is open, then re-show the div and cancel the process.

I had to add mm_initialDelay because version 5 of the menu now lets you specify something called _menuOpenDelay, which is how long to wait before a menu opens, when a user mouses over the triggering menu item. (_menuOpenDelay is at the top of your menu_data.js file.)

Now suppose _menuOpenDelay=150, and mm_initialDelay=100 (your current settings). Here's what'll happen when you mouse over a menu item that calls mm_hideDiv(): The browser will immediately hide the div. It'll then wait 100 msec before the initial check to see if any menu named in menuNames is open. There won't be any submenus open, because it's only 100 msec (plus a few) since you moused over the main menu item, and your submenu isn't scheduled to open for another 50 msec (because _menuOpenDelay=150 and we're only at about 100 so far). Since none of the menus named in menuNames are open, the hideDiv system will re-show the div. Then, about 50 msec later (minus a few), your submenu will open, and it'll be behind the object in the div. Thus, it appears as if the hideDiv system didn't work, when in fact it did. But the div would only have been hidden for 100 msec. You may, in fact, notice a brief flicker... that'd be the div being hidden then immediately re-shown again before the submenu opens.

The moral of the story: mm_initialDelay in mm_hideDiv.js should be greater than _menuOpenDelay in menu_data.js, to allow the system time to open the submenu before checking for open menus (the user won't notice that they don't actually happen at the same time). The values I used in the example above are the ones you currently have set. You might try increasing mm_initialDelay to 200, or decreasing _menuOpenDelay to 50. Personally, I prefer to set _menuOpenDelay very low, because I think it makes the menu system appear to be more responsive (you'll notice, for example, that I set it to 0 in the example you downloaded). You can play with different values to achieve the response you want, but I'd recommend a difference of at least 50... slower computers may respond differently, so a larger value may be necessary... but not too big.

I suppose I could have just said "mm_initialDelay should be greater than _menuOpenDelay" from the outset, but I wanted you, and anyone else facing a similar situation, to understand how the whole thing works. Hope you don't mind the long windedness.


Also... keep in mind that the hiding function will only do its hiding if you are using one of the browsers that the sniffBrowser object identifies as needing some assistance. If you want to see the effect in IE6 or NS7, for example, just for development purposes, you can add them to the list. You have to add a detection line, then add the identifier to this.hidingOn. In fact, I left some commented code in there so you could do that for ie6. Line 32 detects ie6. line 35 adds ie6 to the list of "bad" browsers. If you want to try it, uncomment lines 32 and 35, and comment out line 36 (remember to reverse the process in the production version of your site, so that this.hidingOn only lists the browsers where you want div hiding to be active).

A couple more brief (yeah, right) comments:

(1) Your main menu code should work as is. However, I notice that you are using mm_hideDiv() in the "Admissions" menu item. I can see why: the "Tuition and fee schedule...." item in the "Admissions" submenu stretches far enough to the right to overlap your flash scroller by a little bit. Instead of having to hide the flash from all the way over there, how about swapping the "Admissions" and "Academics" items. You'd probably have a flash collision with some of the submenus branching off of "Academic", but you can do the hiding dance with those, and at least it'd be further down the hierarchy. Alternatively, you could wrap the text in that long "Tuition and fee schedule..." item.

(2) This might put a damper on the whole thing, but I don't see a scroller at all when I load your test page in NS4. I see a blue background that is slightly darker than the table's blue background.

(3) Have you considered using a javascript/dhtml scoller instead of flash? Something to consider... If you do try that route, please give the hideDiv stuff a try, just so I know you could get it working; you're sooooo close!

And that reply was sooooo long. Hope it made sense.

Kevin

Poster: John
Dated: Saturday November 1 2003 - 19:18:29 GMT


More so, and at least as deadly

Poster: tepidarium
Dated: Tuesday November 4 2003 - 16:20:42 GMT

Kevin, you're awesome. The fact that you would take the time to provide such detailed descriptions is incredible. I can't say that I understand everything you said, but I am going to go over what you wrote and do my best to take it all in and try to apply it.

Once again, thanks for this help. I will post here again after I have made the adjustments to the code...

Poster: tepidarium
Dated: Tuesday November 4 2003 - 21:11:31 GMT

Hi Kevin,

Through careful reading of your last message I believe I understand the process. Thanks for this detailed instruction. I have implemented the following changes to: http://www.citytech.cuny.edu/mm-pop.html

1. added style to div hider- yes as you said NS 4.7 was generating the exact errors you mentioned - now the submenus appear again.

2. Changed the "_menuOpenDelay" to 25

Now the div hides in NS 4.7 WOOHOO!!!

Now my problem is adding another browser to the "bad browser" sniffer list you set up. It seems that Internet Explorer 5 also has the same problem of the menu showing behind flash. I am quoting your example of how to add a browser to the "bad browser" list, but I still don't get the hang of it as it seems that each browser in the bad list has slightly different code --






You need to be using at least Flash Player version 5 to see the scrolling Marquee. Are you using v5?



Beleive me, if I could find a truly cross-browser dhtml script I would jump for it. Unfortunatly, I haven't found one that will work crossbrowser - Netscape 4.7 -- the much popular "Mike's DHTML scroller" does not work in NS 4.7 even though his site claims it does. For a discussion of this issue please check:

http://www.milonic.com/forum/viewtopic.php?t=2834



It did. You are a great teacher.

Poster: kevin3442
Dated: Tuesday November 11 2003 - 1:11:06 GMT

Hi Tep,

Sorry for the delayed reply... I had to travel for work on short notice and didn't have easy access to the Net while I was gone.


"Woohoo" indeed... that's good news! Glad it works for you.


I've updated the script to work with ie5 (and modified the ie6 test to an ie5.5+ test). You can download the latest mm_hideDiv.zip to get the change. Check out the sniffBrowser() function to see how the test for ie5 was added. I tested it under IE5/Win98 and the hiding worked fine.


Ummmm... I apparently am using version 4 for NS4.7x I'll see if I can get the beast upgraded without an NS4 incident and try your test site again. If you don't hear from me, it means that NS4.7 fried me during the attempt


Thanks!

Let us know how it goes.

Kevin

Poster: tepidarium
Dated: Wednesday November 12 2003 - 20:45:23 GMT

Kevin, thanks for your extended help on this! I will implement it and post again with results!

Poster: kevin3442
Dated: Wednesday November 12 2003 - 23:34:05 GMT

I'll be interested to see what happens!

Kevin

Poster: tepidarium
Dated: Tuesday November 18 2003 - 15:32:46 GMT

Hi Kevin,

Well this is dissapointing, but for a number of reasons I don't think I can use your script.

The main one is that when the style for the DIV is defined (i.e. position relative) for Netscape 4 - in Netscape 6, the flash movie in the div becomes detached from the table cell and when the screen is resized moves out of the cell and all over the page.

Also, The only page where I need to use the hid div script is the main page - I have found that when I implement the code on pages that do not call the hide div script, the menu will not work - and I don't want to load the script if it is not necessary on the page - I guess I could make a second menu_data.js file...

I'm hoping some support for hiding div or other tags will be made available in the menu at a later date

It seems that every fix for one browser always seems to cause issues in other browsers...ah such is life for the web designer.

Thank you for your tireless help and explanations...they have al been appreciated.

I am going to wait to implement this menu system until a few things happen:

1. I can find a cross browser dhtml scroller that will allow me to ditch the stable flash version or the mneu develops a hide function.

2. The status of browser compatibility has been put to bed - i.e. the website says compatible with MAC OS 9 - Netscape 4.7 & IE 5 - but I have found the the menu either displays incorrectly on the aforementioned browsers/OS combination or crashes the browser all together.

Anyhow, I continue to download the new RCs - you guys are incredible support people - and I hope one day to be able to use the menu.