DemiLane » Javascript http://demilane.com Pages of Rogelio Calamaya Sun, 20 Jun 2010 19:20:49 +0000 en hourly 1 http://wordpress.org/?v=3.0.1 Toggle Grid in Blueprint CSS http://demilane.com/toggle-grid-in-blueprint-css/ http://demilane.com/toggle-grid-in-blueprint-css/#comments Fri, 12 Dec 2008 20:41:15 +0000 Rogelio http://blog.demilane.com/?p=242 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.

Related posts:

  1. Absolute and Relative Positioning

]]> http://demilane.com/toggle-grid-in-blueprint-css/feed/ 6