You are not logged in.

Dear visitor, welcome to krpano.com Forum. If this is your first visit here, please read the Help. It explains in detail how this page works. To use all features of this page, you should consider registering. Please use the registration form, to register here or read more information about the registration process. If you are already registered, please login here.

kyle

Trainee

  • "kyle" started this thread

Posts: 71

Location: Grand Rapids, Michigan, USA

  • Send private message

1

Friday, December 31st 2010, 6:01pm

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.

2

Friday, December 31st 2010, 8:25pm

I think fullscreen doesn't work and iPhone/iPad/iPod ;-)

kyle

Trainee

  • "kyle" started this thread

Posts: 71

Location: Grand Rapids, Michigan, USA

  • Send private message

3

Friday, December 31st 2010, 8:41pm

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.

4

Monday, January 3rd 2011, 12:05pm

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

kyle

Trainee

  • "kyle" started this thread

Posts: 71

Location: Grand Rapids, Michigan, USA

  • Send private message

5

Tuesday, January 4th 2011, 2:43am

Thanks Klaus. I will start experimenting with it.

I have been very impressed with krpanoJS, especially on the iPad.

kyle

Trainee

  • "kyle" started this thread

Posts: 71

Location: Grand Rapids, Michigan, USA

  • Send private message

6

Saturday, January 8th 2011, 4:42pm

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.

Source code

1
2
3
4
		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.