Solved

css menu hidden behind quicktime movie

Posted on 2010-08-20
25
986 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
Comment Utility
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
Comment Utility
You can also try using a so-called iframe shim.
0
 
LVL 16

Expert Comment

by:robinu
Comment Utility
That's also a solution I didn't know yet.

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

Author Comment

by:mel200
Comment Utility
thanks, I will look into these.
0
 

Author Comment

by:mel200
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
That works, thanks! Now I will see if the client is ok with it...
0
 
LVL 54

Expert Comment

by:b0lsc0tt
Comment Utility
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
Maximize Your Threat Intelligence Reporting

Reporting is one of the most important and least talked about aspects of a world-class threat intelligence program. Here’s how to do it right.

 

Author Comment

by:mel200
Comment Utility
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
Comment Utility
>> 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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
To fix that, set the wmode parameter to transparent!
0
 

Author Comment

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

Author Comment

by:mel200
Comment Utility
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
Comment Utility
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
Comment Utility
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

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
Users will learn how resize a batch of photos from a single command in Photoshop via Photoshop's Image Processor. Open up an Image you'd like to resize in Adobe Photoshop: Adjust the image size according to your preferences. Image > Adjustments > …
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

744 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

Need Help in Real-Time?

Connect with top rated Experts

17 Experts available now in Live!

Get 1:1 Help Now