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

Posted by andrew.bachman on Stack Overflow See other posts from Stack Overflow or by andrew.bachman
Published on 2011-02-12T02:06:46Z Indexed on 2011/02/12 15:25 UTC
Read the original article Hit count: 255

Filed under:
|

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.

© Stack Overflow or respective owner

Related posts about jQuery

Related posts about highlighting