Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations TouchToneTommy on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Highlight Text on Linked Page

Status
Not open for further replies.
DavidB12345

DavidB12345

Technical User
Mar 14, 2003
4
US
On page with a lot of text, highlighting the specific text focuses the user's attention on the information you want to be seen.

To highlight specific text on a page use the following code:
Page.htm
<HTML>
<HEAD>
<TITLE></TITLE>

<script language=&quot;JavaScript&quot;><!--

function bgon(lnk) {
document.anchors(lnk).style.background= 'lime';
}

<!-- Turn off background color of link for current page -->
function Bg_off(colr2) {
for (var i = 0; i < document.anchors.length; i++)
document.anchors.style.background='';
document.anchors.style.color = colr2;
}
//--></script>
</HEAD>
<BODY>

<A HREF=&quot;#link2&quot; OnClick=&quot;bgon('link2');&quot;>Highlight text on this page</A></A>
<p>
<p>
<A NAME=&quot;link2&quot;>Highlighted from link on this page</A>
</BODY>
</HTML>


I am trying to go from link on 1 page to a second page and highlight text at specific location (anchor). I can pass a variable to page 2 but it is not seen by the code I am using to set the background color:

window.document.anchors(tst).style.background= 'lime';

Any suggestions on how to set the background color on page 2.htm from page 1.htm ??

Thanks.


Page 1.htm

<!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD HTML 3.2//EN&quot;>
<HTML>
<HEAD>
<TITLE></TITLE>

</HEAD>
<BODY>

<script language=&quot;JavaScript&quot;><!--

var variableName = 'hilink'; <!-- name of link to be passed to second page-->

//--></script>

<a href=&quot;highlighted page.htm&quot; onClick=&quot;this.href='highlighted page.htm?' + variableName&quot;>Text on Linked Page</a>

</BODY>
</HTML>


Highlighted Page.htm

<!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD HTML 3.2//EN&quot;>
<HTML>
<HEAD>
<TITLE></TITLE>

<script language=&quot;JavaScript&quot;><!--
var variableName = null;

if (location.search.length > 0)
variableName = location.search.substring(1);

function functionName(text) {

var tst =text <!-- used to pass variable from another page to this page-->
alert(tst); <!--display the variable for testing purposes-->

<!-- set the background color of the linked text - NOT WORKING -->

window.document.anchors(tst).style.background= 'lime';
}

functionName(variableName);

<!-- Set background color of link for current page -->

function bgon(lnk) {
document.anchors(lnk).style.background= 'lime';
}

<!-- Turn off background color of link for current page -->

function Bg_off(colr2) {
for (var i = 0; i < document.anchors.length; i++)
document.anchors.style.background='';
document.anchors.style.color = colr2;
}



//--></script>


</HEAD>
<BODY onLoad=&quot;bgon(tst)&quot;> <!-- load the background color passed from page 1.htm-->


<A HREF=&quot;#link2&quot; OnClick=&quot;bgon('link2');&quot;>Highlight text on this page</A></A>
<p>
<p>

<A NAME=&quot;link2&quot;>Highlighted from link on this page</A>
<p>
<p>

<A NAME=&quot;hilink&quot; OnMouseOver=&quot;Bg_off('black');&quot;>Text highlighted from another page</A>

<p>
<p>

</BODY>
</HTML>
 
Sort by date Sort by votes
David Dorward replied to my question. His solution works on the current as well as the linked page. However, you cannot use frames. I implemented his answer as follows:

Highlighted Page 1 - Doward.htm

<!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD HTML 4.0 Transitional//EN&quot;>
<!-- saved from url=(0042) -->
<?xml version=&quot;1.0&quot; encoding=&quot;ISO-8859-1&quot;?><HTML xml:lang=&quot;en&quot; xmlns=&quot;<HEAD>
<TITLE>Highlight Text on Linked Page and Current Page - David Dorward</TITLE>

<META content=&quot;David Dorward&quot; name=author>
<META content=&quot;(c) David Dorward, 1999-2003&quot; name=copyright>

<STYLE>
.fragment {
COLOR: black; BACKGROUND-COLOR: yellow
}
</style>

<SCRIPT src=&quot;highlight_dorward.js&quot; type=text/javascript></SCRIPT>

</HEAD>

<BODY>


<H1 align=&quot;center&quot;>Highlight Text on Linked Page and Current Page</H1>

<UL>
<LI><A href=&quot;#current&quot;>Current Page</A> </li>
<LI><A href=&quot;highlight page2 - Doward.htm#linked&quot;>Linked Page</A></LI>
</UL>

<H2> <B>Current Page</B></H2>

<P>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<A NAME=&quot;current&quot; OnMouseOver=&quot;fragHL('');&quot;>Code in <B>highlight_dorward.js.</B></A> &nbsp;&nbsp;MouseOver highlighted text turns it off. </P>


</BODY>
</HTML>

Highlighted Page2 - Doward.htm

<!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD HTML 4.0 Transitional//EN&quot;>
<!-- saved from url=(0042) -->
<?xml version=&quot;1.0&quot; encoding=&quot;ISO-8859-1&quot;?><HTML xml:lang=&quot;en&quot; xmlns=&quot;<HEAD>
<TITLE>Highlighted Text on Linked Page and Current Page</TITLE>

<META content=&quot;David Dorward&quot; name=author>
<META content=&quot;(c) David Dorward, 1999-2003&quot; name=copyright>

<STYLE>

.fragment {
COLOR: black; BACKGROUND-COLOR: yellow
}
</style>

<SCRIPT src=&quot;highlight_dorward.js&quot; type=text/javascript></SCRIPT>

</HEAD>

<BODY>


<H1 align=&quot;center&quot;>Highlighted Text on Linked Page and Current Page</H1>

<UL>
<LI><A href=&quot;Highlight Page 1 - Dorward.htm#current&quot;>Starting Page</A> </li>
</UL>


<H2> <A NAME=&quot;linked&quot; OnMouseOver=&quot;fragHL('');&quot;>Anchor from Page 1</A></H2>

<P>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<A NAME=&quot;current&quot; OnMouseOver=&quot;fragHL('');&quot;>Code in <B>highlight_dorward.js</B>. MouseOver highlighted text turns it off. </P>


</BODY>
</HTML>

highlight_dorward.js

//*** This JavaScript library is copyright 2002 by Gavin Kistner and Refinery; //*** Re-use or modification permitted provided the previous line is included

//Adds a new class to an object, preserving existing classes

function AddClass(obj,cName){ KillClass(obj,cName); return obj.className+=(obj.className.length>0?' ':'')+cName; }

//Removes a particular class from an object, preserving other existing classes.

function KillClass(obj,cName){ return obj.className=obj.className.replace(new RegExp(&quot;^&quot;+cName+&quot;\\b\\s*|\\s*\\b&quot;+cName+&quot;\\b&quot;,'g'),''); }

/*********** End of JavaScript Library ***********/

/* Fragment Highlight */

/* Indicates area that has been linked to if fragment identifiers have
* been used. Especially useful in situations where a short fragment
* is near the end of a page. */

var fragHLed = '';
var fragExclude = ('header');

Array.prototype.search = function(myVariable) { for(x in this) if(x == myVariable) return true; return false; }

function fragHL(frag) {
if (fragHLed.length > 0 && document.getElementById(fragHLed)) {
KillClass(document.getElementById(fragHLed),'fragment');
}
if (frag.length > 0 && document.getElementById(frag)) {
fragHLed = frag;
AddClass (document.getElementById(frag),'fragment');
}
}

function fragHLload() {
fragHL(location.hash.substring(1));
}

function fragHLlink() {
if (document.getElementsByTagName) {
var an = document.getElementsByTagName('a');
for (i=0; i<an.length; i++) {
if (an.item(i).getAttribute('href').indexOf('#') >= 0) {
var fragment = an.item(i).getAttribute('href').substring(an.item(i).getAttribute('href').indexOf('#') + 1);
if (fragExclude.search(fragment)) {
var evn = &quot;fragHL('&quot; + fragment + &quot;')&quot;;
var fun = new Function('e',evn);
an.item(i).onclick = fun;
}
}
}
}
}


/* Onload */

window.onload = function(){
fragHLload();
fragHLlink();
};
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

Kennelbloke
  • Locked
  • Question
Can't Get Markers to show on Map
Replies
0
Views
1K
Kennelbloke
Kennelbloke
rogerte
  • Locked
  • Question
Code that works on Windows, Android and Iphone
Replies
0
Views
869
rogerte
rogerte
JScannell
  • Locked
  • Question
Javascript issue on iPhone/iMac platforms
Replies
0
Views
905
JScannell
JScannell
penguinspeaks
  • Locked
  • Question
JS Open print dialog page to print a file
Replies
0
Views
445
penguinspeaks
penguinspeaks
chillay
  • Locked
  • Question
Add Control + F feature to a Web Page
Replies
3
Views
439
feherke
feherke

Part and Inventory Search

Sponsor

Back
Top