Skip to content

Commit 0cdd543

Browse files
PaulSprPaulSpr
committed
Merge pull request #5 from thinkswan/new_options
[new_options] added verticalOffset and parentSelector options
2 parents 295b830 + 8d3ad13 commit 0cdd543

File tree

3 files changed

+117
-94
lines changed

3 files changed

+117
-94
lines changed

‎README.md‎

Lines changed: 19 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -13,25 +13,33 @@ Simply include this file in your project (after loading jQuery) like this:
1313

1414
Then call the plugin on the element which needs to be vertically centered in it's parent.
1515

16-
<script>
17-
$(document).ready(function() {
18-
$('#element-to-be-centered').flexVerticalCenter();
19-
});
20-
</script>
16+
<script>
17+
$(document).ready(function() {
18+
$('#element-to-be-centered').flexVerticalCenter();
19+
});
20+
</script>
2121

2222
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.
2323

2424

2525
Options
2626
-------
2727

28-
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'.
28+
You can pass an options hash to the plugin.
2929

30-
<script>
31-
$(document).ready(function() {
32-
$('#element-to-be-centered').flexVerticalCenter('padding-top');
33-
});
34-
</script>
30+
- `onAttribute` - the css attribute that the value should be set on (default: 'margin-top')
31+
- `verticalOffset` - the number of pixels to offset the vertical alignment by, ie. 10, "50px", -100 (default: 0)
32+
- `parentSelector` - a selector representing the parent to vertically center this element within, ie. ".parent" (default: the element's immediate parent)
33+
34+
Examples:
35+
36+
<script>
37+
$(document).ready(function() {
38+
$('#element-to-be-centered').flexVerticalCenter();
39+
$('#element-to-be-centered').flexVerticalCenter({ cssAttribute: 'padding-top', verticalOffset: '50px' });
40+
$('#element-to-be-centered').flexVerticalCenter({ cssAttribute: 'padding-top', parentSelector: '.parent' });
41+
});
42+
</script>
3543

3644

3745
Non-jQuery version

‎index.html‎

Lines changed: 62 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -1,61 +1,71 @@
1-
<!doctype html>
1+
<!DOCTYPE html>
22

3-
<html lang="nl">
3+
<html>
44

55
<head>
6-
<meta charset="utf-8">
7-
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
8-
9-
<!--
10-
This website was carefully constructed by
11-
Interactive Studios
12-
http://www.interactivestudios.nl
13-
-->
14-
15-
<title>FlexVerticalCenter test</title>
16-
17-
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
18-
19-
<style type="text/css">
20-
/* make sure we have a very flexible container */
21-
body{
22-
margin: 0;
23-
height: 100%;
24-
}
25-
html{
26-
height: 100%;
27-
}
28-
29-
.the-item{
30-
width: 20%;
31-
background: #eee;
32-
margin: 0 auto;
33-
}
34-
img{
35-
max-width: 100%;
36-
}
37-
</style>
38-
39-
</head>
6+
<meta charset="utf-8">
7+
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
8+
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
9+
10+
<!--
11+
This website was carefully constructed by
12+
Interactive Studios
13+
http://www.interactivestudios.nl
14+
-->
4015

16+
<title>FlexVerticalCenter test</title>
17+
18+
<style>
19+
body{
20+
margin: 0;
21+
}
22+
.box {
23+
background: #333;
24+
height: 300px;
25+
margin-bottom: 30px;
26+
}
27+
.box2 {
28+
background: #ccc;
29+
height: 100px;
30+
}
31+
p {
32+
width: 20%;
33+
margin: 0 auto;
34+
color: #fff;
35+
font-weight: bold;
36+
}
37+
</style>
38+
</head>
4139

4240
<body>
41+
<div class="box">
42+
<p class="first-item">
43+
This box is 20% wide and is always vertically centered within its parent, even if the view port changes (resize your window to see the result).
44+
</p>
45+
</div>
46+
47+
<div class="box">
48+
<p class="second-item">
49+
This box is 20% wide and is always vertically centered within its parent with a -50px offset, even if the view port changes (resize your window to see the result).
50+
</p>
51+
</div>
52+
53+
<div class="box parent">
54+
<div class="box2">
55+
<p class="third-item">
56+
This box is 20% wide and is always vertically centered within the specified dark grey parent, even if the view port changes (resize your window to see the result).
57+
</p>
58+
</div>
59+
</div>
60+
61+
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
62+
<script src="jquery.flexverticalcenter.js"></script>
4363

44-
<div class="the-item">
45-
<p>
46-
This box is 20% wide and is always vertically centered within it's parent, even if the view port changes (resize your window to see the result).
47-
</p>
48-
</div>
49-
50-
51-
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
52-
<script src="jquery.flexverticalcenter.js"></script>
53-
54-
<script>
55-
$('.the-item').flexVerticalCenter();
56-
</script>
57-
58-
64+
<script>
65+
$('.first-item').flexVerticalCenter({ cssAttribute: 'padding-top' });
66+
$('.second-item').flexVerticalCenter({ cssAttribute: 'padding-top', verticalOffset: '50px' });
67+
$('.third-item').flexVerticalCenter({ cssAttribute: 'padding-top', parentSelector: '.parent' });
68+
</script>
5969
</body>
6070

61-
</html>
71+
</html>

‎jquery.flexverticalcenter.js‎

Lines changed: 36 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,40 +1,45 @@
11
/*global jQuery */
2-
/*!
2+
/*!
33
* FlexVerticalCenter.js 1.0
44
*
55
* Copyright 2011, Paul Sprangers http://paulsprangers.com
6-
* Released under the WTFPL license
6+
* Released under the WTFPL license
77
* http://sam.zoy.org/wtfpl/
88
*
99
* Date: Fri Oct 28 19:12:00 2011 +0100
1010
*/
1111
(function( $ ){
12-
13-
$.fn.flexVerticalCenter = function( onAttribute ) {
14-
15-
return this.each(function(){
16-
var $this = $(this); // store the object
17-
var attribute = onAttribute || 'margin-top'; // the attribute to put the calculated value on
18-
19-
// recalculate the distance to the top of the element to keep it centered
20-
var resizer = function () {
21-
// get parent height minus own height and devide by 2
22-
$this.css(
23-
attribute, ( ( $this.parent().height() - $this.height() ) / 2 )
24-
);
25-
};
26-
27-
// Call once to set.
28-
resizer();
29-
30-
// Call on resize. Opera debounces their resize by default.
31-
$(window).resize(resizer);
32-
33-
// Apply a load event to images within the element so it fires again after an image is loaded
34-
$this.find('img').load(resizer);
35-
36-
});
37-
38-
};
39-
40-
})( jQuery );
12+
13+
$.fn.flexVerticalCenter = function( options ) {
14+
var settings = $.extend({
15+
cssAttribute: 'margin-top', // the attribute to apply the calculated value to
16+
verticalOffset: 0, // the number of pixels to offset the vertical alignment by
17+
parentSelector: null // a selector representing the parent to vertically center this element within
18+
}, options || {});
19+
20+
return this.each(function(){
21+
var $this = $(this); // store the object
22+
23+
// recalculate the distance to the top of the element to keep it centered
24+
var resizer = function () {
25+
var parentHeight = (settings.parentSelector) ? $this.parents(settings.parentSelector).first().height() : $this.parent().height();
26+
27+
$this.css(
28+
settings.cssAttribute, ( ( ( parentHeight - $this.height() ) / 2 ) + parseInt(settings.verticalOffset) )
29+
);
30+
};
31+
32+
// Call once to set.
33+
resizer();
34+
35+
// Call on resize. Opera debounces their resize by default.
36+
$(window).resize(resizer);
37+
38+
// Apply a load event to images within the element so it fires again after an image is loaded
39+
$this.find('img').load(resizer);
40+
41+
});
42+
43+
};
44+
45+
})( jQuery );

0 commit comments

Comments
 (0)