Javascript Grid Framework - www.pagecolumn.com

Pagecolumn Javascript Grid FrameworkAlpha

Pagecolumn grid framework is a javascript framework that will make it easy to design grid related tasks. It consists of some attibutes and methods related the grids and I will add more in the future. It will be used to develop some planned projects - Convert image Logo to HTML and CSS, HTML chart.

The CSS and HTML structure was that has been demonstrated in the grid layout generator. Add the following CSS before run the js code.

.wpfloat{ 
    position: relative;
    float: left;
}

Create grid

    window.onload = function() {
        var pggrid = new pagecolumn();
        pggrid.init({
        id:"wrp",
        rows:10,
        columns:20,
        width:15,
        height:15,
        gutter:1
        });
    }    
    

getgrandChildNodes - Vertical

    window.onload = function() {
        var pggrid2 = new pagecolumn();
        pggrid2.init({
        id:"wrp2",
        rows:10,
        columns:12,
        width:20,
        height:20,
        gutter:1
        });
        
        var grds = pggrid2.getgrandChildNodes();  
        for (var i=0; i < grds.length; i++) {
            grds[i].innerHTML =i;
        }
    }    
    

getgrandChildNodesX - Horizontal

    window.onload = function() {
        var pggrid3 = new pagecolumn();
        pggrid3.init({
        id:"wrp3",
        rows:10,
        columns:12,
        width:20,
        height:20,
        gutter:1
        });
        
        var grds = pggrid3.getgrandChildNodesX();  
        for (var i=0; i < grds.length; i++) {
            grds[i].innerHTML =i;
        }
    }    
    

getrows

    window.onload = function() {
        var pggrid4 = new pagecolumn();
        pggrid4.init({
        id:"wrp4",
        rows:10,
        columns:15,
        width:15,
        height:15,
        gutter:1

        });
        var rows = pggrid4.getrows(0,2,4,6,8);
        pggrid4.setbackgroundcolor(rows,"#bbff00");
    }    
    

getcolumns

    window.onload = function() {
        var pggrid5 = new pagecolumn();
        pggrid5.init({
        id:"wrp5",
        rows:10,
        columns:15,
        width:15,
        height:15,
        gutter:1
        });
        var columns = pggrid5.getcolumns(0,2,4,6,8,10,12,14);
        pggrid5.setbackgroundcolor(columns,"#bbff00");
    }    
    

groupgrids

    window.onload = function() {
        var pggrid6 = new pagecolumn();
        pggrid6.init({
        id:"wrp6",
        rows:10,
        columns:15,
        width:15,
        height:15,
        gutter:1
        });
        var grds = pggrid6.groupgrids("Y",,null,null,"11-18",21,
        31,41,51,61,71,81,91,101,111,121, 
        "131-138",28,38,48,58,68,78,88,98,108,
        118,128,"43-46","103-106",53,63,73,83,93,56,66,76,86,96);
        pggrid6.setbackgroundcolor(grds,"#bbff00");
    }    
    

rowspan

    window.onload = function() {
        var pggrid7 = new pagecolumn();
        pggrid7.init({
        id:"wrp7",
        rows:10,
        columns:15,
        width:15,
        height:15,
        gutter:1
        });
        pggrid7.rowspan([1,1],[1,8]);
        pggrid7.rowspan([13,1],[13,8]);
        pggrid7.rowspan([4,3],[4,6]);
        pggrid7.rowspan([10,3],[10,6]);
        
    }    
    

removegrids

    window.onload = function() {
        var pggrid8 = new pagecolumn();
        pggrid8.init({
        id:"wrp8",
        rows:10,
        columns:15,
        width:15,
        height:15,
        gutter:1
        });
        pggrid8.removegrids([1,1],[1,8]);
        pggrid8.removegrids([13,1],[13,8]);
        pggrid8.removegrids([4,3],[4,6]);
        pggrid8.removegrids([10,3],[10,6]);
        
    }    
    

Event

    window.onload = function() {
        var pggrid9 = new pagecolumn();
        pggrid9.init({
        id:"wrp9",
        rows:10,
        columns:15,
        width:15,
        height:15,
        gutter:1
        });
        var grds = pggrid9.groupgrids("Y",null,null,"11-18");
        pggrid9.setbackgroundcolor(grds,"#bbff00");
        pggrid9.groupgrids("Y","click",clickevent,"11-18");
        
    }    
    

Another Demos

table of ACSII Codes

Font Test Online

Social Bookmark