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/bl...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:

HTML Code:

<!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

Code:

//** Dynamic Drive Equal Columns Height script v1.01 (Nov 2nd, 06)
//** http://www.dynamicdrive.com/style/bl...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?

Thread: Equal Columns Script

Thread Tools

Search Thread

Equal Columns Script

Bookmarks

Bookmarks

Posting Permissions