Resize a *div* containing a list

admin

Administrator
Staff member
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 (<!-- w --><a class="postlink" href="http://www.dynamicdrive.com">www.dynamicdrive.com</a><!-- w -->)
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 (<!-- e --><a href="mailto:[email protected]">[email protected]</a><!-- e -->) 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;\">&nbsp;sgdsvs&nbsp;<br>&nbsp;fsdfs&nbsp;");
//A BUNCH OF LISTED LINKS AND NESTED LINKS...
document.writeln(" <ul>");
document.writeln(" <li id=\"foldheader\">&nbsp;Travel&nbsp;</li>");
document.writeln(" <ul id=\"foldinglist\" style=\"display:none\" style=&{head};>");
document.writeln(" <li><a href=http://www.webdeveloper.com/forum/archive/index.php/\"Travel/Travel Services Overview.html\">&nbsp;Overview</a>&nbsp;&nbsp;</li>");
document.writeln(" <li><a href=\"Travel/Leisure Travel.html\">&nbsp;Leisure</a>&nbsp;&nbsp;</li>");
document.writeln(" <li id=\"foldheader\">&nbsp;Tours&nbsp;&nbsp;</li>");
document.writeln(" <ul id=\"foldinglist\" style=\"display:none;\">");
document.writeln(" <li><a href=\"Travel/Personal Adventure Tours.html\">&nbsp;Personal Adventure</a>&nbsp;&nbsp;</li>");
document.writeln(" <li><a href=\"Travel/Special Interest Tours.html\">&nbsp;Special Interest</a>&nbsp;&nbsp;</li>");
document.writeln(" <li><a href=\"Travel/Tour Packages.html\">&nbsp;Tour Packages</a>&nbsp;&nbsp;</li>");
document.writeln(" </ul>");
document.writeln(" </ul></div></td>");
//InnerTable--DESC
document.writeln(" <td id=\"menuDescriptor\" >");
document.write("<strong><font size=\"+1\">&nbsp;Link Description&nbsp;</font></strong>");
document.writeln("</td></tr></table>");
//EndInnerTable

TIA
AH.C
 
Back
Top