Solved

Highlight anchor target

Posted on 2007-11-21
8
2,474 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
Transaction Monitoring Vs. Real User Monitoring

Synthetic Transaction Monitoring Vs. Real User Monitoring: When To Use Each Approach? In this article, we will discuss two major monitoring approaches: Synthetic Transaction and Real User Monitoring.

 
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

Independent Software Vendors: 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!

Question has a verified solution.

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

So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

688 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