Skip to content

Commit 8d3ad13

Browse files
thinkswanthinkswan
committed
convert tabs to spaces to keep indentation consistent
1 parent db9857e commit 8d3ad13

File tree

3 files changed

+83
-83
lines changed

3 files changed

+83
-83
lines changed

‎README.md‎

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -13,11 +13,11 @@ 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

@@ -33,13 +33,13 @@ You can pass an options hash to the plugin.
3333

3434
Examples:
3535

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>
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>
4343

4444

4545
Non-jQuery version

‎index.html‎

Lines changed: 53 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -3,69 +3,69 @@
33
<html>
44

55
<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">
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">
99

10-
<!--
11-
This website was carefully constructed by
12-
Interactive Studios
13-
http://www.interactivestudios.nl
14-
-->
10+
<!--
11+
This website was carefully constructed by
12+
Interactive Studios
13+
http://www.interactivestudios.nl
14+
-->
1515

16-
<title>FlexVerticalCenter test</title>
16+
<title>FlexVerticalCenter test</title>
1717

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>
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>
3838
</head>
3939

4040
<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>
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>
4646

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>
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>
5252

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>
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>
6060

61-
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
62-
<script src="jquery.flexverticalcenter.js"></script>
61+
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
62+
<script src="jquery.flexverticalcenter.js"></script>
6363

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>
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>
6969
</body>
7070

7171
</html>

‎jquery.flexverticalcenter.js‎

Lines changed: 18 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -10,36 +10,36 @@
1010
*/
1111
(function( $ ){
1212

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
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
1717
parentSelector: null // a selector representing the parent to vertically center this element within
1818
}, options || {});
1919

20-
return this.each(function(){
21-
var $this = $(this); // store the object
20+
return this.each(function(){
21+
var $this = $(this); // store the object
2222

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();
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();
2626

27-
$this.css(
28-
settings.cssAttribute, ( ( ( parentHeight - $this.height() ) / 2 ) + parseInt(settings.verticalOffset) )
29-
);
30-
};
27+
$this.css(
28+
settings.cssAttribute, ( ( ( parentHeight - $this.height() ) / 2 ) + parseInt(settings.verticalOffset) )
29+
);
30+
};
3131

32-
// Call once to set.
33-
resizer();
32+
// Call once to set.
33+
resizer();
3434

35-
// Call on resize. Opera debounces their resize by default.
35+
// Call on resize. Opera debounces their resize by default.
3636
$(window).resize(resizer);
3737

3838
// Apply a load event to images within the element so it fires again after an image is loaded
3939
$this.find('img').load(resizer);
4040

41-
});
41+
});
4242

43-
};
43+
};
4444

4545
})( jQuery );

0 commit comments

Comments
 (0)