5

Toggle Grid in Blueprint CSS

I started coding with the Blueprint CSS this night and since I’m a newbie, I am not yet familiar with the framework. So, I tend to manually toggle the showgrid class in the code. The showgrid class is an additional class that when present it shows a background of grids, it can be placed along with the container class. Which is handy when working with alignments. The sad part is the toggling, so I’ve written this simple script to toggle the grid of the Blueprint CSS and to please my laziness.

Put the script below inside the <head> element.

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

<script type="text/javascript">  
  function toggleGrid() {
    var toggle = document.getElementById('toggleGrid');
    var container;			
    if(toggle.innerHTML == 'Hide Grid') {
      toggle.innerHTML = 'Show Grid';
      ripClass('');
    } 
    else if(toggle.innerHTML == 'Show Grid') {
      toggle.innerHTML = 'Hide Grid';
      ripClass(' showgrid');
    }
  }
 
  function ripClass(c) {
    if(document.getElementsByClassName) {
      container = document.getElementsByClassName('container');
      for(var i=0; i < container.length; i++) {
        container[i].className = 'container' + c;
      }
    }
    else {
      container = document.getElementsByTagName('div');
      for(var i=0; i < container.length; i++) {
        if(container[i].className == 'container') {
          container[i].className = 'container' + c;
        }
        else if(container[i].className == 'container showgrid') {
          container[i].className = 'container';
        }
      }
    }
  }
</script>

Next the style.

35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50

<style type="text/css">
div#toggleGrid {
  color: #fff;
  cursor: pointer;
  background: #333;
  font-weight: bold;
  left: 0;
  position: fixed;	
  text-align: center;
  top: 0;
  width: 100px;		
}
div#toggleGrid:hover {
  color: #FF6F6F;
}		
</style>

Then after that, we need to create a <div> element inside the body with the id="toggleGrid" and onclick() event calling the toggleGrid() function that we created above. It should look like this:

55

<div id="toggleGrid" onclick="toggleGrid();">Show Grid</div>

The <div> element will be position as fixed in the top left of the browser. Tested in Mozilla Firefox 3, Google Chrome, Opera 9, Apple Safari(win) and IE6/7.
Check the demo.

Dec. 13, '08
Programming

5 Responses to “Toggle Grid in Blueprint CSS”

Demilane © 2008-2012. All rights reserved | Icons by Komodo Media and FamFamFam
Coded and Designed by Rogelio Calamaya

Contact Me | Follow me on Twitter | RSS Feed

↑
Web Development & Design - Top Blogs Philippines