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:
http://codepen.io/leopuleo/full/RKVQwd/
Here you have more info about the code:
http://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!
