[Last Call] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 311
  • Last Modified:

How do I get a div container and its contents to appear above a Flash SWF file?

I have a webpage where I want the div container (id="tableofcontents") to appear above a flash swf file that takes up the whole page but its not appearing. I've set <param name="wmode" value="transparent" /> to the <object> tags and I messed around with the z-index of various div containers to no avail. Does anyone have any ideas? My stylesheet is listed below and the layout code is attached.

<style type="text/css" media="screen">
                  html, body      { height:100%; }
                  body { margin:0; padding:0; overflow:auto; text-align:center;
                         background-color: #ffffff; }  
                  #flashContent { display:none; }
                  
                  #overallcontainer {position:relative;width:100%;height:100%;}
                  #flashcontainer {position:absolute;z-index:2;width:100%;height:100%;}
                  #tableofcontents {position:absolute;top:20px;left:20px;z-index:200;width:100px;height:40px;}
                  .tableofcontentsfont {font-family:Arial, Helvetica, sans-serif;color:#000000;}
        </style>
<div id="overallcontainer">
        <div id="flashcontainer">
        <div id="flashContent">
        	<p>
	        	To view this page ensure that Adobe Flash Player version 
				9.0.0 or greater is installed. 
			</p>
			<script type="text/javascript"> 
				var pageHost = ((document.location.protocol == "https:") ? "https://" :	"http://"); 
				document.write("<a href='http://www.adobe.com/go/getflashplayer'>Get Adobe Flash Player<\/a>" ); 
			</script> 
        </div>
	   	
       	<noscript>
            <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="100%" height="100%" id="FlipBookBuilder">
                <param name="movie" value="book.swf" />
                <param name="quality" value="high" />
                <param name="bgcolor" value="#ffffff" />
                <param name="allowScriptAccess" value="sameDomain" />
                <param name="allowFullScreen" value="true" />
                <param name="wmode" value="transparent" />
                <!--[if !IE]>-->
                <object type="application/x-shockwave-flash" data="book.swf" width="100%" height="100%">
                    <param name="quality" value="high" />
                    <param name="bgcolor" value="#ffffff" />
                    <param name="allowScriptAccess" value="sameDomain" />
                    <param name="allowFullScreen" value="true" />
                    <param name="wmode" value="transparent" />
                <!--<![endif]-->
                <!--[if gte IE 6]>-->
                	<p> 
                		Either scripts and active content are not permitted to run or Adobe Flash Player version
                		9.0.0 or greater is not installed.
                	</p>
                <!--<![endif]-->
                    <a href="http://www.adobe.com/go/getflashplayer">
                       Get Adobe Flash Player
                    </a> 
                <!--[if !IE]>-->
                </object>
                <!--<![endif]-->
            </object>
	    </noscript>	    
	   <!-- end flash container --></div>
       <div id="tableofcontents" class="tableofcontentsfont">Table of Contents
        </div>
        <!-- end overallcontainer --></div>

Open in new window

0
iamdiggnified
Asked:
iamdiggnified
  • 5
  • 4
  • 3
  • +1
1 Solution
 
jonahzonaCommented:
I ran this in my browser, but I am confused as to what you are trying to accomplish.

The #flashContent doesn't show because it has a display:none;. Is that intentional?
0
 
iamdiggnifiedAuthor Commented:
The #Flash Content is for people who have or may not have flash player. I wrapped #Flashcontent as well as the Flash File in a div container called "flashcontainer". The "tableofcontents" div container (which I want to appear over #"flashcontent") is in its own div. And finally both are wrapped in a div container called # "Overallconatiner".
0
 
jonahzonaCommented:
Ok.

But what is it that you are wanting to accomplish? Do you want the flash playing as a background?
0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
iamdiggnifiedAuthor Commented:
yes. Flash is the background and a div container is on display on top of that. I want to put some text in there.
0
 
jonahzonaCommented:
Got it.

Here is a good writeup on doing this. Let me know if you need any further direction.

http://www.andrewsellick.com/95/flash-movies-as-backgrounds
0
 
Dean OBrienCommented:
You need to set WMODE to transparent
Then set the z-index values of each div accordingly.
Easynow
0
 
iamdiggnifiedAuthor Commented:
Easynow. If you look at my code the wmode is set to transparent and the z-index values too
0
 
iamdiggnifiedAuthor Commented:
I got it working but not in IE.
0
 
Dean OBrienCommented:
This is the code i normally use for flash

<div id="main-image-holder">
            <!--[if !IE]> -->
                  <object type="application/x-shockwave-flash" data="darnaflash.swf" width="557px" height="277px" wmode="transparent">
            <!-- <![endif]-->
            <!--[if IE]>
                  <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" width="557px" height="277px">
                  <param name="movie" value="darnaflash.swf">
            <!--><!--dgx-->
                  <param name="loop" value="true">
                    <param name="menu" value="false">
                    <param name="wmode" value="transparent">

                    <img src="images/main-banner.jpg">
                  </object>
            <!-- <![endif]-->


You will notice wmode is set in two places for IE nd other

Easynow
0
 
Jeremy DaleySenior DeveloperCommented:
i'm not sure why you're trying to embed an <object> inside of an <object>. i wouldn't trust that embed code you're working with there.
0
 
iamdiggnifiedAuthor Commented:
I still can't get a simple <div> container to appear above my flash content in IE. I set the wmode to "transparent" in both places. It works in Firefox and I created a javascript pop up window which will appear over the flash file in both IE and FF. How can the javascript popup window appear above the flash file but my div won't. I didn't see anywhere in the popup window code that mentioned z-index. Is there javascript code that overrides a z-index value?
0
 
Dean OBrienCommented:
Try this link
http://www.boutiquebarshow.com/

Does the menu float above the flash? If so it was done as i mentioned, using z-index.

Easynow
0
 
jonahzonaCommented:
Did this ever get solved?
0

Featured Post

Prep for the ITIL® Foundation Certification Exam

December’s Course of the Month is now available! Enroll to learn ITIL® Foundation best practices for delivering IT services effectively and efficiently.

  • 5
  • 4
  • 3
  • +1
Tackle projects and never again get stuck behind a technical roadblock.
Join Now