Wrap Code Content

by dharlaferdana

HTML

<div class="codeHeader"><span class="codeLink"
        onclick="WordWrap(this);">Wrap</span> 
    </div>
    <div class="codeContent" style="width: 450px;">
        <ol START="1" highlight="true">
            <li class="codeLI">&lt;script&nbsp;language=&quot;JavaScript&quot;&gt;&nbsp;</li>
            <li...

CSS

body {
    background:#bbb;
    padding:40px;
}
.codeContent {
        width:99%;
 border-top: 1px solid #E7E5DC;
 border-left: 1px solid #E7E5DC;
 border-bottom: 1px solid #E7E5DC;
 background-color: #E7E5DC;
 white-space: pre;
 font-size: 100%;
 font-family: 'Courier New', Courier, monospace;
 font-weight: normal;
 overflow: scroll;
 margin: 0px;
 padding: 0px;
 max-height: 590px;
        display: block; 
        white-space:nowrap;
}
.codeSpan {
 font-size: 100%;
 background-color: white;
 font-family: 'Courier New', Courier, monospace;
 font-weight: normal;
 padding-left: 10px;
 line-height: 18px;
 text-indent: 5px;
 padding: 2px 0 2px 0;
 color: #000;
 border-bottom: 1px solid #F0F0F0;
}
.codeContent ol {
 background-color: #E7E5DC;
 margin-top: 0px;
 margin-bottom: 0px;
}
.codeLI {
 font-size: 90%;
 background: white;
 font-family: 'Courier New', Courier, monospace;
 color: #000;
 border-bottom: 1px solid #F0F0F0;
 border-left: 3px solid green;
 font-weight: normal;
 line-height: 18px;
 text-indent: 5px;
 padding: 2px 0 2px 0;
}
.codeHeader {
 width:100%;
 height:24px;
 display:block;
}
.codeLink {
 font-size: 90%;
 font-weight: normal;
 color: green;
 padding-left: 3px;
 padding-right: 3px;
 cursor: pointer;
 text-decoration: underline;
 vertical-align: middle;
}

JavaScript

function WordWrap(obj) {
	if (document.all) { 
		var cObj=obj.parentNode.nextSibling;
		if (cObj.style.whiteSpace=="pre") {
			cObj.style.whiteSpace="normal";
		} else {
			cObj.style.whiteSpace="pre";
		}
	} else {
		var check=obj.parentNode.nextSibling.nextSibling;
		var cObj=obj.parentNode.nextSibling.nextSibling.childNodes[1].childNodes;
		if (check.getAttribute("wrapped")==null || check.getAttribute("wrapped")=="" || check.getAttribute("wrapped")=="false") {
			check.setAttribute("wrapped", "true");
			var max_len=55;
			for (var i=0; i<cObj.length; i++) {
				var ih=cObj[i].innerHTML;
				if (ih!=null) {
					if (ih.length>max_len) {
						var rstr="";
						for (var c=0; c<ih.length/max_len; c++) {
							rstr+=ih.substr(c*max_len, max_len)+"<br>";
						}
						cObj[i].innerHTML=rstr;
						rstr="";
					}
				}
			}
		} else {
			/*undo wrap */
			check.setAttribute("wrapped", "false");
			check.innerHTML=check.innerHTML.replace(/<BR>/gi, "");
		}
	}
}