• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 2477
  • Last Modified:

Highlight anchor target

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
Eternal_Student
Asked:
Eternal_Student
  • 5
  • 3
1 Solution
 
DGR81Commented:
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
 
DGR81Commented:
Line 22 of the code snippet i posted earlier is not required.. It may be removed.
0
 
Eternal_StudentAuthor Commented:
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
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
DGR81Commented:
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
 
Eternal_StudentAuthor Commented:
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
 
DGR81Commented:
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
 
Eternal_StudentAuthor Commented:
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
 
DGR81Commented:
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

[Webinar] Cloud and Mobile-First Strategy

Maybe you’ve fully adopted the cloud since the beginning. Or maybe you started with on-prem resources but are pursuing a “cloud and mobile first” strategy. Getting to that end state has its challenges. Discover how to build out a 100% cloud and mobile IT strategy in this webinar.

  • 5
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now