PDA

View Full Version : can't use iframe in tab panel created with ContentPanel()?



kirk
20 Nov 2006, 4:12 AM
I use YAHOO.ext.ContentPanel() to create tab panel. But one strange thing happen, image or button in iframe is not visible, but plain text can be see. I use yui-ext.0.33-beta4 and BorderLayout to create tab panel.

This happen with IE 6.0, but with FF 1.5.0.8, it's OK!

Any hints? Thanks!

The iframe html file is simple:
<html>
<body>
<img src="img/test.gif border=0>hello
</body>
</html>

'test.gif' image is not visible, 'hello' can be see.

jarrod
20 Nov 2006, 7:03 AM
Erm.. missing close double-quote after .gif?

kirk
20 Nov 2006, 4:32 PM
The demo code is here:

<html>
<head>
<link rel="stylesheet" type="text/css" href="../yui/reset/reset-min.css">
<script type="text/javascript" src="../yui/build/yahoo/yahoo.js"></script>
<script type="text/javascript" src="../yui/build/dom/dom.js"></script>
<script type="text/javascript" src="../yui/build/event/event.js"></script>
<script type="text/javascript" src="../yui/build/connection/connection.js"></script>
<script type="text/javascript" src="../yui/build/dragdrop/dragdrop.js"></script>
<script type="text/javascript" src="../yui/build/animation/animation.js"></script>

<script type="text/javascript" src="util.js"></script>
<script type="text/javascript" src="../yui-ext.0.33-rc1/yui-ext-debug.js"></script>
<script type="text/javascript" src="../yui-ext.0.33-rc1/examples/ie-bg.js"></script>

<link rel="stylesheet" type="text/css" href="../css/layout.css"/>
<link rel="stylesheet" type="text/css" href="../css/grid.css"/>
<link rel="stylesheet" type="text/css" href="../css/tabs.css"/>
<link rel="stylesheet" type="text/css" href="../css/resizable.css"/>
<script type="text/javascript">
Example = function(){
var navPanel;

return {
init : function(){
var layout = new YAHOO.ext.BorderLayout(document.body, {
west: {
split:true,
initialSize: 200,
titlebar: true,
collapsible: true,
minSize: 100,
maxSize: 400
},
center: {
autoScroll: false,
tabPosition: 'top',
closeOnTab: true,
alwaysShowTabs: true
}
});
layout.beginUpdate();

navPanel = new YAHOO.ext.ContentPanel('nav', {title: 'Navigation', fitToFrame:true, closable:false});
layout.add('west', navPanel);
layout.add('center', new YAHOO.ext.ContentPanel('main', {title: 'Auto Tabs', closable: true}));
layout.add('center', new YAHOO.ext.ContentPanel('autoTabs', {title: 'Auto Tabs', closable: true}));
layout.getRegion('center').showPanel('main');

// restore any state information
layout.restoreState();
layout.endUpdate();
}
}
}();
YAHOO.ext.EventManager.onDocumentReady(Example.init, Example, true);

</script>
</head>
<body>
<div id ="container">
<div id="nav" class="ylayout-inactive-content">
</div>
<div id="main" class="ylayout-inactive-content">
<iframe id="fileIframe2" src="iframe_demo.html" frameborder="2" height=54 width=124></iframe>
</div>
<div id="autotabs" class="ylayout-inactive-content">
</div>
</div>
</body>
</html>

iframe_demo.html:

<html>
<body>
../images/grid/drop-yes.gifhello
</body>
</html>

Of course, path to js, css and images may need modification if you want to show it on your system.

In FF 1.5.0.8, image shows as expected, but IE 6.0 not!

Any hints are appreciated.
Thanks!