solution: resize navigation tree

LooseCannon

I'm currently working on a project that requires the use of a complex form, i.e. nested replicating containers, so I turned on the navigation tree for enhanced usability. Unfortunately this caused another usability issue: the width of the tree frame minimizes the form viewing area forcing users to scroll horizontally.


So I wrote the following code for resizing the tree navigation frame and the form frame. Put the function in your userscript and call it when the form first loads. Change the iframe widths accordingly... Note this has only been tested with tst 6.1 and IE 6.

function resizeNav() {
 if (parent.datacapture.isDatacaptureLoaded) {
  var iframes = parent.window.document.getElementsByTagName("iframe");
  for (n=0; n<iframes.length; n++){
   if (iframes.name == "treeFrame") {
    iframes.width = "100";
    iframes.marginwidth = "0";
   }
   if (iframes.name == "formframe") {
    iframes.width = "900";
   }
  }
 }
 else {
  setTimeout("resizeNav()",500);
 }
 return(true);
} 

yanSi

Thanks for the solution.

Lets say I want the first node to be expanded by default. I hover over the triangle and see that its calling toggleNode().

The toggleNode function in tree.js takes a node id and looks like this:

function toggleNode(nodeId) {
var clickedFolder = nodes[nodeId];


var state = clickedFolder.isOpen;
clickedFolder.setState(!state);
}

I copy the above function from tree.js into my formapi.js file. The HTML source code in that iframe says that the id of the triangle image is "ni1". But when I call toggleNode(iframes.ni1) from within your resizeNav()function, nothing happens. What should the id of the triangle image be?