PDA

View Full Version : mozilla/firefox wmode="transparent" click-through


emergency_pants
12-08-2004, 12:03 PM
Right.

Yet another issue with this finder.

I have managed to get layers to swap depth when a user clicks off the swf and I have managed to send a variable directly to flash, via javascript, to make it close any open menus.

Works fine.

HOWEVER...

I still have a click-through issue in Mozilla/FireFox. IE works fine and the user can successfully click on a link beneath the transparent areas of the flash movie.

In Mozilla, the links remain inaccessible.

This browser issue pains me, big time. Every single thing I try with this project gets bogged down with this cross-browser crap. I wish we'd conceived it differently. :o You live & learn.......

Can anyone shed any light on this? I've done some searches but come up with nothing. Is there an alternative way of allowing Mozilla to register clicks underneath a wmode="transparent" layer?

var result:String;
var type:String = "brick"
_root[type+"Wall"].bang(myHead);
result = "whimper";

MontyPython
06-15-2005, 04:08 PM
I'm trying to do the same things as well. We were looking at Yahoo.com today (6-15-05). They are showcasing a new add for the Mitsubishi Eclipse which allows you to drive a car around the screen.

In the past, we have done similiar flash banners like this, but we have never been able to allow the HTML links below to remain clickable. It would seem that the entire flash movie, whether it had content in it or not, would prevent the clicking of any links underneith.

Somehow, the guys at Yahoo have figured this out.... and we can't seem to decipher their approach.

I have read some things about toggling the focus/blur states of the flash object and swaping depths, but it looks like Yahoo didn't do anything like this. Unless, we can't find it.

Any thoughts on this would be appreciated!!

Thanks.

Billystyx
06-16-2005, 02:22 PM
as far as I am aware there is no easy solution - some firefox/mozilla browsers do not support wmode=transparent.

An alternative would be to do the area which will be used by flash in flash - if there are layers underneath that need functionality, then add the content to the flash doc.

Sorry I can't be more helpful - but wmode just doesn't work for these browsers. see http://www.macromedia.com/cfusion/knowledgebase/index.cfm?id=tn_14201

for a list of browsers which do support wmode

billystyx

MontyPython
06-16-2005, 02:33 PM
Yeah, we noticed that Yahoo didn't support the banner on Mac platform. But, it worked very nicely on Win IE, and it used wmode to set the transparency, however, we just couldn't figure out how the links on the Yahoo page were still clickable _through_ the flash.

Thanks.

Mr_Nitram
07-21-2005, 12:51 AM
I guess this is a variation gripe with windowless transparent mode...because it sounds like there just isn't any solution out there:

In Firefox/Netscape I have found that my flash buttons and links do not scroll with the browser scrollbar. So if user does page down, the position required to click the button becomes offset by the amount the page is scrolled. Rather like a bullet to the head, eh?

Is that ridiculous or what?

piratefish
07-21-2005, 04:35 AM
I had that problem with a navbar I had made. Plus it was never really transparent for some Hexidecimal color backgrounds. The only suggestion I have is to go to Mozilla.org and tell them about this problem. You know, go straight to the source and maybe Firefox 1.0.5 will have a better transparency as well as a few other interaction limitations (Seems to have trouble running large Java based apps and surfing the net at the same time).

jsebrech
08-01-2005, 09:29 AM
Mozilla uses the netscape API's for plugins. My guess is that if a fix for wmode in firefox is possible, it would be up to macromedia to fix it in the flash plugin. But it could very well be possible that due to the design of the API's it is only possible to do this with activex objects, in IE (where the flash player is an activex control).

I had so many headaches with wmode that I just gave up on it. Too buggy.

alesspunk
08-03-2005, 02:45 PM
probe this

<embed src="/_share/swf/menu.swf" wmode="transparent"quality="high" ... ></embed>

here is the link

http://hirihiri.com/blog/

Billystyx
08-03-2005, 02:49 PM
Yes, firefox does do it, but not (according to the MM link I added) all versions.
billystyx

jsebrech
08-08-2005, 06:43 AM
You also get a major performance hit from using wmode transparent in firefox, even when it does actually work.

jimmycomedown
08-28-2005, 03:59 PM
The way to solve the problem, is to put a row above your flash movie and also a row below your movie and set the height to 100% in your bottom td like this:




<table width="100%" height="100%" cellpadding="0" cellspacing="0" border="0" align="center">
<tr>
<td height="0"></td>
</tr>

<tr>
<td width="100%" height="600">
<OBJECT codeBase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0"
height="600" width="100%" align="middle" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
VIEWASTEXT>
<PARAM NAME="_cx" VALUE="27464">
<PARAM NAME="_cy" VALUE="15875">
<PARAM NAME="FlashVars" VALUE="">
<PARAM NAME="Movie" VALUE="media/flash/controller.swf">
<PARAM NAME="Src" VALUE="media/flash/controller.swf">
<PARAM NAME="WMode" VALUE="Transparent">

<PARAM NAME="Play" VALUE="0">
<PARAM NAME="Loop" VALUE="-1">
<PARAM NAME="Quality" VALUE="High">
<PARAM NAME="SAlign" VALUE="LT">
<PARAM NAME="Menu" VALUE="-1">
<PARAM NAME="Base" VALUE="">
<PARAM NAME="AllowScriptAccess" VALUE="always">
<PARAM NAME="Scale" VALUE="NoScale">
<PARAM NAME="DeviceFont" VALUE="0">

<PARAM NAME="EmbedMovie" VALUE="0">
<PARAM NAME="BGColor" VALUE="">
<PARAM NAME="SWRemote" VALUE="">
<PARAM NAME="MovieData" VALUE="">
<PARAM NAME="SeamlessTabbing" VALUE="1">
<embed src="media/flash/controller.swf" width="100%" height="600" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer"
type="application/x-shockwave-flash" wmode="transparent"> </embed>
</OBJECT>
</td>

</tr>
<tr>
<td height="100%"></td>
</tr>
</table>




Hope that helps!

Jaime

Jozzle
01-12-2006, 01:54 PM
This doesn't solve the "clickthrough" problem. Actually using a table prevents even IE from catching the clickthrough's. Placing the flash directly in a positioned div and using wmode is the only way to acces html links behind the flash, and only works in IE, or am I wrong?

capsacin
01-18-2006, 10:41 PM
about the mitsubishi ad that someone had commented about earlier-- yahoo didn't do anything special to make the links under the wmode work. wmode=transparent just WORKS in IE. but all the yahoo links under the transparent areas dont work in Moz, which leads to a bad user experience, and which is why you may have seen a static gif/jpg version of the mitsubishi ad on firefox.

well it's not that wmode=transparent isn't supported Moz, because you do see transparency. i just think that it may either be a Moz bug or a flash plugin bug. i've looked around on the firefox bugzilla site to see if any about it has been resolved, but it doesn't look promising right now. it just keeps redirecting me to similar bugs which are still unresolved or really aren't related to this bug.:mad:

jsebrech
01-19-2006, 06:36 AM
I think it's more like a limitation of the netscape plugin API. It may not be technically able to pass on mouse click events to the browser. Flash on IE is an activex object, so it makes sense it behaves more like a normal browser control.

GoodieBR
01-30-2006, 10:56 AM
1st post here...

Well, I recently needed to use a floating flash ad on a page, and then discovered this annoying bug in Firefox.

Actually, the bug seems to be with the layers, something that prevents links behind an absolute positioned layer to be clicked, even when the flash is removed and the layer is empty.

My solution was to do a browser check script. If IE is detected, I document.write the layer+flash code. No IE, no layer and no flash.

Hope that helps...

D-flyer
02-22-2006, 12:55 PM
did you find a solution.

I got a similar problem.

In my case I got a <div id="nav"> overlapping a <div id="content">. Both div's got a flash movie, but in firefox my flashmovie in <div id="content"> doesn't react :(

Are there any hacks been found after a year???

lincaotun
03-09-2006, 08:05 AM
yahoo ads really rock..i wish that this expanding ad secret would be revealed soon by flash gurus..from yahoo. :)

UOVO
03-24-2006, 09:32 AM
I don't know if this will meet everybodies needs, but it will help in some cases. I had the problem that I wanted a banner to be able to open over an HTML page and then close again.
The trick is to put the Flash in a div tag, that starts out sized to the minimum banner size. Then when you open the Flash banner, you use Javascript to resize the div tag. When you close the banner, you resize the div back to the minimum banner size.

I found all the javascript I needed here:
http://flashmx2004.com/forums/index.php?showtopic=7563

You can see a working sample here:
http://www.uovo.dk/incubator/transparentFlash.html

The original banner is 550x165.
It opens up to 550x600
Take a look at the HTML code for teh javascript/div tag, and the code in Flash looks like this:
getURL("javascript:setFlashSize('flashResizer',550,600)");

This won't work in situations where the swf always have to cover the HTML, but maybe some combination of it would do the trick? (ie. if you had a car in the .swf file driving across the HTML page, you could send new x and y positions to move the div tag around)

theitalianone
03-10-2007, 04:46 AM
I've also been running into this problem and it seems to be a common one with no solution. However, I did find a site that somehow seemed to pull it off. They play a transparent flash video that is hovering over content and the buttons still work in Firefox.

http://www.onsitevideos.com/

I'm not sure how they pulled this off but if anyone has any ideas I would love to hear them. My guess is they might have used javascript rather than css[position:absolute (fixed...etc)] to hover the SWF.

They try hard to hide their code and it's definitely hard to read through... Hope one of you geniuses can figure it out and share the love.

flashato
04-23-2007, 06:22 PM
here an example where btn, and mouse_stuff works with wmode=transparent in firefox.I did not test accurately the form stuff...
enjoy.
Arthur
http://http://www.sanandresisland.info/trasparente/

phantoma
06-25-2007, 08:25 AM
This workaround may help us to cover this issue.
- Two Divs (positioned absolute and contains flashes)
- these divs width and height are same as flashes.
- Two flashs : one is original (say 460x400) and the other is resized one (460x60)
-small container div's display is 'block' and larger container 's display is 'none'
-with javascript capture mouse position.
- if mouse is in the zone then swap the display properties for divs.
- if mouse is outside to the zone. then go back to the original state. (here, you may wait to stop animation then take action)
[note: smaller flash is same flash with original one except it is cropped to desired size]


I made a simple example and it seems ok.

Exavior
06-27-2007, 05:15 AM
There has got to be a (non hacky) solution for this bug... it's a pretty major showstopper for flash developers.

I'm in the process of developing a video content delivery system that requires the ability to click through a flash wrapper to interact with embedded quicktime video controls, and this bug is causing some pretty serious problems.

I'll ask around the office tomorrow and see if any of our flash developers have a solution... if not, I'll get on the horn with my contacts at adobe and see if a solution exists. If one doesn't, I may be in a position to stress its importance.

/Chris

osho
10-09-2007, 04:10 PM
?? So have you heard back from adobe ??

Exavior
10-09-2007, 05:26 PM
It seems to be an issue with firefox, not with the flash plugin. And I've not heard of any plans by firefox to fix it any time soon. Firefox also has the same issue with divs, so it is a pretty large problem.

osho
10-09-2007, 05:49 PM
Thanks for the heads up. I'll keep trying.

atomic
10-09-2007, 05:57 PM
You might want to check this thread...

http://www.actionscript.org/forums/showthread.php3?t=143783

And especially post #24, where the files are attached (or links posted)...

albertxx
11-16-2007, 09:17 AM
hi everyone. ı build a dropdown menu in actionscript 3. sample
www.kosano.org.tr
but ı have got some problem please help me. firstly;
ı can click a link under the dropdown menu on internetexplorer 6 and 7 but ı cant clik firefox and opera. ı did wmode=transparent but this is good for iexplorer. what do ı do???
if ı dont do this ı have got second plan
how can ı resize movie in actionscript for example
when onmouse over movie height= 557px onmouse out movie=70px how can ı do these
thanks for your responds
(sory my english is not so good)

boxofcode
09-22-2008, 11:17 PM
This is strange, and I'd never trust it otherwise, but damned if it didn't work for what I needed. Even though I set my Flex3 app to 100% width and height, I wrapped it in a DIV that I set to:

position:absolute;
height:100%;
width:100%;
top:0px;
left:0px;
z-index:-1;

The z-index is the sauce. Works great in IE and Netscape. I still get fullscreen mode, and I just make sure the sections of my page with Flex3 components are blank so they bleed through, yet they are still rendered on top of the background images. The only side-effect is that all the other HTML components now show up on top of the Flex components, so if you really need them to both a) contain href links and b) show up below the Flex3 components (such as using fullscreen mode + wmode:transparent for large-scale Alert.show()'s), then you have to write code in your Flex3 that calls Javascript to manually change the z-index value of the HTML elements you want rendered below your Flex when Flex is more important, and vice versa.

petermik
09-28-2008, 11:07 AM
you can go there :
http://www.actionscript.org/forums/showthread.php3?t=181531

including sources.

haziel
10-21-2008, 05:52 PM
Dudes, the buttons in my flash didnt work in FF3. I found out that it works fine if I remove the css property overflow:auto, that I had assigned for my body and html tags. with no overflow property, it seems to works just fine in every browser i tried.

Hope it helps.

ThePaulius
10-27-2008, 09:35 AM
Hmmm I donít have overflow:auto anywhere... still canít click on links under the transparent flash in FF3..

I also canít believe that Iím starting to say things like "dam FF" and "I hate you FF" and also a staggering " IE is so much better" ... Iím off to counselling now... Iíve changed..

zapod66
10-31-2008, 05:04 AM
I confirmed that z-index:-1; works. Thanks boxofcode!

wurst
11-04-2008, 12:58 PM
I confirmed that z-index:-1; works. Thanks boxofcode!

what?! z-index, think that does not solve the clickthrough issue!? pay attention to the topic dude :) well, this special topic exists since 2004, and nobody has come across the click html links/forms/pix through transparent areas in flash using firefox? wow! same for me works in IE not in FF. shall i call the police?

yosphorn_s48125
11-10-2008, 01:19 AM
The way to solve the problem

broomstick
11-28-2008, 10:20 PM
I'm experiencing this exact same problem.

I have some flash snow going over the header of my Web site, but I can't click through to the navigation buttons in Firefox or Safari. Oddly enough, it works great in IE7 (although the animation seems a bit choppy).

Kind of weird, because usually it's IE that sucks, and FF and Safari that render things amazingly.

Here's a link to what I'm talking about:
http://www.alphadeltaphimn.org/alpha_delta_phi_fraternity/test.php

broomstick
11-29-2008, 01:55 AM
Oh snap! I just got it to work!

http://www.alphadeltaphimn.org/alpha_delta_phi_fraternity/test.php

It works in FF3, IE7, Safari and Chrome, and you can click the links that are underneath it!

It doesn't work so well in IE6, but screw IE6. The animation is also a little slow in IE7, but that's because the snow also falls underneath a the top bar, which is a PNG with like 90% opacity.

I did it with the right combination of z-index and position attributes. Basically the the flash is in it's own div, with:

z-index:1;
position: absolute;

And the div containing the text is:

position: relative;
z-index: 2;

If you need help with your own site, let me know, I may be able to help.

ultimatepichu
12-18-2008, 09:35 PM
hey broomstick, about the

position: relative;
z-index: 2;

it won't work in my blog, as in the snow is not in front of the "body". Not sure where's the problem. Maybe you can look it out? (View the source codes via Chrome developer tools)

http://ultimatepichu.blogspot.com/

Or maybe I placed wrongly the div?

codemaster
12-18-2008, 11:14 PM
I think you might have the two div's z-index's switched
When I switch them, in firebug...it works, with one problem:
you can't click on anything behind the snow.

ultimatepichu
12-19-2008, 09:08 AM
yea I noticed that too. In fact to make it work all I need is just the z-index for the swf content to make it work as you mentioned. But yea, the problem is still the clicking-through thingy.

Oh, using your method, the clicking-through works with IE (of all the browsers =.=") only.

Verndewd
12-22-2008, 02:06 AM
Oh snap! I just got it to work!

http://www.alphadeltaphimn.org/alpha_delta_phi_fraternity/test.php

It works in FF3, IE7, Safari and Chrome, and you can click the links that are underneath it!

It doesn't work so well in IE6, but screw IE6. The animation is also a little slow in IE7, but that's because the snow also falls underneath a the top bar, which is a PNG with like 90% opacity.

I did it with the right combination of z-index and position attributes. Basically the the flash is in it's own div, with:

z-index:1;
position: absolute;

And the div containing the text is:

position: relative;
z-index: 2;

If you need help with your own site, let me know, I may be able to help.

cool header

kimhoe
01-05-2009, 06:41 AM
Hi,

I follow the same method,

<div style="z-index: 1; position: absolute; ">flash</div>
<div style=" position: relative;z-index: 2;">text with link</div>

It still doesn't work. May I know anything else that I need to take note?

Thanks!

kimhoe
01-05-2009, 07:56 AM
Hi,

It works now. Strange, it didn't work when I test with the Dreamweaver embedding tag. It works when I replace it with other embedding tag from the net.

Anyway, thanks!

I will post the link when it's live.

Cheers,

dimpiax
01-30-2009, 02:32 PM
Here is solution:
<div id="flashContent" style="overflow: hidden;">
:)

SCELF
02-06-2009, 11:29 PM
(before reading, please note that I confused 2 threads together (different forums), and this answer seems really irrelevant but I think it's relevant enough to help some who are browsing by)

What I believe is the best method of doing so, and most SEO friendly. It is fully w3c compliant as well with no errors:

1. Download and place swfobject on your server. (found: here (http://code.google.com/p/swfobject/))
2. Copy the following code and insert it into your header, changing the .swf names accordingly. If your swfobject folder is different, then you'll have to change the path.


<script type="text/javascript" src="swfobject/swfobject.js">
</script>
<script type="text/javascript">
var flashvars = {}; var params = { wmode: "transparent" }; var attributes = {}; swfobject.embedSWF("YOURFLASHFILE.swf", "flash", "800", "600", "7", "swfobject/expressInstall.swf", flashvars, params, attributes)
</script>
<style type="text/css" media="screen">
object { outline:none; }
</style>


3. Change your div information accordingly. This is just an example that I made up, but overall you should keep the id info and stuff in there.

<div id="flash" class="fl">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="800" height="600">
<param name="movie" value="YOURFLASHFILE.swf" />

<param name="wmode" value="transparent" />
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="YOURFLASHFILE.swf" width="800" height="600">
<!--<![endif]-->
<p>Alternative content</p>
<!--[if !IE]>-->
</object>
<!--<![endif]-->

</object>
</td>
</tr>
</table>
</div>


4. Add CSS information to your stylesheet.

#flash {
width: 800px;
height: 600px;
position:absolute;
}
.flash {
width: 800px;
height: 600px;
position:absolute;
}
#fl {
width: 800px;
height: 600px;
position:absolute;
}
.fl {
width: 800px;
height: 600px;
position:absolute;
}

Umm... I had forgotten what flash ID and Class is so whether or not it's # or . you'll have to play around with it ^^;; But overall, it will work and kill off any dots around the flash file and ensure w3c compliance. Enjoy!

Oh, and if you want to know what any of this means, check out the guide over at GOOGLE Code (http://code.google.com/p/swfobject/wiki/documentation), they will break down swfObject for you. Another note is that the <embed> tags don't really exist, but browser support them. That's why this method is best to use.

Mina82
05-05-2009, 12:57 PM
Hi, I'm new in this forum and with flash, but I tried this Google swfobject. It works great in IE, the clicking-through is solved, but it is not in Firefox T-T does anyone try it? is another solution for Firefox? :confused:

sarenax
06-10-2009, 05:39 AM
Firefox 3, How do I stop smart bar from bringing up bookmarks while I type a url? I have my favorite adult oriented websites bookmarked. Is there a way to disable the smart address bar in FireFox 3 from bringing up my bookmarks while I type? If not, can you suggest an alternative?
____________________
affiliateelite (http://www.keywordspy.com/overview/domain.aspx?q=affiliateelite.com) ~ affiliateelite.com (http://www.keywordspy.com/overview/domain.aspx?q=affiliateelite.com) ~ adgooroo (http://www.keywordspy.com/overview/keyword.aspx?q=adgooroo) ~ adgooroo.com (http://www.keywordspy.com/overview/domain.aspx?q=adgooroo.com)