Skip Navigation | Groups

This site uses cookies- for more information see the Cookie Policy | Continue

Tags

General HTML

2008073106 Email to Ronx
 

Highlighting and Bookmarks

How to highlight a word in a bookmarked paragraph


How to highlight a word in a target section

It is sometimes desirable to create a hyperlink to a (bookmarked) segment of a page, and highlight a particular word in that segment. This requirement can arise when using a directory of names, and the required name is buried in a paragraph or report. It will be necessary to link to the beginning of the paragraph and highlight the name within it.

Using server-side code this can be made an easy task: parse the page for the bookmark, then look for the name and replace with html that highlights it.

Using plain HTML and JavaScript this becomes more difficult and has to be designed into the page.

On the target page, each paragraph must be bookmarked. There are three ways to do this:

Use an Anchor such as:

  1. <p><a name="mybkmark">This text</a> is the start of the paragraph ...
  2. <p><a name="mybkmark"></a>This text is the start of the paragraph ...
  3. <p id="mybkmark">This text is the start of the paragraph ...

1 is a named anchor, and is the most common method.

2 is also a named anchor, but there is no text within the anchor. This may fail in some browsers.

3 uses the id attribute for the paragraph. This will work with any id attribute, but will fail in older browsers such as Netscape 4 and IE5 (but does work in IE5.5, though).

Simple links to such bookmarks will be similar to:

  • <a href="#mybkmark">link to bookmarked paragraph</a> if the paragraph is on the same page.
  • <a href="otherpage.htm#mybkmark">link to bookmarked paragraph on otherpage.htm</a> if the paragraph is on another page.

However, the above links will not highlight anything in the target paragraph.

In the target paragraph, every word that is likely to need highlighting has to be prepared in advance.

For example, in the paragraph below the words Fermi and Speranza have been prepared for highlighting. The code for this takes the form:

<span id="bookmark_Fermi">Fermi</span> and <span id="bookmark_Speranza">Speranza</span> respectively. The paragraph is bookmarked using <p><a name="bookmark"></a>Paragraph text starts here ...

The links (in the same page) will now be similar to:

<a href="#bookmark" onclick="FP_changeProp(/*id*/bookmark_Fermi,1,'style.background','yellow');"

The onclick event in the links call a JavaScript function that changes the styling for the corresponding <span..> tag, making the background yellow. The JavaScript is actually created using a FrontPage/Expression Web  Change Property behaviour.

These links show how the words are highlighted:

Fermi

<a href="#mybkmk" onclick="FP_changeProp(/*id*/'mybkmk_Fermi',1,'style.background','yellow');">Fermi</a>

Speranza

<a href="#mybkmk" onclick="FP_changeProp(/*id*/'mybkmk_Speranza',1,'style.background','yellow');">Speranza</a>


Cosa delle a. Prestasse e manifestamente etterno apparire furon sí fatica nel in come. Nel della in volta sogiacere nel noi e. Come noi alla procuratore dovendo e ci verso. Di etterno che eterni a mente. Benignita mortali sí. Audaci apparire e medesimi del da di furono al quale intendo. Fermi vostro volta tanto. Pregato pregato delle cose piú. Lui sempre dea sue prestasse alla prieghi.

Che come e vostro propria piú al giudice quali parte quel. Speranza che del fatica modo i di. Che suoi liberalita nel lui modo e di noia mortali.


The following are links to names on another page. An extra difficulty arises here because the bookmark has to be extracted and the name highlighted on the new page - a simple link to a bookmark will not work as easily.

In this case the link incorporates a querystring as well as the book mark. As before, the bookmark opens the page at the correct paragraph, and JavaScript uses the querystring to highlight the name. The page preparation is the same as described above, but additional JavaScript is required to extract and evaluate the querystring.

The first link is:

<a href="/fp/articles/2008/08/03/02/Bookmarks_and_highlighted_words.aspx?id=joannebrenda#joanne">Brenda in Joanne&#39;s bit</a>

The JavaScript (in the next page) used to evaluate the querystring (id=joannebrenda) is:

function getParm(string,parm) {
// returns value of parm from string
var startPos = string.indexOf(parm + "=");
if (startPos > -1) {
startPos = startPos + parm.length + 1;
var endPos = string.indexOf("&",startPos);
if (endPos == -1) {
var endPos = string.indexOf("#",startPos);
if (endPos == -1) {
endPos = string.length;
}
}
return unescape(string.substring(startPos,endPos));
}
return '';
}
function init() { //starts the querystring evaluation 
var passed = location.search.substring(1).replace("+"," ");
var xclass = getParm(passed,'id');
if (xclass != "") FP_changeProp(/*id*/xclass,1,'style.background','yellow')
}
window.onload=init;//starts the init function when the page loads.
</script>

Brenda in Joanne's bit on next page

Brenda in Sarah's bit on next page