<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>PHP Web developer, Robert Kern &#187; Javascript</title>
	<atom:link href="http://www.robertkern.com/tags/javascript/feed" rel="self" type="application/rss+xml" />
	<link>http://www.robertkern.com</link>
	<description>Solid PHP Web Development with SEO and web standards in mind.</description>
	<lastBuildDate>Thu, 18 Mar 2010 20:05:37 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.0.1</generator>
<cloud domain='www.robertkern.com' port='80' path='/?rsscloud=notify' registerProcedure='' protocol='http-post' />
		<item>
		<title>CSS / Javascript matching columns</title>
		<link>http://www.robertkern.com/web-development/css-javascript-matching-columns.html</link>
		<comments>http://www.robertkern.com/web-development/css-javascript-matching-columns.html#comments</comments>
		<pubDate>Wed, 16 Jan 2008 23:47:29 +0000</pubDate>
		<dc:creator>Robert Kern</dc:creator>
				<category><![CDATA[How to]]></category>
		<category><![CDATA[Web Development]]></category>
		<category><![CDATA[CSS]]></category>
		<category><![CDATA[Javascript]]></category>

		<guid isPermaLink="false">http://www.robertkern.com/css/css-javascript-matching-columns.html</guid>
		<description><![CDATA[If you are having trouble getting two div columns to match, then try this matching columns script. It is a very simple script that will match the height of the columns you specify (all you have to do is assign the class &#8216;column&#8217; to the columns you want to match). Download file: matching_columns.zip /* &#160; [...]


No related posts.]]></description>
			<content:encoded><![CDATA[<p>If you are having trouble getting two div columns to match, then try this matching columns script.  It is a very simple script that will match the height of the columns you specify (all you have to do is assign the class &#8216;column&#8217; to the columns you want to match).<br />
<span id="more-40"></span></p>
<p class="postmetadata">Download file: <a href="http://www.robertkern.com/wp-content/uploads/2008/01/matching_columns.zip">matching_columns.zip</a></p>

<div class="wp_syntax"><div class="code"><pre class="php" style="font-family:monospace;"><span style="color: #666666; font-style: italic;">/*
&nbsp;
Derived from a script by Alejandro Gervasio.
&nbsp;
Modified to work in FireFox by Stefan Mischook for Killersites.comHow it works: just apply the CSS class of 'column' to your pages' main columns.
&nbsp;
*/</span>
&nbsp;
matchColumns<span style="color: #339933;">=</span><span style="color: #000000; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
&nbsp;
<span style="color: #000000; font-weight: bold;">var</span> divs<span style="color: #339933;">,</span>contDivs<span style="color: #339933;">,</span>maxHeight<span style="color: #339933;">,</span>divHeight<span style="color: #339933;">,</span>d<span style="color: #339933;">;</span>
&nbsp;
<span style="color: #666666; font-style: italic;">// get all</span>
&nbsp;
elements in the document
&nbsp;
     divs<span style="color: #339933;">=</span>document<span style="color: #339933;">.</span>getElementsByTagName<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'div'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
contDivs<span style="color: #339933;">=</span><span style="color: #009900;">&#91;</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">;</span>
&nbsp;
<span style="color: #666666; font-style: italic;">// initialize maximum height value</span>
&nbsp;
     maxHeight<span style="color: #339933;">=</span><span style="color: #cc66cc;">0</span><span style="color: #339933;">;</span>
&nbsp;
<span style="color: #666666; font-style: italic;">// iterate over all</span>
&nbsp;
elements in the document
&nbsp;
     <span style="color: #b1b100;">for</span><span style="color: #009900;">&#40;</span><span style="color: #000000; font-weight: bold;">var</span> i<span style="color: #339933;">=</span><span style="color: #cc66cc;">0</span><span style="color: #339933;">;</span>i
&nbsp;
<span style="color: #666666; font-style: italic;">// make collection with</span>
&nbsp;
elements with <span style="color: #000000; font-weight: bold;">class</span> attribute <span style="color: #0000ff;">'container'</span>
&nbsp;
          <span style="color: #b1b100;">if</span><span style="color: #009900;">&#40;</span><span style="color: #339933;">/</span>\bcolumn\b<span style="color: #339933;">/.</span>test<span style="color: #009900;">&#40;</span>divs<span style="color: #009900;">&#91;</span>i<span style="color: #009900;">&#93;</span><span style="color: #339933;">.</span>className<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
&nbsp;
d<span style="color: #339933;">=</span>divs<span style="color: #009900;">&#91;</span>i<span style="color: #009900;">&#93;</span><span style="color: #339933;">;</span>
&nbsp;
contDivs<span style="color: #009900;">&#91;</span>contDivs<span style="color: #339933;">.</span>length<span style="color: #009900;">&#93;</span><span style="color: #339933;">=</span>d<span style="color: #339933;">;</span>
&nbsp;
<span style="color: #666666; font-style: italic;">// determine height for</span>
&nbsp;
element
&nbsp;
                <span style="color: #b1b100;">if</span><span style="color: #009900;">&#40;</span>d<span style="color: #339933;">.</span>offsetHeight<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
&nbsp;
divHeight<span style="color: #339933;">=</span>d<span style="color: #339933;">.</span>offsetHeight<span style="color: #339933;">;</span>
&nbsp;
<span style="color: #009900;">&#125;</span>
&nbsp;
<span style="color: #b1b100;">else</span> <span style="color: #b1b100;">if</span><span style="color: #009900;">&#40;</span>d<span style="color: #339933;">.</span>style<span style="color: #339933;">.</span>pixelHeight<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
&nbsp;
divHeight<span style="color: #339933;">=</span>d<span style="color: #339933;">.</span>style<span style="color: #339933;">.</span>pixelHeight<span style="color: #339933;">;</span>
&nbsp;
<span style="color: #009900;">&#125;</span>
&nbsp;
<span style="color: #666666; font-style: italic;">// calculate maximum height</span>
&nbsp;
                maxHeight<span style="color: #339933;">=</span>Math<span style="color: #339933;">.</span><span style="color: #990000;">max</span><span style="color: #009900;">&#40;</span>maxHeight<span style="color: #339933;">,</span>divHeight<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
<span style="color: #009900;">&#125;</span>
&nbsp;
<span style="color: #009900;">&#125;</span>
&nbsp;
<span style="color: #666666; font-style: italic;">// assign maximum height value to all of container</span>
&nbsp;
elements
&nbsp;
     <span style="color: #b1b100;">for</span><span style="color: #009900;">&#40;</span><span style="color: #000000; font-weight: bold;">var</span> i<span style="color: #339933;">=</span><span style="color: #cc66cc;">0</span><span style="color: #339933;">;</span>i
&nbsp;
contDivs<span style="color: #009900;">&#91;</span>i<span style="color: #009900;">&#93;</span><span style="color: #339933;">.</span>style<span style="color: #339933;">.</span>height<span style="color: #339933;">=</span>maxHeight <span style="color: #339933;">+</span> <span style="color: #0000ff;">&quot;px&quot;</span><span style="color: #339933;">;</span>
&nbsp;
<span style="color: #009900;">&#125;</span>
&nbsp;
<span style="color: #009900;">&#125;</span>
&nbsp;
<span style="color: #666666; font-style: italic;">// Runs the script when page loads</span>
&nbsp;
window<span style="color: #339933;">.</span>onload<span style="color: #339933;">=</span><span style="color: #000000; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
&nbsp;
<span style="color: #b1b100;">if</span><span style="color: #009900;">&#40;</span>document<span style="color: #339933;">.</span>getElementsByTagName<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
&nbsp;
matchColumns<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
<span style="color: #009900;">&#125;</span>
&nbsp;
<span style="color: #009900;">&#125;</span></pre></div></div>



<p>No related posts.</p>]]></content:encoded>
			<wfw:commentRss>http://www.robertkern.com/web-development/css-javascript-matching-columns.html/feed</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
	</channel>
</rss>
