Utilize CSS Custom Properties to style your overlay components with binding to window.innerHeight.
With version 0.2.0
the "new" relative length units like svh
and dvh
etc. are also available as Custom Properties.
It adds an aside
element into the dom with 100vw
and 100vh
dimensions and read out its width and height in px
.
On every resize event, the window.innerWidth
and window.innerHeight
are gathered and updated into your CSS Custom Properties.
By using the Custom Properties in your overlay/flyout/modal css, your element will always fit in the viewport, without the ios bottom bar come in your way.
You can change any of this options to your needs, by providing a customOption Object in constructor call.
stores always the value of window.innerHeight
suffixed with px
.
stores always the value of window.innerHeight
suffixed with px
.
stores the difference from a 100vh
element and window.innerHeight
suffixed with px
.
Version 0.2.0
: The current value of 100svw
.
Version 0.2.0
: The current value of 100svh
.
Version 0.2.0
: The current value of 100dvw
.
Version 0.2.0
: The current value of 100dvh
.
Version 0.2.0
: The current value of 100lvw
.
Version 0.2.0
: The current value of 100lvh
.
Grab your copy of this package:
npm i ios-action-safe --save
Import this package in your project:
ES-6
import IosActionSafe from 'ios-action-safe';
…
new IosActionSafe(<{customOptions}>);
ES-5
You'll find a minified and unminified version in the dist/-folder, to embed in your project:
<script src="/vendor/ios-action-safe.min.js" defer></script>
same way as with the ES-6 class:
new IosActionSage(<{customOptions}>);
For a working example have a look into the index.html in this package.
The key configuration is, to add the following CSS to elements who needs to fit into the viewport:
.modal,
.flyout,
.overlay,
.mobile-nav {
…
height: 100vh; /* ie11 */
height: var(--visibleHeight);
..
padding-bottom: 0; /* ie11 */
padding-bottom: var(--visiblePadding);
}
You might want to setup only height or padding-bottom. In combination you will end up with a bottom bar height visible padding on your element.
By calling the constructor, you can provide an object with overrides for every custom property name:
new IosActionSafe({
visibleHeight: '--visibleHeight',
visibleWidth: '--visibleWidth',
visiblePadding: '--visiblePadding',
});
On every resize and measuring event, you can add a callback
function too, which will give you all the numbers without px
:
{
"viewportHeight": this.viewportHeight,
"viewportWidth": this.viewportWidth,
"visibleHeight": this.visibleHeight,
"visibleWidth": this.visibleWidth,
"visiblePadding": this.viewportHeight - visibleHeight
}
to add a callback, add the callback option to the constructor call:
new IosActionsSafe({
callback: (event, data) => { console.log(event, data); },
});
or
new IosActionsSafe({
visibleHeight: '--visibleHeight',
visibleWidth: '--visibleWidth',
visiblePadding: '--visiblePadding',
callback: updateSizes
});
…
function updateSizes(event, data) {
…
}
or in ES-6:
new IosActionsSafe({
visibleHeight: '--visibleHeight',
visibleWidth: '--visibleWidth',
visiblePadding: '--visiblePadding',
callback: (event, data) => { this.updateSizes(event, data); }),
});
## side fx
this package will add an `<aside>` after your `<body>` element. Do not wonder about it, this is used to measure 100vh and 100vw.
## Package Name
In video editing you have three different viewports, the native resolution (for exmaple 1920x1080) but tv's cut parts of this resolution away, or parts of the signal where used for teletext, and so there is a **action safe** and **title safe** setting, you can enable in every video editing software, to keep your content visible to any recipient. That's where the name for this package comes from.