Resize a *div* containing a list [Archive]

AH.C

02-09-2003, 11:51 PM

Hi, I have a list of links that I want to control so that the height never exceeds 300px, yet when the list is collasped, the container will shrink to fit. The idea is to have the scrollbar appear whenever the list is expanded beyond the 300px limit.

After trying so many variations, the best I can do is have the scroll bar disappear and the container shrink when either the list is collasped OR expanded below the 300px limit, but never AND. I'm getting dizzy from all the code combinations trying to get it right.

The following js code is as follows;
/*
Based on Folding Menu Tree
Dynamic Drive (www.dynamicdrive.com)
For full source code, installation instructions,
100's more DHTML scripts, and Terms Of
Use, visit dynamicdrive.com
Updated to support arbitrarily nested lists
by Mark Quinn (mark@robocast.com) November 2nd 1998
*/
var divColl=document.all.menuText.style;
var divCollHeight;
var head="display:''"
img1=new Image();
img1.src="Scripts/fold.gif";
img1.width="25";
img2=new Image();
img2.src="Scripts/open.gif";
img2.width="25";

function change()
{ if(!document.all)
return
if (event.srcElement.id=="foldheader")
{ var srcIndex = event.srcElement.sourceIndex
var nested = document.all[srcIndex+1]
if (nested.style.display=="none")
{ nested.style.display='';
divColl.height=300;
event.srcElement.style.listStyle="url(Scripts/open.gif)";
reScale();
}
else
{ nested.style.display="none";
divColl.height=300;
event.srcElement.style.listStyle="url(Scripts/fold.gif)";
reScale();
}
}
}

function reScale()
{divCollHeight==divColl.height;
if (divColl.height<299)
{ divCollHeight='';
divColl.height=divCollHeight;}
else
{ divCollHeight=300;
divColl.height=divCollHeight;}
}

document.onclick=change

For clarification, the target container code snippet is as follows;

//InnerTableStart
document.writeln("<table class=\"toc\" border=\"0px\" width=\"100%\" height=\"100%\" cellspacing=\"0px\" cellpadding=\"0px\" style=\"border-right:solid 1px blue; border-bottom: solid 1px blue;\">");
//InnerTable--TOC
document.writeln("<tr>");
document.writeln("<td id=\"menuTOC\" valign=\"top\" width=\"50%\" style=\"\">");
document.writeln("<div id=\"menuText\" class=\"hiLiteText\" style=\"overflow:auto;\"> sgdsvs <br> fsdfs ");
//A BUNCH OF LISTED LINKS AND NESTED LINKS...
document.writeln(" <ul>");
document.writeln(" <li id=\"foldheader\"> Travel </li>");
document.writeln(" <ul id=\"foldinglist\" style=\"display:none\" style=&{head};>");
document.writeln(" <li><a href=\"Travel/Travel Services Overview.html\"> Overview</a>  </li>");
document.writeln(" <li><a href=\"Travel/Leisure Travel.html\"> Leisure</a>  </li>");
document.writeln(" <li id=\"foldheader\"> Tours  </li>");
document.writeln(" <ul id=\"foldinglist\" style=\"display:none;\">");
document.writeln(" <li><a href=\"Travel/Personal Adventure Tours.html\"> Personal Adventure</a>  </li>");
document.writeln(" <li><a href=\"Travel/Special Interest Tours.html\"> Special Interest</a>  </li>");
document.writeln(" <li><a href=\"Travel/Tour Packages.html\"> Tour Packages</a>  </li>");
document.writeln(" </ul>");
document.writeln(" </ul></div></td>");
//InnerTable--DESC
document.writeln(" <td id=\"menuDescriptor\" >");
document.write("<strong><font size=\"+1\"> Link Description </font></strong>");
document.writeln("</td></tr></table>");
//EndInnerTable

TIA
AH.C

Webskater

02-10-2003, 04:26 AM

Stick whatever it is you do not want to exceed 300px in height in an iframe with a height attribute of 300px. If the contents of the iframe exceed 300 px scrollbars will appear. If they are less they will disappear.

AH.C

02-10-2003, 09:51 AM

Webskater,
Thanks for the response. Perhaps I need to clarify further. I don't want the container pegged at 300px. 300px is the maximum height to be displayed, with the scrollbar kicking in.

If the collasped list has only three lines, ~ 45px, then I want the height to be just high enough to show everything without any empty space, aside from the specified margin.

:confused: What I need is a routine to clear the height property on each folder list click, evaluate the new unrestrained height, and if greater than 300px, assign 300px as the displayed height. If less than 300px, then the height would be free to fit automatically.

Thanks again.