-
Notifications
You must be signed in to change notification settings - Fork 1
/
jquery.reticulator.js
114 lines (94 loc) · 3.71 KB
/
jquery.reticulator.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
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
/* jQuery Reticulator
* Version 0.01
* Written by Manuel Muñoz Solera (mamuso@mamuso.net)
* @requires jQuery v1.2
*
* Copyright 2009 Manuel Muñoz Solera
* Dual licensed under the MIT and GPL licenses:
* http://www.opensource.org/licenses/mit-license.php
* http://www.gnu.org/licenses/gpl.html
*/
/*
* @description Plugin that overlays a defined grid to follow for layout purposes
*
*/
(function($) {
// configuration
$.reticulator = function(options) {
var defaults = {
layoutWidth: 951,
layoutColumns: 16,
gutterWidth: 9,
gridAlign: "center",
guideColor: "#00FF00",
guideOpacity: 0.7
};
var options = $.extend(defaults, options);
var reticulator = {
gridCont: '',
gridCols: ( options.layoutWidth - ((options.layoutColumns - 1) * options.gutterWidth) ) / options.layoutColumns
}
reticulator.calculateGrid = function(){
var cummulativecount = 0
// grid container
reticulator.gridCont = document.createElement("div");
$(reticulator.gridCont).css({
width: $(window).width() + "px",
position: "fixed",
textAlign: options.gridAlign,
opacity: options.guideOpacity,
top: 0,
left: 0,
zIndex: 1000000
});
var gridLayout = document.createElement("div");
if(options.gridAlign == "center") marginval = "0px auto"
else if(options.gridAlign == "left") marginval = "0px"
else if(options.gridAlign == "right") marginval = "0px 0px 0px auto"
$(gridLayout).css({
width: options.layoutWidth + "px",
margin: marginval,
position: "relative"
})
$(reticulator.gridCont).append(gridLayout);
if(options.gutterWidth == 0) guides = options.layoutColumns;
else guides = options.layoutColumns * 2;
for (var i = 0; i < guides; i++) {
var gridGuide = document.createElement("div");
$(gridGuide).css({
position: "absolute",
height: $(document).height() + "px",
borderLeft: "1px solid " + options.guideColor,
left: cummulativecount + "px"
});
if(i%2 == 0) cummulativecount = cummulativecount + reticulator.gridCols;
else cummulativecount = cummulativecount + options.gutterWidth;
$(gridLayout).append(gridGuide);
}
$(document.body).prepend(reticulator.gridCont);
// grid container
};
// resize the grid container
reticulator.resizeGridCont = function() {
$(reticulator.gridCont).children().children().height( $(document).height() + "px" );
$(reticulator.gridCont).width( $(document).width() + "px" );
};
reticulator.toggleGrid = function(){
$(reticulator.gridCont).toggle();
}
$(window).resize(function(){ reticulator.resizeGridCont(); });
// bind the key combination alt + a
$(document).bind("keydown", function(e) {
var key = String.fromCharCode(e.keyCode);
if(reticulator.key == null) reticulator.key = e.keyCode;
else if(reticulator.key == "18" && key == "A") {
(e.preventDefault) ? e.preventDefault() : e.returnValue = false;
reticulator.toggleGrid();
}
});
$(document).bind("keyup", function(e) {
reticulator.key = null;
});
reticulator.calculateGrid();
};
})(jQuery);