thegentleman
IS-IT--Management
Hi,
I've pieced together the following code from various sources throughout tek-tips but have hit on a couple of problems. The function of this code is to scan the text of a loaded page for specific keywords - when they are found it 'draws' a hidden table with a discription of the word that appears when the user moves their mouse over the word (similar to the Google content adwords function).
Below is the code as it now stands:
The two variables sText and sDesc are generated from a MySQL database using PHP. The variables contain the keyword or words and the description for that word respectively. Each keyword or description is seperated by a pipe |.
The code works fine as it is but I have two issues that I need to resolve and so far have had no joy:
1. I only want the code to scan one particular block of text - not the whole page. For example at the moment the code scans titles and footer text but I don't want it to do this. If I place a DIV tag around the block of text I want to scan how can I modify the code above to scan just the text within that DIV tag?
2. If there are a lot of words to scan for (in the sText and sDesc variables), the page loads and then hangs until the scan is complete. When the browser is hanging the user cannot do anything - they cannot scroll or click on any links. Is there any way of stopping the browser from hanging while the javascript runs? The script is called in the <body> tag of the page using the onload() command. Will calling the code elsewhere prevent the browser from hanging? I have seen the Google adwords scan working in realtime and this doesn't prevent the user from doing anything whilst it runs, is there any way to mimic this?
Thank's in advance,
~tg
I've pieced together the following code from various sources throughout tek-tips but have hit on a couple of problems. The function of this code is to scan the text of a loaded page for specific keywords - when they are found it 'draws' a hidden table with a discription of the word that appears when the user moves their mouse over the word (similar to the Google content adwords function).
Below is the code as it now stands:
Code:
<script language="javascript">
var sHighlightClass, oReg;
var oTran = new Array;
oTran[">"] = ">"
oTran["<"] = "<"
oTran[" "] = " "
function moveElement(element) {
theElement = document.getElementById(element);
theElement.style.left = event.clientX + document.body.scrollLeft;
theElement.style.top = event.clientY + document.body.scrollTop - 40;
}
function openElement(element) {
theElement = document.getElementById(element);
theElement.style.visibility = "visible";
}
function closeElement(element) {
theElement = document.getElementById(element);
theElement.style.visibility = "hidden";
}
function highlightSearchTerms() {
sText = "";
sDesc = "";
oReg = new RegExp;
sta = sText.split("|");
stb = sDesc.split("|");
for (var i = 1; i < sta.length; i++) {
oReg.compile( "(" + sta[i] + ")", "ig" );
highlightSearchRecursive( document.body, sta[i], stb[i] );
}
}
function highlightSearchRecursive( oDOMNode, STerm, SDescription ) {
for( var i=0; i< oDOMNode.childNodes.length; i++ ) {
oChild = oDOMNode.childNodes[i];
if (oChild.nodeType==3) {
sText = oChild.nodeValue;
if (sText.search( oReg ) > -1) {
sText= oChild.nodeValue.replace( /^ |[<>]/g, entityConvert );
oSpan = document.createElement("SPAN");
oSpan.innerHTML = sText.replace( oReg, "<span class='glossary' onmouseover='openElement(" + i + ");moveElement(" + i + ")', onmouseout='closeElement(" + i + ");'>" + "$&" + "</span> <div id='" + i + "' class='glossaryterm'><table width='200' cellpadding='0' cellspacing='0' border='0'><tr><td bgcolor='#000000'><table width='200' cellpadding='2' cellspacing='1' border='0'><tr><td bgcolor='#ACCAE4'><p><b>" + STerm + "</b></p></td></tr><tr><td bgcolor='#FFFFFF'><p>" + SDescription + "</p></td></tr></table></td></tr></table></div>" );
oDOMNode.replaceChild( oSpan, oChild );
}
}
else
highlightSearchRecursive( oChild, STerm, SDescription );
}
}
function entityConvert( sPart ){
return( oTran[sPart] );
}
</script>The two variables sText and sDesc are generated from a MySQL database using PHP. The variables contain the keyword or words and the description for that word respectively. Each keyword or description is seperated by a pipe |.
The code works fine as it is but I have two issues that I need to resolve and so far have had no joy:
1. I only want the code to scan one particular block of text - not the whole page. For example at the moment the code scans titles and footer text but I don't want it to do this. If I place a DIV tag around the block of text I want to scan how can I modify the code above to scan just the text within that DIV tag?
2. If there are a lot of words to scan for (in the sText and sDesc variables), the page loads and then hangs until the scan is complete. When the browser is hanging the user cannot do anything - they cannot scroll or click on any links. Is there any way of stopping the browser from hanging while the javascript runs? The script is called in the <body> tag of the page using the onload() command. Will calling the code elsewhere prevent the browser from hanging? I have seen the Google adwords scan working in realtime and this doesn't prevent the user from doing anything whilst it runs, is there any way to mimic this?
Thank's in advance,
~tg
