Just the contents m'am

Here's a javascript hack for the most excellent Free Nodelet Freed which allows you to toggle between two views of any perlmonks page. One view is the normal view, the one you see now except that it has a "Toggle Page View" link near the top. The other view hides the Pair banner, the search bar, and the nodelets panel and extends the contents to the full width of the screen. Clicking on "Toggle Page View" (surprise) toggles between the two views. In browser windows of 800x600 or less, it more than doubles the amount of content per screen. The banners and nodelets are never more than a click away - toggling happens immediately, there is no page reloading.

To install it, just turn on the Free Nodelet in Nodelet Settings, copy the code below, then go to your User Settings, paste the code in the Free Nodelet box at the bottom of the settings, and submit. Currently the default page display is content-view, if you'd prefer to default to full-view, comment out the toggle_nodelets() call on the last line of code.

update just a reminder - browsing with javascript enabled (as this hack requires) isn't always safe; also changed the script type (thanks elusion)

<script type="text/javascript">
var nodelet_state = 'block';
var lb = "\x5B";
var rb = "\x5D"
function add_toggle_link() {
    var tbl  = document.getElementById('titlebar-bottom');
    var row  = document.createElement('tr');
    var cel  = document.createElement('td');
    var lnk  = document.createElement('a');
    var txt  = document.createTextNode( 'Toggle Page View' );
    lnk.href = "javascript:toggle_nodelets()";
    lnk.appendChild(txt);
    cel.appendChild(lnk);
    row.appendChild(cel);
    tbl.appendChild(row);
}
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();
toggle_nodelets();
</script>
[download]

Comment on Just the contents m'am Download Code

Replies are listed 'Best First'.
Re: Just the contents m'am by elusion (Curate) on Oct 15, 2004 at 03:48 UTC
You'll probably want to change the first line to `<script type="javascript">`. Having the type set to "text/css" must work for whatever browser you use, but it doesn't work with Safari. elusion : http://matt.diephouse.com	[reply] [d/l]