Forum Moderators: open
This is the html code:
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled 1</title>
<link rel="stylesheet" type="text/css" href="bookstore1.css" />
<script type="text/javascript" src="maincontent.js" ></script>
</head>
<body>
<div id="header">
<!-- <img alt="" src="images/BooksInPrintPlusShad.png" width="368" height="60"
class="booksInPrintpng" /><br /> -->
<div id="scatleaImage">
<h2>Scattered Leaves</h2>
</div>
<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>
</ul>
</div>
</div>
</div>
<div id="maincontent">
<h2 class="aboutStories">Samples</h2>
<p id="The Word" class="content"><strong><em> The Word: </em></strong>
"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 />
"Erik--he's my older brother--used to say it all the time, so
he had the cleanest teeth amoung any of us kids."</p>
<p id="What Goes Around" class="content"><strong><em> What Goes Around: </em></strong>
"Although Archibald Diggs departed the company of this bar pals in a well
developed state of ineriation, he could not shake the feeling that he was
pedaling away from something very much amiss back there behind The Yellow
Ribbon Bar & Grill. He had covered less than a mile when curiosity
brought him to a stop against a bus-stop bench. He closed his eyes,
trying to get his thoughts together. <em>What if it isn't...just some
hobo looking to bed down in the weeds? What if it is a terrorist come
to blow Greendale to hell and back right off the map...what if...?"</em> </p>
</div>
</body>
</html>
This is the javascript:
function addNormalClass() {
this.className = 'content';
}
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 = 'content';
}
}
// 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 =
document.getElementById('chapters').getElementsByTagName('a');
var contentsArticles =
document.getElementById('maincontent').getElementsByTagName('p');
// 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;
This is the .highlighted class in an external css file:
.highlighted {
background-color: #CCFFFF;
padding: 0px 20px 0px 20px;
margin: 5px 5px 10px 5px;
font-family: Arial, Helvetica, sans-serif;
color: #BCBCBC;
}
I don't see anything there that looks IE proprietary. However, there is a missing semicolon at the end of this line:
var contentsArticles = document.getElementById('maincontent').getElementsByTagName('p')
I wonder if IE is just being more lenient with that line? Do you have Firebug installed in Firefox? If so, perhaps you could post any error messages that crop up for us to take a look at. :)
Yes, I do have Firebug & have been using it, but I cannot understand why it isn't capturing the .highlighted css code as is IE. This is the error message I get in Firebug
(I don't know what \r\n means, do you?):
currentTarget is null
highlightTarget()maincontent.js (line 22)
currentTarget.className = 'highlighted';\r\n
In Microsoft Script Editor it expresses the value of .classname which is highlighted; whereas I can't find an equivalent in Firebug for .classname.
Hope this clarifies it—and hope you can understand why Mozilla won't highlight the paragraph. Thanks again.
Add a single letter before the numbers:
<div id="a5"></div>
Then in your code, change this line:
var currentTarget = document.getElementById(elementId);
to:
var currentTarget = document.getElementById('a'+elementId);
Should fix it up. :)
