100% width/height Panorama in Firefox

  • I am trying to made a page with a left column <div id="left"> containing some menu and a right column <div id="panorama"> containing the panorama that must fill 100% of the remaining surface of the page. Here below the page.

    It works fine with IE and Safari, but with Firefox the panorama is not shown due to the 100% size issue of Firefox.

    The first FAQ at http://code.google.com/p/swfobject/wiki/faq seems to provide a solution but I don't understand how to implement step 3 with krpano.

    I have tryed the resizepano() function available in https://krpano.com/108beta/flash10_example.html, that works with swfobject 1.5 but I am not able to use with swfobject 2.1 (that I need to use)

    Any suggestion? Thanks Marco

    <html>
    <head runat="server">
    <title>test krpano</title>
    <script type="text/javascript" src="swfobject21/swfobject.js"></script>
    <script type="text/javascript" src="swfobject21/swfkrpanomousewheel.js"></script>
    <script type="text/javascript">
    var flashvars = {
    pano: "myPano.xml"
    }
    var params = {
    allowfullscreen: true,
    bgcolor: "#000000"
    }
    var attributes = {
    id: 'divKrpano',
    name: 'krpano'
    }
    swfobject.embedSWF("krpano.swf",
    "divKrpano",
    "100%",
    "100%",
    "9.0.28",
    "swfobject21/expressInstall.swf",
    flashvars,
    params,
    attributes);
    swfkrpanomousewheel.registerObject("krpano");
    </script>
    </head>

    <body>
    <div>
    <div id="left" style="width: 200px; float: left">
    menu here
    </div>
    <div id="panorama" style="margin-left: 200px">
    <div id="divKrpano">
    <table width="100%" height="100%"><tr valign="middle"><td><center>ERROR:<br><br>Adobe Flash Player 9 needed<br><br><br><a href="http://www.adobe.com/go/getflashplayer/" target="_blank"><IMG SRC="http://www.macromedia.com/images/shared/…lash_player.gif" BORDER="1"></a><br>...click here to download...<br><br><br><br></center></td></tr>
    </table>
    </div>
    </div>
    </div>
    </form>
    </body>
    </html>

  • typically this is fixed by forcing the browser into 'quirks mode' by changing the doctype to this:

    Code
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

    put that at the top of the page before the html tag

  • hi Klaus,

    unfortunately this rule seems not to be true with Firefox.

    If I set <divid="PanoramaContainer"style="margin-left: 200px; height: 100%; width: 100%;"> the krpano is still not displayed in Firefox, and furthermore in IE and Safari the total width is 200px larger then 100% of the window.

    To see something in Firefox at least one of the two sizes must be set in absolute pixels, like

    <divid="PanoramaContainer"style="margin-left: 200px; height: 500px">

    but this doesn't fill the 100% height

    Any other suggestion?

    Thanks Marco

  • This seems to work...

    http://testsite.marlincreek.com/demo/css_sample/tourstyle4.html

    css code...

    You can view the source of the html page.

  • Thanks Graydon

    your suggestion is good but works only if the height of div.pano is set on an absolute pixel amount (height: 400px in your example).

    If you set both the height and the width to a xx% (in order to fill horizontally and vertically the window) Firefox do not display any panorama.

    Marco

  • Solved!! Thanks to all

    The problem was to set 100% height also to the <html> element and to the <form> element (i am using asp.net).

    I have done this setting a style with 100% height to all the block elements of the chain from <html> down to <div id="krPano">

    <style type="text/css">
    html, body, #form1, #divxxx...#divyyy, #krPano
    {
    height:100%;
    }
    body
    {
    margin:0;
    padding:0;
    overflow:hidden;
    }
    </style>

Participate now!

Don’t have an account yet? Register yourself now and be a part of our community!