How can I create Wikipedia's footnote highlighting solely with jQuery
- by andrew.bachman
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.
In-Text Citation Clicked
Replace highlight class with standard footnote class on <p> tag of footnotes that are already highlighted.
Add highlight to the appropriate footnote
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.
