Full version: jsB@nk » Text » Text Excerpts
URL: https://www.javascriptbank.com/text-excerpts.html
Excerpts (or teaser boxes) from longer texts can help the user when scanning and serve to highlight key points or quotes. This JavaScript automatically generated excerpts using JavaScript, CSS, and the DOM. It degrades gracefully.
Full version: jsB@nk » Text » Text Excerpts
URL: https://www.javascriptbank.com/text-excerpts.html
<style type="text/css">em.excerpt { font-style: normal;}span.excerptbox { float: right; width: 30%; padding: 5px; margin: 0 0 5px 5px; background-color: #F2F2CE; border: 1px solid #cc9; color: #996; font-size: 1.1em; line-height: 1.1em;}div#css_sniffer { left:0;}</style><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com--><script language="javascript">/* This script and many more are available free online atThe JavaScript Source :: http://javascript.internet.comCreated by: Timothy Groves :: http://www.brandspankingnew.net/ */var excerpts = false;function makeExcerpts() { var eleArr, sniffer, css, i, newNode, newNodeTxt, parNode; // are teaser boxes already there? if (excerpts) return false; // is DOM capable? if (!document.getElementById) return false; // is stylesheet activated? sniffer = document.getElementById("css_sniffer"); if (sniffer.currentStyle) // IE css = sniffer.currentStyle['left']; else if (window.getComputedStyle) // Mozilla / Opera css = document.defaultView.getComputedStyle(sniffer,null).getPropertyValue('left'); else css = "0px"; if (css == "auto") // css not activated return false; eleArr = document.getElementsByTagName("em"); for (i=0;i<eleArr.length;i++) { if (eleArr[i].className == "excerpt") { newNode = document.createElement("span"); newNode.className = "excerptbox"; newNodeTxt = document.createTextNode( eleArr[i].firstChild.nodeValue ); newNode.appendChild( newNodeTxt ); parNode = eleArr[i].parentNode; parNode.insertBefore(newNode, parNode.firstChild); } } return excerpts=true;}window.onload=makeExcerpts;</script><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com--><div id="css_sniffer">** Use the em code with a class of "excerpt" to display the excerpted text, i.e., <em class="excerpt">A un Angleso it va semblar un simplificat Angles</em>. An example paragraph is shown below. Ma quande lingues coalesce, li grammatica del resultant lingue es plu simplic e regulari quam ti del coalescent lingues. Li nov lingua franca va esser plu simplic e regulari quam li existent Europan lingues. It va esser tam simplic quam Occidental: in fact, it va esser Occidental. <em class="excerpt">A un Angleso it va semblar un simplificat Angles</em>, quam un skeptic Cambridge amico dit me que Occidental es. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</div><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->