Full version: jsB@nk » Utility » Generator » Simple JavaScript Page-Note Glossary
URL: https://www.javascriptbank.com/simple-javascript-page-note-glossary.html
If you ever seen many web pages, posts of professional knowledges, specialized in skills or researches; perhaps you would see many specialized in words that they're explained after each post/page.As a content publisher, when you have to work with specialized in articles, you'll have to spend more time to make more explanations by your hand if they're very long ones. This is reason Aaron Gustafson build this JavaScript code example, it helps us spend less than time for this job, all we have to do now is concentrate on our content, all glossaries will be done automatically.There's another very useful JavaScript code example to content publishers: JavaScript Content Auto-Indexing using DOM.
Full version: jsB@nk » Utility » Generator » Simple JavaScript Page-Note Glossary
URL: https://www.javascriptbank.com/simple-javascript-page-note-glossary.html
<style type="text/css">/* This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com*/dl.glossary:after { content: "."; display: block; height: 0; clear: both; visibility: hidden;}dl.glossary dt { float: left; clear: left; margin: 0; padding: 0 0 5px;}dl.glossary dt:after { content: ":";}dl.glossary dd { float: left; clear: right; margin: 0 0 0 5px; padding: 0 0 5px;}* html dl.glossary dd { clear: none; width: 80%;}</style><script type="text/javascript">// Created by: Aaron Gustafson | http://www.easy-designs.net/// This script downloaded from www.JavaScriptBank.com// ---------------------------------------------------------------------// onLoad Handler// ---------------------------------------------------------------------var old = window.onload; // catch any existing onload calls 1stwindow.onload = function () { if (old) { // execute existing onloads old(); }; for (var ii = 0; arguments.callee.actions.length > ii; ii++) { arguments.callee.actions[ii](); };};window.onload.actions = [];/*------------------------------------------------------------------------------Object: pageGlossary (formerly makeGlossary)Author: Aaron Gustafson (aaron at easy-designs dot net)Creation Date: 27 November 2005Version: 1.0Homepage: http://www.easy-designs.net/code/pageGlossary/License: Creative Commons Attribution-ShareAlike 2.0 License http://creativecommons.org/licenses/by-sa/2.0/Note: If you change or improve on this script, please let us know by emailing the author (above) with a link to your demo page.------------------------------------------------------------------------------*/var pageGlossary = { getFrom: false, buildIn: false, glossArr: [], usedArr: [], init: function( fromId, toId ){ if( !document.getElementById || !document.getElementsByTagName || !document.getElementById( fromId ) || !document.getElementById( toId ) ) return; pageGlossary.getFrom = document.getElementById( fromId ); pageGlossary.buildIn = document.getElementById( toId ); pageGlossary.collect(); if( pageGlossary.usedArr.length < 1 ) return; pageGlossary.glossArr = pageGlossary.ksort( pageGlossary.glossArr ); pageGlossary.build(); }, collect: function(){ var dfns = pageGlossary.getFrom.getElementsByTagName('dfn'); var abbrs = pageGlossary.getFrom.getElementsByTagName('abbr'); var acros = pageGlossary.getFrom.getElementsByTagName('acronym'); var arr = []; arr = arr.concat( dfns, abbrs, acros ); if( ( arr[0].length == 0 ) && ( arr[1].length == 0 ) && ( arr[2].length == 0 ) ) return; var arrLength = arr.length; for( var i=0; i < arrLength; i++ ){ var nestedLength = arr[i].length; if( nestedLength < 1 ) continue; for( var j=0; j < nestedLength; j++ ){ if( !arr[i][j].hasChildNodes() ) continue; var trm = arr[i][j].firstChild.nodeValue; var dfn = arr[i][j].getAttribute( 'title' ); if( !pageGlossary.inArray( trm, pageGlossary.usedArr ) ){ pageGlossary.usedArr.push( trm ); pageGlossary.glossArr[trm] = dfn; } } } }, build: function(){ var h2 = document.createElement('h2'); h2.appendChild( document.createTextNode( 'Page Glossary' ) ); var dl = document.createElement('dl'); dl.className = 'glossary'; for( key in pageGlossary.glossArr ){ var dt = document.createElement( 'dt' ); dt.appendChild( document.createTextNode( key ) ); dl.appendChild( dt ); var dd = document.createElement('dd'); dd.appendChild( document.createTextNode( pageGlossary.glossArr[key] ) ); dl.appendChild( dd ); } pageGlossary.buildIn.appendChild( h2 ); pageGlossary.buildIn.appendChild( dl ); }, addEvent: function( obj, type, fn ){ // the add event function if (obj.addEventListener) obj.addEventListener( type, fn, false ); else if (obj.attachEvent) { obj['e'+type+fn] = fn; obj[type+fn] = function() { obj['e'+type+fn]( window.event ); }; obj.attachEvent( 'on'+type, obj[type+fn] ); } }, ksort: function( arr ){ var rArr = [], tArr = [], n=0, i=0, el; for( el in arr ) tArr[n++] = el + '|' + arr[el]; tArr = tArr.sort(); var arrLength = tArr.length; for( var i=0; i < arrLength; i++ ){ var x = tArr[i].split( '|' ); rArr[x[0]] = x[1]; } return rArr; }, inArray: function( needle, haystack ){ var arrLength = haystack.length; for( var i=0; i < arrLength; i++ ){ if( haystack[i] === needle ) return true; } return false; }};pageGlossary.addEvent( window, 'load', function(){ pageGlossary.init('content','extras'); });</script><!--/* This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com*/--><div style="text-align: left; width: 70%;"><div id="content"><p>Lorem ipsum <dfn title="A Web browser created by Microsoft">Internet Explorer</dfn> dolor sit amet, consectetuer adipiscing elit 18 <abbr title="kilobytes">kB</abbr>, sed diam nonummy nibh euismod tincidunt ut laoreet <acronym title="Hypertext Markup Language">HTML</acronym> dolore magna aliquam erat volutpat.</p></div><div id="extras"><!-- The page glossary is built here --></div><br /><br /><br /><b>Note</b><p>In the last section of the script, the ids for the content and glossary are given, in this example they are 'content' and 'extras'. The script will process the abbreviations, acronyms, and definitions contained in the 'content' id and then place them within the 'extras' id.</p></div>