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>
[download]

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.
Read more... (4 kB)


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!


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');
[download]

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');
[download]

And put the link before, instead of after the one it finds.

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.

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.

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.

/?node=nodelets;nodelets=personal,xp,ticktock,chatterbox
[download]

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;}
[download]

Nice .. thank you :)

-- Foxcub
#include www.liquidfusion.org.uk