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;
}
window.onload = function() {
var pggrid = new pagecolumn();
pggrid.init({
id:"wrp",
rows:10,
columns:20,
width:15,
height:15,
gutter:1
});
}
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;
}
}
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;
}
}
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");
}
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");
}
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");
}
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]);
}
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]);
}
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");
}
table of ACSII Codes