PDA

View Full Version : resize handles correct in FF, not visible in IE9



SunWuKung
10 Feb 2012, 8:52 AM
Hi,
I have a resizable div filled with a Flash object.
The resize works both in IE and FF but the resize handles are barely visible in IE9.
Without the Flash content they look ok in IE as well - it seems that they get covered with the content.
I attached the pictures how it looks in FF and IE.

Any idea how I could fix this?
Thanks for the help.
SWK.

Here is how I create them:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="pragma" content="no-cache" />
<title>Player</title>


<style type="text/css">
body,html {
margin: 0;
padding: 0,
background-color: #e5e5e5;
}




.x-viewport body { background-color: #e5e5e5; }


</style>


<script language="JavaScript" type="text/javascript" src="/scripts/swfobject.js"></script>
<script language="JavaScript" type="text/javascript" src="/scripts/flash_detect.js"></script>
<link href="/scripts/ext-3.4.0/resources/css/ext-all.css" media="screen" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="/scripts/ext-3.4.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="/scripts/ext-3.4.0/ext-all.js"></script>


</head>
<body>


<script type="text/javascript">
Ext.BLANK_IMAGE_URL ='/scripts/ext-3.4.0/resources/images/default/s.gif'; //]]>


function onPleaseWaitSetupInTheFlash() {
parent.flashDisplayed = true;
}


Ext.onReady(function(){


var viewPort = new Ext.Viewport({
id: "viewPort",
renderTo:'body',
layout: 'absolute',
autoScroll: true,
items:{
xtype: "panel",
id: "FlashPanel",
bodyStyle:'background-color: #e5e5e5',
//plain:true,
frame : false,
border: false,
float: true,
region:'center',
html: '<div id=flashcontent></div>'
}
});


centerFlash=function(panel){
bHeight=Ext.getBody().getHeight();
bWidth=Ext.getBody().getWidth();
fHeight=Ext.get('flashcontent').getHeight();
fWidth=Ext.get('flashcontent').getWidth();
Xratio=fWidth/bWidth;
Yratio=fHeight/bWidth;
fX=(bWidth-fWidth)/2;
fY=(bHeight-fHeight)/2;
Ext.getCmp('FlashPanel').setPosition(fX,fY);
};

Ext.EventManager.onWindowResize(function (ev) {
centerFlash();
});





if (!FlashDetect.versionAtLeast(8,0,33))
document.location.href='/user/error/?e=noflash';
else {
var so = new SWFObject("/swf/hermestest.swf", "loader", "100%", "100%", "8");
so.addVariable("configurationFromOutside", "/user/flashplayer/getconfig/occ_id/<?=$this->occ_id?>");
//so.addVariable("configxml", "/xml/engagement_player.xml");
so.addVariable("dictionaryFromOutside", "/swf/dictionaries/<?=$this->instrument ['ref_lang']?>.xml");
//so.addVariable("serverUrlFromOutside", "/interface.phtml");
so.addVariable("serverUrlFromOutside", "/user/flashplayer/flashinterface/occ_id/<?=$this->occ_id?>");
so.addVariable("playeroid", "<?=$this->occ_id?>");
so.addParam("bgcolor", "#e5e5e5");
so.addParam("menu", "false");
bHeight=Ext.getBody().getHeight();
bWidth=Ext.getBody().getWidth();
if (bHeight<600 || bWidth<800) {
if (confirm('<?=$this->translate('browser_too_small_confirm')?>')){
so.addParam("scale", "showall");
so.write("flashcontent");
} else {
document.location.href='/user/error/?e=smallwindow';
}
} else {
//so.addParam("scale", "noscale");
so.addParam("scale", "showall");
so.write("flashcontent");
}
}



new Ext.Resizable('flashcontent', {
id:"FlashWin",
width: 800,
height: 600,
minWidth:800,
minHeight:600,
preserveRatio: true,
pinned: true,
dynamic:false,
handles: "all",
listeners: {
'resize': function(p) {
centerFlash();
}
}
});


centerFlash();





});




</script>
</body>
</html>

mitchellsimoens
10 Feb 2012, 9:07 AM
Why not have Panel use fit layout and your flash be a FlashComponent? It should size your flash appropriately