Skip to content

Instantly share code, notes, and snippets.

@miguelperez
Created May 26, 2011 13:26
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save miguelperez/993130 to your computer and use it in GitHub Desktop.
Save miguelperez/993130 to your computer and use it in GitHub Desktop.
Blueprint debug script. Just append this to the head of the HTML file that should be including the blueprint files.
<!-- I took this code from somewhere, just can recall now. -->
<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>
<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>
<!-- Append this anywhere on the body. -->
<div id="toggleGrid" onclick="toggleGrid();">Show Grid</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment