What is 'Commentary'?
Commentary is a jQuery plugin that allows you to add hidden notes to your page that are only visible once the plugin is turned on. [Try it: Click the 'on' button in the top right corner ;)]
When Commentary is turned on by the user, they'll see chunks of highlighted text/content. When the user clicks on the highlights, new commentary written by you will appear close by. It's like the Director's Commentary in the Special Features on DVDs (I still buy them) – but for the web.
Getting Started
Add the Commentary folder to your project.
Include the following in the <head> section of your html document to link to jQuery and Commentary's styling.
HTML
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script><link rel="stylesheet" href="commentary/commentary.css">
Call the .commentaryOn() and .commentaryOff() methods.
Include this right before the end of your </body>.
HTML
<script src="commentary/commentary.js"></script>
<script>
$('#onButton').commentaryOn();
$('#offButton').commentaryOff();
</script>
#onButton and #offButton are to be replaced with whatever elements (div, img, etc.) that will act as the 'on' and 'off' switches, respectively.
On this page I used two divs with fixed positions as the buttons, so they were visible all the way down the page. I gave the 'on' button an id of #onButton and the 'off' button an id #offButton. This just makes things a bit more semantic, and easier for you to distinguish these key components.
Adding Highlights + Comment Bubbles This is a comment bubble.
Commentary relies on <span> tags.
Wrap the text that will act as the highlighted cue that a user will click on in the following span:
<span class="cmmtRef">HIGHLIGHTED CUE TEXT GOES HERE</span>
OPTION: You can change the colour of highlighted text by going into the commentary.css file, and changing the background-color property for .highlight.
For the content that will appear when the highlighted span in clicked, wrap it in the following span.
<span class="cmmtBub">CONTENT THAT WILL APPEAR</span>
OPTION: You can change the styling of the comment bubble by changing the css of .cmmtBub in the commentary.css file.
Note: You must put the .cmmtBub <span> after the .cmmtRef <span>. Do not put another <span> in between these two <span>s. The jQuery used in this plugin relies on the .next() method. This method targets the immediately following sibling.
Possible Uses
Easter Eggs
Use this plugin to make an 'easter egg'-version of your site. Include little inside jokes or after thoughts about content on the page.
Create an interactive 'before and after' site for a piece of writing
Maybe you want to display how you edited an article. I edited this page a bunch of times...
Just for highlighting
You could just use this plugin for highlighting text -shrugs-. Maybe you want to highlight certain terms or links? Cool. You can do that. Just skip the addition of the .cmmtBub <span>.
Styling Tips
The use of this plugin relies on styling and plcement choice. Be strategic about where you place the comment bubbles (.cmmtBub). The content is within a <span>, which means it's an inline element. Once the highlighted text is clicked and they're revealed, they may disrupt the flow of whatever container they're in
Even Beyoncé can't help this poor placement choice.... Try adding the comment bubble spans to the end of the container, so it doesn't disrupt as much content.Placement = Beyoncé approved
This jQuery plugin was created for Week 6 of HackerYou's Full-time Front-End Bootcamp <3 #hythe6ix
Logo created by Jennifer Yeung.
I'm working on adding options, and more individualized indications for each comment (ie. puttings numbers next to each comment and their respective comment bubbles, so it's easier to tell which highlights and bubbles go together). I'm also trying to make Commentary less intrusive to the html content, so V2 may make the .cmmtBub spans appear in a tooltip-like bubble when you hover over the highlighted text. Stay tuned!