This may be a rather tall order, but I've not found a request phrased quite like this in the archives and I wish to be as descriptive as I can with what I'm looking for... In short, I'd like to make use of a feature very similiar to the "Intellitext" techology found on this and various other sites for an integrated glossary I'm trying to build for educational purposes.
Suppose we could upload a certain source file onto the server (I've no idea what scripting language would be best for this); this file would contain an easily editable listing of pre-defined WORDS or PHRASES along with URLs to their definitions located elsewhere on the web site. Now further suppose a snippet of code pointing to this source file could be inserted between the <head> or <body> tags of each HTML page on the web site. The end effect would be a scan of each HTML page for those predefined strings and automatically linking each WORD or PHRASE to its anchor on another HTML web page. This feature would also be smart enough to "know" that if a WORD or PHRASE is found already within an HTML tag, it won't mangle that code by attempting to nest another link within a link, as it were... (for this reason, I've found various Search & Replace utilities to be inadequate)
I'd also like to be able to edit the "source file" to include a unique tooltip element for each WORD or PHRASE.
This would save me HOURS worth of work if I could make use of this resource. Thank you in advance for helping me with this!
This Question has been solved and asker verified All Experts Exchange premium technology solutions are available to subscription members.
Experts Exchange has been collecting answers to technology questions since 1996…3 million and counting! If you have a question, chances are we already have your answer.
If you can't find the exact answer you're looking for, ask our exclusive community of 50,000 experts. You’ll get a personalized answer from a trusted professional.
Thousands of free tech tips, tricks, how-to’s and tutorials are available in our peer reviewed articles section. See for yourself how smart our experts are, no login required.
Save solutions to your questions, answers you’ve discovered through searching plus helpful articles in your personal knowledgebase for easy future access.
Access the answers to your technology questions today.
30-day free trial. Register in 60 seconds.
Members of the expert community talk about why the experience at Experts Exchange is different than what you will find anywhere else.
Try it out and discover for yourself.
30-day free trial. Register in 60 seconds.
Join the community of experts here and help other tech pros by answering question in your area of expertise. You can earn FREE access to all Experts Exchange's premium features and resources.
Wow!
This is incredible... This alone completely satisfies the question! I've got to give this an A... Thank you so much!
Two more things though if you don't mind...
How should I edit the javascript code in your example if I wanted to forgo the tooltip altogether?
How should I edit the code if I wanted to highlight only the first instance of the term within an article?
Again, thanks for your help!
To eliminate the tool tip, we remove title="'+terms[idx][1]+'"
function highlightGlossaryTerms(){
var temp = document.getElementById('t
var tmpBody;
for (var idx=0;idx<terms.length;idx
tmpBody=temp.split(terms[i
temp=tmpBody[0];
for (var jdx=1;jdx<tmpBody.length;j
temp+='<a href="'+terms[idx][2]+'" class="terms">'+terms[idx]
}
document.getElementById('t
}
To highlight the first instance only we will just add a check to the code where we put the page back together:
just new code:
if (jdx=1)
// first term only
temp+='<a href="'+terms[idx][2]+'" class="terms" title="'+terms[idx][1]+'">
[idx][0]+'<\/a>'+tmpBody[j
else
// have to put the term back because we split on it.
temp+=terms[idx][0] + tmpBody[jdx];
function highlightGlossaryTerms(){
var temp = document.getElementById('t
var tmpBody;
for (var idx=0;idx<terms.length;idx
tmpBody=temp.split(terms[i
temp=tmpBody[0];
for (var jdx=1;jdx<tmpBody.length;j
if (jdx=1)
temp+='<a href="'+terms[idx][2]+'" class="terms" title="'+terms[idx][1]+'">
else
temp+=terms[idx][0] + tmpBody[jdx];
}
document.getElementById('t
}
The modifications to the original routine were written in this form without testing, but I don't think I made a typo. (But you never know until you test it <smile>).
If you confine the search to the content and put your content inside a divide, like I did, this will be faster. Change the line:
var temp = document.getElementById('t
so 'theExample' is replaced by the ID of the container for your content.
e.g.
<HTML>
<HEAD>
...
</HEAD>
<BODY>
... menu stuff
... more navigation
<div id="mainContent">
the bulk of your page content
</div>
... footer
</BODY>
</HTML>
If you do not segregate your content to search this way, you'll be searching and replacing on the entire document and finding a search term in the head would not be good.
So, then you would have to modify that line to
var tempCollection = document.body.getElementsB
(and assuming only one body tag)
var temp = tempCollection[0].innerHTM
Not pretty. So, if you have a lot of existing pages, and you don't want to add a container divide for your main content...at least add an ID to the body.
e.g. <body id="main" ....>
then you can just do:
var temp = document.getElementById('m
Whatever ID you use...you need to use the same ID for each page if you want to call this as an include, and not have to modify it for each page, or modify the function to take a parameter for the container's ID.
A note about the original question....you said you didn't want to mess up links, and the original does not look for <a> tags. The way I write my pages it is very unlikly there would be a link in the body, (but not impossible.)
I'll post a modification in a little while (little while meaning when I finish writing it) to avoid anchors in the body.
Regards,
Rod
"I'll post a modification in a little while (little while meaning when I finish writing it) to avoid anchors in the body."
Amazing... you totally anticipated my next question. I'm calling the javascript as an include, and it works like a dream. But yes, I did find that some key terms within the titles of book recommendations are coming out somewhat mangled... Perhaps some sort of exclusionary feature could be made.
Again, thank you for your time in this!
Skip hyperlinks:
http://www.rodsdot.com/ee/
<script type="text/javascript">
<!--
var terms = new Array();
terms[0] = ['FBI','Federal Bureau of Investigation','definition
terms[1] = ['e-mail','electronic mail','definition.asp#emai
terms[2] = ['phony','not true, fake.','definition.asp#pho
function highlightGlossaryTerms(){
// AVOID <a...>..</a> tags
var temp = document.getElementById('t
var tmpBody = new Array();
// segregate the anchors
var cnt=0;
var inA=false;
var lookIn='';
var subBody;
var tmpStr;
while (temp.length>0) {
if ((temp.indexOf('</A>')>-1)
if (inA) {
tmpBody[cnt]=temp.substr(0
temp=temp.substr(temp.inde
inA=false;
cnt+=1;
}else{
tmpBody[cnt]=temp.substr(0
temp=temp.substr(temp.inde
inA=true;
lookIn+=''+cnt+',';
cnt+=1;
}
}else{
tmpBody[cnt]=temp;
temp='';
lookIn+=''+cnt+',';
}
}
lookIn=lookIn.substr(0,loo
for (var idx=0;idx<terms.length;idx
for (var hdx=0;hdx<tmpBody.length;h
if (lookIn.indexOf(hdx)>-1) {
subBody=tmpBody[hdx].split
tmpStr=subBody[0];
for (var jdx=1;jdx<subBody.length;j
tmpStr+='<a href="'+terms[idx][2]+'" class="terms" title="'+terms[idx][1]+'">
}
tmpBody[hdx]=tmpStr;
}
}
}
tmpStr='';
for (var idx=0;idx<tmpBody.length;i
tmpStr+=tmpBody[idx];
document.getElementById('t
}
//-->
</script>
Mr Divilbiss,
This has been absolutely the most helpful javascript code I've seen yet. I know you've been most patient with me, but I hope to share a work-around to one of the expected idiosyncrasies, and then after ask something else about this very latest feature you've incorporated into the original version.
Suppose one glossary entry was the word "format". The "format" in inFORMATion would be linked. One quick improvisation was to mangle the HTML text with an arbitrary (and inert) tag to render the Key Term "invisible" to the javascript function. Something like:
info<null>rma</null>tion
I was immensely pleased to see this work. But now suppose I were to manually edit the HTML to read:
<i><a href="somerandompage.html"
While the new version you've just posted works wonderfully in ignoring the "Format" within the title (provided there's a case-sensitive match). The rendered page would look like this (simulating italicizing, of course):
The Ingenius Format: Why THis is The Best Script."<
I wondered where the hanging < came from, and later discovered that whatever character immediately followed the </a> tag would be rendered visible on my browser (IE 6 & Firefox 1.03), even if that charachter is part of another HTML tag. If instead I placed a non-HTML related character following the </a> tag, it would simply be replicated. For example, if the HTML were manually coded this way:
"<a href="somerandompage.html"
The rendered page would display this instead:
"The Ingenius Format: Why This is The Best Script""
The only way I've found to remove any lingering text is to just leave an extra space after the </a>. It looks like this is something that might be fixed just by changing one small aspect of the javascript, but I can't seem to pinpoint exactly where.
Thanks for all your help. Had I been given the option I would have done better than offer 500 pts. for your efforts.
Does this do the trick properly?
FROM THIS:
while (temp.length>0) {
if ((temp.indexOf('</A>')>-1)
if (inA) {
tmpBody[cnt]=temp.substr(0
temp=temp.substr(temp.inde
inA=false;
cnt+=1;
}else{
tmpBody[cnt]=temp.substr(0
temp=temp.substr(temp.inde
inA=true;
lookIn+=''+cnt+',';
cnt+=1;
TO THIS:
while (temp.length>0) {
if ((temp.indexOf('</A>')>-1)
if (inA) {
tmpBody[cnt]=temp.substr(0
temp=temp.substr(temp.inde
inA=false;
cnt+=1;
}else{
tmpBody[cnt]=temp.substr(0
temp=temp.substr(temp.inde
inA=true;
lookIn+=''+cnt+',';
cnt+=1;
>Suppose one glossary entry was the word "format". The "format" in inFORMATion would be linked. One quick improvisation was to mangle the HTML text with an arbitrary (and inert) tag to render the Key Term "invisible" to the javascript function. Something like:
You could also make your entry 'format ' (trailing space) thus forcing it to break on a whole word boundary.
>The only way I've found to remove any lingering text is to just leave an extra space after the </a>. It looks like this is something that might be fixed just by changing one small aspect of the javascript, but I can't seem to pinpoint exactly where.
Yes you founf the right area...
The Best Script."</a></i>
-------------------^--^
12345
tmpBody[cnt]=temp.substr(0
temp=temp.substr(temp.inde
might need to be
tmpBody[cnt]=temp.substr(0
temp=temp.substr(temp.inde
Business Accounts
Answer for Membership
by: rdivilbissPosted on 2005-08-05 at 17:19:50ID: 14612571
What I would do is create a list of these words and their associated tooltips, which I would keep in a database and retrieve into a client side array when the page loads.
However, lets assume you do not have a database...then you can do this all client side and you won't have to modify all your pages, except to add a couple of lines to each.
See live example: http://www.rodsdot.com/ee/
You can put all the search terms in a single file along with the JavaScript function to highlight those terms. That file can be included in each page with:
<script type="text/javascript" src="glossary.js"></script
then at the bottom of each page, just before the closing body tag </BODY> add,
<script type="text/javascript">hig
Just two lines.
If you want to, you can use server side code to retrieve the glossary terms from a database, but really, that probably will not be faster, as a JavaScript include file is just text and loads very fast, even if you had thousands of terms.
Regards,
Rod