highlight anchor?

Forum Moderators: open

Message Too Old, No Replies

highlight anchor?

ktsirig

10:04 pm on Apr 26, 2008 (gmt 0)

Hello,
I have a webpage with several html anchors. The anchor part works ok, but when I click on the links, I only goto to the part of the page with all the anchors (all anchors are gathered low in the page) and I wanted to know if there is any way of highlighting the specific anchor that the user has clicked on.
Thank you.

Marshall

1:43 am on Apr 27, 2008 (gmt 0)

Are you talking about anchors within the page, a.k.a. bookmarks? If that is the case, each bookmark should have its own unique name, e.g.

<a name="bookmark_1">Bookmark One</a>
<a name="bookmark_2">Bookmark Two</a>

You links would read <a href="bookmark_1">Go To Bookmark One</a> or if you are coming from a different page, the anchor would be <a href="widgets.com#Bookmark_1">Go To...</a>.

If your bookmarks are in the same line, there is no way ti really distinguish the target bookmark. If they are above one another, each bookmark should align with the top of the window when selected.

Marshall

thecoalman

7:38 am on Apr 27, 2008 (gmt 0)

If you mean you want to highlight the target selected such as giving it a different background color I've seen this done on phpbb's site in their rules section. There's a piece of javascript they use, it will highlight whatever rule you click on.

Fotiman

5:40 pm on Apr 28, 2008 (gmt 0)

I put together a very quick (rough) example, which uses the Yahoo UI Library for some of its Event and Dom utility capabilities. It's likely that this could be really cleaned up, but I just wanted to throw something together to get you started. It requires you to give the links that you'll click on a class of 'gotolink', and your named anchors must have an id value that matches the name value.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
 "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
  <style type="text/css"> 
  div { 
    padding-top: 900px; 
  } 
  .activeLink { 
    background-color: #ffff00; 
  } 
  </style> 
  <meta http-equiv="Content-Type" content="text/html; charset:utf-8"> 
  <title>Example</title> 
</head> 
<body> 
<a href="#link1" class="gotolink">Go to Link 1</a> 
<a href="#link2" class="gotolink">Go to Link 2</a> 
<a href="#link3" class="gotolink">Go to Link 3</a> 
<div> 
<a name="link1" id="link1">Link 1</a> 
<a name="link2" id="link2">Link 2</a> 
<a name="link3" id="link3">Link 3</a> 
</div> 
<script type="text/javascript" src="http://yui.yahooapis.com/2.5.1/build/yahoo-dom-event/yahoo-dom-event.js"></script> 
<script type="text/javascript"> 
YAHOO.util.Event.onDOMReady(function () { 
  var i, target; 
  var gotoLinks = YAHOO.util.Dom.getElementsByClassName('gotolink', 'a'); 
  var targetLinks = []; 
  // Build the list of target links first (so we can reset them) 
  for (i = 0; i < gotoLinks.length; i++) { 
    target = document.getElementById(gotoLinks[i].href.split('#')[1]); 
    targetLinks[targetLinks.length] = target; 
  } 
  // targetLinks now contains all of the links that we link to 
  for (i = 0; i < gotoLinks.length; i++) { 
    YAHOO.util.Event.on(gotoLinks[i], 'click', function (e, t) { 
      var j; 
      var aname = this.href.split('#')[1]; 
      for (j = 0; j < t.length; j++) { 
        YAHOO.util.Dom.replaceClass(t[j], 'activeLink', 'dormantLink'); 
      } 
      YAHOO.util.Dom.replaceClass(aname, 'dormantLink', 'activeLink'); 
    }, targetLinks); 
  } 
}); 
</script> 
</body> 
</html>

mehh

6:58 pm on Apr 30, 2008 (gmt 0)

You can get that effect through the CSS pseudo class :target. suckerfish [htmldog.com] has a way of enabling support in IE