ansaurus

Question

Is there a way to highlight the target of a bookmark? (www.site.com/page.htm#bookmark) ?

Answer 1

A:

I guess if you could store this information with Javascrit and cookies for the functionality of remembering the bookmarks and even add a splash of Ajax if you wanted to interact with a database.

CSS would only be able todo the styling bit. You would have to give the bookmarked anchor a class found in ur css file.

CSS also have the a:visited selector which is used for styling links found in the browsers history.

GateKiller 2008-09-10 14:47:29

Answer 2

+1 A:

Use your favorite JS toolkit to add a "highlight" (or whatever) class to the item containing (or contained in) the anchor.

Something like:

jQuery(location.hash).addClass('highlight');

Of course, you'd need to call that onready or click if you want it triggered by other links on the page, and you'll want to have the .highlight class defined. You could also make your jQuery selector traverse up or down depending on the container you want highlighted.

Kevin 2008-09-10 14:54:21

This doesn't work, as it tries to find an element with the ID of the hash, not an anchor with the NAME attribute.

samjudson 2008-09-10 15:15:53

samjudson, you shouldn't have anchors with a name attribute. Hash anchors should point at id attributes in modern HTML.

Ryan McGeary 2009-01-03 14:11:30

Answer 3

+5 A:

In your css you need to define

a.highlight {border:1px solid red;}

or something similar

Then using jQuery,

$(document).ready ( function () { //Work as soon as the DOM is ready for parsing
 var id  = location.hash.substr(1); //Get the word after the hash from the url
 if (id) $('#'+id).addClass('highlight'); // add class highlight to element whose id is the word after the hash
});

To highlight the targets on mouse over also add:

$("a[href^='#']")
 .mouseover(function() {
  var id  = $(this).attr('href').substr(1);
  $('#'+id).addClass('highlight');
 })
 .mouseout(function() {
  var id  = $(this).attr('href').substr(1);
  $('#'+id).removeClass('highlight');
 });

Pat 2008-09-10 15:09:37

This is great - you also might want to select the parent element of the anchor, rather than the anchor itself however.

samjudson 2008-09-10 15:16:27

In modern HTML, hashes should point at id attributes, not name attributes.

Ryan McGeary 2009-01-03 14:09:28

Thanks for the tip Ryan, fixed the code to work on ids instead of name attributes, so it is a bit cleaner now.

Pat 2009-01-08 18:25:20

Answer 4

+3 A:

You can also use the target pseudo-class in CSS:

<html>
<head>

<style type="text/css">
div#test:target {
 background-color: yellow;
}
</style>

</head>
<body>

<p><b><a href="#test">Link</a></b></p>

<div id="test">
Target
</div>

</body>
</html>

Unfortunately the target pseudo class isn't supported by IE or Opera, so if you're looking for a universal solution here this might not be sufficient.

chrisofspades 2008-09-11 00:05:47

ansaurus

tags:

views:

answers:

Is there a way to highlight the target of a bookmark? (www.site.com/page.htm#bookmark) ?

related questions