├── grid.gif ├── style.css ├── readme.md ├── index.html └── script.js /grid.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/orangespaceman/js-grid-overlay/master/grid.gif -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | html, 2 | body { 3 | margin:0; 4 | padding:0; 5 | background: #fff; 6 | } 7 | 8 | #box { 9 | border:1px solid #f90; 10 | padding : 2em; 11 | margin : 2em; 12 | } -------------------------------------------------------------------------------- /readme.md: -------------------------------------------------------------------------------- 1 | # JS Grid Overlay 2 | 3 | ## Post 4 | 5 | - [https://f90.co.uk/labs/js-grid-overlay/](https://f90.co.uk/labs/js-grid-overlay/) 6 | 7 | ## Example 8 | 9 | - [http://orangespaceman.github.io/js-grid-overlay](http://orangespaceman.github.io/js-grid-overlay) 10 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | JS Grid Overlay 4 | 5 | 6 | 7 | 8 | 9 |
10 |

heading

11 |

sub-heading

12 |

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus augue nibh, congue vel, fringilla eu, cursus sed, lectus. Nulla ac purus nec tellus aliquam convallis. Cras porttitor odio et elit gravida vehicula. Morbi consequat dui sed tortor. Maecenas sem. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In non augue. Vestibulum nisl mauris, molestie ut, tincidunt ut, malesuada et, diam. Fusce vulputate nulla sit amet arcu ultricies scelerisque. Cras nisi. Cras quis lectus vel turpis placerat pulvinar. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Integer quis odio. Nullam vel ligula ac erat pharetra feugiat. Cras pulvinar accumsan justo. Curabitur condimentum mattis arcu. Sed vulputate. Praesent nulla lorem, venenatis et, hendrerit nec, interdum eu, eros.

13 |
14 | 15 | 16 | 20 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /script.js: -------------------------------------------------------------------------------- 1 | /* 2 | * function to add a background grid/image to an html element on key presses 3 | */ 4 | 5 | var grid = { 6 | 7 | //set initial variable for whether the grid is currently shown 8 | gridVisible : false, 9 | 10 | //set variable to show whether the grid-containing element has had to be created 11 | gridElementCreated : false, 12 | 13 | //variables for the grid element 14 | gridHolder : {}, 15 | gridSrc : "", 16 | gridPos : "", 17 | gridRepeat : "", 18 | 19 | 20 | /* 21 | * function to set the initial grid values 22 | * @param string gridElement the id or html tag to place the grid behind 23 | * @param string gridSrc the image source for the grid - relative to the html page 24 | * @param string gridPos the CSS positioning statement (eg 'left top', '50% 50%') 25 | * @param string gridRepeat the CSS repeat value (eg 'no-repeat','repeat-x','repeat-y') 26 | */ 27 | init: function(gridElement, gridSrc, gridPos, gridRepeat) { 28 | 29 | //the html element holder, once we've found it 30 | this.gridHolder = this.getGridElement(gridElement); 31 | 32 | // if the function above doesn't find a grid element, then create a new element to hold it 33 | if (!this.gridHolder) { 34 | 35 | //get the body element 36 | var body = document.getElementsByTagName("body")[0]; 37 | 38 | 39 | //create the new html element 40 | var overlay = document.createElement('div'); 41 | overlay.id = gridElement; 42 | overlay.style.width = "100%"; 43 | overlay.style.position = "absolute"; 44 | overlay.style.top = "0"; 45 | overlay.style.left = "0"; 46 | overlay.style.zindex = "9999"; 47 | overlay.style.display = "none"; 48 | 49 | 50 | //for Win IE: set the height as the document height 51 | if (window.attachEvent) { 52 | overlay.style.height = document.body.offsetHeight; 53 | 54 | //for all other browsers, set element height at 100% 55 | } else { 56 | //overlay.style.minHeight = document.body.offsetHeight; 57 | overlay.style.height = "100%"; 58 | } 59 | 60 | 61 | //add the new html element to the document 62 | body.appendChild(overlay); 63 | 64 | //set the element holder to the new element 65 | this.gridHolder = overlay; 66 | 67 | //set the variable telling the key checker that it applying to a new element 68 | this.gridElementCreated = true; 69 | }; 70 | 71 | //if the function has found a grid element, set the root object variables 72 | this.gridSrc = gridSrc; 73 | this.gridPos = gridPos; 74 | this.gridRepeat = gridRepeat; 75 | 76 | //add the events 77 | this.addEvent(document, 'keydown', this.keyCheck, false); 78 | 79 | }, 80 | 81 | 82 | /* 83 | * find the element that will contain the grid, by testing if its an id or tag 84 | * @param string gridElement the id or html tag to place the grid behind 85 | * @return object the html element in question 86 | */ 87 | getGridElement: function(gridElement) { 88 | var el; 89 | 90 | //test if its an id 91 | el = document.getElementById(gridElement); 92 | 93 | //if not, get the tag with the name 94 | if (!el) { 95 | el = document.getElementsByTagName(gridElement)[0]; 96 | } 97 | return el; 98 | }, 99 | 100 | 101 | /* 102 | * function to detect when the required keys are pressed, and act accordingly 103 | * @param event e the current window event 104 | */ 105 | keyCheck: function(e) { 106 | 107 | //get the ids of which keys have been pressed 108 | var keyID = (window.event) ? event.keyCode : e.keyCode; 109 | var ctrlKey = (window.event) ? event.ctrlKey : e.ctrlKey; 110 | 111 | //alert(e.keyCode + ", " + e.ctrlKey); 112 | 113 | //test to see if its the selected keys 114 | //59 = win IE 115 | //186 = win FF & win Opera & mac Safari 116 | //90 = mac Opera 117 | if((keyID == 59 || keyID == 186 || keyID == 90)&&(ctrlKey == true)) { 118 | 119 | 120 | //if the bg is currently shown, remove it 121 | if (grid.gridVisible === true) { 122 | 123 | grid.gridHolder.style.backgroundImage = "none"; 124 | 125 | //if the grid-containing element was created, set display to none so you can select items below 126 | if (grid.gridElementCreated === true) { 127 | grid.gridHolder.style.display = "none"; 128 | } 129 | 130 | grid.gridVisible = false; 131 | 132 | //else, the grid is hidden, so show it 133 | } else { 134 | 135 | grid.gridHolder.style.backgroundImage = "url('" + grid.gridSrc + "')"; 136 | grid.gridHolder.style.backgroundPosition = grid.gridPos; 137 | grid.gridHolder.style.backgroundRepeat = grid.gridRepeat; 138 | 139 | //if the grid-containing element was created, display the image 140 | if (grid.gridElementCreated === true) { 141 | grid.gridHolder.style.display = "block"; 142 | } 143 | 144 | //set variable to show the grid is now shown 145 | grid.gridVisible = true; 146 | } 147 | } 148 | }, 149 | 150 | 151 | /** 152 | * function to add event-listeners (cross-browser compatible) 153 | * By John Resig - http://ejohn.org/projects/flexible-javascript-events/ 154 | * 155 | * @param obj object the html element object to attach the event to 156 | * @param type string the event type (e.g. 'load', 'keypress', 'click') 157 | * @param fn string the name of the function to call 158 | * 159 | * @return void 160 | */ 161 | addEvent: function (obj, type, fn) { 162 | if (obj.attachEvent) { 163 | obj['e'+type+fn] = fn; 164 | obj[type+fn] = function(){obj['e'+type+fn]( window.event );} 165 | obj.attachEvent('on'+type, obj[type+fn]); 166 | } else if (obj.addEventListener) { 167 | obj.addEventListener(type, fn, false); 168 | } else { 169 | var oldfn = obj['on'+type]; 170 | if (typeof obj['on'+type] != 'function') { 171 | obj['on'+type] = fn; 172 | } else { 173 | obj['on'+type] = function() { 174 | oldfn(); 175 | fn(); 176 | }; 177 | } 178 | } 179 | } 180 | } --------------------------------------------------------------------------------