Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!doctype html>
- <html lang="en">
- <title>snote example</title>
- <meta charset="utf-8">
- <!-- snote v6. Placed in the public domain by Roger Hågensen. -->
- <!-- changes from v5:
- A semi-colon was missing in the snote CSS definition.
- cursor reset moved out of the javascript and back into CSS where it belong.
- Removed a redundant else in the javascipt code.
- -->
- <style>
- .snote
- {
- width: 1em;
- height: 1em;
- background-image: url('http://icons.iconarchive.com/icons/visualpharm/must-have/256/Information-icon.png');
- background-size: auto 1em;
- background-repeat: no-repeat;
- display: none;
- cursor: help;
- }
- .snote_tip
- {
- display: block;
- visibility: hidden;
- position: absolute;
- width: 16em;
- height: 3em;
- padding: 0.5em;
- overflow: auto;
- background: #cccccc;
- color: #000000;
- border: 0.15em solid #000000;
- border-radius: 0.25em;
- box-shadow: 0.25em 0.25em 0.25em #7f7f7f;
- }
- .snote_tip:hover
- {
- cursor: auto;
- }
- </style>
- <script>
- //call this function once the page has loaded
- window.addEventListener('load', snote_init, false);
- //this function will add a span with snote_tip class where a span with the snote class is used, this reduces the html needed and makes writing notes so much simpler/cleaner.
- function snote_init()
- {
- var snote_elements = document.getElementsByClassName('snote');
- for (var i = 0; i < snote_elements.length; i += 1)
- {
- (function(ii)
- {
- var snote_element = snote_elements[ii];
- var node = document.createElement('span');
- node.className = 'snote_tip';
- var text = snote_element.innerHTML;
- snote_element.innerHTML = '';
- node.innerHTML = text;
- snote_element.appendChild(node);
- snote_element.style.display = 'inline-block';
- snote_element.addEventListener ("mouseup", function () { snote_show(snote_element, node); }, false);
- })(i);
- }
- }
- function snote_show(snote_element, snote_tip)
- {
- if (snote_tip.style.visibility == 'visible')
- {
- snote_tip.style.visibility = 'hidden';
- return;
- }
- snote_tip.style.visibility = 'visible';
- var rect = snote_element.getBoundingClientRect();
- x0 = rect.left + (rect.width * 0.5);
- y0 = rect.top + (rect.height * 0.5);
- rect = snote_tip.getBoundingClientRect();
- snote_tip.style.left = (x0 - (rect.width / 2)) + 'px';
- snote_tip.style.top = (y0 - (rect.height / 2)) + 'px';
- rect = snote_tip.getBoundingClientRect();
- x1 = rect.left;
- y1 = rect.top;
- x2 = window.innerWidth - rect.right
- y2 = window.innerHeight - rect.bottom
- if (x1 < 0)
- {
- snote_tip.style.left = '0px';
- }
- if (y1 < 0)
- {
- snote_tip.style.top = '0px';
- }
- if (x2 < 0)
- {
- snote_tip.style.left = (window.innerWidth-rect.width) + 'px';
- }
- if (y2 < 0)
- {
- snote_tip.style.left = (window.innerHeight-rect.height) + 'px';
- }
- };
- </script>
- <body>
- <p>But the thing is this: I really, REALLY like annotations. I'm talking about the little numbers that pop up in a post <span class="snote">Like this one, for example.<br><br>And it is really long, but that is not really a problem.<br><br>This text could easily just go on and on.</span>. I ran into them on the <a href="http://what-if.xkcd.com/">XKCD What-If blog</a>. They're great for expanding on a side-thought without cluttering up the main body of the article. They're handy when writing faux-technical articles that require lots of footnotes to save me from Death By Nitpick. They're great for jokes <span class="snote">Since you can hide the <a href="http://en.wikipedia.org/wiki/Punch_line">punchline</a>.</span>. </p>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement