0

is there a way to select the current anchor and have it visible on every section of a one page site? For example all my pages (home/contact/shop etc) are on one page, in a horizontally scrolling layout. When I select the anchor, it highlights the current anchor but does not keep that anchor highlighted when it scrolls to the next section of the page. Instead its highlighted and as the scroll begins the highlight of the anchor disappears. Here's the code I am using:

$('#nav a').click(function() {
alert($(this).attr('href'));
});

I had thought about using jquery ui to do it, but it seems a little too much just to carry out this operation. So highlight the current anchor of the item, in the same page, but when scrolling to a different section remaining highlighted. Thoughts?

Thanks in advance

Junaid Hussain
  • 45
  • 1
  • 10

2 Answers2

1

I guess you are talking about the default overlay on focus that happens when you click an anchor?

How about adding a class to the currently active section instead:

$("#nav a").click(function() {
    var self = $(this), className = "active";
    self.addClass(className).siblings("."+className).removeClass(className);
    ...
});

You might also want to check this answer since it could be related. If this answer is not helpful to you my advice is to create a test case on jsFiddle to help you describe your problem further.

Community
  • 1
  • 1
mekwall
  • 28,614
  • 6
  • 75
  • 77
  • yes this is very close to what i want to achieve, almost dead on - however, I'm struggling with figuring out how to apply it to the scroll horizontally as vertically the code is there. in relation to what you linked to – Junaid Hussain Apr 23 '12 at 15:25
0

Like this?

JS:

$('#nav a').click(function(){
    $('#nav a').removeClass('highlighted');
    $(this).addClass('highlighted');
});

CSS:

.highlighted {
    background: #ffffeo;
}
wanovak
  • 6,117
  • 25
  • 32
  • hi i wasnt able to get it to work unfrotuantely, perhaps I'm misunderstanding it's implementation. here's the site: http://sekhu.net/charlie2/index.php as you can see the current selector is active, but as soon as the page scrolls it disappears? – Junaid Hussain Apr 23 '12 at 15:17
  • You can't have multiple same `id`s on one page. If you do, expect JavaScript to behave funny. – wanovak Apr 23 '12 at 15:25
  • i see - how would i go about remedying the problem then? I would be grateful for any insight you can provide and guidance. Thank you. – Junaid Hussain Apr 23 '12 at 15:58
  • Quick fix: make all of your `id`s into `class`es. – wanovak Apr 23 '12 at 16:24