comment on

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.

<script type="text/javascript">
var state = true;
var cookie = get_cookie("_anodelet_cookie");

if (cookie==null    ) { cookie=true  };
if (cookie==""      ) { cookie=true  };
if (cookie=="true"  ) { cookie=true  };
if (cookie=="false" ) { cookie=false };

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(state) 
{
    if ( state == null ) 
    
    { 
        state = cookie;
        state = !state
    }
    
    set_cookie ('_anodelet_cookie', state);
    
    var elements = document.getElementsByTagName('table');
    var elnum;
    var content_width = state ? '100%' : '80%';
    var mystyle;
    
    mystyle = state ? "block" : "none";
    
    document.getElementById('monkbar').style.display = mystyle;
    
    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 = mystyle;
            break;
        }
    }
}

function set_cookie (name,value,expires,path,domain,secure) 

{
  document.cookie = name + "=" + escape (value) +
    ((expires) ? "; expires=" + expires.toGMTString() : "") +
    ((path) ? "; path=" + path : "") +
    ((domain) ? "; domain=" + domain : "") +
    ((secure) ? "; secure" : "");
  cookie=value;
  //alert ("set cookie " + value);
}

function get_cookie (name) 
{
  var arg = name + "=";
  var alen = arg.length;
  var clen = document.cookie.length;
  var i = 0;
  while (i < clen) 
{
    var j = i + alen;
    if (document.cookie.substring(i, j) == arg)
      return getCookieVal (j);
    i = document.cookie.indexOf(" ", i) + 1;
    if (i == 0) break; 
  }
  return null;
}

function getCookieVal (offset) 
{
  var endstr = document.cookie.indexOf (";", offset);
  if (endstr == -1)
    endstr = document.cookie.length;
    //alert ("get cookie " + document.cookie.substring(offset, endstr)
+);
  return unescape(document.cookie.substring(offset, endstr));
}


add_toggle_link();
toggle_nodelets(cookie);

</script>
[download]

holli, /regexed monk/

In reply to Re^2: Request: Collapsible Side Bar (working solution) by holli
in thread Request: Collapsible Side Bar by SciDude

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.


"be consistent"
	PerlMonks