I started a new GitHub repo to fill with jQuery utilities and behaviors.
The initial commit is filled with viewport sizing utilities. The utilities make it easy to use viewport-relative sizing in situations where browsers do not support VW and VH.
Something that I use a lot is the Letterboxing module. Simply by adding .jq-letterbox, you can strictly enforce an element to have a widescreen aspect ratio. This is very handy for sites that show lots of YouTube movie trailers.
Grab the Repo
https://github.com/bradkovach/jqUtilities
Installation
1. Import a recent version of jQuery
Note: script tags do not need type="text/javascript" when using HTML5.
|
1 |
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> |
2. Import the utilities AFTER jQuery
|
1 |
<script src="jqUtilities.viewport.js"></script> |
Usage
Full usage information is available at the head of the jqUtilities.viewport.js file.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
/* .js-vh: Viewport Height positioning required classes: js-vh required attributes: data-vh: a numeric value greater than 0 (zero). 1vw is 1% of the viewport's height. example: <div class="js-vh" data-vh="50" <!-- this will be half the height of the viewport --> </div> output: via jqu_log: reports new height in vh via jqu_log: reports when requested vh is invalid */ |
Help
By default, these utilities log errors to the console.
Known Limitations
- Mixed markup and style information. Style information is hard-coded into HTML markup. This might be undesirable.
- This is not a polyfill. It is a workaround. Nice polyfills exist, and that might be a better option for you.