How can I create Wikipedia's footnote highlighting solely with jQuery

Question

I would like to duplicate Wikipedia's footnote highlighting from in-text citation click solely in jQuery and CSS classes. I found a webpage that describes how to do so with CSS3 and then a JavaScript solution for IE. I would like however to do so solely with jQuery as the site I'm doing it on already has a bunch of jQuery elements.

I've come up with a list of the process.

1. In-Text Citation Clicked
2. Replace highlight class with standard footnote class on <p> tag of footnotes that are already highlighted.
3. Add highlight to the appropriate footnote
4. Use jQuery to scroll down the page to appropriate footnote.

I've come up with some jQuery so far but I'm extremely new to it relying heavy on tutorials and plugins to this point. Here is what I have with some plain English for the parts I haven't figured out yet.

$('.inlineCite').click(function() {
   $('.footnoteHighlight').removeClass('footnoteHighlight').addClass('footnote');
   //add highlight to id of highlightScroll
   //scroll to footnote with matching id
});

If I had a method to pass a part of the selector into the function and turn it into a variable I believe I could pull it off. Most likely I'm sure one of you gurus will whip something up that puts anything I think I have done to shame. Any help will be greatly appreciated so thank you in advance.

Cheers.

Answer 1

I copied Wikipedia's superscript markup verbatim:

<sup class="reference" id="cite_ref-1">
    <a href="#cite_note-1">
        <span>[</span>1<span>]</span>
    </a>
</sup>

And used the following jQuery:

$(".reference > a").click(function() {
    var href = $(this).attr("href");
    var $el = $(href);

    $(".ref-highlight").removeClass("ref-highlight");
    $el.addClass("ref-highlight");
});

The key is grabbing the href off of the link that was clicked, and then using that to select the element and apply the highlight class.

Also, you don't need to scroll the page down programmatically, because the browser handles this for you automatically.

Here's a complete working example: http://jsfiddle.net/andrewwhitaker/dkWJm/2/

---

Update: I noticed in your comment below you'd like to animate the scrolling, here's how you would do that:

$(".reference > a").click(function(event) {
    event.preventDefault();
    var href = $(this).attr("href");
    var $el = $(href);

    $(".ref-highlight").removeClass("ref-highlight");
    $el.addClass("ref-highlight");
    $("html, body").animate({"scrollTop": $el.offset().top}, 3000);
});

Notes:

• We're canceling the default action of the link in this case (using event.preventDefault()), which would be to jump to the element with the id matching the clicked link's href.
• Using animate to smoothly scroll the html element down to the appropriate position, which is determined using offset() on the target element.
• The duration argument (I specified 3000) is what you would tweak to lengthen/shorten the duration of the scroll.

Here's an example of this: http://jsfiddle.net/andrewwhitaker/dkWJm/4/ (Updated to work in IE8/Chrome/FF 3)

Answer 2

Here's a better idea - use #hash links to do the linking, then enhance it with a jQuery. In your HTML:

<p>Here's some content <sup><a href="#footnote-1">[1]</a></sup></p>

<ul id="footnotes">
   <li id="footnote-1">Sources: a, b and c</li>
</ul>

Notice that the scrolling will work with or without JavaScript enabled, and if the user chooses to save the link by bookmarking it or copying it to somewhere else your page will still work as expected.

Now we define a simple CSS class to highlight the selected footnote:

.highlight {
    background: #ddd;
}

And we apply some JavaScript logic:

// Select all #hash links
$('a[href^=#]').click(function(){
    $('#footnotes li').removeClass('highlight')
        .filter(this.href).addClass('highlight');
});

If you want to check whether the user is navigating to a #hash URL, you can use location.hash to do it:

if(location.hash) $(location.hash).addClass('highlight');