Cross-Browser.com

This demo implements persistent display or non-display of elements with specific IDs or class-names.

21 Dec 2010: I now have a much better "persistent display" demo. See: xPersistentDisplay

Check IDs or class-names below. Those elements will have display:none when you reload the page. Elements that are currently not displayed will already be checked.

These IDs and class-names refer to the content DIV following the corresponding heading in the right column of this page.

Two cookies are utilized: A 'class list' and an 'id list'. Each list is a string consisting of comma-separated names. When you check or uncheck a box above that name is added or removed from the list which is stored in a cookie.

When the page first loads, the class list and id list cookies are parsed. All elements associated with those IDs or classNames are then given display:none. At the same time, the checkboxes above are updated to reflect the current state of those elements.

I wrote this rather quickly so I'm sure it's not perfect, but I hope you find it helpful :-)

<script type='text/javascript' src='../x.js'></script>
<script type='text/javascript' src='../lib/xdisplay.js'></script>
<script type='text/javascript' src='../lib/xcookie.js'></script>
<script type='text/javascript'>
var DBG = false;
var ID_LIST_NAME = 'idList';
var CLASS_LIST_NAME = 'classList';
window.onload = function()
{
  xCookieIdListDisplay(ID_LIST_NAME);
  xCookieClassListDisplay(CLASS_LIST_NAME);
}
function xCookieIdListDisplay(idListCookieName)
{
  var i, cb, ele, csv = xCookie.get(idListCookieName);
  if (DBG) alert('idList csv:\n\n' + csv);
  if (csv) {
    var idList = csv.split(',');
    if (DBG) alert('idList array:\n\n' + csv);
    for (i = 0; i < idList.length; ++i) {
      cb = xGetElementById(idList[i] + 'CB');
      if (cb) {
        cb.checked = true;
      }
      ele = xGetElementById(idList[i]);
      ele.style.display = 'none';
    }  
  }
}
function xCookieClassListDisplay(classListCookieName)
{
  var i, j, cb, eleList, csv = xCookie.get(classListCookieName);
  if (DBG) alert('classList csv:\n\n' + csv);
  if (csv) {
    var classList = csv.split(',');
    if (DBG) alert('classList array:\n\n' + csv);
    for (i = 0; i < classList.length; ++i) {
      cb = xGetElementById(classList[i] + 'CB');
      if (cb) {
        cb.checked = true;
      }
      eleList = xGetElementsByClassName(classList[i]);
      for (j = 0; j < eleList.length; ++j) {
        eleList[j].style.display = 'none';
      }
    }
  }
}
function csvAdd(csvName, sToAdd)
{
  var csv = xCookie.get(csvName);
  if (!csv) {
    csv = sToAdd;
  }
  else {
    csv += ',' + sToAdd;
  }
  if (DBG) alert(csv);
  xCookie.set(csvName, csv); 
}
function csvRemove(csvName, sToRemove)
{
  var csv = xCookie.get(csvName);
  if (csv) {
    /* oh what a hack! I didnt have time to come up with a proper RE */
    csv = csv.replace(',' + sToRemove, '');
    csv = csv.replace(sToRemove + ',', '');
    csv = csv.replace(sToRemove, '');
    if (DBG) alert(csv);
    xCookie.set(csvName, csv); 
  }
}
function csvToggle(chkBox, sName, bClass)
{
  var csvName = bClass ? CLASS_LIST_NAME : ID_LIST_NAME;
  if (chkBox.checked) {
    csvAdd(csvName, sName);
  }
  else {
    csvRemove(csvName, sName);
  }
}
</script>