Moving Div Containing Flash Floats Over Static Flash Div But Static Appears On Top: Why? (Firefox)

The error I'm getting only appears in Firefox.

I've got an HTML div called "floating flash", which contains a flash movie.  By using JavaScript and CSS, the div floats onto the screen and moves down to a designated position on the page.  Underneath this position there is space where a dynamically generated ad appears and remains in its static position.  When this dynamically generated ad is a regular image, the page functions as expected.  When the ad is a Flash movie, I get a bug: the floating flash appears below the static ad.  In other words, the floating flash div should always be on top, never below anything on the page.  This does not appear to happen in IE7 or IE6.

The floating flash div is only meant to appear once a day so you'll have to clear your browser's cookies in order to test it each time you'd like to see it.  The code appears for the floating flash div appears at the very bottom of the HTML page (search for the word 'interstitial').  If you have Firefox's Firebug extension you'll be able to see the CSS and JS file that make the floating flash div work (both are called 'interstitial')

http://pdfserver.amlaw.com/Production/WebApp/view/pages/APTI/myaccountprofiledemo.html

I have to note: whatever the solution is it must work in Firefox, IE7 & IE6.  Let me know if you need me to post any code or give any additional information.

This must be fixed today so I'm giving the most points I can.  Thank in advance for your assistance.
JaeWebbAsked:
Who is Participating?

[Webinar] Streamline your web hosting managementRegister Today

x
 
LakioConnect With a Mentor Commented:
and if you dont then do this:

add an id too the static flash div

<div style="margin-top:100; margin-left:100;" id="flashadx">

and add this below the last last ad on the page ( lowerst in the HTML )

 document.getElementById('floatingflash').innerHTML = document.getElementById('floatingflash').innerHTML.replace( /="window"/g, '="transparent"' )
 document.getElementById('flashadx').innerHTML = document.getElementById('flashadx').innerHTML.replace( /="window"/g, '="transparent"' )

<html>
 
    <!-- To deploy the Interstitial Ad solution, transfer the script and link
    tags from the header, the body tag's 'onLoad' statement, and the
    'INTERSTITIAL AD SECTION' to the page where the ad should appear. Next,
    make sure the 'interstitial.js' and the 'interstitial.css' files are
    referenced from the script and link tags, respectively. -->
    
	<script type="text/javascript" src="src/interstitial.js"></script>
	<link rel="stylesheet" type="text/css" href="src/interstitial.css" />
 
	<title>IA Test (HTML/External Scripts)</title>
 
</head>
 
<body onLoad="if (showAd) appear();">
 
	<div style="margin-top:100; margin-left:100;" id="flashadx">
        <!-- This is the link to the remote OAS ad tag -->
        <script type="text/javascript">
           document.write('<scr'+'ipt language="JavaScript" type="text/javascript" src="http://oascentral.law.com/RealMedia/ads/adstream_jx.ads/interstitial.law.com/IHC/@x96"></scr'+'ipt>');
        </script>
    </div>
 
 
 	<!-- INTERSTITIAL AD SECTION -->
    <div id="floatingflash" style="top:-400px;left:-150px;margin-left:45%;"> 
        <!-- This is the close button that appears over 
        generated/visible ads -->
        <div id="hideButtonTab">
            <a id="hideButton" href="javascript:disappear();">Close [ X ]</a>
        </div>
    	        
        <!-- This is the link to the remote OAS ad tag -->
        <script type="text/javascript">
        if ( userHasNotSeenAd() ) {
           showAd = true;
           document.write('<scr'+'ipt language="JavaScript" type="text/javascript" src="http://oascentral.law.com/RealMedia/ads/adstream_jx.ads/interstitial.law.com/IHC/@x96"></scr'+'ipt>');
		   
		   <!-- Wait one second after call to ad tag, then test size of floatingflash div -->
		   //setTimeout('showHideButtonIfAdScheduled()', 1000 );
		   
		   // Fix for floating flash
		   document.getElementById('floatingflash').innerHTML = document.getElementById('floatingflash').innerHTML.replace( /="window"/g, '="transparent"' )
		   document.getElementById('flashadx').innerHTML = document.getElementById('flashadx').innerHTML.replace( /="window"/g, '="transparent"' )
        }
        </script>
        
    </div> 
	<!-- END INTERSTITIAL AD -->
 
</body>
</html>

Open in new window

0
 
LakioCommented:
I dont see the problem, screenshot?
0
 
JaeWebbAuthor Commented:
This is a screenshot of the effect.  

http://www-stage.law.com/interstitial_test_screenshot.html

To recreate the effect on your own computer, please remember: the static ad is dynamically generated and may be an image or a Flash movie.  If you don't see the Firefox error, clear your cookies and browser cache, then refresh the page; do this until a the static ad appears as a Flash movie.
0
The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

 
JaeWebbAuthor Commented:
I put Z-index values on the floating flash div and on the skyscraper ad that appears on the right side (the under-side ad overlapping in the floating flash div in the screenshot).
/* EXTERNAL CSS FILE FOR PAGE */
 
#adscol .skyscraper {
     clear:both;
     display:block;
     margin:0pt 0pt 8px;
     position:relative;
     z-index:1;
}
 
/* INLINE STYLE FOR FLOATING FLASH DIV (Note the Z-index) */
 
<!-- INTERSTITIAL AD SECTION -->
<div id="floatingflash" style="top:-400px;left:-150px;margin-left:45%; z-index:100;"> 
        <!-- This is the close button that appears over generated/visible ads -->
        <div id="hideButtonTab">
            <a id="hideButton" href="javascript:disappear();">Close [ X ]</a>
        </div>
                
        <!-- This is the link to the remote OAS ad tag -->
  <script type="text/javascript">
	if ( userHasNotSeenAd() ) {
	   showAd = true;
	   document.write('<scr'+'ipt language="JavaScript" type="text/javascript" src="http://oascentral.law.com/RealMedia/ads/adstream_jx.ads/interstitial.law.com/lawhome/@x96"></scr'+'ipt>');
	   
	   <!-- Wait one second after call to ad tag, then test size of floatingflash div -->
	   setTimeout('showHideButtonIfAdScheduled()', 1000 );
	}
	</script>
        
</div> 
<!-- END INTERSTITIAL AD -->

Open in new window

0
 
JaeWebbAuthor Commented:
I meant to add this:  I added z-index but it didn't work.  I still need help creating a fix for this.
0
 
LakioCommented:
I dont see the screenshots but try making the wmode transparent for the flash

http://www.flash-here.com/tutorials/flash_transparent_bkg.html
0
 
JaeWebbAuthor Commented:
Sorry about the screenshot link; I'll fix that tomorrow (a few hours from now).  If you want see the effect, I'm sure you'd see it if you clear your cookies and refresh Firefox 2, maybe three times.  The skyscraper advertisement often appears as flash so you should see the bug.

In the morning I'll try the 'wmode' idea but I must say - I'm not sure how that will help with I can only affect the Flash code for the floating flash div.  This div only expands as far as the movie and the movie is a square with no parts that are meant to be transparent.  I don't understand how making the floatingflash div 'transparent' will solve the issue of the dynamic skyscraper ad underneath it appearing on top of it...  I cannot modify the skyscraper ad code - only the HTML/CSS box used for displaying it.
0
 
JezcentralCommented:
The flash movie will always apear on top of the page, You cannot float an element over it, as the flash movie is not actually part of the rendered page, it lies on top of it.

As Lakio mentioned, there is a way of making the flash background transparent, but not the whole thing.


0
 
LakioCommented:
thats not true, you can make a div float on top
0
 
JezcentralCommented:
Really? I thought that could only be done if the flash movie had been coded in a particular way, and as he doesn't have access to it, he couldn't make the necessary changes to do that. I stand prepared to be corrected.
0
 
LakioCommented:
0
 
JaeWebbAuthor Commented:
I hadn't noticed this cool attachment feature...

Thanks, but your idea isn't quite what I'm looking for.  The top object must completely cover the bottom object.  In the screenshot I just attached, this is not true; the blue Quest ad should completely cover the black skyscraper ad beneath it.

Does anyone have any ideas on how to resolve this Flash conflict?
screenshot.jpg
0
 
JaeWebbAuthor Commented:
0
 
JaeWebbAuthor Commented:
0
 
LakioCommented:
I have some ideas but none of the links work for me (I am in Iceland does that matter?),

LOL I just read this now "I cannot modify the skyscraper ad code", sorry I did not read everything.

1. you can maybe change it with javascript?
2. you can put the floating ad in an iframe element, best bet ;)
0
 
JaeWebbAuthor Commented:
I'm sorry that you cannot see the links, Lakio.  I do not know why you can't; I put the files up on my company's testing server so you should be able to.  

You have some some good ideas.  I'm investigating how to do this with JavaScript right now.  I cannot see the iframe idea working; I'd like to see more but I don't have the framework to test that idea myself.

Is there anyone else out there that can help out with this issue?  If I don't get a solution by the end of today I'm going to ask the administrators to close this thread.
0
 
JaeWebbAuthor Commented:
I created a flat test-version of the page and changed HTML to TXT; just change it back.  The support files have '.txt' added to the end; just delete that part and put the two support files into a folder called 'src'.  From there, make sure all of these files are together in a in a test directory and launch the HTML file.  

From this point you will see two versions of the same Flash ad.  One will be stationary and the other will float onto the screen.  The one that floats should always be on top.  The problem is that it isn't.  To fix this issues, I must have the floating Flash on top at all times.

Don't forget to clear your cookies and cache after each test; the ad is set to show only once per day.

Time is of the essence.  Thanks for you help.
interstitial-HTML-forInsert--FLA.txt
interstitial.css.txt
interstitial.js.txt
0
 
JaeWebbAuthor Commented:
I cannot open the HTML attachment so I'm posting its code as a snippet instead.
<html>
 
    <!-- To deploy the Interstitial Ad solution, transfer the script and link
    tags from the header, the body tag's 'onLoad' statement, and the
    'INTERSTITIAL AD SECTION' to the page where the ad should appear. Next,
    make sure the 'interstitial.js' and the 'interstitial.css' files are
    referenced from the script and link tags, respectively. -->
    
	<script type="text/javascript" src="src/interstitial.js"></script>
	<link rel="stylesheet" type="text/css" href="src/interstitial.css" />
 
	<title>IA Test (HTML/External Scripts)</title>
 
</head>
 
<body onLoad="if (showAd) appear();">
 
	<div style="margin-top:100; margin-left:100;">
        <!-- This is the link to the remote OAS ad tag -->
        <script type="text/javascript">
           document.write('<scr'+'ipt language="JavaScript" type="text/javascript" src="http://oascentral.law.com/RealMedia/ads/adstream_jx.ads/interstitial.law.com/IHC/@x96"></scr'+'ipt>');
        </script>
    </div>
 
 
 	<!-- INTERSTITIAL AD SECTION -->
    <div id="floatingflash" style="top:-400px;left:-150px;margin-left:45%;"> 
        <!-- This is the close button that appears over 
        generated/visible ads -->
        <div id="hideButtonTab">
            <a id="hideButton" href="javascript:disappear();">Close [ X ]</a>
        </div>
    	        
        <!-- This is the link to the remote OAS ad tag -->
        <script type="text/javascript">
        if ( userHasNotSeenAd() ) {
           showAd = true;
           document.write('<scr'+'ipt language="JavaScript" type="text/javascript" src="http://oascentral.law.com/RealMedia/ads/adstream_jx.ads/interstitial.law.com/IHC/@x96"></scr'+'ipt>');
		   
		   <!-- Wait one second after call to ad tag, then test size of floatingflash div -->
		   setTimeout('showHideButtonIfAdScheduled()', 1000 );
        }
        </script>
        
    </div> 
	<!-- END INTERSTITIAL AD -->
 
</body>
</html>

Open in new window

0
 
LakioCommented:
Im tested it on my pc and I see the problem and its not soo easy too fix.
Im going too look at it later today.
0
 
LakioCommented:
if you can change one line in http://oascentral.law.com/RealMedia/ads/adstream_jx.ads/interstitial.law.com/IHC/@x96
it will fix this.

document.write ('var TFSMFlash_WMODE="window";\n');
to
document.write ('var TFSMFlash_WMODE="transparent";\n');
0
 
JaeWebbAuthor Commented:
Lakio, you're awesome!  Thanks for your help.

I moved the 'fix' code into the external JS file, added some browser test logic since the problem didn't occur in IE, then I placed function where the 'fix' appeared, like so:



        if ( userHasNotSeenAd() ) {
           showAd = true;
           document.write('<scr'+'ipt language="JavaScript" type="text/javascript" src="http://oascentral.law.com/RealMedia/ads/adstream_jx.ads/interstitial.law.com/lawhome/@x96"></scr'+'ipt>');
		   
		   <!-- Wait one second after call to ad tag, then test size of floatingflash div -->
		   setTimeout('showHideButtonIfAdScheduled()', 1000 );
           <!-- If browser is not IE, replair overlapping flash issue -->
		   fixOverlapBugIfFirefox();
		}
        </script>

Open in new window

0
 
JaeWebbAuthor Commented:
You knowledge is impressive.  I had the idea of how to fix it but lacked the knowledge to get it done.  Thanks.  I got the answer I was looking for and learned something useful in the process.
0
 
LakioCommented:
Glad to help
0
All Courses

From novice to tech pro — start learning today.