Forum Moderators: not2easy
I've seen many ways that people have highlighed keywords relevant to the search performed, but all I need to do is highlight one word if it appears.
Does anyone know how to do this? with CSS? or javascript possibly?
to get an idea of the search on my site go to [extech.com...] and enter something like meter in the search box.
Thanks
Are your pages static or dynamic?
My thinking is that there must be a way to use CSS or javascript to say that if a certain word appears on the page (in my case the word "datasheet") it would appear highlighted (in my case appear in orange bold)
I really appreciate all who are responding here. I've been posting this question on various forums with no luck.
THANKS
<span style="background:orange">[i]your_keyword_here[/i]</span>
In my research i thought maybe I could use some sort of a "document.getElementById" based upon the specific text "datasheet" Something like what appears here [webmasterworld.com...]
Problem is that I don't know anything about writing this kind of script.
Oh and my results page is dynamic, i know I said it was static before, but that's just the page with the search box on it.
so it's one of the dynamic words that turns up on the results page which I need to highlight, based on whether it appears in the results or not.
<!-- ResultItemStart -->
some info here about the <span class="searchHighlight">meter</span> keyword
<!-- ResultItemEnd -->
searchHighlight<edit reason>clarified which link was viewed</edit>
[edited by: coopster at 2:38 pm (utc) on Dec. 5, 2003]
Yes the "searchhighlight" thing is something Atomz puts in for me.
The thing is the even if someone does a search for "meter" on the site I want the results page to not only highlight the keyword which was searched upon but also anytime the word "datasheet" appears in the dynamic results page.
If there a was to write either some CSS or javascipt which would search that results page each time for the text "datasheet" and then highlight it in orange?
I wish I could be more clear. thanks for sticking with me to elp figure this out :)
I found this site which explains how to highlight words with javascript based on what search engine the page was refered from. [kryogenix.org...]
In my case though I don't need to based my results on where the user came from, but more on what text is on the page.
Does anyone know how to use the "getElementById" attribute? I was wondering if i could use this to say not by "Id" but by what text appears on the page.
"You need to find that word as the text is written to the page - on the server side you would have to manipulate the results of the search query.
JavaScript is client side - meaning once text is part of an HTML page, there is very little, if anything, you can do to it. You could search for the word with JavaScript, but once you found it there would be nothing you could do to highlight it. Since you cant access the word with JavaScript, you cant really do anything with CSS for the same reason."
So now I understand a bit why I need to do this with Perl. Only problem is I don't know how to code Perl nor manipulate any Perl code. would anyone be able to help? I hate asking people to take the time to write this for me but unfortunately I don't have the knowledge to do it myself.
I had a friend check out this disscussion and here was his response:"You need to find that word as the text is written to the page - on the server side you would have to manipulate the results of the search query.
JavaScript is client side - meaning once text is part of an HTML page, there is very little, if anything, you can do to it. You could search for the word with JavaScript, but once you found it there would be nothing you could do to highlight it. Since you cant access the word with JavaScript, you cant really do anything with CSS for the same reason."
highlighting text with CSS/javascript
<html><head><title>Datasheet</title>
<!-- First off, let's give this fella his propers:
[kryogenix.org...] -->
<script type="text/javascript">
function highlightWord(node,word) {
if (node.hasChildNodes) {
var hi_cn;
for (hi_cn=0;hi_cn<node.childNodes.length;hi_cn++) {
highlightWord(node.childNodes[hi_cn],word);
}
}
if (node.nodeType == 3) {
tempNodeVal = node.nodeValue.toLowerCase();
tempWordVal = word.toLowerCase();
if (tempNodeVal.indexOf(tempWordVal)!= -1) {
pn = node.parentNode;
if (pn.className!= "searchword") {
nv = node.nodeValue;
ni = tempNodeVal.indexOf(tempWordVal);
before = document.createTextNode(nv.substr(0,ni));
docWordVal = nv.substr(ni,word.length);
after = document.createTextNode(nv.substr(ni+word.length));
hiwordtext = document.createTextNode(docWordVal);
hiword = document.createElement("span");
hiword.className = "searchword";
hiword.appendChild(hiwordtext);
pn.insertBefore(before,node);
pn.insertBefore(hiword,node);
pn.insertBefore(after,node);
pn.removeChild(node);
}
}
}
}
function googleSearchHighlight() {
if (!document.createElement) return;
ref = document.referrer;
highlightWord(document.getElementsByTagName("body")[0],'datasheet');
}
window.onload = googleSearchHighlight;
</script>
<style type="text/css">
span.searchword {
font-weight: bold;
color: #FF9900;
}
</style></head><body><p>
<!-- ResultItemStart -->
Here is the text that is returned to you!<br />
Thank you for visiting our page and searching for meters.<br />
There is a great datasheet about meters you may want to check out as well!<br />
<!-- ResultItemEnd -->
</p></body></html>
I used the code in the link you provided (modified his js to meet your particular needs).
Thank you so so much for figuring that out and posting an example of the working code!
I don't know how to repay you but offer my thanks
One thig is that i wish it worked in Netscape 4.7 on the PC. Oh well can't ask for it all!
This code is only going to work in user agents that support it, and that means they have to have javascript enabled in their browser settings. I've developed my share of js, some of it fairly advanced, but all of it short of genius ;) Thanks for the compliment though.
I'm more drawn to server-side development and solutions :)
