This repository has been archived by the owner on Apr 27, 2020. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 0
/
jquery.ratioActive.js
82 lines (65 loc) · 2.44 KB
/
jquery.ratioActive.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
(function($){
$.fn.ratioActive = function(options) {
// Configure default options
var settings = $.extend({
'transition': false,
'bind-resize': true
}, options);
var targets = $(this.selector);
// Avoid killing the browser on resize
if(settings['bind-resize']) {
var timeout;
$(window).bind('resize', function(){
clearTimeout(timeout);
timeout = setTimeout(function(){
trigger();
}, 150);
});
}
// Fire trigger on initialize
$(window).load(trigger);
if($.isReady) trigger();
// Trigger, where the magic happens
function trigger() {
// Loop through each target
targets.each(function(){
var target = $(this),
ratio = target.data('rA-ratio');
// If ratio is undefined lets define it
if(typeof ratio == "undefined") {
ratio = target.width() + ':' + target.height();
target.data('rA-ratio', ratio);
}
// Split ratio
ratio = ratio.split(':');
var targetWidth = target.parent().width(),
targetHeight = targetWidth / (ratio[0] / ratio[1]);
if(!settings['transition']) {
// Transition disabled
prefix('transition', target, 'none')
} else {
if(settings['transition'] !== true) {
// Transition enabled with custom value
prefix('transition', target, settings['transition']);
} else {
// Transition enabled
prefix('transition', target, 'all .6s ease');
}
}
target.width(targetWidth).height(targetHeight);
});
}
// Abstract function for vendor prefixes
function prefix(property, target, value) {
var prefixes = ['', '-ms-', '-o-', '-moz-', '-webkit-'],
loop = prefixes.length,
css = {};
while(loop--) {
css[prefixes[loop] + property] = value;
}
target.css(css);
}
// Return object to enable chaining
return this;
}
})(jQuery);