Beefy Boxes and Bandwidth Generously Provided by pair Networks
go ahead... be a heretic
 
PerlMonks  

Free Nodelet Hack: Hide/Display Nodelet Bar On Demand

by jdporter (Canon)
on May 03, 2006 at 21:30 UTC ( #547277=note: print w/ replies, xml ) Need Help??


in reply to Free Nodelet freed

I like to have my Nodelet bar (column? table?) nice and wide, most of the time, partly because it makes the nodelets shorter, and thus I have to scroll less to read them. (I keep the most dynamic ones at the top.) The downside is that the main body of the node is squeezed. This not only makes it taller, but often causes ugly line wrapping, especially in embedded HTML tables. So, sometimes I really want to get my Nodelet column out of the way, and just view the main node body in its full glory. So I thought:

How can I hide (toggle off) the Nodelet bar as needed?

The following code does just that. Simply plunk it into your Free Nodelet Settings. It makes two checkboxes near the top right corner of your page, labeled 'Hide Main Body' and 'Hide Nodelets'. When one or the other part of the page is hidden, the remaining visible part expands to fill the entire width of the window.

// add toggles to hide/show nodelets and main_content { var tbl = document.getElementById('titlebar-bottom'); var cel = document.createElement('td'); tbl.rows[0].appendChild(cel); cel.width = "20%"; cel.align = "right"; // add toggle to hide/show main_content txt = document.createTextNode( 'Hide Main Body' ); cel.appendChild(txt); chk = document.createElement('input'); cel.appendChild(chk); chk.type = 'checkbox'; chk.name = 'hide_mainbody'; chk.id = 'hide_mainbody'; chk.onclick = function(){ var chk = document.getElementById('hide_mainbody'); var state = chk.checked ? 'none' : 'table-cell'; element_of_tag_and_class('td','main_content').style.display = +state; } // add toggle to hide/show nodelets var txt = document.createTextNode( 'Hide Nodelets' ); cel.appendChild(txt); var chk = document.createElement('input'); cel.appendChild(chk); chk.type = 'checkbox'; chk.name = 'hide_nodelets'; chk.id = 'hide_nodelets'; chk.onclick = function(){ var chk = document.getElementById('hide_nodelets'); var state = chk.checked ? 'none' : 'table-cell'; element_of_tag_and_class('td','nodelets').style.display = stat +e; } } // presumes only one. returns first found. function element_of_tag_and_class(tagname,classname) { var elems = document.getElementsByTagName(tagname); var i; for ( i = 0; i < elems.length; i++ ) { if ( elems[i].className == classname ) { return( elems[i] ); } } }
We're building the house of the future together.


Comment on Free Nodelet Hack: Hide/Display Nodelet Bar On Demand
Download Code
Free Nodelet Hack: Toggle Between Two Nodelet Configurations
by jdporter (Canon) on Dec 11, 2006 at 16:38 UTC

    There are lots of cool nodelets, and normally I like to have almost all of them turned on. Problem is, that makes each page take noticeably longer to load. So sometimes I wish I could have just a bare-bones set of nodelets active.

    Fortunately, PerlMonks gives you two nodelet configurations, as you can see by going to your Nodelet Settings: there's your FrontPage nodelets, and your non-FrontPage nodelets. But using Nodelet Settings to toggle quickly between them is just not convenient!

    So I came up with the following code to go in my Free Nodelet. (Note that if you use this you'll definitely want Free Nodelet to be enabled in both your FrontPage and non-FrontPage nodelet sets.)

    <script language="javascript"><!-- // the value of _redir must be a node ID! if ( "`_redir`" != "`" + "_redir" + "`" ) { window.location.search= "?node_id=`_redir`"; } //--></script> [href://?node_id=25185;_redir=`id`;setfpeqnonfp=1|FP nodelets] | [href://?node_id=25185;_redir=`id`;clrfpeqnonfp=1|main nodelets]

    Each link makes a submission to Nodelet Settings — to enable and disable Use my frontpage nodelets everywhere, respectively — and then "redirects" back to the node you were viewing when you clicked. Note that only the node ID of the current node is remembered; any other URI arguments are dropped.

    This technique is based on ideas in subthread Re: Free Nodelet Hack: Add parent & root links to nodes in 'Nodes You Wrote' (or anywhere). tye++

    Update (hopefully temporary):
    The above technique does not work any longer, since apparently the two form fields (setfpeqnonfp, clrfpeqnonfp) are no longer settable via HTTP GET requests. Until that capability is restored, you can achieve the same with the equivalent POSTs, e.g.:

    Nodelets: <form method="post" action="?" enctype="application/x-www-form-urlenco +ded"> <input type="hidden" name="node_id" value="25185"> <input type="hidden" name="_redir" value="`id`"> <input type="hidden" name="setfpeqnonfp" value="1"> <input type="submit" name="sexisgood" value="FP"> </form> <form method="post" action="?" enctype="application/x-www-form-urlenco +ded"> <input type="hidden" name="node_id" value="25185"> <input type="hidden" name="_redir" value="`id`"> <input type="hidden" name="clrfpeqnonfp" value="1"> <input type="submit" name="sexisgood" value="Main"> </form>

Log In?
Username:
Password:

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

How do I use this? | Other CB clients
Other Users?
Others examining the Monastery: (6)
As of 2014-08-01 01:40 GMT
Sections?
Information?
Find Nodes?
Leftovers?
    Voting Booth?

    My favorite superfluous repetitious redundant duplicative phrase is:









    Results (256 votes), past polls