homepage Welcome to WebmasterWorld Guest from 54.167.75.155
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / HTML
Forum Library, Charter, Moderators: incrediBILL

HTML Forum

    
highlight anchor?
ktsirig




msg:3635914
 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




msg:3635982
 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




msg:3636081
 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




msg:3636875
 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




msg:3638867
 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

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / HTML
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved