Skip to content

Commit 9d57164

Browse files
committed
Fixed comments in the js file and added added a readme
1 parent 463992c commit 9d57164

File tree

2 files changed

+30
-1
lines changed

2 files changed

+30
-1
lines changed

README

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
== jQuery Flex Vertical Center
2+
3+
This jQuery plugin provides an easy way to vertically center an element in its parent. Even if the parents height changes after resizing the browser window, in a fluid or responsive layout for example.
4+
5+
== Usage
6+
7+
Simply include this file in your project (after loading jQuery) like this:
8+
9+
<script defer src="js/jquery.flexverticalcenter.js"></script>
10+
11+
Then call the plugin on the element which needs to be vertically centered in it's parent.
12+
13+
<script>
14+
$(document).ready(function() {
15+
$('#element-to-be-centered').flexVerticalCenter();
16+
});
17+
</script>
18+
19+
This will take the parents height, the elements own height and calculate the distance the element should have from the parents top to be vertically centered. This value is applied to the top margin of the element by default.
20+
21+
== Options
22+
23+
You can pass one parameter to the plugin, which is the css attribute that the value should be set on. The default is 'margin-top', but you can pass any attribute you would like. Most probably 'padding-top' or 'top'.
24+
25+
<script>
26+
$(document).ready(function() {
27+
$('#element-to-be-centered').flexVerticalCenter('padding-top');
28+
});
29+
</script>

jquery.flexverticalcenter.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@
1616
var $this = $(this); // store the object
1717
var attribute = onAttribute || 'margin-top'; // the attribute to put the calculated value on
1818

19-
// resize to box the maintain the set ratio
19+
// recalculate the distance to the top of the element to keep it centered
2020
var resizer = function () {
2121
// get parent height minus own height and devide by 2
2222
$this.css(

0 commit comments

Comments
 (0)