Permalink
Browse files

remove requirement for images

  • Loading branch information...
1 parent 7d274b7 commit 28cd0b2de15c68c5191aa397da13d15448216181 @scoates committed with dotjay Jul 18, 2010
Showing with 83 additions and 38 deletions.
  1. +36 −4 hashgrid.js
  2. +47 −34 index.htm
View
@@ -109,6 +109,25 @@ var hashgrid = function(set) {
overlay.append('<div class="horiz"></div>');
}
+ // vertical grid
+ overlay.append($('<div class="vert-container"></div>'));
+ var overlayVert = overlay.children('.vert-container');
+ var gridWidth = overlay.width();
+ overlayVert.css({width: gridWidth, position: 'absolute', top: 0});
+ overlayVert.append('<div class="vert first-line">&nbsp;</div>');
+
+ var overlayGridLines = overlayVert.children('.vert');
+ var overlayGridLinesWidth = overlayGridLines.outerWidth(true);
+
+ numGridLines = Math.floor(gridWidth / overlayGridLinesWidth);
+
+ for (i = 0; i < numGridLines; i++) {
+ overlayVert.append('<div class="vert">&nbsp;</div>');
+ }
+ overlayVert.children()
+ .height(pageHeight)
+ .css({display: 'inline-block'});
+
// Check for saved state
var overlayCookie = readCookie(options.cookiePrefix + options.id);
if (typeof overlayCookie == 'string') {
@@ -125,11 +144,11 @@ var hashgrid = function(set) {
if (state[0] == '1') {
overlayOn = true;
sticky = true;
- overlay.show();
+ showOverlay();
}
}
else {
- overlay.addClass(options.classPrefix + classNumber)
+ overlay.addClass(options.classPrefix + classNumber);
}
// Keyboard controls
@@ -172,6 +191,18 @@ var hashgrid = function(set) {
createCookie(options.cookiePrefix + options.id, (sticky ? '1' : '0') + ',' + overlayZState + ',' + classNumber, 1);
}
+ function showOverlay() {
+ overlay.show();
+ overlayVert.css({width: overlay.width()});
+ // hide any vertical blocks that aren't at the top of the viewport
+ overlayVert.children('.vert').each(function () {
+ $(this).css('display','inline-block');
+ if ($(this).offset().top > 0) {
+ $(this).hide();
+ }
+ });
+ }
+
/**
* Event handlers
*/
@@ -186,7 +217,7 @@ var hashgrid = function(set) {
switch(k) {
case options.showGridKey:
if (!overlayOn) {
- overlay.show();
+ showOverlay();
overlayOn = true;
}
else if (sticky) {
@@ -224,6 +255,7 @@ var hashgrid = function(set) {
classNumber++;
if (classNumber > options.numberOfGrids) classNumber = 1;
overlay.addClass(options.classPrefix + classNumber);
+ showOverlay();
if (/webkit/.test( navigator.userAgent.toLowerCase() )) {
forceRepaint();
}
@@ -290,4 +322,4 @@ function forceRepaint() {
ss.addRule('.xxxxxx', 'position: relative');
ss.removeRule(ss.rules.length - 1);
} catch(e){}
-}
+}
View
@@ -155,9 +155,6 @@
*/
#grid{
- /* Vertical grid lines */
- background: url(bg-grid-980.gif) repeat-y 0 0;
-
/* Dimensions - same width as your grid with gutters */
width: 980px;
@@ -176,28 +173,38 @@
}
/**
- * Classes for multiple grids
- *
- * When using more than one grid, remember to set the numberOfGrids
- * option in the hashgrid.js file.
+ * Classes for vertical grids
*/
-#grid.grid-1{
-
- /* Vertical grid lines for grid 1 */
- background: url(bg-grid-980.gif) repeat-y 0 0;
-
+#grid div.vert {
+ margin-right: 20px;
+ width: 138px;
+ border: 1px dashed #aaa;
+ border-width: 0 1px;
}
-#grid.grid-2{
- /* Vertical grid lines for grid 2 */
- background: url(bg-grid-660.gif) repeat-y 160px 0;
+#grid div.vert.first-line {
+ margin-left: 20px;
+}
+/**
+* Classes for multiple grids
+*
+* When using more than one grid, remember to set the numberOfGrids
+* option in the hashgrid.js file.
+*/
+#grid.grid-1 div.vert {
+ border-color: green;
+}
+#grid.grid-2 div.vert {
+ border-color: red;
+}
+#grid.grid-2 {
/* Adjustments */
padding: 0 160px;
width: 660px;
-
}
+
/**
* Horizontal grid lines, defined by your base line height
*
@@ -234,7 +241,7 @@ <h2 id="features">Features</h2>
<li>Adaptable for all layout widths and alignments</li>
<li>Adaptable for any vertical rhythm value</li>
<li>Set keyboard shortcuts to show and hide the grid, hold it in place, toggle it to the foreground and background, and jump between multiple grids</li>
-<li>Uses a single JavaScript file, a little CSS, and an image (for the vertical lines)</li>
+<li>Uses a single JavaScript file, a little CSS</li>
</ul>
<p>#grid comes set up with a 980px-wide container that includes 20px gutters, and assumes one lead of 20px. A second 660px-wide container is included to show you how to set up multiple grids.</p>
@@ -259,9 +266,6 @@ <h2 id="installation">Installation</h2>
*/
#grid{
- /* Vertical grid lines */
- background: url(bg-grid-980.gif) repeat-y 0 0;
-
/* Dimensions - same width as your grid with gutters */
width: 980px;
@@ -280,26 +284,35 @@ <h2 id="installation">Installation</h2>
}
/**
- * Classes for multiple grids
- *
- * When using more than one grid, remember to set the numberOfGrids
- * option in the hashgrid.js file.
+ * Classes for vertical grids
*/
-#grid.grid-1{
-
- /* Vertical grid lines for grid 1 */
- background: url(bg-grid-980.gif) repeat-y 0 0;
-
+#grid div.vert {
+ margin-right: 20px;
+ width: 138px;
+ border: 1px dashed #aaa;
+ border-width: 0 1px;
}
-#grid.grid-2{
- /* Vertical grid lines for grid 2 */
- background: url(bg-grid-660.gif) repeat-y 160px 0;
+#grid div.vert.first-line {
+ margin-left: 20px;
+}
+/**
+* Classes for multiple grids
+*
+* When using more than one grid, remember to set the numberOfGrids
+* option in the hashgrid.js file.
+*/
+#grid.grid-1 div.vert {
+ border-color: green;
+}
+#grid.grid-2 div.vert {
+ border-color: red;
+}
+#grid.grid-2 {
/* Adjustments */
padding: 0 160px;
width: 660px;
-
}
/**
@@ -319,7 +332,7 @@ <h2 id="installation">Installation</h2>
}
</textarea></li>
<li><h3>Modify #grid to suit your needs</h3>
-<p>The CSS and JavaScript is annotated to help you. We&#8217;ve included a <a href="bg-grid-980.gif">980px-wide background image</a> to provide the vertical grid lines (a 940-pixel-wide content area with 20px gutters). If you&#8217;re working to a <a href="http://www.markboulton.co.uk/journal/comments/five-simple-steps-to-designing-grid-systems-part-1">different grid</a>, you will need to create a new image for your guides. Don&#8217;t forget to make the background transparent!</p></li>
+<p>The CSS and JavaScript is annotated to help you.</p></li>
</ol>
<h2 id="usage">Usage</h2>

0 comments on commit 28cd0b2

Please sign in to comment.