Hi all

I'm trying to place a krpano viewer within a column on a responsive web page and with some other HTML directly underneath it. i.e. I'm not using a 100% x 100% viewer.

The krpano viewer should always be 100% of the width of the column, and it should maintain, in my case, a 16:9 width:height aspect ratio when the column's width resizes.

I want it so that when the page width narrows, the column and therefore the krpano viewer narrows as well.

As the krpano viewer gets narrower and keeps a 16:9 proportion, the height should get smaller, and the HTML content under the krpano viewer should stay attached underneath of the 16:9 viewer.



I can achieve this already by creating a 16:9 target DIV using only CSS and HTML, and allowing the krpano viewer to fill that 16:9 space. But this solution requires an extra container DIV, and some slightly complex CSS. I also have to amend the static CSS if I want to change the aspect ratio.



So I'm trying to see if it can be done using krpano scripting instead.

First I set the viewer's target DIV's CSS to width: 100% and leave the CSS height as auto.

Then I use krpano scripting to read the stagewidth, but then I need to set the height of the krpano viewer in a 16:9 proportion. I can do the maths, but I can't set the stageheight as it is a read only variable.

I've seen the "examples\xml-usage\fovtype\fovtype.html" which sets uses the area.width and area.height to set an aspect ratio, but in that example the whole player uses up 100% x 100% of the container DIV, which won't work for my column as I need HTML content to be directly below the pano / the viewer.

My problem is that by leaving the height of the target DIV in CSS as auto, the krpano viewer seems to refuse to occupy any height at all. With CSS height at auto, Google Developer Tools shows the computed pixel height of both the target DIV and the "krpanoSWFObject" are zero.

So does anyone know of a way I can do with using krpano scripting?



Thanks for taking the time to read this far even if you can't help.

David

Hi Sasha / Klaus

Thank you both for your replies. I've been trying out the javascript options you both suggested instead of the CSS method I was using previously.

I have found that compared to my pure CSS method, using javascript gives me more dynamic control over the aspect ratio, and more control over what to do with rounding when using fixed aspect ratios leads to subpixels.

Firstly I tried the potentially simpler route of native javascript. Unfortunately, it seems that there are quite a few cross browser issues with getting the value of 'width' so I started pulling out parts of the jQuery source code. However, the code required to cover all these issues got complex very quickly, and I'm not confident of that I will keep on top of any changes to these cross browser issues, so concluded that native javascript was not the best for this situation.

So, for now I am going to try to use the jQuery library to achieve what I want.

However, I have also posted a feature request detailing a more integrated solution that could benefit other pano producers.

Thanks again to you both for your help.

David