# jquery.matchHeight.js #
> *matchHeight* makes the height of all selected elements exactly equal.<br>
It handles many edge cases that cause similar plugins to fail.
[brm.io/jquery-match-height](http://brm.io/jquery-match-height/)
### Demo
See the [jquery.matchHeight.js demo](http://brm.io/jquery-match-height-demo).
[![jquery.matchHeight.js screenshot](http://brm.io/img/content/jquery-match-height/jquery-match-height.png)](http://brm.io/jquery-match-height-demo)
### Features
- match the heights of elements anywhere on the page
- row aware, handles floating elements
- responsive, automatically updates on window resize (can be throttled for performance)
- handles mixed `padding`, `margin`, `border` values (even if every element has them different)
- handles images and other media (updates automatically after loading)
- handles hidden or none-visible elements (e.g. those inside tab controls)
- accounts for `box-sizing`
- data attributes API
- can be removed when needed
- maintain scroll position correctly
- callback events
- tested in IE8+, Chrome, Firefox, Chrome Android
### Status
Current version is `v0.5.2`. I've fully tested it and it works well, but if you use it make sure you test fully too.
Please report any [issues](https://github.com/liabru/jquery-match-height/issues) you find.
### Install
[jQuery](http://jquery.com/download/) is required, so include it first.
<br>Download [jquery.matchHeight.js](https://github.com/liabru/jquery-match-height/blob/master/jquery.matchHeight.js) and include the script in your HTML file:
<script src="jquery.matchHeight.js" type="text/javascript"></script>
#### Or install using [Bower](http://bower.io/)
bower install matchHeight
### Usage
$(elements).matchHeight(byRow);
Where `byRow` is a boolean that enables or disables row detection, default is `true`.<br>
You should apply this on the [DOM ready](http://api.jquery.com/ready/) event.
See the included [test.html](https://github.com/liabru/jquery-match-height/blob/master/test.html) for a working example.
### Examples
$(function() {
$('.item').matchHeight();
});
Will set all elements with the class `item` to the height of the tallest.<br>
If the items are on multiple rows, the items of each row will be set to the tallest of that row.
<div data-mh="my-group">My text</div>
<div data-mh="my-group">Some other text</div>
<div data-mh="my-other-group">Even more text</div>
<div data-mh="my-other-group">The last bit of text</div>
Will set both elements in `my-group` to the same height, then both elements in `my-other-group` to be the same height respectively.
See the included [test.html](https://github.com/liabru/jquery-match-height/blob/master/test.html) for a working example.
### Advanced Usage
There are a few internal properties and functions you should know about:
#### Data API
Use the data attribute `data-match-height="group-name"` (or `data-mh` shorthand) where `group-name` is an arbitrary string to denote which elements should be considered as a group.
All elements with the same group name will be set to the same height when the page is loaded, regardless of their position in the DOM, without any extra code required.
Note that `byRow` will be enabled when using the data API, if you don't want this then use the alternative method above.
#### Callback events
Since matchHeight automatically handles updating the layout after certain window events, you can supply functions as global callbacks if you need to be notified:
$.fn.matchHeight._beforeUpdate = function(event, groups) {
// do something before any updates are applied
}
$.fn.matchHeight._afterUpdate = function(event, groups) {
// do something after all updates are applied
}
Where `event` a jQuery event object (e.g. `load`, `resize`, `orientationchange`) and `groups` is a reference to `$.fn.matchHeight._groups` (see below).
#### Removing
It is possible to remove any matchHeight bindings for a given set of elements like so
$('.item').matchHeight('remove');
#### Manually trigger an update
$.fn.matchHeight._update()
If you need to manually trigger an update of all currently set equal heights groups, for example if you've modified some content.
#### Manually apply match height
$.fn.matchHeight._apply(elements, byRow)
Use the apply function directly if you wish to avoid the automatic update functionality.
#### Throttling resize updates
$.fn.matchHeight._throttle = 80;
By default, the `_update` method is throttled to execute at a maximum rate of once every `80ms`.
Decreasing the above `_throttle` property will update your layout quicker, appearing smoother during resize, at the expense of performance.
If you experience lagging or freezing during resize, you should increase the `_throttle` property.
#### Maintain scroll position
$.fn.matchHeight._maintainScroll = true;
Under certain conditions where the size of the page is dynamically changing, such as during resize or when adding new elements, browser bugs cause the page scroll position to change unexpectedly.
If you are observing this behaviour, use the above line to automatically attempt to force scroll position to be maintained (approximately). This is a global setting and by default it is `false`.
#### Accessing groups directly
$.fn.matchHeight._groups
The array that contains all element groups that have had `matchHeight` applied. Used for automatically updating on resize events. Search and modify this array if you need to remove any groups or elements, for example if you're deleting elements.
### Known limitations
#### CSS transitions and animations are not supported
You should ensure that there are no transitions or other animations that will delay the height changes of the elements you are matching, including any `transition: all` rules. Otherwise the plugin will produce unexpected results, as animations can't be accounted for.
#### Delayed webfonts may cause incorrect height
Some browsers [do not wait](http://www.stevesouders.com/blog/2009/10/13/font-face-and-performance/) for webfonts to load before firing the window load event, so if the font loads too slowly the plugin may produce unexpected results.
If this is a problem, you should call `_update` once your font has loaded by using something like the [webfontloader](https://github.com/typekit/webfontloader) script.
#### Content changes require a manual update
If you change the content inside an element that has had `matchHeight` applied, then you must manually call `$.fn.matchHeight._update()` afterwards. This will update of all currently set equal heights groups.
### Changelog
To see what's new or changed in the latest version, see the [changelog](https://github.com/liabru/jquery-match-height/blob/master/CHANGELOG.md)
### License
jquery.matchHeight.js is licensed under [The MIT License (MIT)](http://opensource.org/licenses/MIT)
<br/>Copyright (c) 2014 Liam Brummitt
This license is also supplied with the release and source code.
<br/>As stated in the license, absolutely no warranty is provided.
##### Why not use CSS?
Making robust, responsive equal height columns for _arbitrary content_ is [difficult or impossible](http://filamentgroup.com/lab/setting_equal_heights_with_jquery/) to do with CSS alone (at least without hacks or trickery, in a backwards compatible way).
Note you should probably ensure your layout is still usable if JavaScript is disabled.
没有合适的资源?快使用搜索试试~ 我知道了~
【WordPress插件】2022年最新版完整功能demo+插件v4.17.0 Nulled.zip
共2000个文件
svg:1830个
png:1800个
less:105个
1.该资源内容由用户上传,如若侵权请联系客服进行举报
2.虚拟产品一经售出概不退款(资源遇到问题,请及时私信上传者)
2.虚拟产品一经售出概不退款(资源遇到问题,请及时私信上传者)
版权申诉
0 下载量 116 浏览量
2022-03-28
07:25:54
上传
评论
收藏 70.03MB ZIP 举报
温馨提示
"【WordPress插件】2022年最新版完整功能demo+插件v4.17.0 Nulled eForm - WordPress Form Builder eform - Wordpress Form Builder" ---------- 泰森云每天更新发布最新WordPress主题、HTML主题、WordPress插件、shopify主题、opencart主题、PHP项目源码、安卓项目源码、ios项目源码,更有超10000个资源可供选择,如有需要请站内联系。
资源推荐
资源详情
资源评论
收起资源包目录
【WordPress插件】2022年最新版完整功能demo+插件v4.17.0 Nulled.zip (2000个子文件)
CHANGELOG 6KB
CHANGELOG 6KB
CHANGELOG 6KB
CHANGELOG 6KB
CHANGELOG 6KB
ekko-lightbox.coffee 13KB
ekko-lightbox.coffee 13KB
ekko-lightbox.coffee 13KB
ekko-lightbox.coffee 13KB
ekko-lightbox.coffee 13KB
bootstrap.css 143KB
bootstrap.css 143KB
bootstrap.css 143KB
bootstrap.css 143KB
bootstrap.css 143KB
bootstrap.min.css 118KB
bootstrap.min.css 118KB
bootstrap.min.css 118KB
bootstrap.min.css 118KB
bootstrap.min.css 118KB
font-awesome.css 36KB
font-awesome.css 36KB
font-awesome.css 36KB
font-awesome.css 36KB
font-awesome.css 34KB
font-awesome.min.css 28KB
font-awesome.min.css 28KB
font-awesome.min.css 28KB
font-awesome.min.css 28KB
font-awesome.min.css 28KB
style.css 26KB
style.css 26KB
style.css 26KB
style.css 26KB
bootstrap-theme.css 26KB
bootstrap-theme.css 26KB
bootstrap-theme.css 26KB
bootstrap-theme.css 26KB
bootstrap-theme.css 26KB
styles.css 25KB
styles.css 25KB
styles.css 25KB
styles.css 25KB
style.css 25KB
styles.css 24KB
bootstrap-theme.min.css 23KB
bootstrap-theme.min.css 23KB
bootstrap-theme.min.css 23KB
bootstrap-theme.min.css 23KB
bootstrap-theme.min.css 23KB
test.css 5KB
test.css 5KB
test.css 5KB
test.css 5KB
test.css 4KB
prism.css 3KB
prism.css 3KB
prism.css 3KB
prism.css 3KB
prism.css 3KB
style.css 2KB
style.css 2KB
style.css 2KB
style.css 2KB
style.css 2KB
fsqm-icons.css 1KB
fsqm-icons.css 1KB
fsqm-icons.css 1KB
fsqm-icons.css 1KB
fsqm-icons.css 1KB
ekko-lightbox.css 1KB
ekko-lightbox.css 1KB
ekko-lightbox.css 1KB
ekko-lightbox.css 1KB
ekko-lightbox.css 1KB
ekko-lightbox.min.css 929B
ekko-lightbox.min.css 929B
ekko-lightbox.min.css 929B
ekko-lightbox.min.css 929B
ekko-lightbox.min.css 924B
style.old.css 868B
style.old.css 868B
style.old.css 868B
style.old.css 868B
style.old.css 800B
.DS_Store 12KB
.DS_Store 10KB
.DS_Store 8KB
.DS_Store 6KB
.DS_Store 6KB
.DS_Store 6KB
.DS_Store 6KB
.editorconfig 249B
.editorconfig 249B
.editorconfig 249B
.editorconfig 249B
.editorconfig 232B
fontawesome-webfont.eot 75KB
fontawesome-webfont.eot 75KB
fontawesome-webfont.eot 75KB
共 2000 条
- 1
- 2
- 3
- 4
- 5
- 6
- 20
资源评论
Lee达森
- 粉丝: 953
- 资源: 1万+
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功