Flexible height

Hello @thunfischdose,
thank you for contacting me, let’s try to solve this together.

We can achieve this result with some line of Javascript and customising the HTML within your page

Example:
https://codepen.io/leopuleo/full/RKVQwd/

Here you have more info about the code:
https://codepen.io/leopuleo/pen/RKVQwd

CSS
Nothing to change.

Javascript
With these few line of code we are:

• Choosing a specific panorama to target targeting
• Calculating the panorama height: window height minus header height.
• Forcing the panorama height with the new value

Copy and paste the javascript from the example to a javascript file within your theme.
Be careful to:

• Change the panorama selector (line 4) in order to target the exact element you want to make full-height. Don’t use a generic .easy-panorama otherwise, all the panorama will be full-height.
• Delete or comment line 6 – Easy Panorama is managing to initiate the panorama
• Add or remove all the element placed above the panorama. In the example, we have only the #header element.

HTML
This is an example, remeber to add a container to your panorama, this must be full width.

Remember: Easy Panorama uses Paver jQuery plugin, in case the author of this library changes the Javascript / HTML behaviour, this customization may not work.

Please let me know if the example works for you.
Leonardo

Worked like a charm!!!
Did some adjustment but in reason of your perfect readable code this took me just some minutes. (I used $(‘.fullwidth_pan’).css(‘min-height’) in aboveFoldHeight function, else the wordpress-bar prevented true full-width)
Thanks for the fast and perfect help!

Good, I’m happy it’s working!

I forgot to tell you one thing:

from line 25 of the javascript, we are dealing with window resize.
Every time the user resizes the window it destroys the panorama and re-initiate it assigning the calculated height.

As you can see at line 37, we are initiating the panorama without any parameters, so if you customised the panorama behaviour/appearance via the plugin setting page, these won’t work after the window resize.

I’m planning to add a custom method in the next version of the plugin, instead of initiating directly paver.

I will let you know as soon as it’s ready.
Leonardo

Thanks a lot for everything. I’m looking foward to the new version!
In my case the paver destruction leads to very unsmooth effects (mostly on mobile when scrolling).
I guess for most user (including me) a 100% height option would be fantastic.
Very kind that you want to let me know when it’s ready!