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: 282
jQuery
|highlighting
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.
© Stack Overflow or respective owner