z-indexed wmode=transparent SWF blocking HREF links in FF & Safari

I have a 300x274 pixel SWF in a z-indexed div. It has a visible area of 300x100 on frame1 of an mc that on rollover goes to frame2 where the visible content is 300x274. The bottom 174 pixels overlay HTML links. In IE these links are clickable. In Safari & FF the expandable transparent area of the SWF, prevents clicks on the links, and there is no cursor. I was thinking that flash_resize.js or some other actionscript to javascript with CSS overflow hidden communication might help.

My AS

box_mc.onRelease = function():Void
{
getURL("javascript:pageTracker._trackPageview('/flash/click/');");
getURL("http://www.yahoo.com","_blank");
};

box_mc.onRollOver = function():Void
{
getURL("javascript:pageTracker._trackPageview('/flash/rollover/');");
box_mc.gotoAndPlay(2);
};

box_mc.onRollOut = function():Void
{
box_mc.gotoAndStop(1);
};

I was thinking that on frame1 of box_mc the div called flash which has a z-index of 1, would be 300 pixels by 100 pixels and that on frame2 Flash communicate via javascript that the div should be  300 x 274.




/* 
Methods for resizing the flash stage at runtime.
 
setFlashWidth(divid, newW)
divid: id of the div containing the flash movie.
newW: new width for flash movie
 
setFlashWidth(divid, newH)
divid: id of the div containing the flash movie.
newH: new height for flash movie
 
setFlashSize(divid, newW, newH)
divid: id of the div containing the flash movie.
newW: new width for flash movie
newH: new height for flash movie
 
canResizeFlash()
returns true if browser supports resizing flash, false if not. 
*/
function setFlashWidth(divid, newW){
	document.getElementById(divid).style.width = newW+"px";
}
function setFlashHeight(divid, newH){
	document.getElementById(divid).style.height = newH+"px";		
}
function setFlashSize(divid, newW, newH){
	setFlashWidth(divid, newW);
	setFlashHeight(divid, newH);
}
function canResizeFlash(){
	var ua = navigator.userAgent.toLowerCase();
	var opera = ua.indexOf("opera");
	if( document.getElementById ){
		if(opera == -1) return true;
		else if(parseInt(ua.substr(opera+6, 1)) >= 7) return true;
	}
	return false;
}

Open in new window

LVL 1
somnamblstAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

somnamblstAuthor Commented:

	<div id="flashid">
		<script type="text/javascript" language="JavaScript">
			e = canResizeFlash();
			document.write('<object data="resize.swf" width="100%" height="100%" type="application/x-shockwave-flash">');
			document.write('<param name="movie" value="*****.swf" />');
			document.write('<param name="FlashVars" value="allowResize='+e+'" />');
			document.write('Flash Movie With Resizing Content');
			document.write('</object>');
		</script>
		<noscript>Javascript must be enabled to view Flash movie</noscript>
	</div>

Open in new window

0
somnamblstAuthor Commented:
looking at the AS on the flash_resize demo file from Mustardlabs.org and trying to figure out how to implement resizing the div dependent on which frame of box_mc, I was thinking it might be something like this?

http://www.actionscript.org/forums/showthread.php3?t=138300
function resize() {
	if (allowResize == "true") {
		getURL("javascript:setFlashHeight('flashid',"+h+");");
	}
}
/*
Initialize objects on the stage depending on whether the browser supports resizing flash
*/
if (allowResize == "true") {
	box_mc.autoSize = "Left";
} else {
	box_mc._height = 274;
	box_mc._width = 300;
 
		
}

Open in new window

0
somnamblstAuthor Commented:
Link to mustardlab.com documentation on flash_resize.js and files

http://www.mustardlab.com/developer/flash/objectresize/
0
somnamblstAuthor Commented:
The solution which I have figured out on my own is


<script type="text/javascript" src="flash_resize.js"></script>
<script type="text/javascript">
function setFlashHeight(divid, newH) {
document.getElementById(divid).style.height = newH+"px";
}
</script>
 
<div id="flashid" style="overflow:hidden; height:100px; width:300px; position:absolute; z-index:100; background: Aqua;">
<script type="text/javascript" language="JavaScript">
			e = canResizeFlash();
document.write('<object data="mymovie.swf" width="300" height="274" type="application/x-shockwave-flash">');
document.write('<param name="movie" value="mymovie.swf" />');
document.write('<param name="FlashVars" value="allowResize='+e+'" />');
document.write('Flash Movie With Resizing Content');
document.write('<param name="wmode" value="transparent" />');
document.write('</object>');
		</script>
		<noscript>Javascript must be enabled to view Flash movie</noscript>
	</div>
 
 
 
 
 
 
box_mc.onRollOver = function():Void
{
box_mc.gotoAndPlay(2); 
getURL("javascript:setFlashHeight('flashid', 274)");
};
box_mc.onRollOut = function():Void
{
box_mc.gotoAndStop(1);
getURL("javascript:setFlashHeight('flashid', 100)");
};

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Adobe Flash

From novice to tech pro — start learning today.