JavaScript Forum

**matt w** · 01:07 PM

Thanks in advance.
I call the javascript matching columns script twice. once with

HTML Code:

<body onload="matchColumns();">

and then with

HTML Code:

<a href="javascript:toggle('tutoriomain','tutorioli');matchColumns();alert('Javascript is functioning.');">Classes</a>

It will work once but not twice. I have set all my variables to zero at the beginning of the script. How can I make the script function multiple times?
examples:
http://www.recoverymi.org/RI%20revis...menu_test.html
and
http://www.recoverymi.org/RI%20revis...enu_test2.html
click on the orange link "Classes" to test the second calling of the script.
Use the orange "Tutorials" and "Third" to extend the column beyond the boundaries of the <div>

HTML Code:

<script type="text/javascript">
// <![CDATA[

matchColumns=function(){

      divs = 0;
      contDivs = 0;
      maxHeight = 0;
      divHeight = 0;
      d = 0;

     // get all <div> elements in the document

     divs=document.getElementsByTagName('div');

     contDivs=[];

     // initialize maximum height value

     maxHeight=0;

     // iterate over all <div> elements in the document

     for(var i=0;i<divs.length;i++){

          // make collection with <div> elements with class attribute 'container'

          if(/\bcolumn\b/.test(divs[i].className)){

                d=divs[i];

                contDivs[contDivs.length]=d;

                // determine height for <div> element

                if(d.offsetHeight){

                     divHeight=d.offsetHeight;

                }

                else if(d.style.pixelHeight){

                     divHeight=d.style.pixelHeight;

                }

                // calculate maximum height

                maxHeight=Math.max(maxHeight,divHeight);

          }

     }

     // assign maximum height value to all of container <div> elements

     for(var i=0;i<contDivs.length;i++){

          contDivs[i].style.height=maxHeight + "px";

     }

}





// ]]>


</script>

All my code is standards compliant.
Thanks!

**DmitryS** · 02-14-2011, 10:49 AM

i have tried to check your files but got 404 error. can you provide me any test page, so that i have a look on live

**matt w** · 02-14-2011, 11:00 AM

Please try them now.

**PaulW** · 02-14-2011, 04:09 PM

I'm guessing that you want one menu to collapse if it's expanded and another menu button is clcke on? You don't have any code to do that in the toggle function so it's never going to happen. The function is acting only on the list specified as parameter.

**matt w** · 02-14-2011, 05:02 PM

PaulW,
I'm not too sure what your saying. Right now the way the menu works is OK with me. What I can't do is make the matching column script work every time the menu is expanded. It will only work once. So this means that the menu extends beyond the lower limit of the div.
If the matchColumns(); worked multiple times --every time the links were clicked-- the page would be whole. Ya see?
Hey, thanks.
MattW

**Kelpie** · 02-15-2011, 06:36 AM

Not sure whether you're wanting the menu to cut off at the lower limit of the #leftcolumn div, or if you want the content divs to extend to match the menu height.

If it's the first then you just need an overflow:hidden in #leftcolumn.
For the second, surely it should be a min-height you apply, not a max-height?

**matt w** · 02-15-2011, 02:52 PM

Kelpie,
I'm aiming for having the div extend to include the expanding menu. The matching height script checks the heights of all divs, finds the longest one, and adjusts the rest of the divs to match that one. So it does check for the maximum height.