Beefy Boxes and Bandwidth Generously Provided by pair Networks
We don't bite newbies here... much

Request: Collapsible Side Bar

by SciDude (Friar)
on Jul 11, 2005 at 06:39 UTC ( #473846=monkdiscuss: print w/replies, xml ) Need Help??

I suspect that like most monks, I have the "XP Nodelet", "Chatterbox", "Personal Nodelet", and similar items on the side of my perlmonks pages.

I would like to request of the powers that grace this site to add a collapsible feature to this column. The concept does not have to be fancy, just a visible toggle to turn this information on and off.

For a slightly fancier example, please see the Collapsible Menu Item in this link

The perlmonks version does not have to be quite so fancy. Perhaps simply replace the column with a small button to turn the column back on once hidden?

This would be a wonderfully useful feature that hopefully will not be difficult to implement.

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

Replies are listed 'Best First'.
Re: Request: Collapsible Side Bar (working solution)
by kelan (Deacon) on Jul 11, 2005 at 12:42 UTC

    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>

      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.

      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.

Re: Request: Collapsible Side Bar
by Corion (Patriarch) on Jul 11, 2005 at 07:46 UTC

    While your idea is interesting, I don't want it implemented on Perlmonks as long as any user can put Javascript on pages that get seen by other users.

    tye wrote the Free Nodelet and you can use it to put your Javascript there (or put a link to an external script there), so there should be nothing stopping you to rewrite the PM pages in a GreaseMonkey manner, except without GreaseMonkey.

      While your idea is interesting, I don't want it implemented on Perlmonks as long as any user can put Javascript on pages that get seen by other users.
      Maybe it's just me, but what does one have to do with the other? Obviously the any user putting javascript is a security flaw and should be fixed, but how does that affect perlmonks displaying javascript to enhance the functionality of the site?

        If PM provides JavaScripted features, it also encourages users to surf with JavaScript enabled. Having JavaScript enabled on PM is a bad or at least potentially harmfull decision unless you also enable the "paranoia" HTML screening mode, which is not the default. I don't want PM to encourage this, as it exposes the users to potential harm.

        A reply falls below the community's threshold of quality. You may see it by logging in.
Re: Request: Collapsible Side Bar
by greenFox (Vicar) on Jul 11, 2005 at 07:41 UTC

    The site you linked to achieves that result with JavaScript which for many reasons, mostly security related, is never going to be acceptable here. It might be possible to achieve the same effect with CSS. I suggest you do some research and write a patch for it :)

    Update: I stand corrected (surprised but corrected) on the acceptability of JavaScript here, Recently Active Threads does contain JavaScript.

    Murray Barton
    Do not seek to follow in the footsteps of the wise. Seek what they sought. -Basho

      Just a note, there's absolutely *no* security reason that this site couldn't use javascript to do what ever it wanted. The only security issue with javascript is when you allow untrusted users to display the javascript and have it executed by other users, which is the current flaw in the homenodes, although mostly fixed by a few (non?) default settings.

        Fair point with regards to this site. However the internet as a whole (the Monastery aside if you like) is one big untrusted user and as such JavaScript *is* a security problem and the only solution I know of is to have it turned off.

        As an aside it would be nice if Firefox had an option to allow JavaScript for specified sites in the same way there is an allowed sites list for Popup Windows for example.

        Update:And NoScript answers my prayers.

        Murray Barton
        Do not seek to follow in the footsteps of the wise. Seek what they sought. -Basho

      The "recently active threads" node already has javascript. Apart from Javascript being the root of all evil, I don't see what the big deal is.
      my name's not Keith, and I'm not reasonable.
Re: Request: Collapsible Side Bar
by jdporter (Chancellor) on Jul 11, 2005 at 14:32 UTC
    In a similar vein, I'd like to see a "ticker"-type node which returns ONLY nodelets — either the ones set up in your user configuration by default, or an explicitly requested list. E.g.
    If there were such a thing, I'd put it in a firefox sidebar. And then I'd turn off all the nodelets in my regular page view.
Re: Request: Collapsible Side Bar
by holli (Abbot) on Jul 11, 2005 at 07:20 UTC
    I like that idea. ++

    holli, /regexed monk/
Re: Request: Collapsible Side Bar
by idsfa (Vicar) on Jul 13, 2005 at 15:36 UTC

    Here's a method for doing this in CSS. It will not work on IE, as that browser does not properly implement the :hover pseudoclass. You can fix that with JavaScript, but then why bother with this solution?

    td.nodelets { background-color: #eee; width: 1%;} td.nodelets .nodelet_container {display: none;} td.nodelets:hover { width: 100%;} td.nodelets:hover .nodelet_container {display: block;}

    The intelligent reader will judge for himself. Without examining the facts fully and fairly, there is no way of knowing whether vox populi is really vox dei, or merely vox asinorum. -- Cyrus H. Gordon

Log In?

What's my password?
Create A New User
Domain Nodelet?
Node Status?
node history
Node Type: monkdiscuss [id://473846]
Approved by Tanalis
and the web crawler heard nothing...

How do I use this? | Other CB clients
Other Users?
Others contemplating the Monastery: (4)
As of 2022-11-29 01:44 GMT
Find Nodes?
    Voting Booth?