PDA

View Full Version : Equal Columns Script



bar338
07-29-2009, 07:18 PM
1) Script Title:
equal columns scrip
2) Script URL (on DD):
http://www.dynamicdrive.com/style/blog/entry/css-equal-columns-height-script/
3) Describe problem:

I'm trying to apply the equal columns script i found here but i'm having trouble getting it to work.

Any suggestions would be greatly appreciated. I'm attempting to get the two columns called maincol_two and rightcol_two to have even height. However it is now working. The javascript file is called colHeight.js and is in a scripts directory.

Thanks for your help.

Html:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Page</title>
<link rel="shortcut icon" href="/images/system/favicon.png" type="image/png" />
<link rel="stylesheet" type="text/css" href="/css/style.css" />
<link rel="stylesheet" type="text/css" href="css/newsStyle.css" />
<!-- Javascript functions for search box -->
<script src="/scripts/search.js" type="text/javascript"></script>
<script src="scripts/colHeight.js" type="text/javascript"></script>
</head>
<body>

<div id="content_wrapper">
<div class="wrapper">
<div id="maincol_two">
<div class="box">
<div id="newsNavigation">
<span class="blockTitle">Navigation</span>
<ul class="clearBullets">

<li><a href="#">Last Month</a></li>
<li><a href="#">Archives</a></li>
<li><a href="#">Digest</a></li>
<li><a href="#">Post News</a></li>
</ul>
</div>
</div>
</div>
<div id="rightcol_two">
<div class="box">

<div id="newsWelcome">
<div id="welcomeContainer">
<div class="welcomeLeftCol"><h3 class="blockTitle">News</h3>
</div>
<div class="welcomeRightCol">
<form action="#">
<input type="text" name="search" />
</form>
</div>
<p>Sample Paragraph Text<p>
</div>
</div>


</div>
</div>
</div>
</div>
</div>

</div>
<div id="page-footer">
<div class="wrapper">
<p>
<a href="#">About Us</a>
|
<a href="#">Contact Us</a>

|
<a href="#">Terms of Use</a>
|
<A href="#">Privacy Policy</a>
|
<a href="#">Disclaimer</a>
</p>

</div>
</div>


</div>
</body>
</html>



Javascript

//** Dynamic Drive Equal Columns Height script v1.01 (Nov 2nd, 06)
//** http://www.dynamicdrive.com/style/blog/entry/css-equal-columns-height-script/

var ddequalcolumns=new Object()
//Input IDs (id attr) of columns to equalize. Script will check if each corresponding column actually exists:
ddequalcolumns.columnswatch=["maincol_two", "rightcol_two"]

ddequalcolumns.setHeights=function(reset){
var tallest=0
var resetit=(typeof reset=="string")? true : false
for (var i=0; i<this.columnswatch.length; i++){
if (document.getElementById(this.columnswatch[i])!=null){
if (resetit) document.getElementById(this.columnswatch[i]).style.height="auto"
if (document.getElementById(this.columnswatch[i]).offsetHeight>tallest) tallest=document.getElementById(this.columnswatch[i]).offsetHeight
}
}
if (tallest>0){
for (var i=0; i<this.columnswatch.length; i++){
if (document.getElementById(this.columnswatch[i])!=null) document.getElementById(this.columnswatch[i]).style.height=tallest+"px"
}
}
}

ddequalcolumns.resetHeights=function(){
this.setHeights("reset")
}

ddequalcolumns.dotask=function(target, functionref, tasktype){ //assign a function to execute to an event handler (ie: onunload)
var tasktype=(window.addEventListener)? tasktype : "on"+tasktype
if (target.addEventListener) target.addEventListener(tasktype, functionref, false)
else if (target.attachEvent)
target.attachEvent(tasktype, functionref)
}

ddequalcolumns.dotask(window, function(){ddequalcolumns.setHeights()}, "load")
ddequalcolumns.dotask(window, function(){if (typeof ddequalcolumns.timer!="undefined") clearTimeout(ddequalcolumns.timer); ddequalcolumns.timer=setTimeout("ddequalcolumns.resetHeights()", 200)}, "resize")

bar338
08-06-2009, 04:30 PM
Any suggestions on this?