Solved

Highlight anchor target

Posted on 2007-11-21
8
2,468 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
Comment Utility
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
Comment Utility
Line 22 of the code snippet i posted earlier is not required.. It may be removed.
0
 
LVL 18

Author Comment

by:Eternal_Student
Comment Utility
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
 
LVL 3

Expert Comment

by:DGR81
Comment Utility
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
Do You Know the 4 Main Threat Actor Types?

Do you know the main threat actor types? Most attackers fall into one of four categories, each with their own favored tactics, techniques, and procedures.

 
LVL 18

Author Comment

by:Eternal_Student
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

This article discusses four methods for overlaying images in a container on a web page
This article discusses how to create an extensible mechanism for linked drop downs.
The viewer will learn how to dynamically set the form action using jQuery.
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…

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

Need Help in Real-Time?

Connect with top rated Experts

8 Experts available now in Live!

Get 1:1 Help Now