[thelist] modified <pre></pre> blocks

Hardacker, Andrew Andrew.Hardacker at Compuware.com
Wed Jul 17 13:54:01 CDT 2002


<snip>
nn6/moz doesn't support the innerText property or the replaceNode()
method, but of which are necessary for this to work properly.  ...  then i
did the final test which was to copy-n-paste the contents (like would be
done often with code samples) and was shocked to see that nn6/moz includes
the line numbers with the text.  since that made the code sample completely
unusable i reverted back to win/ie5+ for now since it doesn't include the
line numbers.
</snip>

Jeff, very nifty JavaScript. But as a Mozilla fan, I was disappointed not to
get the full effect. There are valid core DOM alternatives to the Microsoft
DOM extensions. By changing a couple lines of Javascript and a couple lines
of CSS this can work in Mozilla 1.0.

    function convertPreBlocks(bPre)
    {
      if(document.getElementsByTagName)
      {
        var b = document.getElementsByTagName("BODY").item(0);
        var currentPreLines, currentPreWrapper, currentPreRow,
currentPreRowContents, currentPreReplaced, tn;
        var preArray = document.getElementsByTagName('PRE');
        for(var i = 0; i < preArray.length; i++)
        {
          currentPreLines = preArray[i].innerHTML.split('\n'); // innerHTML
instead in innerText
          currentPreWrapper = document.createElement('OL');
          currentPreWrapper.className = 'pseudoPreOL';

          for(var j = 0; j < currentPreLines.length; j++)
          {
            currentPreRow = document.createElement('LI');
            currentPreRow.className = 'pseudoPreLI';
 // create a text node instead of manipulating innerText
            tn = document.createTextNode(currentPreLines[j].replace(/\r/g,
''));
            currentPreRow.appendChild(tn);
            currentPreRowContents =
currentPreWrapper.appendChild(currentPreRow);
          }
// use replaceChild instead of replaceNode
          b.replaceChild(currentPreWrapper,preArray[i]);
        //  currentPreReplaced = preArray[i].replaceNode(currentPreWrapper);
        //  if(currentPreReplaced)
            i--;
        }
      }
    }

.pseudoPreOL {
  list-style-position: outside; /* set numbers outside list, they won't
cut-n-paste */
  border: 1px dashed gray;
}

.pseudoPreLI {
  background-color: #eeeeee; /* move background color to LI */
  font-family: monospace;
  color: #000000;
  padding: 1px 3px;
}

This only works if the PRE text does _not_ include entities. Depending on
how you set up this text this may be preferable - or may be a stopper.

HTH
Andy Hardacker






The contents of this e-mail are intended for the named addressee only. It
contains information that may be confidential. Unless you are the named
addressee or an authorized designee, you may not copy or use it, or disclose
it to anyone else. If you received it in error please notify us immediately
and then destroy it.




More information about the thelist mailing list