Three-Column Layout Demonstration with Javascript : three Columns : Layout HTML CSS TUTORIALS


HTML CSS TUTORIALS » Layout » three Columns »

 

Three-Column Layout Demonstration with Javascript


 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Three-Column Layout Demonstration</title>
<meta http-equiv="Content-Type"
  content="text/html; charset=iso-8859-1" />
<style rel="stylesheet" type="text/css">
#top {
  margin: 20px;
  padding: 10px;
  background: #ccc;
  height: 100px;
}
#left {
  position: absolute;
  left: 10px;
  top: 160px;
  width: 200px;
}
#center {
  margin-left: 220px;
  margin-right: 220px;
  background: #ccc;
}
#right {
  position: absolute;
  right: 10px;
  top: 160px;
  width: 200px;
}
#footer {
  background: #ccc;
  margin: 20px;
  text-align: center;
  visibility: hidden;
}
div > p {
  margin-top: 0;
}

</style>
<script type="text/javascript">
// x.js
// X v3.10, Cross-Browser DHTML Library from Cross-Browser.com
// Copyright (c) 2002,2003 Michael Foster (mike@cross-browser.com)
// This library is distributed under the terms of the LGPL (gnu.org)

// Variables:
var xVersion='3.10',xOp7=false,xOp5or6=false,xIE4Up=false,xNN4=false,xUA=navigator.userAgent.toLowerCase();
if(window.opera){
  xOp7=(xUA.indexOf('opera 7')!=-|| xUA.indexOf('opera/7')!=-1);
  if (!xOp7xOp5or6=(xUA.indexOf('opera 5')!=-|| xUA.indexOf('opera/5')!=-|| xUA.indexOf('opera 6')!=-|| xUA.indexOf('opera/6')!=-1);
}
else if(document.layersxNN4=true;
else {xIE4Up=document.all && xUA.indexOf('msie')!=-&& parseInt(navigator.appVersion)>=4;}

// Appearance:
function xShow(e) {
  if(!(e=xGetElementById(e))) return;
  if(e.style && xDef(e.style.visibility)) e.style.visibility='inherit';
  else if(xDef(e.visibility)) e.visibility='show';
}
function xHide(e) {
  if(!(e=xGetElementById(e))) return;
  if(e.style && xDef(e.style.visibility)) e.style.visibility='hidden';
  else if(xDef(e.visibility)) e.visibility='hide';
}
function xZIndex(e,uZ) {
  if(!(e=xGetElementById(e))) return 0;
  if(e.style && xDef(e.style.zIndex)) {
    if(arguments.length>1e.style.zIndex=uZ;
    else uZ=e.style.zIndex;
  }
  else if(xDef(e.zIndex)) {
    if(arguments.length>1e.zIndex=uZ;
    else uZ=e.zIndex;
  }
  return uZ;
}
function xColor(e,sColor) {
  if(!(e=xGetElementById(e))) return "";
  var c="";
  if(e.style && xDef(e.style.color)) {
    if(arguments.length>1e.style.color=sColor;
    c=e.style.color;
  }
  return c;
}
function xBackground(e,sColor,sImage) {
  if(!(e=xGetElementById(e))) return "";
  var bg="";
  if(e.style) {
    if(arguments.length>1e.style.backgroundColor=sColor;
    if(arguments.length==3e.style.backgroundImage=(sImage && sImage!="")"url("+sImage+")" null;
    bg=e.style.backgroundColor;
  }
  else if(xDef(e.bgColor)) {
    if(arguments.length>1e.bgColor=sColor;
    bg=e.bgColor;
    if(arguments.length==3e.background.src=sImage;
  }
  return bg;
}

// Position:
function xMoveTo(e,iX,iY) {
  xLeft(e,iX);
  xTop(e,iY);
}
function xLeft(e,iX) {
  if(!(e=xGetElementById(e))) return 0;
  var css=xDef(e.style);
  if (css && xDef(e.style.left&& typeof(e.style.left)=="string") {
    if(arguments.length>1e.style.left=iX+"px";
    else {
      iX=parseInt(e.style.left);
      if(isNaN(iX)) iX=0;
    }
  }
  else if(css && xDef(e.style.pixelLeft)) {
    if(arguments.length>1e.style.pixelLeft=iX;
    else iX=e.style.pixelLeft;
  }
  else if(xDef(e.left)) {
    if(arguments.length>1e.left=iX;
    else iX=e.left;
  }
  return iX;
}
function xTop(e,iY) {
  if(!(e=xGetElementById(e))) return 0;
  var css=xDef(e.style);
  if(css && xDef(e.style.top&& typeof(e.style.top)=="string") {
    if(arguments.length>1e.style.top=iY+"px";
    else {
      iY=parseInt(e.style.top);
      if(isNaN(iY)) iY=0;
    }
  }
  else if(css && xDef(e.style.pixelTop)) {
    if(arguments.length>1e.style.pixelTop=iY;
    else iY=e.style.pixelTop;
  }
  else if(xDef(e.top)) {
    if(arguments.length>1e.top=iY;
    else iY=e.top;
  }
  return iY;
}
function xPageX(e) {
  if (!(e=xGetElementById(e))) return 0;
  if (xDef(e.pageX)) return e.pageX;
  var x = 0;
  while (e) {
    if (xDef(e.offsetLeft)) x += e.offsetLeft;
    e = xParent(e);
  }
  return x;
}
function xPageY(e) {
  if (!(e=xGetElementById(e))) return 0;
  if (xDef(e.pageY)) return e.pageY;
  var y = 0;
  while (e) {
    if (xDef(e.offsetTop)) y += e.offsetTop;
    e = xParent(e);
  }
  return y;
}
function xSlideTo(e,x,y,uTime) {
  if (!(e=xGetElementById(e))) return;
  if (!e.timeoute.timeout = 25;
  e.xTarget = x; e.yTarget = y; e.slideTime = uTime; e.stop = false;
  e.yA = e.yTarget - xTop(e); e.xA = e.xTarget - xLeft(e)// A = distance
  e.B = Math.PI / (* e.slideTime)// B = period
  e.yD = xTop(e); e.xD = xLeft(e)// D = initial position
  var d = new Date(); e.C = d.getTime();
  if (!e.movingxSlide(e);
}
function xSlide(e) {
  if (!(e=xGetElementById(e))) return;
  var now, s, t, newY, newX;
  now = new Date();
  t = now.getTime() - e.C;
  if (e.stop) { e.moving = false}
  else if (t < e.slideTime) {
    setTimeout("xSlide('"+e.id+"')", e.timeout);
    s = Math.sin(e.B * t);
    newX = Math.round(e.xA * s + e.xD);
    newY = Math.round(e.yA * s + e.yD);
    xMoveTo(e, newX, newY);
    e.moving = true;
  }  
  else {
    xMoveTo(e, e.xTarget, e.yTarget);
    e.moving = false;
  }  
}

// Size:
function xResizeTo(e,uW,uH) {
  xWidth(e,uW);
  xHeight(e,uH);
}
function xWidth(e,uW) {
  if(!(e=xGetElementById(e)) || (uW && uW<0)) return 0;
  uW=Math.round(uW);
  var css=xDef(e.style);
  if(css && xDef(e.style.width,e.offsetWidth&& typeof(e.style.width)=="string") {
    if(arguments.length>1xSetCW(e, uW);
    uW=e.offsetWidth;
  }
  else if(css && xDef(e.style.pixelWidth)) {
    if(arguments.length>1e.style.pixelWidth=uW;
    uW=e.style.pixelWidth;
  }
  else if(xDef(e.clip&& xDef(e.clip.right)) {
    if(arguments.length>1e.clip.right=uW;
    uW=e.clip.right;
  }
  return uW;
}
function xHeight(e,uH) {
  if(!(e=xGetElementById(e)) || (uH && uH<0)) return 0;
  uH=Math.round(uH);
  var css=xDef(e.style);
  if(css && xDef(e.style.height,e.offsetHeight&& typeof(e.style.height)=="string") {
    if(arguments.length>1xSetCH(e, uH);
    uH=e.offsetHeight;
  }
  else if(css && xDef(e.style.pixelHeight)) {
    if(arguments.length>1e.style.pixelHeight=uH;
    uH=e.style.pixelHeight;
  }
  else if(xDef(e.clip&& xDef(e.clip.bottom)) {
    if(arguments.length>1e.clip.bottom=uH;
    uH=e.clip.bottom;
  }
  return uH;
}
// thank moz for the next 2000 bytes
function xGetCS(ele,sP){return parseInt(document.defaultView.getComputedStyle(ele,"").getPropertyValue(sP));}
function xSetCW(ele,uW){
  if(uW<0return;
  var pl=0,pr=0,bl=0,br=0;
  if(xDef(document.defaultView&& xDef(document.defaultView.getComputedStyle)){
    pl=xGetCS(ele,"padding-left");
    pr=xGetCS(ele,"padding-right");
    bl=xGetCS(ele,"border-left-width");
    br=xGetCS(ele,"border-right-width");
  }
  else if(xDef(ele.currentStyle,document.compatMode)){
    if(document.compatMode=="CSS1Compat"){
      pl=parseInt(ele.currentStyle.paddingLeft);
      pr=parseInt(ele.currentStyle.paddingRight);
      bl=parseInt(ele.currentStyle.borderLeftWidth);
      br=parseInt(ele.currentStyle.borderRightWidth);
    }
  }
  else if(xDef(ele.offsetWidth,ele.style.width)){
    ele.style.width=uW+"px";
    pl=ele.offsetWidth-uW;
  }
  if(isNaN(pl)) pl=0if(isNaN(pr)) pr=0if(isNaN(bl)) bl=0if(isNaN(br)) br=0;
  var cssW=uW-(pl+pr+bl+br);
  if(isNaN(cssW)||cssW<0return;
  else ele.style.width=cssW+"px";
}
function xSetCH(ele,uH){
  if(uH<0return;
  var pt=0,pb=0,bt=0,bb=0;
  if(xDef(document.defaultView&& xDef(document.defaultView.getComputedStyle)){
    pt=xGetCS(ele,"padding-top");
    pb=xGetCS(ele,"padding-bottom");
    bt=xGetCS(ele,"border-top-width");
    bb=xGetCS(ele,"border-bottom-width");
  }
  else if(xDef(ele.currentStyle,document.compatMode)){
    if(document.compatMode=="CSS1Compat"){
      pt=parseInt(ele.currentStyle.paddingTop);
      pb=parseInt(ele.currentStyle.paddingBottom);
      bt=parseInt(ele.currentStyle.borderTopWidth);
      bb=parseInt(ele.currentStyle.borderBottomWidth);
    }
  }
  else if(xDef(ele.offsetHeight,ele.style.height)){
    ele.style.height=uH+"px";
    pt=ele.offsetHeight-uH;
  }
  if(isNaN(pt)) pt=0if(isNaN(pb)) pb=0if(isNaN(bt)) bt=0if(isNaN(bb)) bb=0;
  var cssH=uH-(pt+pb+bt+bb);
  if(isNaN(cssH)||cssH<0return;
  else ele.style.height=cssH+"px";
}
function xClip(e,iTop,iRight,iBottom,iLeft) {
  if(!(e=xGetElementById(e))) return;
  if(e.style) {
    if (arguments.length == 5e.style.clip="rect("+iTop+"px "+iRight+"px "+iBottom+"px "+iLeft+"px)";
    else e.style.clip="rect(0 "+parseInt(e.style.width)+"px "+parseInt(e.style.height)+"px 0)";
  }
  else if(e.clip) {
    if (arguments.length == 5) { e.clip.top=iTop; e.clip.right=iRight; e.clip.bottom=iBottom; e.clip.left=iLeft; }
    else e.clip.top=0; e.clip.right=xWidth(e); e.clip.bottom=xHeight(e); e.clip.left=0}
  }
}

// Event:
function xAddEventListener(e,eventType,eventListener,useCapture) {
  if(!(e=xGetElementById(e))) return;
  eventType=eventType.toLowerCase();
  if((!xIE4Up && !xOp7&& e==window) {
    if(eventType=='resize') window.xPCW=xClientWidth(); window.xPCH=xClientHeight(); window.xREL=eventListener; xResizeEvent()return}
    if(eventType=='scroll') window.xPSL=xScrollLeft(); window.xPST=xScrollTop(); window.xSEL=eventListener; xScrollEvent()return}
  }
  var eh="e.on"+eventType+"=eventListener";
  if(e.addEventListenere.addEventListener(eventType,eventListener,useCapture);
  else if(e.attachEvente.attachEvent("on"+eventType,eventListener);
  else if(e.captureEvents) {
    if(useCapture||(eventType.indexOf('mousemove')!=-1)) { e.captureEvents(eval("Event."+eventType.toUpperCase()))}
    eval(eh);
  }
  else eval(eh);
}
function xRemoveEventListener(e,eventType,eventListener,useCapture) {
  if(!(e=xGetElementById(e))) return;
  eventType=eventType.toLowerCase();
  if((!xIE4Up && !xOp7&& e==window) {
    if(eventType=='resize') window.xREL=nullreturn}
    if(eventType=='scroll') window.xSEL=nullreturn}
  }
  var eh="e.on"+eventType+"=null";
  if(e.removeEventListenere.removeEventListener(eventType,eventListener,useCapture);
  else if(e.detachEvente.detachEvent("on"+eventType,eventListener);
  else if(e.releaseEvents) {
    if(useCapture||(eventType.indexOf('mousemove')!=-1)) { e.releaseEvents(eval("Event."+eventType.toUpperCase()))}
    eval(eh);
  }
  else eval(eh);
}
function xEvent(evt) { // cross-browser event object prototype
  this.type = "";
  this.target = null;
  this.pageX = 0;
  this.pageY = 0;
  this.offsetX = 0;
  this.offsetY = 0;
  this.keyCode = 0;
  var e = evt ? evt : window.event;
  if(!ereturn;
  // type
  if(e.typethis.type = e.type;
  // target
  if(xNN4this.target = xLayerFromPoint(e.pageX, e.pageY);
  else if(e.targetthis.target = e.target;
  else if(e.srcElementthis.target = e.srcElement;
  // pageX, pageY
  if(xOp5or6) { this.pageX = e.clientX; this.pageY = e.clientY; }
  else if(xDef(e.pageX,e.pageY)) { this.pageX = e.pageX; this.pageY = e.pageY; }
  else if(xDef(e.clientX,e.clientY)) { this.pageX = e.clientX + xScrollLeft()this.pageY = e.clientY + xScrollTop()}
  // offsetX, offsetY
  if(xDef(e.layerX,e.layerY)) { this.offsetX = e.layerX; this.offsetY = e.layerY; }
  else if(xDef(e.offsetX,e.offsetY)) { this.offsetX = e.offsetX; this.offsetY = e.offsetY; }
  else this.offsetX = this.pageX - xPageX(this.target)this.offsetY = this.pageY - xPageY(this.target)}
  // keycode
  if (xDef(e.keyCode)) { this.keyCode = e.keyCode; }
  else if (xDef(e.which)) { this.keyCode = e.which; }
}
function xResizeEvent() { // window resize event simulation
  if (window.xRELsetTimeout("xResizeEvent()"250);
  var cw = xClientWidth(), ch = xClientHeight();
  if (window.xPCW != cw || window.xPCH != ch) { window.xPCW = cw; window.xPCH = ch; if (window.xRELwindow.xREL()}
}
function xScrollEvent() { // window scroll event simulation
  if (window.xSELsetTimeout("xScrollEvent()"250);
  var sl = xScrollLeft(), st = xScrollTop();
  if (window.xPSL != sl || window.xPST != st) { window.xPSL = sl; window.xPST = st; if (window.xSELwindow.xSEL()}
}

// Object:
function xGetElementById(e) {
  if(typeof(e)!="string"return e;
  if(document.getElementByIde=document.getElementById(e);
  else if(document.alle=document.all[e];
  else if(document.layerse=xLayer(e);
  else e=null;
  return e;
}
function xLayer(id,root) { // only for nn4
  var i,layer,found=null;
  if (!rootroot=window;
  for(i=0; i<root.document.layers.length; i++) {
    layer=root.document.layers[i];
    if(layer.id==idreturn layer;
    if(layer.document.layers.lengthfound=xLayer(id,layer);
    if(foundreturn found;
  }
  return null;
}
function xLayerFromPoint(x,y,root) { // only for nn4
  var i, hn=null, hz=-1, cn;
  if (!rootroot = window;
  for (i=0; i < root.document.layers.length; ++i) {
    cn = root.document.layers[i];
    if (cn.visibility != "hide" && x >= cn.pageX && x <= cn.pageX + cn.clip.right && y >= cn.pageY && y <= cn.pageY + cn.clip.bottom ) {
      if (cn.zIndex > hz) { hz = cn.zIndex; hn = cn; }
    }
  }
  if (hn) {
    cn = xLayerFromPoint(x,y,hn);
    if (cnhn = cn;
  }
  return hn;
}
function xParent(e){
  if (!(e=xGetElementById(e))) return null;
  var p=null;
  if (e.parentLayer){if (e.parentLayer!=windowp=e.parentLayer;}
  else{
    if (e.offsetParentp=e.offsetParent;
    else if (e.parentNodep=e.parentNode;
    else if (e.parentElementp=e.parentElement;
  }
  return p;
}
function xDef() {
  for(var i=0; i<arguments.length; ++i){if(typeof(arguments[i])=="" || typeof(arguments[i])=="undefined"return false;}
  return true;
}

// Window:
function xScrollLeft() {
  var offset=0;
  if(xDef(window.pageXOffset)) offset=window.pageXOffset;
  else if(document.documentElement && document.documentElement.scrollLeftoffset=document.documentElement.scrollLeft;
  else if(document.body && xDef(document.body.scrollLeft)) offset=document.body.scrollLeft;
  return offset;
}
function xScrollTop() {
  var offset=0;
  if(xDef(window.pageYOffset)) offset=window.pageYOffset;
  else if(document.documentElement && document.documentElement.scrollTopoffset=document.documentElement.scrollTop;
  else if(document.body && xDef(document.body.scrollTop)) offset=document.body.scrollTop;
  return offset;
}
function xClientWidth() {
  var w=0;
  if(xOp5or6w=window.innerWidth;
  else if(xIE4Up && document.documentElement && document.documentElement.clientWidth)
    w=document.documentElement.clientWidth;
  else if(document.body && document.body.clientWidth)
    w=document.body.clientWidth;
  else if(xDef(window.innerWidth,window.innerHeight,document.height)) {
    w=window.innerWidth;
    if(document.height>window.innerHeightw-=16;
  }
  return w;
}
function xClientHeight() {
  var h=0;
  if(xOp5or6h=window.innerHeight;
  else if(xIE4Up && document.documentElement && document.documentElement.clientHeight)
    h=document.documentElement.clientHeight;
  else if(document.body && document.body.clientHeight)
    h=document.body.clientHeight;
  else if(xDef(window.innerWidth,window.innerHeight,document.width)) {
    h=window.innerHeight;
    if(document.width>window.innerWidthh-=16;
  }
  return h;
}

// end x.js
</script>
<script type="text/javascript">
function adjustLayout()
{
  // Get natural heights
  var cHeight = xHeight("centercontent");
  var lHeight = xHeight("leftcontent");
  var rHeight = xHeight("rightcontent");
  
  // Find the maximum height
  var maxHeight = Math.max(cHeight, Math.max(lHeight, rHeight));
  
  // Assign maximum height to all columns
  xHeight("center", maxHeight);
  xHeight("left", maxHeight);
  xHeight("right", maxHeight);
  
  // Show the footer
  xShow("footer");
}
window.onload = function()
{
  xAddEventListener(window, "resize", adjustLayout, false);
  adjustLayout();
}
</script>
</head>
<body>
  <div id="top">
    <h1>
      This is the header area of the three column plus header
      layout
    </h1>
  </div>
  <div id="left">
    <div id="leftcontent">
      <p>
        This is quite straight-forward. Using absolute positioning,
        this column has its upper left corner placed 10 pixels down
        from the top of the document area of the browser and 10
        pixels to the right of the left margin of that space. It
        sets a fixed width for the column, though as we will see,
        you could supply a relative value (such as a percentageto
        create a stretchy layout that would keep the left column's
        width proportional to the document area's width.
      </p>
    </div>
  </div>
  <div id="center">
    <div id="centercontent">
      <p>
        Notice that this column is not able to be positioned. Its
        position will thus retain its "natural" place based on its
        location in the HTML file that generates the page. Margin
        settings ensure that the left and right columns (which are
        set to 200 pixels in widthwill have room for their content
        without creating a visible space between any of the
        adjoining columns.
      </p>
    </div>
  </div>
  <div id="right">
    <div id="rightcontent">
      <p>
        The right-hand column is so much like the left-hand column
        that it seems unworthy of comment.
      </p>
    </div>
  </div>
  <div id="footer">
    <p>
      This footer should float below the three columns.
  </p>
  </div>
</body>
</html

 



HTML code for linking to this page:

Follow Navioo On Twitter

HTML CSS TUTORIALS

 Navioo Layout
» three Columns