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">
- <!-- Placed in the public domain by Roger Hågensen. -->
- <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;
- margin-left: -8em;
- margin-top: -4em;
- 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:hover .snote_tip
- {
- visibility: visible;
- cursor: default;
- }
- </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)
- {
- var snote_element = snote_elements[i];
- snote_element.innerHTML = '<span class="snote_tip">' + snote_element.innerHTML + '</span>';
- snote_element.style.display = 'inline-block';
- }
- }
- </script>
- <body>
- <br><br>
- <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