-
Notifications
You must be signed in to change notification settings - Fork 0
/
bootstrap-compact-gutterwidth.js
46 lines (38 loc) · 2.07 KB
/
bootstrap-compact-gutterwidth.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
/*Bootstrap addon for creating rows with compact gutter widths
works with tablet and desktop mode. To make row with compact
gutter width add a new class compact to div along with class
row-fluid and also add class .hidden-phone since only works
for tablet and desktop screen mode. */
$(document).ready(function(){
init_screen_phone = $(".row-fluid.compact").is(':hidden') ? 1 : 0; //1 if phone
makecompact = function(){ // Compact function should be called only once
$(".row-fluid.compact").each(function(){
var tmp_per=0; //Total width percentage
var tmp_numl=0; //No. of columns in the row
var tmp_ml_total=0; //Sum of left margins
var tmp_cf=0.3; //Compact Factor 0<tmp_cf<=1
var tmp_norm=100/parseFloat($(this).css("width")); //Normalize to percentage for fluidity
$(this).children("div[class^='span']").each(function(){
tmp_numl++;
tmp_ml_total+=parseFloat($(this).css("marginLeft"));
});
$(this).children("div[class^='span']").each(function(){
var tmp_w=parseFloat($(this).css("width"));
var tmp_ml=parseFloat($(this).css("marginLeft"));
$(this).css("marginLeft",(tmp_ml*tmp_cf*tmp_norm)+"%");
$(this).css("width",tmp_norm*(tmp_w+(((1-tmp_cf)*tmp_ml_total)/tmp_numl))+"%");
});
tmp_per += (tmp_ml*tmp_cf*tmp_norm) + tmp_norm*(tmp_w+(((1-tmp_cf)*tmp_ml_total)/tmp_numl));
if(tmp_per>100)
$(this).css("marginLeft",((tmp_ml*tmp_cf*tmp_norm)-tmp_per+100)+"%"); //Make sure width adds up to <= 100%
});
}
$(window).resize(function(){ // Check for screen change
if($(".row-fluid.compact").is(':visible') && init_screen_phone){
init_screen_phone = 0; // Disables next calling of compact function
makecompact(); // Apply compact function
}
});
if(!init_screen_phone)
makecompact(); // If initially screen not phone, apply compact function
});