Problem mixing Flash/DHTML menu

  • gohitech
  • Born
  • Born
  • gohitech
  • Posts: 2

Post 3+ Months Ago

Hello,
My I have a DHTML menu for my website and a flash image right under it.
When I click on DHTML menu, I cant see the sub menues becasue it appears that they go under the flash image.
However If i use .jpg or .gif files it is fine but I dont want to use them. I want to use flash.
I am kind of new to this stuff. I am an old time programmer and still new to web.

Please help me out.
check out the site and you see what I mean
http://www.gohitech.com/xyz.htm


thanks
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • lostinbeta
  • Guru
  • Guru
  • User avatar
  • Posts: 1402
  • Loc: Philadelphia, PA

Post 3+ Months Ago

Yes, this is a common issue with Flash. When embedding a Flash movie into an HTML page the embed code automatically puts the Flash movie on top of everything else.

Solution: None that I know of.

Possible Solution: Put the menu in 1 div tag and put the flash movie in another div tag, then set the z-index of those div tags so that the menu is above the flash one. I don't think this will work, but I also have never tried it either.


[edit]
possible solution 2: combine both the navigation and the animation into 1 flash movie with the navigation on layers above the animation (or load it in dynamically via loadMovie() or loadMovieNum())
[/edit]
  • ATNO/TW
  • Super Moderator
  • Super Moderator
  • User avatar
  • Posts: 23456
  • Loc: Woodbridge VA

Post 3+ Months Ago

You might try this, and it is only a suggestion based on what I know about z-index. (I've used in it code before, but only prewritten code which I modified)

z-index prioritizes what appears on "top" when objects are layered. It's my recolection that the higher the z-index number the higher it is layered. However, z-index only works with items that are positioned (absolute or relative). So you may need to position your flash object and give it a z-index of say 1, then position your DHTML menu with a z-index of 2.

Because I've never really tried experimenting with z-index, I can't give you detailed specifics on how to do it. You can do some Google searches to get some tutes, but also check out w3schools as a starting point:

http://www.w3schools.com/css/pr_pos_z-index.asp

(all that really does is define what it is)

This gives you a working example. http://www.w3schools.com/css/tryit.asp? ... ss_zindex2 In the example you'll see that the default z-index is 0, so if you assign a -1 to the image -- it has a lower "stack order" and as you see in the example appears underneath the text.

Here is the inverse:
http://www.w3schools.com/css/tryit.asp? ... ss_zindex1 In the example you'll see the image appears "above" the text.

You'll have to do some experimenting, but it's the only thing I know of that will accomplish your goal.

--------------------------------
Edited by ATNO/TW to include an additional example and also to clarify that z-index works with absolute or relative postitioned objects. (If set to a specific number which can also be negative, z-index should work on NS 4.x or higher and IE 4.x or higher)
  • UNFLUX
  • Genius
  • Genius
  • User avatar
  • Posts: 6376
  • Loc: twitter.com/unflux

Post 3+ Months Ago

This is not my problem, but I just learned a whole lot more than I would
have if I didn't read it. I love this forum! Image
  • beata12
  • Newbie
  • Newbie
  • beata12
  • Posts: 6

Post 3+ Months Ago

You can put DHTML menu under Flash image
  • ATNO/TW
  • Super Moderator
  • Super Moderator
  • User avatar
  • Posts: 23456
  • Loc: Woodbridge VA

Post 3+ Months Ago

You sorta lost me there beata12, are you suggesting to put the actual menu below the Flash object? I think that's the way I'm reading your post. Perhaps that would work, but my first question would be what happens to whatever else is under the menu? My second question would be, is that the way gohitech wants it to appear? I still hold fast to the thought that layering it properly with a good stack order using z-index is the only viable solution.

(btw -- welcome to OZZU!)
  • lostinbeta
  • Guru
  • Guru
  • User avatar
  • Posts: 1402
  • Loc: Philadelphia, PA

Post 3+ Months Ago

Ok, I took this from another forum (although this post was mine so I didn't steal someone elses post, it was just on another forum), so I will just post it here....

---------------------------------------------------------------------
Step 1) In your publish settings in Flash (File/Publish Settings) make sure to set the Window Mode to "Transparent Windowless" (this is important) then publish the .html file to get the embed code.

Step 2) Use 1 div tag to hold the flash movie, this z-index will be set at 1 (z-index is the stacking order)

Something like...
Code: [ Select ]
<DIV ID="flashMovie" STYLE="position: absolute; top: 10; left: 10; width: 550; height: 400; z-index: 1;">

<!--Flash Embed Code Here-->

</DIV>
  1. <DIV ID="flashMovie" STYLE="position: absolute; top: 10; left: 10; width: 550; height: 400; z-index: 1;">
  2. <!--Flash Embed Code Here-->
  3. </DIV>


Step 3) Use another div tag with the z-index set to higher number the the Flashes div tag, something like this...
Code: [ Select ]
<DIV ID="htmlContent" STYLE="position: absolute; top: 10; left: 10; width: 550; height: 400; z-index: 2;">

<!-- HTML content here -->

</DIV>
  1. <DIV ID="htmlContent" STYLE="position: absolute; top: 10; left: 10; width: 550; height: 400; z-index: 2;">
  2. <!-- HTML content here -->
  3. </DIV>



Note the STYLE property of the div tag:

position: absolute is very important, you will need this to be able to position your div tag.

top: 10 is how far from the top of the document you want the div tag to be

left: 10 is how far from the left of the document you want the div tag to be.

width: 550 is of course the width of the div tag (I still don't get why the DIV tag itself doesn't support a WIDTH property, you have to width and height it via CSS like this)

height: 400 is of course the height of the div tag.

z-index: # is the z-index value, which sets the stacking order. The higher number is in front of the lower number. So in this case the flash movies div tag has value of 1 and the html contents div tag has a value of 2, so the html will be displayed over the flash.

Now back to step 1.... why transparent windowless? Well apparently setting the flash window mode to transparent windowless is the only way this process works, if you don't set it to transparent windowless you are left with Flash over everything else.
---------------------------------------------------------------------


Ok, now to apply this to your situation would be the same, the movie and the menu will have to be contained in different div tags on different z-indexs.


HOWEVER, to do this you will also have to do static positioning via top and left (descriptions in the quoted post), and oftentimes different browsers like to interpret these differently.

This is your only option though, so if this can't work for you, I don't know what to tell you. Sorry man, I hope Macromedia finds some way to fix this issue easier somehow :cry:




ATNO/TW: With DHTML menus, if they overlap a Flash movie they end up going underneath the Flash movie instead of above, because of the z-indexing of the embedded movie.
  • ATNO/TW
  • Super Moderator
  • Super Moderator
  • User avatar
  • Posts: 23456
  • Loc: Woodbridge VA

Post 3+ Months Ago

Excellent post lostinbeta. Thanks. I'll do some serious playing with that.
  • UNFLUX
  • Genius
  • Genius
  • User avatar
  • Posts: 6376
  • Loc: twitter.com/unflux

Post 3+ Months Ago

beata12 - you missed the point of the thread. he's not trying to put the
flash object over the dhtml, it does that naturally. he's trying to avoid it. ;)

lostinbeta is at it again -- fuggin' genius if you ask me. :shock: 8)
  • lostinbeta
  • Guru
  • Guru
  • User avatar
  • Posts: 1402
  • Loc: Philadelphia, PA

Post 3+ Months Ago

UNFLUX wrote:
lostinbeta is at it again -- fuggin' genius if you ask me. :shock: 8)



No, not genius, just too much time and no life.
  • cyberramtech
  • Born
  • Born
  • cyberramtech
  • Posts: 1

Post 3+ Months Ago

I have been investigating a resolution to this problem as well. I am using coldfusion mx with the cfchart tag outputing in a flash format. The results are the same as the original identified problem. I had heard about the flash tweak but since this is a coldfusion tag, I have not been able to figure out how to apply the flash change. I am also open to feedback. I have played with the div tag and not found any success on our site, mainly due to the orientation of the existing layout or possibly inexperience :?
  • ATNO/TW
  • Super Moderator
  • Super Moderator
  • User avatar
  • Posts: 23456
  • Loc: Woodbridge VA

Post 3+ Months Ago

Welcome to OZZU cyberramtech.

I think if you follow and experiment with the solution in lostinbeta's last post you'll get it worked out.
  • webstudyer
  • Born
  • Born
  • webstudyer
  • Posts: 2

Post 3+ Months Ago

But how about the problem in the netscape 4.75. Z-index is not supported in the NS. :(
  • lostinbeta
  • Guru
  • Guru
  • User avatar
  • Posts: 1402
  • Loc: Philadelphia, PA

Post 3+ Months Ago

Are layers supported in NS4? If so you might be able to try them... otherwise this is just something you can't do in NS4.

The joy of cross browser means that not everything will work in every browser.
  • UNFLUX
  • Genius
  • Genius
  • User avatar
  • Posts: 6376
  • Loc: twitter.com/unflux

Post 3+ Months Ago

lostinbeta wrote:
not everything will work in every browser.

and personally i don't like that headache. I give the most recent
browsers a shot, and if they're good, I'm good.

I don't waste my time on working for browsers that have no business
even being used any more. This is 2003, not 1998. :roll:
  • lostinbeta
  • Guru
  • Guru
  • User avatar
  • Posts: 1402
  • Loc: Philadelphia, PA

Post 3+ Months Ago

LOL, I have to agree with unflux.

Netscape is up to what? 7.1? I think that's far enough ahead of 4 to call 4 obsolete now.

Pretty much the browsers to code for now are IE5+ and NS6+, since they are the easiest to code cross-browser (since NS6 got an upgrade on HTML and CSS support) and they are typically the the most used browsers other than the most recent versions.
  • webstudyer
  • Born
  • Born
  • webstudyer
  • Posts: 2

Post 3+ Months Ago

my client required it, no idea :cry:
  • lostinbeta
  • Guru
  • Guru
  • User avatar
  • Posts: 1402
  • Loc: Philadelphia, PA

Post 3+ Months Ago

Your client is going to have to accept that it just isn't possible with the limitations they require :lol:
  • Aleksandar Novicic
  • Born
  • Born
  • Aleksandar Novicic
  • Posts: 1
  • Loc: Vancouver bc

Post 3+ Months Ago

gohitech wrote:
Hello,
My I have a DHTML menu for my website and a flash image right under it.
When I click on DHTML menu, I cant see the sub menues becasue it appears that they go under the flash image.
However If i use .jpg or .gif files it is fine but I dont want to use them. I want to use flash.
I am kind of new to this stuff. I am an old time programmer and still new to web.

Please help me out.
check out the site and you see what I mean
http://www.gohitech.com/xyz.htm


thanks



HI there you can add something like this: param name="wmode" value="Transparent " with rest of embeded swf file. This will work on explorer and natscape.

Alex
alex@alexnova.com
  • lostinbeta
  • Guru
  • Guru
  • User avatar
  • Posts: 1402
  • Loc: Philadelphia, PA

Post 3+ Months Ago

Aleksandar Novicic wrote:
gohitech wrote:
Hello,
My I have a DHTML menu for my website and a flash image right under it.
When I click on DHTML menu, I cant see the sub menues becasue it appears that they go under the flash image.
However If i use .jpg or .gif files it is fine but I dont want to use them. I want to use flash.
I am kind of new to this stuff. I am an old time programmer and still new to web.

Please help me out.
check out the site and you see what I mean
http://www.gohitech.com/xyz.htm


thanks



HI there you can add something like this: param name="wmode" value="Transparent " with rest of embeded swf file. This will work on explorer and natscape.

Alex
alex@alexnova.com


I believe the issue was solved on page 1 Aleksandar Novicic 8)


And as a note: Transparent windowless USED to only be for IE on Windows, however, in a version of the Flash 6 player they added support for other browsers on both Windows and Mac machines. Check out this page to see what browsers support transparent windowless flash movies and what version of the flash player started it....

http://www.macromedia.com/support/flash ... /wmode.htm
  • linuxinternet
  • Born
  • Born
  • linuxinternet
  • Posts: 1
  • Loc: Philadelphia, USA

Post 3+ Months Ago

Hi

I am new here but have had this problem before. I have found the definative answer from Macromedia.

The solution involves making the background of your flash movie transparent so that you can see the DHTML menu when it lies behind your flash. The way to do it is in the HTML of the page, you add some parameters to the embed and object tags and this sets the bg transparent. It obviously wont work if you have a bitmap image as the bg of your flash movie. and it only really works in modern browsers.

here is the link to the technote from macromedia:

http://www.macromedia.com/support/flash ... _layer.htm

here is a link to the post about setting the wmode:
http://www.macromedia.com/support/flash ... /wmode.htm

I have it working and it seems to work very well.
  • gohitech
  • Born
  • Born
  • gohitech
  • Posts: 2

Post 3+ Months Ago

thank you all
  • Carnix
  • Guru
  • Guru
  • User avatar
  • Posts: 1098

Post 3+ Months Ago

There is no need to do any CSS positioning, or saving the SWF file in any special way, as Aleksandar Novicic mentioned, all you need to do is add:

<param NAME="wmode" VALUE="transparent">

into the object HTML tag code (so, in fact, this wasn't fully solved on the first page...)

Simple as that. It could be for older browsers, the CSS was necessary, but if anyone using flash is worried about IE/NS 4... you've probably got many other problems anyway.

Example:
http://www.careusa.org/multimedia/photo ... /index.asp
See the JS menu on the left stays above the flash photo gallery


Enjoy!

.c
  • OddLaW
  • Born
  • Born
  • OddLaW
  • Posts: 1

Post 3+ Months Ago

Well, actually I see it's old -- but anyway just wanted to say thanks cause I saw this topic in google, it fixed my flash problem!

THANKS A TON!
  • c0rpz
  • Newbie
  • Newbie
  • User avatar
  • Posts: 7
  • Loc: PerĂº

Post 3+ Months Ago

or in the other case, you can put this on flash object parameters:

<param NAME="wmode" VALUE="opaque">
  • halfasleeps
  • Newbie
  • Newbie
  • halfasleeps
  • Posts: 13

Post 3+ Months Ago

Has this problem ever been resolved? im having the same problem
  • halfasleeps
  • Newbie
  • Newbie
  • halfasleeps
  • Posts: 13

Post 3+ Months Ago

sorry i didnt see there was a second page when i posted, the answer is right above my post :-) YAY
  • halfasleeps
  • Newbie
  • Newbie
  • halfasleeps
  • Posts: 13

Post 3+ Months Ago

ok i used the <param NAME="wmode" VALUE="opaque"> and this corrects it in IE but it still droping below the flash in netscape and firefox?.....anyone know how to fix this?
  • halfasleeps
  • Newbie
  • Newbie
  • halfasleeps
  • Posts: 13

Post 3+ Months Ago

i got it you also have to add

wmode="transparent"

to the embed tags

Post Information

  • Total Posts in this topic: 29 posts
  • Users browsing this forum: No registered users and 12 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.