Solved

CSS Light Box Over Flash

Posted on 2009-05-12
36
876 Views
Last Modified: 2012-05-06
Hey experts!

How do you make a css element appear IN FRONT of flash?

I understand that wmode=transparent will work if you have access to the source code, but what if you don't have access to the source code?

Is there anything that can be done to prevent the CSS from going UNDER the flash object?

Any help is appreciated!
0
Comment
Question by:magnumiq
  • 19
  • 11
  • 6
36 Comments
 
LVL 30

Expert Comment

by:renazonse
ID: 24367260
You'll need to use z-index and positioning in CSS to make the lightbox appear in front. The elements in question will need to be assigned a position and then you add the z-index property. Here's an explanation:

http://www.w3schools.com/Css/pr_pos_z-index.asp
0
 

Author Comment

by:magnumiq
ID: 24367319
Okay here's what I have...maybe you can help me figure this out:

I have an iFrame which contains the actual website that I'm overlaying the thickbox on.  

So how would I set the z-index on the thickbox as well as the iframe and all the contents in it?
0
 
LVL 30

Expert Comment

by:renazonse
ID: 24367495
Hmmm....I can only assume the z-index properties can be assigned to the iFrame but the thickbox is tricky. I'm pretty sure that thickbox CSS already uses a z-index...something like 99. Try the below code and assign it to the iframe.

.iframeCSS { position: relative; z-index: -1; }

<iframe class="iframeCSS"></iframe>
0
 

Author Comment

by:magnumiq
ID: 24367555
Hmmm yeah that still doesn't work....
0
 
LVL 30

Expert Comment

by:renazonse
ID: 24367765
try:

" using absolute positioning instead of relative
" containing the iframe within div tags and assigning the css to the divs

I'm still looking into this.
0
 

Author Comment

by:magnumiq
ID: 24367874
0
 
LVL 30

Expert Comment

by:renazonse
ID: 24367918
The "Please Let me Know you were Here" box is showing on top. Is that what you're trying to achieve?


Picture-1.png
0
 

Author Comment

by:magnumiq
ID: 24367927
oh wow! What browser are you using?

Also, the site behind the box should be greyed out, like a lightbox, is it not?
0
 

Author Comment

by:magnumiq
ID: 24367952
Do you see how the flash is still above the grey css image?  That's what I'm trying to avoid...the flash movie should not be clickable until the person fills out the form.
0
 
LVL 30

Expert Comment

by:renazonse
ID: 24368011
it's not greyed out in FF 3 on the Mac - can't click flash
works perfect in Safari 4 - can't click flash
works perfect in IE 7 on PC - can click flash
works perfect in FF 3 on PC - can click flash

not sure if this is going to make a difference but try adding a z-index of 101 or something to that style with the thickbox <a style:... and see if that does anything. It's a long shot.

0
 

Author Comment

by:magnumiq
ID: 24368191
Add the z-index 101 to which style?
0
 

Author Comment

by:magnumiq
ID: 24368222
I see what you mean now, but still no luck...I really need the flash to be UNDER the overlay.
0
 
LVL 30

Expert Comment

by:renazonse
ID: 24368805
Apparently, for this to work in FF on the PC the body has to assigned a z-index of 0. Also, I've found a thread on this that says assign a z-index to the iframe in addition to the div as I told you to do but that didnt work until some exorbitant values were assigned to the z-indexes.

to bring the lightbox in front try this:
" Enclose the link that initiates the lightbox in a div with a very high z-index
" Adjust the style attached to the iframe to be a much much lower z-index than the div
0
 

Author Comment

by:magnumiq
ID: 24368891
Man...still no luck...any other suggestions here?  Check it out and see if I did what you told me, correctly...
0
 

Author Comment

by:magnumiq
ID: 24368970
Also do you know how I can dynamically set the height of the iframe so to eliminate the double scrollbars?
0
 
LVL 30

Expert Comment

by:renazonse
ID: 24368975
Try this:


<body style="z-index: 0;">

<a href="optin.php?TB_iframe=true&height=300&width=400&modal=true&uid=" title="" class="thickbox" id="autoclick" style="display:none; z-index: 900;">Open Optin Box</a>

<div style="z-index: -1;"><iframe src="http://www.url.com" width="100%" height="900" frameborder="0" scrolling="no" style="z-index: -100;"></iframe></div>

</body>

Open in new window

0
 
LVL 30

Expert Comment

by:renazonse
ID: 24368991
sorry, that stuff will have to have positioning assigned as well. Try absolute instead of relative.
0
 

Author Comment

by:magnumiq
ID: 24369037
bummer....nice suggestion but still does not work...this is TRICKY!!!
0
Highfive Gives IT Their Time Back

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 
LVL 30

Expert Comment

by:renazonse
ID: 24369069
Sorry i forgot to add the positioning before. Try this one:
<body style="position: relative; z-index: 0;">

<a href="optin.php?TB_iframe=true&height=300&width=400&modal=true&uid=" title="" class="thickbox" id="autoclick" style="position: relative; display:none; z-index: 900;">Open Optin Box</a>

<div style="position: relative; z-index: -1;"><iframe src="http://www.url.com" width="100%" height="900" frameborder="0" scrolling="no" style="position: relative; z-index: -100;"></iframe></div>

</body>

Open in new window

0
 

Author Comment

by:magnumiq
ID: 24369132
Nope...and on IE the div is covered by the FLASH.

FF - the div is OVER the flash but the flash is still active...

Any other ideas?

I really need to find a solution to this...
0
 
LVL 30

Expert Comment

by:renazonse
ID: 24369468
have  look at this thread and see if this jQuery script for creating your iFrame and covering div does the trick...note he uses the crazy z-index heights to make it work in all browsers.

http://www.ozzu.com/website-design-forum/placing-div-over-flash-iframe-t94789.html
0
 

Author Comment

by:magnumiq
ID: 24369829
Hmmm I don't quite understand how this applies...appreciate your help, can you expand on this for me?
0
 
LVL 30

Accepted Solution

by:
renazonse earned 250 total points
ID: 24370134
Everything I come to now is leading me back to this jQuery plugin here: http://docs.jquery.com/Plugins/bgiframe

You'll have to read the directions and take a look at the example included with the download to get an idea of how it'll work. Otherwise, since you don't have access to the Flash source you may not be able to do it.
0
 

Author Comment

by:magnumiq
ID: 24370468
Well I did everything the documentation told me to do and it's still not working properly.  Perhaps you could take a look at the code and tell me if I'm doing something wrong?

Here's what the DOC's say:

How do I use it?

The usage is simple. Just call bgiframe on a jQuery collection of elements.

$('.fix-z-index').bgiframe();

The plugin tries its best to handle most situations but sometimes some configuration is necessary. For example if your borders are defined in a unit other than pixels, you will need to manually set the top and left properties to the negative width of the border. Here are the options/settings available to configure the output.

top

The iframe must be offset to the top by the width of the top border. This should be a negative number representing the border-top-width. If a number is is used here, pixels will be assumed. Otherwise, be sure to specify a unit. An expression could also be used. By default the value is "auto" which will use an expression to get the border-top-width if it is in pixels.

$('.fix-z-index').bgiframe({ top: '-1em' });



left

The iframe must be offset to the left by the width of the left border. This should be a negative number representing the border-left-width. If a number is used here, pixels will be assumed. Otherwise, be sure to specify a unit. An expression could also be used. By default the value is "auto" which will use an expression to get the border-left-width if it is in pixels.

$('.fix-z-index').bgiframe({ left: '-1em' });



width

This is the width of the iframe. If a number is used here, pixels will be assume. Otherwise, be sure to specify a unit. An expression could also be used. By default the value is "auto" which will use an expression to get the offsetWidth.

$('.fix-z-index').bgiframe({ width: 100 });



height

This is the height of the iframe. If a number is used here, pixels will be assume. Otherwise, be sure to specify a unit. An expression could also be used. By default the value is "auto" which will use an expression to get the offsetHeight.

$('.fix-z-index').bgiframe({ height: 100 });



opacity

This is a boolean representing whether or not to use opacity. If set to true, the opacity of 0 is applied. If set to false, the opacity filter is not applied. Default: true.

$('.fix-z-index').bgiframe({ opacity: false });



src

This setting is provided so that one could change the src of the iframe to whatever they need. Default: "javascript:false;"

$('.fix-z-index').bgiframe({ src: '#' });
0
 
LVL 1

Expert Comment

by:rito1
ID: 24372396
How about trying to set wmode="transparent" on the flash embed code.

Thanks,
Rit
0
 

Author Comment

by:magnumiq
ID: 24374050
Dude rito1, come on...read my original post....
0
 
LVL 1

Expert Comment

by:rito1
ID: 24374105
It was very early here when I read your message.. ignore me! I had looked for a CSS solution a while back but to no success.

I am crawling back into my hole :-)
0
 

Author Comment

by:magnumiq
ID: 24374111
LOL thanks for trying :)
0
 
LVL 1

Expert Comment

by:rito1
ID: 24374150
ok, I understand that you don't have direct access to the src code but have you considered applying the vmode attribute using DOM.. this could be stored within an external file:

http://www.javascriptkit.com/dhtmltutors/domattribute.shtml - setAttribute()


0
 

Author Comment

by:magnumiq
ID: 24374163
OH NOW we're talkin! Nope haven't considered that...explain more my friend...
0
 
LVL 1

Expert Comment

by:rito1
ID: 24374186
Like this i suppose..
document.getElementById("myflashitem").setAttribute("wmode","transparent")

Open in new window

0
 

Author Comment

by:magnumiq
ID: 24374210
Okay here's the page with the flash on it.

Would the id be "player"

http://www.socdave.com
0
 

Author Comment

by:magnumiq
ID: 24374214
Also how do I call to that object within my iframe?
0
 
LVL 1

Expert Comment

by:rito1
ID: 24374335
This was just an idea but looking further into it I don't think its right for your flash item.. again, ignore me.
0
 

Author Comment

by:magnumiq
ID: 24374367
no no I think you're on to something here!

If you can just tell me how to code it, I'll give it a shot!  Can't hurt :)
0
 
LVL 1

Assisted Solution

by:rito1
rito1 earned 250 total points
ID: 24374482
My thoughts were to have a .js file (wmode.js for example) containing:

document.getElementById("player").setAttribute("wmode","transparent")

and then reference this file from within your content page but this would be your iframe's src content page..

<script language='javascript' type='text/javascript' src='https://www.sendoutcards.com/wmode.js'></script>

But the obstacle is that you need to find a way of adding a new embedded param tag to the object tag rather than an attribute to the object tag.

DOES ANYONE KNOW IF ADDING A NEW PARAM TAG USING DOM?

Rit
0

Featured Post

Threat Intelligence Starter Resources

Integrating threat intelligence can be challenging, and not all companies are ready. These resources can help you build awareness and prepare for defense.

Join & Write a Comment

Suggested Solutions

Title # Comments Views Activity
jQuery or CSS 9 38
jQuery CSS Scroll Issue 3 32
Re-position sub-options beneath the TAB 7 42
Bootstrap 3 icons 3 11
Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…

758 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

Need Help in Real-Time?

Connect with top rated Experts

23 Experts available now in Live!

Get 1:1 Help Now