Three rows and three column of highly adaptive DIV layout
This example is parallel with the JS script to control the height of DIV, usually in the DIV layout, adaptive height has been a troublesome issue, mostly by the general background, jackets DIV, cover the left column to the right column to resolve. Now add the script, much easier, if there are three levels of parallel DIV, fbox, mbox, sbox, as long as the label is written in <body>: onload = “P7_equalCols (‘fbox’, ‘mbox’, ‘sbox’ ) “, test conditions: ie5.x, ie6.0, FF1.03, NS7.2, opera8.01
JS code: belongs to original author, study and research purposes only.
Example Source Code [www.hutshow.com]
===============================================================/ *
————————————————
PVII Equal CSS Columns scripts
Copyright (c) 2005 Project Seven Development
www.oneter.com
Version: 1.5.0
————————————————
* /
function P7_colH () {/ / v1.5 by PVII-www.oneter.com
var i, oh, hh, h = 0, dA = document.p7eqc, an = document.p7eqa; if (dA & & dA.length) {
for (i = 0; i <dA.length; i + +) {dA [i]. style.height = ‘auto’;} for (i = 0; i <dA.length; i + +) {
oh = dA [i]. offsetHeight; h = (oh> h)? oh: h;} for (i = 0; i <dA.length; i + +) {if (an) {
dA [i]. style.height = h + ‘px’;} else {P7_eqA (dA [i]. id, dA [i]. offsetHeight, h);}} if (an) {
for (i = 0; i <dA.length;i++){hh=dA[i].offsetHeight;if(hh> h) {
dA [i]. style.height = (h-(hh-h)) + ‘px’;}}} else {document.p7eqa = 1;}
document.p7eqth = document.body.offsetHeight;
document.p7eqtw = document.body.offsetWidth;}
}
function P7_eqT () {/ / v1.5 by PVII-www.oneter.com
if (document.p7eqth! = document.body.offsetHeight | | document.p7eqtw! = document.body.offsetWidth) {
P7_colH ();}
}
function P7_equalCols () {/ / v1.5 by PVII-www.oneter.com
if (document.getElementById) {document.p7eqc = new Array; for (i = 0; i <arguments.length; i + +) {
document.p7eqc [i] = document.getElementById (arguments [i]);} setInterval (“P7_eqT ()”, 10);}
}
function P7_eqA (el, h, ht) {/ / v1.5 by PVII-www.oneter.com
var sp = 10, inc = 10, nh = h, g = document.getElementById (el), oh = g.offsetHeight, ch = parseInt (g.style.height);
ch = (ch)? ch: h; var ad = oh-ch, adT = ht-ad; nh + = inc; nh = (nh> adT)? adT: nh; g.style.height = nh + ‘px’;
oh = g.offsetHeight; if (oh> ht) {nh = (ht-(oh-ht)); g.style.height = nh + ‘px’;}
if (nh <adT) {setTimeout (“P7_eqA (‘” + el +”‘,”+ nh +”,”+ ht + “)”, sp);}
}
Related posts:
- the tenth day : adaptive height If we want the end of the 3 column layout...
- the minimum height (min-height) of the Magical BOX minimum height can be set to a minimum height,...
- HTML page layout structure of the DIV CSS Getting Started Guide You are learning CSS layout? Is not fully grasp the...
- To achieve More div arranged Center To achieve More div arranged Center <?xml version=”1.0″ encoding=”iso-8859-1″?> <!DOCTYPE...
Related posts brought to you by Yet Another Related Posts Plugin.
