homepage Welcome to WebmasterWorld Guest from 54.197.183.230
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

    
Highlighting Bookmarked Areas
rutabaga

5+ Year Member



 
Msg#: 3962728 posted 8:45 pm on Jul 30, 2009 (gmt 0)

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.

<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="bookstore.css" />
<script type="text/javascript" src="maincontent.js" ></script>

function new_win()
{
window.open("buynow1.html","winname","height=206,width=243,left=300,top=300,xscreen=300,yscreen=300");
}
// 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 =
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;

</script>

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

</head>

<body>
<div id="header">
<img alt="" src="images/BooksInPrintPlusShad.png" width="368" height="60" class="booksInPrintpng" /><br />
&nbsp;
<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>
<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>

</ul>
</div>
</div>
</div>

<!--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>

</div>

</body>

</html>

 

Arno_Adams

5+ Year Member



 
Msg#: 3962728 posted 10:38 am on Jul 31, 2009 (gmt 0)

Hi,

Maybe I misunderstood, but try changing

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

To:


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

HTH, Tom

rutabaga

5+ Year Member



 
Msg#: 3962728 posted 8:54 pm on Aug 2, 2009 (gmt 0)

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;

added:
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!

Arno_Adams

5+ Year Member



 
Msg#: 3962728 posted 9:53 am on Aug 3, 2009 (gmt 0)

Hi,

Remove this line

contentsArticles[i].onclick = addNormalClass;

HTH, Tom

rutabaga

5+ Year Member



 
Msg#: 3962728 posted 10:26 pm on Aug 3, 2009 (gmt 0)

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...

Arno_Adams

5+ Year Member



 
Msg#: 3962728 posted 8:49 am on Aug 4, 2009 (gmt 0)

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

Tom

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved