asked on

css menu hidden behind quicktime movie

Hi- On this page:
http:/ /code diva sites dot com slash sonoran slash vt slash gym dot html

You can see that if you hover over Models or Amenities in the navigation, the drop-down is behind the quicktime movie. I looked at this question here:
https://www.experts-exchange.com/questions/24573340/CSS-menu-overlapped-by-flash.html?sfQueryTermInfo=1+10+30+behind+css+flash+menu

and I've added wmode=opaque as suggested, but the drop down is still hidden behind the movie.

SOLUTION

Robin Uijt

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

WabbitSeason

You can also try using a so-called iframe shim.

Robin Uijt

That's also a solution I didn't know yet.

See an example at http://www.macridesweb.com/oltest/QTVR.html

Melody Scott

ASKER

thanks, I will look into these.

Melody Scott

ASKER

This is all a little (well a lot) over my head, could you give me examples please? Thanks, I will post code if you want.

Melody Scott

ASKER

This is all a little (well a lot) over my head, could you give me examples please? Thanks, I will post code if you want.

WabbitSeason

I haven't got the time and energy to make you a real iframe shim at the moment, but I've come up with something that should at least make your menu usable again. This solution hides the movie when you hover the mouse over menu links that trigger a submenu and shows it again when you leave the submenu. Just see the attached code and follow the instructions. Tested on IE7&8 and FF3.6. Requires JavaScript to be enabled.

// Quicktime movie hiding solution
// By WabbitSeason for mel200

// How to apply this solution
// Step 1: add the following script to the <head> of the page

<script type="text/javascript"><!--
    function hideMovie() {
        document.getElementById("moviecontainer").style.display = "none";
        document.getElementById("fakemovie").style.display = "block";
    }
    
    function showMovie() {
        document.getElementById("moviecontainer").style.display = "block";
        document.getElementById("fakemovie").style.display = "none";
    }
    
    function addEvents() {
        var menulist = document.getElementById("menu").childNodes;
        menulist = menulist[0];
        var menuelements = menulist.childNodes;
        var menupopoutlinks = [];
        for (var i=0; i < menuelements.length; i++) {
            var lichildren = menuelements[i].getElementsByTagName("li");
            if (lichildren.length > 0) {
                menupopoutlinks.push(menuelements[i]);
                menupopoutlinks = menupopoutlinks.concat(lichildren);
            }
        }
        
        for (var i=0; i < menupopoutlinks.length; i++) {
            menupopoutlinks[i].onmouseover = hideMovie;
            menupopoutlinks[i].onmouseout = showMovie;
        }
    }
//--></script>

// Step 2: Replace the <body> tag with <body onload="addEvents()">

// Step 3: Replace <div class="menu"> with <div id="menu">

// Step 4: Search and replace .menu with #menu in menu_style.css

// Step 5: Add <div id="moviecontainer"> before <p style="padding-left: 100px;">

// Step 6: Add the following line after </embed></object></noscript></p>

</div><div id="fakemovie" style="height:320px;display:none;">&nbsp;</div>

// Step 7: You're done! Remember to change the height of the fakemovie div whenever you change the height of the movie.

Open in new window

Melody Scott

ASKER

Thanks for going to all that work, Wabbit, but it doesn't seem to have worked. http:// code diva sites dot com/sonoran/vt/conference.html

The only change I made was calling menu_style2.css, because I made the changes .menu to #menu there.

I tried changing the quicktime movie to a flash using flash 8, but the swf doesn't incorporate the virtual tour movement.

As the client really likes the menu as is, especially the font size, I can't move it to over the header or decrease the font size.

Any other ideas? Thanks.

WabbitSeason

It appears that I still have some things to learn in JavaScript :). Anyway, try replacing the <script> in your <head> entirely with the attached one.

<script type="text/javascript"><!--
    function hideMovie() {
        document.getElementById("moviecontainer").style.display = "none";
        document.getElementById("fakemovie").style.display = "block";
    }
    
    function showMovie() {
        document.getElementById("moviecontainer").style.display = "block";
        document.getElementById("fakemovie").style.display = "none";
    }
    
    function addEvents() {
        var menulist = document.getElementById("menu").childNodes;
        for (var i=0; i<menulist.length; i++) {
            if (menulist[i].tagName == "UL") {
                var menuparent = menulist[i];
            }
        }
        var menuelements = menuparent.childNodes;
        var menupopoutlinks = [];
        for (var i=0; i < menuelements.length; i++) {
            if (menuelements[i].nodeName != "#text") {
                var lichildren = menuelements[i].getElementsByTagName("li");
                if (lichildren.length > 0) {
                    menupopoutlinks.push(menuelements[i]);
                    menupopoutlinks = menupopoutlinks.concat(lichildren);
                }
            }
        }
        
        for (var i=0; i < menupopoutlinks.length; i++) {
            menupopoutlinks[i].onmouseover = hideMovie;
            menupopoutlinks[i].onmouseout = showMovie;
        }
    }
//--></script>

Open in new window

Melody Scott

ASKER

That works, thanks! Now I will see if the client is ok with it...

b0lsc0tt

I suggest you put the object tag (i.e. the video) in its own div tag. Make sure the tag has an id attribute with a unique value. Then, in the code that shows those 2 menu items (the submenus) add a line to hide the video's div. The Javascript for the style is ...

divID.style.display='none';

Then when the exit the menu and you close it you can show the video again by changing the line above to use 'block' instead of 'none' or using ...

divID.style.display="";

Let me know how that works or if you have a question.

bol

Melody Scott

ASKER

I am having a problem just viewing the movie in some browsers. I have a question in to the developers of the software I used to create it, haven't heard back as yet.

If I use internet explorer 7 to open the file gym.mov, it plays. However, if I use internet explorer 7 to go to http:// code diva sites dot com/sonoran/vt/gym.mov, It is a blank screen.

I have to wait for that to be solved before I can continue with this, I think.

Also, the solution given that blanks out the movie while I hover over the dropdowns is unacceptable to the client. What is the course of action to take if I want to hire someone to solve this for me? Thanks!

SOLUTION

b0lsc0tt

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Melody Scott

ASKER

thank you both. My biggest and most pressing issue is that the client can't see these virtual reality tours in his browsers, or he sees them but when he clicks on them they disappear. He says that happens in internet explorer and firefox, but I haven't nailed down which versions yet.

Melody Scott

ASKER

Sorry, that would be the actual web pages, such as:

http:// code diva sites dot com/sonoran/vt/gym.html

I'm able to see it in all browsers, so I am perplexed. I have FF 3.5, IE 7, Safari 3.1 and google chrome.

b0lsc0tt

That would be important and a hassle. Good luck since browser issues like that can be hard. If you open a new question here for it then post the URL here to let me know (if you want me to look at it). I would make sure to find out specific browser versions and to test if the Quicktime plugin/object works. Also make sure the client tests on more than one computer. You could even try taking one of yours there to see if it works (i.e. isn't connection related for some odd reason) and to show him what it is like.

I only had a problem, the one you asked about here, in IE8. In FF3 I saw the video and the menu worked fine, expect on one computer that doesn't have quicktime.

bol

Melody Scott

ASKER

Hi, b0lsc0tt, I've opened this question on the issue:
https://www.experts-exchange.com/questions/26432908/Problems-with-Quicktime-movie.html

How do I test if the Quicktime plugin/object works? Do you man on the client's computer?

Thanks.

Melody Scott

ASKER

Hi, All,. OK, I went ahead and downloaded a program that has a flash movie instead of quicktime:
http://www.codedivasites.com/sonoran/gym/gym.html

The problem now is that the CSS menu hides behind the movie, same as it did behind the quicktime movie. I've checked it in Chrome, IE 7, IE6 (there's another question open with an additional problem for IE6), Safari 3.1 and FF 3 and 3.5. It works correctly with Firefox 3.6.

Robin Uijt

To fix that, set the wmode parameter to transparent!

Melody Scott

ASKER

Oh, for heaven's sake, I knew that!! Thanks, robinu, let me try it.

Melody Scott

ASKER

Ok, it is set on this page, I viewed the source code, but it isn't working for me in IE7, Chrome or Safari:

http://www.codedivasites.com/sonoran/gym/gym.html

I cleared the cache in Chrome, not the others. Still no good. Maybe I need to add it to more than one place? Thanks.

ASKER CERTIFIED SOLUTION

Robin Uijt

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Melody Scott

ASKER

Thank you all! I wanted to give points to the earlier contributors, because they gave valid information that started me moving towards a flash virtual tour. Thanks, all!