Problem mixing Flash/DHTML menu

Post September 26th, 2003, 1:17 am

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
  • Joined: 25 Feb 2008
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post September 26th, 2003, 1:17 am

  • lostinbeta
  • Guru
  • Guru
  • User avatar
  • Joined: Jun 26, 2003
  • Posts: 1402
  • Loc: Philadelphia, PA
  • Status: Offline

Post September 26th, 2003, 12:51 pm

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
  • Joined: May 28, 2003
  • Posts: 22498
  • Loc: Pittsburgh PA
  • Status: Online

Post September 27th, 2003, 6:37 am

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)
"The web is a dominatrix. Every where I turn, I see little buttons ordering me to Submit."
Play sports pools and discuss sports topics at Boasting Rights Sports Forum
Get paid to write articles - www.associatedcontent.com
  • UNFLUX
  • Genius
  • Genius
  • User avatar
  • Joined: Dec 20, 2002
  • Posts: 6396
  • Loc: unflux.net
  • Status: Offline

Post September 27th, 2003, 9:54 am

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
UNFLUX.net Hosting | Foto
Quality Web Hosting
  • beata12
  • Newbie
  • Newbie
  • No Avatar
  • Joined: Oct 03, 2003
  • Posts: 6
  • Status: Offline

Post October 4th, 2003, 10:15 pm

You can put DHTML menu under Flash image
  • ATNO/TW
  • Super Moderator
  • Super Moderator
  • User avatar
  • Joined: May 28, 2003
  • Posts: 22498
  • Loc: Pittsburgh PA
  • Status: Online

Post October 4th, 2003, 10:27 pm

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!)
"The web is a dominatrix. Every where I turn, I see little buttons ordering me to Submit."
Play sports pools and discuss sports topics at Boasting Rights Sports Forum
Get paid to write articles - www.associatedcontent.com
  • lostinbeta
  • Guru
  • Guru
  • User avatar
  • Joined: Jun 26, 2003
  • Posts: 1402
  • Loc: Philadelphia, PA
  • Status: Offline

Post October 5th, 2003, 5:12 pm

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: [ Download ] [ 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: [ Download ] [ 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
  • Joined: May 28, 2003
  • Posts: 22498
  • Loc: Pittsburgh PA
  • Status: Online

Post October 5th, 2003, 5:23 pm

Excellent post lostinbeta. Thanks. I'll do some serious playing with that.
"The web is a dominatrix. Every where I turn, I see little buttons ordering me to Submit."
Play sports pools and discuss sports topics at Boasting Rights Sports Forum
Get paid to write articles - www.associatedcontent.com
  • UNFLUX
  • Genius
  • Genius
  • User avatar
  • Joined: Dec 20, 2002
  • Posts: 6396
  • Loc: unflux.net
  • Status: Offline

Post October 7th, 2003, 9:57 pm

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)
UNFLUX.net Hosting | Foto
Quality Web Hosting
  • lostinbeta
  • Guru
  • Guru
  • User avatar
  • Joined: Jun 26, 2003
  • Posts: 1402
  • Loc: Philadelphia, PA
  • Status: Offline

Post October 7th, 2003, 10:01 pm

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
  • No Avatar
  • Joined: Oct 16, 2003
  • Posts: 1
  • Status: Offline

Post October 16th, 2003, 8:17 pm

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
  • Joined: May 28, 2003
  • Posts: 22498
  • Loc: Pittsburgh PA
  • Status: Online

Post October 16th, 2003, 10:19 pm

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.
"The web is a dominatrix. Every where I turn, I see little buttons ordering me to Submit."
Play sports pools and discuss sports topics at Boasting Rights Sports Forum
Get paid to write articles - www.associatedcontent.com
  • webstudyer
  • Born
  • Born
  • No Avatar
  • Joined: Oct 23, 2003
  • Posts: 2
  • Status: Offline

Post October 23rd, 2003, 7:35 am

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

Post October 23rd, 2003, 9:09 am

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
  • Joined: Dec 20, 2002
  • Posts: 6396
  • Loc: unflux.net
  • Status: Offline

Post October 23rd, 2003, 9:41 am

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:
UNFLUX.net Hosting | Foto
Quality Web Hosting
  • Anonymous
  • Bot
  • No Avatar
  • Joined: 25 Feb 2008
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post October 23rd, 2003, 9:41 am

Post Information

  • Total Posts in this topic: 29 posts
  • Users browsing this forum: ATNO/TW and 83 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
 
 

© Unmelted Enterprises 1998-2009. Driven by phpBB © 2001-2009 phpBB Group.