Welcome to WebmasterWorld Guest from

Forum Moderators: open

Message Too Old, No Replies

Highlighting Bookmarked Areas



8:45 pm on Jul 30, 2009 (gmt 0)

5+ Year Member

Originally, I went to the only place I could find regarding highlighting bookmarked areas that are hyperlinked, which was on your forum: forum83/8496.htm. Below is how I added that code to my code with my changes. I finally got it to work in IE6 & FF2, except that the fonts all change to black & font size & type change to simple text once it is highlighted. I also discovered something really strange: if you go to my test site online, & you click on any of the 'descriptive' paragraphs (maincontent), right on the browser, the paragraphs change to black & the font properties change to simple text as well! I just happened to click on it by accident.

I thought there might be a conflict between the 'text/css' & the 'text/javascript' elements, so I eliminated one & then switched and eliminated the other—still did the same thing. Do you have any explanation for this? When I used the original javascript script from your site, I needed to adapt it to my page, & perhaps I just can't do what I want it to. I hope this is not the case. Any ideas? Hope you can help. Thanks.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled 1</title>

<link rel="stylesheet" type="text/css" href="bookstore.css" />
<script type="text/javascript" src="maincontent.js" ></script>

function new_win()
// end -->

function addNormalClass() {
this.className = 'normal';

function highlightTarget()
// Collect the relevant items:
var contentsArticles = document.getElementById('maincontent').getElementsByTagName('p')
// Loop through them:
for (var j=0;j<contentsArticles.length;j++) {
if (contentsArticles[j].className == 'highlighted') {
// If one of them has a class name of 'highlighted,' change it to 'normal':
contentsArticles[j].className = 'normal';

// What is the url of the clicked link?
var url = this.href;
// Get everything after the '#' in the link--that's our id
var elementId = url.substring(url.lastIndexOf('#') + 1);
// Get the element:
var currentTarget = document.getElementById(elementId);
// Change its classname:
currentTarget.className = 'highlighted';

function buildContentsArray() {
// First collect all the links to contents and the contents they link to:
var contentsLinks =
var contentsArticles =

// Loop through the links:
for (var i=0;i<contentsLinks.length;i++) {
// Call a function when the links are clicked AND when a highlighted article is clicked:
contentsLinks[i].onclick = highlightTarget;
contentsArticles[i].onclick = addNormalClass;

window.onload = buildContentsArray;


<style type="text/css">
.highlighted { background-color:#008000; }
.normal { background-color:transparent; }


<div id="header">
<img alt="" src="images/BooksInPrintPlusShad.png" width="368" height="60" class="booksInPrintpng" /><br />
<div id="scatleaImage">
<h2>Scattered Leaves</h2>
<p class="styleBookName">by J. D. Roque</p> <br />
<div id="chapterSamples">Samples of Stories
<div id="storyNames">
<ul id="chapters">
<li><a href="#The_Word">The Word</a></li>
<li><a href="#What_Goes_Around">What Goes Around</a></li>
<li><a href="#Breakfast_at_the_Nut_Tree">Breakfast at the Nut Tree</a></li>
<li><a href="#Party_Time">Party Time in Old Greece</a></li>
<li><a href="#Dog_Days_and_Old_Bones">Dog Days and Old Bones</a></li>
<li><a href="#Day_in_the_Life_of_Moonbeam">Day in the Life of Moonbeam</a></li>
<li><a href="#Apples_and_Oranges">Apples and Oranges</a></li>
<li><a href="#First_Cutting">First Cutting</a></li>
<li><a href="#A_Song_For_Sarah_Lee">A Song for Sarah Lee</a></li>
<li><a href="#From_Salon_to_Salvation">From Salon to Salvation</a></li>
<li><a href="#Saving_Harry_Bowles">Saving Harry Bowles</a></li>


<!--This is just an example of the "maincontent"; The Word & What Goes Around-->

<div id="maincontent">
<h2 class="aboutStories">Samples</h2>
<p id="The_Word" class="content"><strong><em> The Word:&nbsp; </em></strong>
&quot;At our house, the penalty for uttering <em>the word</em> is to get your mouth
washed out with the yellow Fels Naphtha soap Ma uses when she mops the wood
floors.<br />
&nbsp;&nbsp;&nbsp; &quot;Erik--he&#39;s my older brother--used to say it all the time, so
he had the cleanest teeth among any of us kids.&quot;</p>

<p id="What_Goes_Around"class="content"><strong><em> What Goes Around:&nbsp; </em></strong>
Although Archibald Diggs departed the company of his bar pals in a well
developed state of inebriation, he could not shake the feeling that he was
pedaling away from something very much amiss back there behind The Yellow
Ribbon Bar &amp; Grill.&nbsp; He had covered less than a mile when curiosity
brought him to a stop against a bus-stop bench.&nbsp; He closed his eyes,
trying to get his thoughts together.&nbsp; <em>What if it isn't...just some
hobo looking to bed down in the weeds?&nbsp; What if it is a terrorist come
to blow Greendale to hell and back right off the map...what if...?</em></p>





10:38 am on Jul 31, 2009 (gmt 0)

10+ Year Member


Maybe I misunderstood, but try changing

function addNormalClass() {
this.className = 'normal';


function addNormalClass() {
this.className = 'content';

HTH, Tom


8:54 pm on Aug 2, 2009 (gmt 0)

5+ Year Member

Thank you so much for your help—the change you suggested did work! .. to a point:

function addNormalClass() {
this.className = 'content'; //changed from 'normal'

And it put me in the direction I needed to go. I had to make 2 more changes:

Javascript file:
// If one of them has a class name of 'highlighted,' change it to 'content':
contentsArticles[j].className = 'content'; //(instead of 'normal')

css file:
.highlighted {
background-color: #CCFFFF;

padding: 0px 20px 0px 20px;
margin: 5px 5px 10px 5px;
font-family: Arial, Helvetica, sans-serif;
color: #BCBCBC;

Everything is working great with one exception:

In the browser, when the user clicks on the link ('chapters'), and the user then happens to click on the highlighted paragraph, the highlight goes away, just like it would if the user had highlighted the paragraph her/himself. I don't understand why that occurs from running the javascript. If you or anyone has an answer, that would be great. Otherwise, I guess I have it working the best that I can. And once again, thanks!


9:53 am on Aug 3, 2009 (gmt 0)

10+ Year Member


Remove this line

contentsArticles[i].onclick = addNormalClass;

HTH, Tom


10:26 pm on Aug 3, 2009 (gmt 0)

5+ Year Member

Once again thanks so much. I greyed out that line & it worked fine--no apparent problems. I'm not sure why it's working without the 'addNormalClass' function. Why did they include it in the original script that I got from online? (Actually, I just went back to check that one & if you click on the highlighted paragraph, it did the same thing.) Just thought if you had any edification, it would be helpful in the future.

Now I need to get back & incorporate it all in my original website page. This is a great forum...


8:49 am on Aug 4, 2009 (gmt 0)

10+ Year Member

You're welcome. I don't know why somebody included that in his script. Perhaps it suited his/her needs.



Featured Threads

Hot Threads This Week

Hot Threads This Month