?
Solved

Highlight anchor target

Posted on 2007-11-21
8
Medium Priority
?
2,475 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
[X]
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
  • 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
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

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

7 Extremely Useful Linux Commands for Beginners

Just getting started with Linux? Here's a quick start guide that has 7 commands that we believe will come in handy.

Question has a verified solution.

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

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.
JavaScript has plenty of pieces of code people often just copy/paste from somewhere but never quite fully understand. Self-Executing functions are just one good example that I'll try to demystify here.
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…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…
Suggested Courses

762 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