Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people, just like you, are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
Solved

Highlight anchor target

Posted on 2007-11-21
8
2,471 Views
Last Modified: 2013-11-19
Hi Guys,

I have attached some code that I would like you to look at in Firefox. You will see how it cleverly highlights the targeted anchor. Using the css ":target"

Now, my question is ... is there a way to achieve the same thing in IE using javascript?


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
	ul.references > li:target {
 background-color: #DEF;
}
 
sup.reference:target { 
  background-color: #DEF;
}
</style>
</head>
 
<body>
 
<sup id="ref1" class="reference"><a href="#note1" title="">[1]</a></sup>
<sup id="ref2" class="reference"><a href="#note2" title="">[2]</a></sup>
<sup id="ref3" class="reference"><a href="#note3" title="">[3]</a></sup>
<sup id="ref4" class="reference"><a href="#note4" title="">[4]</a></sup>
<br />
<br />
<br />
<br />
<br />
	<ul class="references">
		<li id="note1"><a href="#ref1">^</a>This is footnote 1</li>
		<li id="note2"><a href="#ref2">^</a>This is footnote 2</li>
		<li id="note3"><a href="#ref3">^</a>This is footnote 3</li>
		<li id="note4"><a href="#ref4">^</a>This is footnote 4</li>			
	</ul>
 
</body>
</html>

Open in new window

0
Comment
Question by:Eternal_Student
  • 5
  • 3
8 Comments
 
LVL 3

Expert Comment

by:DGR81
ID: 20329720
I think the following code will achieve what you asked in javascript. Hope it works :)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Footer</title>
<script type="text/JavaScript">
<!--
function clearbg() {
   document.getElementById('note1').style.backgroundColor = 'white'; //use bgcolor of page
   document.getElementById('note2').style.backgroundColor = 'white';
   document.getElementById('note3').style.backgroundColor = 'white';
   document.getElementById('note4').style.backgroundColor = 'white';
}
function setbg(x) {
	document.getElementById(x).style.backgroundColor = '#DEF';
}
//-->
</script>
</head>
 
<body>
 <div id="Layer1"></div>
<sup><a href="#note1" title="" onclick="clearbg();setbg('note1');">[1]</a></sup>
<sup><a href="#note2" title="" onclick="clearbg();setbg('note2');">[2]</a></sup>
<sup><a href="#note3" title="" onclick="clearbg();setbg('note3');">[3]</a></sup>
<sup><a href="#note4" title="" onclick="clearbg();setbg('note4');">[4]</a></sup>
<br />
<br />
<br />
<br />
<br />
	<ul>
		<div id="note1"><li><a href="#ref1">^</a>This is footnote 1</li></div>
		<div id="note2"><li><a href="#ref2">^</a>This is footnote 2</li></div>
		<div id="note3"><li><a href="#ref3">^</a>This is footnote 3</li></div>
		<div id="note4"><li><a href="#ref4">^</a>This is footnote 4</li></div>			
	</ul>
 
</body>
</html>

Open in new window

0
 
LVL 3

Expert Comment

by:DGR81
ID: 20329737
Line 22 of the code snippet i posted earlier is not required.. It may be removed.
0
 
LVL 18

Author Comment

by:Eternal_Student
ID: 20333801
This needs to be more flexible as it is unclear how many notes there will be in any given page so the javascript clearbg() function needs to work for any div that is passed in and not just a set amount.

Also you will notice on my example that it works both ways, so if you click the anchor link to the footnote it is highlighted and if you click the footnote link back to the anchor link that in return is highlighted.
0
Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
LVL 3

Expert Comment

by:DGR81
ID: 20334630
I've made the neccessary corrections to code.. The function clearbg now takes two parameters.. The first being the no of notes and the second refers to object to which the function is to be applied to (either the footer notes or the reference). The improved code also achieves identical functionality to the code you've posted (to the best of my observation).. :)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Footer</title>
<script type="text/JavaScript">
<!--
function clearbg(i,obj) {
   for(j=1;j<=i;j++)
   {
	 myID = obj + j;
	 document.getElementById(myID).style.backgroundColor = 'white'; //use bgcolor of page
   }
}
function setbg(x) {
 document.getElementById(x).style.backgroundColor = '#DEF';
}
//-->
</script>
</head>
 
<body>
<span id="ref1"><sup><a href="#note1" title="" onclick="clearbg(4,'note');clearbg(4,'ref');setbg('note1');">[1]</a></sup></span>
<span id="ref2"><sup><a href="#note2" title="" onclick="clearbg(4,'note');clearbg(4,'ref');setbg('note2');">[2]</a></sup></span>
<span id="ref3"><sup><a href="#note3" title="" onclick="clearbg(4,'note');clearbg(4,'ref');setbg('note3');">[3]</a></sup></span>
<span id="ref4"><sup><a href="#note4" title="" onclick="clearbg(4,'note');clearbg(4,'ref');setbg('note4');">[4]</a></sup></span>
<br />
<br />
<br />
<br />
<br />
 <ul>
  <div id="note1"><li><a href="#ref1" onclick="clearbg(4,'ref');clearbg(4,'note');setbg('ref1');">^</a>This is footnote 1</li></div>
  <div id="note2"><li><a href="#ref2" onclick="clearbg(4,'ref');clearbg(4,'note');setbg('ref2');">^</a>This is footnote 2</li></div>
  <div id="note3"><li><a href="#ref3" onclick="clearbg(4,'ref');clearbg(4,'note');setbg('ref3');">^</a>This is footnote 3</li></div>
  <div id="note4"><li><a href="#ref4" onclick="clearbg(4,'ref');clearbg(4,'note');setbg('ref4');">^</a>This is footnote 4</li></div>   
 </ul>
 
</body>
</html>

Open in new window

0
 
LVL 18

Author Comment

by:Eternal_Student
ID: 20335187
That seems to work well, could you kindly talk me through how it works. Also I take it the "4" symbolizes how many links we wish to build, I need that to be dynamic so that any amount can be built in any one template.

Thanks DGR81
0
 
LVL 3

Expert Comment

by:DGR81
ID: 20335674
You're welcome. I don't know how far i can go about lecturing an expert so pardon me if i revisit code that you may deem as rudimentary.  Yes, '4' symbolises the no of links.. Now, i followed your naming convention and it is important to adhere to it else the code will not function. For your footer, the list elements are enclosed within a div (layer) tag whose names i took from your code as note1, note2 to note i (i being total no of links) and corresponding references (the links on top) named as ref 1, ref 2 to ref i are enclosed in span (cause display is inline).
At line 8, the function clearbg takes two parameters, i and obj.
For four links, i is four and say obj is 'note'.
If you do a walk throught of the first iteration at line 9, myId is assigned the value of 'note' + '1' which is 'note1'. We subsequently obtain this object (in this case a layer) by using the function getElementById and set it's background color to white. In the following iterations, similarly note2, note3 and note4's backgrounds are also set to white.
 Similarly when we execute say clear(4,'ref'), it takes the backgrounds colors of elements ref1,ref2,ref3 and ref4 and sets it to white.

To make the function truly generic, you can add a third parameter of color which will dictate what color the default background will be.

Set background (setbg) is fairly simple, but we've hard coded the highlight color, we can make that more suitable for you by making the following change:
function setbg(x, hcolor) { //hcolor is the highlight color
 document.getElementById(x).style.backgroundColor = hcolor;
}
And when the function is called, we add the parameter:
setbg('note1', '#DEF');
This way you can set different highlight colors for certain notes without the need to create another function.

I hope that was helpful.
0
 
LVL 18

Author Comment

by:Eternal_Student
ID: 20337954
Im not quite an expert on Javascript though ;-)

That makes perfect sense, thanks for the explanation.

My only problem is that the number of notes/footnotes is undetermined and could be anything from 100 to just 1 and anywhere in between. I don't think there is a way I can calculate that number easily to pass into the function. Is there anyway this can be done without needing to know that value?

Thanks again.
0
 
LVL 3

Accepted Solution

by:
DGR81 earned 500 total points
ID: 20339830
This revised code takes care of that dependency.. :)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Footer</title>
<script type="text/JavaScript">
<!--
function clearbg(obj) {
   for(j=1;;j++)
   {
	 myID = obj + j;
	 if(myObj = document.getElementById(myID))
	 {
	 		myObj.style.backgroundColor = 'white'; //use bgcolor of page
	 }
	 else
	 	break;
   }
}
function setbg(x) {
 document.getElementById(x).style.backgroundColor = '#DEF';
}
//-->
</script>
</head>
 
<body>
<span id="ref1"><sup><a href="#note1" title="" onclick="clearbg('note');clearbg('ref');setbg('note1');">[1]</a></sup></span>
<span id="ref2"><sup><a href="#note2" title="" onclick="clearbg('note');clearbg('ref');setbg('note2');">[2]</a></sup></span>
<span id="ref3"><sup><a href="#note3" title="" onclick="clearbg('note');clearbg('ref');setbg('note3');">[3]</a></sup></span>
<span id="ref4"><sup><a href="#note4" title="" onclick="clearbg('note');clearbg('ref');setbg('note4');">[4]</a></sup></span>
<br />
<br />
<br />
<br />
<br />
 <ul>
  <div id="note1"><li><a href="#ref1" onclick="clearbg('ref');clearbg('note');setbg('ref1');">^</a>This is footnote 1</li></div>
  <div id="note2"><li><a href="#ref2" onclick="clearbg('ref');clearbg('note');setbg('ref2');">^</a>This is footnote 2</li></div>
  <div id="note3"><li><a href="#ref3" onclick="clearbg('ref');clearbg('note');setbg('ref3');">^</a>This is footnote 3</li></div>
  <div id="note4"><li><a href="#ref4" onclick="clearbg('ref');clearbg('note');setbg('ref4');">^</a>This is footnote 4</li></div>   
 </ul>
 
</body>
</html>

Open in new window

0

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…
The viewer will learn how to count occurrences of each item in an array.

840 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question