The key to understanding how BinderBabies worked is invisible frames (frames with height zero and so not visible in a browser window). I learned this neat trick from some guru on a javascript mailing list. Given the non-standard browser display of frames at the time, it wasn’t enough just to make the frame have size zero; you also had to remove its “chrome” as well. To do this, one invoked various incantations, obscure at the time but commonplace now. You could then display whatever you wanted in the visible frames of your window and load all sorts of non-content stuff into frames your viewer would never suspect existed.

In the first invisible frame, the “gears” page that loaded consisted mostly of javascripts, and operated the booklet mechanisms: buttons, page shuffling and so on. The second invisible frame contained the setup page for the particular booklet (controlling the number of sections and trim colour, etc.) as produced by the BinderBaby’s author. The “Loading … please wait” page that displayed initially in the BinderBaby window was actually a cheat: what got loaded was these first two frames and the cover, not the whole booklet. The content pages were loaded only as the viewer requested them by clicking on a pager button.

The remaining three invisible frames were initially blank. As the viewer navigated the BinderBaby and branched onto different content paths, these frames were updated with the appropriate path setup page for the new path, in the frame for the appropriate path level (so returning from a path did not require a new path list to load). Branching also caused the navigation buttons to be reset appropriately

Invisible frames still appear to work in modern browsers, despite possible security problems with loading invisible content. Nowadays, we could probably use non-visible divs instead, though the security issues remain.