Solved

css menu hidden behind quicktime movie

Posted on 2010-08-20
25
996 Views
Last Modified: 2012-08-14
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:
http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_24573340.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.
0
Comment
Question by:mel200
  • 13
  • 4
  • 3
  • +1
25 Comments
 
LVL 16

Assisted Solution

by:robinu
robinu earned 400 total points
ID: 33491804
That does not work for quicktime objects.

See http://discussions.apple.com/thread.jspa?threadID=2268956
Even using the AC_QuickTime.js script from http://developer.apple.com/internet/ieembedprep.html 
doesn't do the trick.

You could consider 2 solutions:

- turn the quicktime movie in a flash movie and show it as a flash object

- move the menu above the header image, maybe decrease the font a little so the menu does not
overlap anymore.

I hope this helps you?
0
 
LVL 3

Expert Comment

by:WabbitSeason
ID: 33491813
You can also try using a so-called iframe shim.
0
 
LVL 16

Expert Comment

by:robinu
ID: 33491834
That's also a solution I didn't know yet.

See an example at http://www.macridesweb.com/oltest/QTVR.html
0
Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 

Author Comment

by:mel200
ID: 33493984
thanks, I will look into these.
0
 

Author Comment

by:mel200
ID: 33494002
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.
0
 

Author Comment

by:mel200
ID: 33494003
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.
0
 
LVL 3

Expert Comment

by:WabbitSeason
ID: 33499096
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

0
 

Author Comment

by:mel200
ID: 33501332
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.
0
 
LVL 3

Expert Comment

by:WabbitSeason
ID: 33501814
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

0
 

Author Comment

by:mel200
ID: 33502057
That works, thanks! Now I will see if the client is ok with it...
0
 
LVL 54

Expert Comment

by:b0lsc0tt
ID: 33525620
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
0
 

Author Comment

by:mel200
ID: 33525759
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!
0
 
LVL 54

Assisted Solution

by:b0lsc0tt
b0lsc0tt earned 100 total points
ID: 33525859
>> 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. <<

That is probably not related to the issue for this question.  Now other display problems in a browser could be related to code and style but the one you specifically mentioned there is probably just the server setting.  For security reasons it is probably set to not allow the URL direct to the .mov file.  Howeve that wouldn't prevent a webpage with the player in it from showing the movie.  Unless you want a user to have the browser open the player (or try to) in its own window the test of using the .mov URL isn't really important.  In other words if you are working to have the movie show on the page with the menu then don't worry about the results of what you tried in the quote above.

>> 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! <<

Thanks for letting me know.  I can look into other options but will probably have to wait a few hours.  Another expert may post with a solution too.   Since this is related to CSS more than javascript I will have a ZA place this in the CSS zone.  Since the menu effectively block the movie anyways I was hoping the quick solution would work.  It can get tricky to find a way to get something else to work for all browsers.

As far as hiring someone that could be a good option.  EE doesn't provide a way for you to contact experts though or post a "job."  You can look at expert profiles though and see if they provide a way to contact them.  Also, you can look at local developers for help.  Of course you can also give this a bit of time still, if you have it, to see what the experts can provide.  You don't have the "rush" of a hired developer but they usually can deliver. :)

bol
0
 

Author Comment

by:mel200
ID: 33525958
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.
0
 

Author Comment

by:mel200
ID: 33525980
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.
0
 
LVL 54

Expert Comment

by:b0lsc0tt
ID: 33526091
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
0
 

Author Comment

by:mel200
ID: 33536937
Hi, b0lsc0tt, I've opened this question on the issue:
http://www.experts-exchange.com/Apple/Software/Q_26432908.html

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

Thanks.
0
 

Author Comment

by:mel200
ID: 33623239
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.
0
 
LVL 16

Expert Comment

by:robinu
ID: 33624202
To fix that, set the wmode parameter to transparent!
0
 

Author Comment

by:mel200
ID: 33628345
Oh, for heaven's sake, I knew that!! Thanks, robinu, let me try it.
0
 

Author Comment

by:mel200
ID: 33628493
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.
0
 
LVL 16

Accepted Solution

by:
robinu earned 400 total points
ID: 33628882
You only changed it in the object part. Please change it also in the AC_FL_RunContent() javascript call.
Search for wmode, and you'll find it. It's now still set to window.
0
 

Author Closing Comment

by:mel200
ID: 33629039
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!
0

Featured Post

Networking for the Cloud Era

Join Microsoft and Riverbed for a discussion and demonstration of enhancements to SteelConnect:
-One-click orchestration and cloud connectivity in Azure environments
-Tight integration of SD-WAN and WAN optimization capabilities
-Scalability and resiliency equal to a data center

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

839 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question