krpanojs fullscreen containing block

  • If you look at the site I am adapting for iPad at http://www.harrcreative.com/realestate/109 and tap the fullscreen button (actually tap just above the fullscreen button, there is a problem with the button that I am researching) on the bottom right of the pano, you will see that it does not actually go completely full-screen on the iPad, but only fills the center of the page.

    This seems to be because full-screen simply sets absolute positioning on the pano div at position (0,0) relative to it's containing block. Unfortunately, my page layout establishes the entire tour in a div with relative positioning, making that div the containing block for the pano div instead of the making the page body the containing block.

    Klaus, is it possible to use fixed positioning for full-screen mode, or could you temporarily move the pano div in the DOM so that it is a direct descendant of the body element? I think this would allow the use of relatively positioned ancestors of the pano div.

  • It works partially with the 11/24 update on my tours, but not perfectly. I temporarily removed position:relative on my main div and then fullscreen worked properly. But I have to fully test my layout to see if I can avoid position:relative.

  • Hi,

    Klaus, is it possible to use fixed positioning for full-screen mode, or could you temporarily move the pano div in the DOM so that it is a direct descendant of the body element? I think this would allow the use of relatively positioned ancestors of the pano div.

    I think yes, that should be possible, I will try and test and if all works I will change it in the next version,

    note - you can try that already yourself by editing the krpanoiphone.js file, search for "absolute" (it should occur only once) and replace with it "fixed",

    best regards,
    Klaus

  • Hi Klaus, I changed 'absolute' to 'fixed' and it mostly worked. One problem I had when clicking a hotspot in fullscreen mode was that sometimes my webpage would pan so that the viewport moved, but the "fixed" elements did not automatically move with the viewport and part of the pano would scroll off screen.

    So I added the following js to retrigger the fullscreen layout every time I go to a new pano.

    Code
    if(krpano.get('fullscreen')){
        		krpano.set('fullscreen', false);
        		krpano.set('fullscreen', true);
    		}

    You can see it working on the iPad here: http://www.harrcreative.com/realestate/109

    Note, I am having some problems with the fullscreen button not working right. You have to tap just above it to get it to go fullscreen.
    I am still working on an iPhone layout, so it will not work very well on the iPhone yet.

Participate now!

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