Adjust The Page Height Relative To Device - jQuery JsHeight
File Size: | 26.4 KB |
---|---|
Views Total: | 241 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
JsHeight is a jQuery plugin that enables you to adjust the height of a container element relative to the screen size of the user's media.
How to use it:
1. Install the plugin in your web project.
<script src="/path/to/cdn/jquery.slim.min.js"></script> <script src="/path/to/js/jsHeight.js"></script>
2. Initialize the plugin.
loadHeight();
3. Adjust the height of the target element using the data-height
attribute. The target element must...
- Have a unique id
- Be inline-block
- Have the
data-height
attribute
<div id="example" data-height="full"> ... </div>
4. More data
attributes to control the height of the element.
- data-height: When declared as full, the plugin will set the element's height to fullscreen.
- data-resize: Updates the element's height when browser resizes. [e.g data-resize="resize"]
- data-minh: Minimum height of the target element. This will overwrite the data-resize attribute when the minimum height is reached. [e.g data-minh="100"]
- data-maxh: Maximum height of the target element. This will overwrite the data-resize attribute when maximum height is reached [e.g data-maxh="100"]
- data-inc: Increases the element's current height. [e.g data-inc="100"].
- data-dec: Decreases the element's current height. [e.g data-dec="100"].
- data-auto: Automatically monitors the height of the inner content of the target element.
<div id="id1" data-height data-full data-auto="true" data-resize="resize" data-minh="screen" data-maxh="screen" data-inc="65"></div> <div id="id2" data-height='full' data-auto="true" data-resize="resize" data-minh="screen" data-maxh="screen" data-inc="65"></div> <div id="id3" data-height data-resize="resize" data-minh="screen" data-maxh="screen" data-dec="65"></div> <div id="id4" data-height data-resize="resize"><div data-watch=""></div></div>
5. Override the default configs.
function heightFull() { if ($(".height-full").length > 0) { jqHeight({ minHeight: false, maxHeight: false, reduceHeightBy: 0, increaseHeightBy: 0, autoHeight: false, autoResize: false, fullHeight: false, thisElement: this, autoHeightFix: 0 }, ".height-full"); } }
This awesome jQuery plugin is developed by teymzz. For more Advanced Usages, please check the demo page or visit the official website.