Solved

java script menu hiding behind the flash screensaver-php

Posted on 2012-03-19
4
357 Views
Last Modified: 2012-06-21
Hi,

We are developing a web site using java script  and php , we are embedding flash in the home page.The drop-down menu is showing fine for on mouse hover of menu item  for default flash ( 0th position of flash pattern) but after it is  switched  to next flash the drop-down menu is hiding behind the flash , but i can see the menu when the flash is changing. So i am suspecting that menu is still there but the flash is stealing the focus , so i would like to get suggestion to keep the drop-down menu on top always.Is there any way to describe the flash not to come on to  the top position.

Thank you.
0
Comment
Question by:Finsol123
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
4 Comments
 
LVL 9

Expert Comment

by:Shaun McNicholas
ID: 37738278
Can you put a link up here to the page so I can take a look at the page.
0
 
LVL 8

Expert Comment

by:section25
ID: 37767779
I had the same situation you have and resolved it this way:

I have a web page that has some HTML links, buttons and other stuff on it and I also have a flash menu that sits at the top of the page. Even though the flash menu was closed, the DIV it resided in, was on top of the other HTML DIV so the HTML stuff was inaccessible. So I set up my page like this:

I have a DIV called "top" which holds my Flash file. My flash file extends full screen from left to right and is 304 pixels high. This is the set up for that DIV:

<div id="top" style="position:absolute; left:0px; top:0px; width:100%; height:304px; z-index:95">


Now I have another DIV called "middle_content" for my HTML content that I set up like this:

<div id="middle_content" style="position:absolute; left:0px; top:105px; width:100%; margin:0px auto; border:none; z-index:99" >


Then I simply include my HTML in that div as you would normally do.

I know not everyone uses FlashObject for displaying their Flash content, but if you don't you can still use this method. Also if you don't use FlashObject, I highly recommend it. At any rate, I use Flash object to put my flash object into the "top" DIV like this:

var fo = new FlashObject("/page_top.swf", "top", "100%", "304", "9", "#ffffff");
      fo.addParam("quality", "high");
      fo.addParam("movie", "page_top.swf");
      fo.addParam("loop", "false");
      fo.addParam("wmode", "transparent");
      fo.addParam("scale", "noscale");
      fo.addParam("salign", "left");
      fo.write("top");

Now inside my Flash script, I simply have something that listens for my menu buttons. Whenever the menu buttons are rolled over (which makes them drop down) I run this little piece of code:

ExternalInterface.call("move_forward");

and when they roll off the button, I call

ExternalInterface.call("move_backwards");

What that does is call a javascript function on my HTML page which tells the 2 DIVS that overlap to switch places and put the one I want at the time on top. So when the Flash menu is exposed, I call "move_forward". This places the Flash DIV ("top") on top of the HTML DIV ("middle_content"). The move_backwards script does just the opposite and places the Flash DIV behind the HTML one. It works flawlessly for me. It should work for you also. This is the javascript for moving the DIVS:

 function move_forward() {
     document.getElementById('top').style.zIndex = 99;
     document.getElementById('middle_content').style.zIndex = 97;
 }
 
function move_backwards() {
      document.getElementById('top').style.zIndex = 98;
      document.getElementById('middle_content').style.zIndex = 99;
}


Of course this works for IE and may have to be tweaked to work with other browsers.

That's it. Once all these elements are in place everything should work the way you need it to.
0
 
LVL 8

Accepted Solution

by:
Jen0910 earned 500 total points
ID: 37771371
Not sure if you need to go about it that way initially (external interface calls). I've run into your problem a lot with menus in javascript and CSS, I always solved it by first making sure the "wmode" for each flash SWF pram is set to "transparent" and giving flash container a much lower z-index than your menu container with CSS to make sure flash appears behind it. If that fails to do the trick, then try section25's more technical approach.
0
 

Author Closing Comment

by:Finsol123
ID: 37842315
We have changed the flash and also javascript menu style. So that the issue is resolved.
0

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

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.

Question has a verified solution.

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

There are times in your Flash CS4 application when you want more than a simple pointer or a hand, and it's hard to find an ideal walk-through to tell you what to do.  I spent a few days recently learning my way around making custom cursors in Flash,…
I have been doing hardcore actionscripting for some time; and needless to say I have faced a lot of problems in just understanding others' code rather than understanding what the code executes. A programmer's life can become hell when there are a lo…
In this tutorial viewers will learn how to increase their history states in Photoshop To undo more than one history state, use Ctrl + Alt + Z, not just Ctrl + Z: View the History window by going to Window > History: The default number of history sta…
The goal of the tutorial is to teach the user what frame rate is, how to control it and what effect it has on the video.

691 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