Beefy Boxes and Bandwidth Generously Provided by pair Networks
laziness, impatience, and hubris

Re: Request: Collapsible Side Bar (working solution)

by kelan (Deacon)
on Jul 11, 2005 at 12:42 UTC ( #473912=note: print w/replies, xml ) Need Help??

in reply to Request: Collapsible Side Bar

I've done this very thing using the Free Nodelet. First, turn on the Free Nodelet under your Nodelet Settings. Then go to your User Settings and enter the following into the Free Nodelet box near the bottom. It results in a link labeled "Toggle Page View" being added to the top of the page near the "print," "w/replies," and "xml" links. Click that link and the sidebar disappears. I usually use it to minimize horizontal scrolling if someone makes a really long line somewhere in a thread. This is based on the code found at this thread.

<script type="text/javascript"> var nodelet_state = 'block'; var lb = "\x5B"; var rb = "\x5D" function add_toggle_link() { var spn = document.createElement('span'); var rpn = document.createTextNode(' ( '); var txt = document.createTextNode( 'Toggle Page View' ); var lpn = document.createTextNode(' )'); var lnk = document.createElement('a'); lnk.href = "javascript:toggle_nodelets()"; lnk.appendChild(txt); var tbl = document.getElementById('titlebar-bottom'); var spns = tbl.getElementsByTagName('span'); var oldspn; var i = 0; while (spns.item(i)) { if (spns.item(i).getAttribute('class') == "addlinks") { oldspn = spns.item(i); break; } i++; } spn.appendChild(rpn); spn.appendChild(lnk); spn.appendChild(lpn); oldspn.appendChild(spn); } function toggle_nodelets() { nodelet_state = (nodelet_state != 'none') ? 'none' : 'block'; var elements = document.getElementsByTagName('table'); var elnum; var content_width = (nodelet_state == 'none') ? '100%' : '80%'; document.getElementById('monkbar').style.display = nodelet_state; var tds = document.getElementsByTagName('td'); for (tnum = 0; tnum < tds.length; tnum++) { var td = eval("tds" + lb + "tnum" + rb); if (td.className == 'main_content') { = content_width; break; } } for (elnum = 0; elnum < elements.length; elnum++) { var el = eval("elements" + lb + "elnum" + rb); if (el.className == 'nodelet_container') { = nodelet_state; break; } } } add_toggle_link(); </script>

Replies are listed 'Best First'.
Re^2: Request: Collapsible Side Bar (working solution)
by holli (Monsignor) on Jul 11, 2005 at 13:26 UTC
    That's a fine start. Personally I would like it more if I had a +/- button next to each nodelet heading so I could collapse/expand them separately.

    However, all that is still useless when the page does not maintain it's state after clicking on a link. I don't think that can be done without "collaboration" from the webserver? It would have to send back the "nodelet state" information.

    Thanks Corion for that idea (sometimes one can't see the obvious). Here is a modified version of the above that preserves state using a cookie.

    holli, /regexed monk/

      Just save the state either in a local cookie or via a request to a state-maintining server of your programming.

Re^2: Request: Collapsible Side Bar (working solution)
by SciDude (Friar) on Jul 11, 2005 at 19:52 UTC

    This is exactly what I had in mind! Thank you.

    Although I would prefer the "toggle" above the nodelets or on the side of the page - your version does what I wanted with the minimum of complexity. Bravo!

    The first dog barks... all other dogs bark at the first dog.

      You can modify the placement by changing the add_toggle_link function. In there you see this call:

      var tbl = document.getElementById('titlebar-bottom');
      What it's doing is finding the element to place the toggle link after; in this case the element's id is "titlebar-bottom." One easy way is to always have a certain nodelet on top; in my case that is the XP Nodelet. Then you could change that search to:
      var tbl = document.getElementById('XP_Nodelet');
      And put the link before, instead of after the one it finds.

Log In?

What's my password?
Create A New User
Node Status?
node history
Node Type: note [id://473912]
and nobody stirs...

How do I use this? | Other CB clients
Other Users?
Others exploiting the Monastery: (4)
As of 2017-09-21 18:48 GMT
Find Nodes?
    Voting Booth?
    During the recent solar eclipse, I:

    Results (252 votes). Check out past polls.