Press "Enter" to skip to content

Jquery Plugins to Control Page Height | JsHeight

JsHeight is a jQuery plugin that enables you to adjust the height of a container element in relation to the size of a user’s media screen.

jquery set div height dynamically, jquery get div height dynamically, javascript get div height dynamically, jquery scrollheight, set div height to window height jquery

How to make use of 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 factor utilizing the data-height attribute.

<div id="example" data-height="full">
  ...
</div>

4. More data attributes to manage the height of the component.

<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");
  }
}

Adjust The Page Height Relative To Device, JsHeight Plugin/Github, how to change div height in jquery, jquery get height with padding, javascript set height of div dynamically


See Demo And Download

Official Website(teymzz): Click Here

This superior jQuery/javascript plugin is developed by teymzz. For extra Advanced Usages, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published.