Beefy Boxes and Bandwidth Generously Provided by pair Networks
Do you know where your variables are?
 
PerlMonks  

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') { td.style.width = content_width; break; } } for (elnum = 0; elnum < elements.length; elnum++) { var el = eval("elements" + lb + "elnum" + rb); if (el.className == 'nodelet_container') { el.style.display = nodelet_state; break; } } } add_toggle_link(); </script>


Comment on Re: Request: Collapsible Side Bar (working solution)
Download Code
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.

    Update:
    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!


    SciDude
    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?
Username:
Password:

What's my password?
Create A New User
Node Status?
node history
Node Type: note [id://473912]
help
Chatterbox?
and the web crawler heard nothing...

How do I use this? | Other CB clients
Other Users?
Others making s'mores by the fire in the courtyard of the Monastery: (3)
As of 2014-07-14 01:11 GMT
Sections?
Information?
Find Nodes?
Leftovers?
    Voting Booth?

    When choosing user names for websites, I prefer to use:








    Results (253 votes), past polls