The following hack makes each nodelet title clickable, and you can preconfigure your
nodelet's initial state (collapsed/expanded).
Plunge into your Free nodelet and tweak the closedN array. For maximum benefit put your free nodelet last in Nodelet Settings.
update: use the block further down. I would have deleted this first attempt, had ikegami not answered :-)
// this function toggles a nodelet's state.
function toggleVis (id) {
var r = document.getElementById(id);
if(r.style.display == "none") {
r.style.display = "table-row";
} else {
r.style.display = "none";
}
}
// Array with nodelet state flags, 1 = closed, 0 = open
var closedN = `[1,1,0,1,1,1,1,1,1,1,1,1,1,1,1,1,1];
var nc = document.getElementById('nodelet_container');
var c = 0;
for(var i=0; i<nc.childNodes.length; i++) {
if(nc.childNodes`[i].nodeName == "TBODY") {
cn = nc.childNodes`[i];
var ary = new Array;
var k = 0;
for(var j=0; j<cn.childNodes.length; j++) {
if(cn.childNodes`[j].nodeName=="TR") {
ary`[k] = cn.childNodes`[j]; k++;
}
}
var str= ary`[0].childNodes`[1].innerHTML;
var id = ary`[1].id;
id = id.replace(/\'/,"\\'");
ary`[0].childNodes`[1].innerHTML
= '<div onClick="toggleVis('+"'"+id+"'"+');">'+ary`[0].childNo
+des`[1].innerHTML+'</div>';
if(closedN`[c]) toggleVis(ary`[1].id);
c++;
}
}
That could've been more 'elegant'... but it's a hack. If JavaScript had hashes...
This one is for firefox. IE users likely will have to replace the document.getElemetById
by the appropriate IE function.
<update>
Since some nodelets come and go, the order can change. Here's a version with hashes. The XP Nodelet has
a degree sign in the upper left corner, which, when clicked, will pin/unpin the nodelet container. Use with
the CSS snippet below.
// this function toggles a nodelet's state.
function toggleVis (id) {
var r = document.getElementById(id);
if(!r.style.display || r.style.display == "none") {
r.style.display = "table-row";
} else {
r.style.display = "none";
}
}
function togglePin () {
var n = document.getElementById('nodelet_container');
var pin = document.getElementById('nodelet_pin');
if (!n.style.position || n.style.position == 'fixed') {
n.style.position = 'absolute';
pin.innerHTML = ' | ';
} else {
n.style.position = 'fixed';
pin.innerHTML = ' ° ';
}
}
function collapseNodelets () {
// insert the nodelets you want to have expanded here
var opened = {
'XP Nodelet' : 0,
'Chatterbox' : 0,
'Tick tock' : 0,
'Cabalists\' Nodelet' : 1,
}
var nc = document.getElementById('nodelet_container');
var c = 0;
for(var i=0; i<nc.childNodes.length; i++) {
if(nc.childNodes`[i].nodeName == "TBODY") {
cn = nc.childNodes`[i];
var ary = new Array;
var k = 0;
for(var j=0; j<cn.childNodes.length; j++) {
if(cn.childNodes`[j].nodeName=="TR") {
ary`[k] = cn.childNodes`[j]; k++;
}
}
var str= ary`[0].childNodes`[1].innerHTML;
str = str.replace(/ *\n */g,"");
str = str.replace(/ /g," ");
var id = ary`[1].id;
id = id.replace(/\'/,"\\'");
if(str == "Chatterbox") {
// this one gets the pin div - degree(pinned) or pipe(unpinned
+)
ary`[0].childNodes`[1].innerHTML
= '<div id="nodelet_pin" onClick="togglePin();"'
+ ' style="float: left; cursor: pointer"> ° </
+div>'
+ '<div onClick="toggleVis('+"'"+id+"'"+');">'+str+'</div>';
} else {
ary`[0].childNodes`[1].innerHTML
= '<div onClick="toggleVis('+"'"+id+"'"+');">'+str+'</div>';
}
if(!opened`[str]) toggleVis(ary`[1].id);
c++;
}
}
}
collapseNodelets();
And here's a stylesheet snippet to pin the nodelet container to the upper right corner of the page:
/* pin container, make it fixed width */
#nodelet_container {
position: fixed;
margin-left: 5px;
top: 5px;
width: 200px;
}
/* leave a bit space on the right, so the nodelet container fits */
#monkbar, #titlebar-top, #titlebar-bottom, #footer { padding-right: 20
+5px; }
/* initial state of all nodelets collapsed */
[id^="nodelet_body_row"] { display: none; }
</update>
--shmem
_($_=" "x(1<<5)."?\n".q·/)Oo. G°\ /
/\_¯/(q /
---------------------------- \__(m.====·.(_("always off the crowd"))."·
");sub _{s./.($e="'Itrs `mnsgdq Gdbj O`qkdq")=~y/"-y/#-z/;$e.e && print}
-
Are you posting in the right place? Check out Where do I post X? to know for sure.
-
Posts may use any of the Perl Monks Approved HTML tags. Currently these include the following:
<code> <a> <b> <big>
<blockquote> <br /> <dd>
<dl> <dt> <em> <font>
<h1> <h2> <h3> <h4>
<h5> <h6> <hr /> <i>
<li> <nbsp> <ol> <p>
<small> <strike> <strong>
<sub> <sup> <table>
<td> <th> <tr> <tt>
<u> <ul>
-
Snippets of code should be wrapped in
<code> tags not
<pre> tags. In fact, <pre>
tags should generally be avoided. If they must
be used, extreme care should be
taken to ensure that their contents do not
have long lines (<70 chars), in order to prevent
horizontal scrolling (and possible janitor
intervention).
-
Want more info? How to link
or How to display code and escape characters
are good places to start.