blueprint snippets

Show and Hide (toggle) the Blueprint Grid with a JavaScript

Tagged blueprint, css, blueprintcss, toggle, grid, javascript  Languages javascript

This snippet--which could be improved on--allows you to easily display and hide the BlueprintCSS grid.

Put the following code inside the <head> element:

<style title="grid" type="text/css">
        .container { }
</style>
<script type="text/javascript">
    function toggleGrid() {
        if (!document.styleSheets) return;
    
        var cssTitle     = "grid"
        var selectorName = ".container";
        var cssText      = "background: url('images/grid.png');";
        var css = new Array();
    
        // Find the stylesheet
        for(i = 0; i < document.styleSheets.length; i++)
        {
            var styleSheet = document.styleSheets[i];
            
            if(styleSheet.title == cssTitle) {
                if (document.styleSheets[i].cssRules)
                    css = document.styleSheets[i].cssRules;
                else if (document.styleSheets[i].rules)
                    css = document.styleSheets[i].rules;
                else return;
                
                break;
            }
        }

        // Find the selector
        for (i = 0; i < css.length; i++) {
        
            if ((css[i].selectorText.toLowerCase() == selectorName)) {
                if(css[i].style.cssText == "") {
                    css[i].style.cssText = cssText;
                }
                else {
                    css[i].style.cssText = "";
                }
            }
        }
    }
</script>

Change selectorName or cssText, if needed. Next add the following link, for example, to the footer:

<a href="javascript:toggleGrid();" id="toggle-grid">Show grid</a>

Now when you click the link, the grid will be displayed. Click again to hide it.

Note that this is a simple example of how to change a CSS style sheet dynamically with JavaScript. You can use it to change any selector at runtime.

Edit  Delete