How can I create a Wikipedia note highlighting exclusively using jQuery

Question

I would like to duplicate the selection of a note on Wikipedia from a text quote, only in jQuery and CSS classes. I found a webpage that describes how to do this with CSS3 , and then a JavaScript solution for IE. However, I would like to do this exclusively with jQuery, since the site I do this already has a bunch of jQuery elements on.

I came up with a list of processes.

• Link to text in text
• Replace the highlighting class with the standard footnote class in the <p> notes that are already highlighted.
• Add selection to the corresponding footnote
• Use jQuery to scroll to the appropriate footnote.

I still came up with some kind of jQuery, but I'm extremely new to this, relying on tutorials and plugins. Here is what I have with some plain English for those parts that 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 way to pass part of the selector into a function and turn it into a variable, I believe that I can remove it. Most likely, I am sure that one of you, the guru, will hack something that will put everything that I think I have done with shame. Any help would be greatly appreciated, therefore in advance.

Greetings.

Answer 1

I copied the superscript Wikipedia 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 href captures the turned off link that was clicked, and then using it to select an element and apply the selection class.

In addition, you do not need to scroll down the page programmatically, because the browser automatically processes this for you.

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

---

Update: I noticed that in your comment below you want to animate scrolling, here is how you do it:

 $(".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 cancel the default action in this case (using event.preventDefault() ), which would have to go to the element using the id corresponding to the clicked href link.
• Using animate , smoothly scroll the html element to the appropriate position, which is determined using offset() on the target element.
• The duration argument (I specified 3000) is what you would like to adjust to lengthen / shorten the scroll duration.

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

Answer 2

Here is a better idea - use #hash links to make a link, and then increase it with jQuery. In your HTML:

 <p>Here 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> 

Please note that scrolling will work with or without JavaScript enabled, and if the user wants to save the link by bookmarking or copying it to another place, your page will work as expected.

Now we define a simple CSS class to highlight the highlighted 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 if the user is #hash URL, you can use location.hash to do this:

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

Answer 3

Perhaps the best approach is to open a tooltip with help data instead of jumping up and down. A simple and neat plugin is located at: http://livereference.org In addition to reading a user-defined link, it can automatically receive publication information from this ISBN or PubMed ID.