Forked from Free Code Camp's Pen wMQrXV.
A Pen by freeCodeCamp on CodePen.
$('sup[data-footnote]').each(function(index) { | |
noteCount = $(this).html(); | |
$(this).html('<a id="ref' + noteCount + '" href="#note' + noteCount + '">' + noteCount + '</a>'); | |
$('#footnotes li').eq(noteCount - 1).attr('id', 'note' + noteCount).prepend('<a href="#ref' + noteCount + '">' + noteCount + '.</a> '); | |
}); |
(function ($) { | |
$.fn.footnote = function () { | |
// console.log("footnote"); | |
var footnotes = this.find("span.footnote"); | |
footnotes.each(function (key, value) { | |
//console.log("footnote" + key + " : " + $(value).contents().text()); | |
var footnoteContentsNode = $(value).clone(); | |
var footnoteNumberTextNode = document.createTextNode("[" + key + "] "); | |
$("#references").append(footnoteNumberTextNode).append(footnoteContentsNode).css("color", "blue").append("<br />"); | |
$(value).text("[" + key + "] ").css("color", "blue").css("vertical-align", "super").css("font-size", "60%"); |
<article> | |
<header> | |
<h1>Side Notes</h1> | |
<p>Automatic side notes for links (showing their titles) and footnote texts.</p> | |
</header> | |
<div class="content"> | |
<p>Lorem ipsum dolor sit amet, consectetur adipisicing<sup class="footnote-ref"><a href="#fn1" id="fnref1">[1]</a></sup> elit. Aut animi consequatur odit natus suscipit eligendi modi reiciendis quod hic minus id architecto facilis odio earum aliquid | |
voluptas ipsum, explicabo aperiam! Lorem <a href="https://google.com/" title="Doloremque inventore minima">ipsum dolor sit</a> amet, consectetur adipisicing elit. Doloremque inventore minima voluptatum magnam laborum tempore possimus rerum corporis | |
ipsum quasi qui quos, quae, perspiciatis fuga, labore voluptates quas at. Nisi.</p> | |
<p>Aut animi consequatur odit<sup class="footnote-ref"><a href="#fn2" id="fnref2">[2]</a></sup> natus suscipit eligendi modi reiciendis<sup class="footnote-ref"><a href="#fn3" id="fnref3">[3]</a></sup> quod hic minus id architecto facilis odio earum |
/*************************************************** | |
* Simple and elegant, no code complexity | |
* Disadvantages: Requires warming all data into server memory (could take a long time for MBs of data or millions of records) | |
* (This disadvantage should go away as we add optimizations to the core product) | |
***************************************************/ | |
var fb = firebase.database.ref(); | |
/** | |
* @param {string} emailAddress |
<svg class="tendrilSVG" viewBox="0 0 800 600" xmlns="http://www.w3.org/2000/svg"> | |
<defs> | |
<circle class="blueDot" cx="0" cy="0" r="11.5" fill="#3cc9f3" stroke="#fff" stroke-miterlimit="10" stroke-width="2"/> | |
<circle class="whiteDot" cx="0" cy="0" r="11.5" fill="#fff"/> | |
<circle class="orangeDot" cx="0" cy="0" r="11.5" fill="#ff5d55"/> | |
</defs> | |
<g class="whole"> | |
<g class="tendrils" > | |
<path d="M417,325.15c-1.51,6.35,37.09,47.47,49.86,55.45,6.38,4,13.83,5.9,21.22,7.3a165.76,165.76,0,0,0,36.42,2.93c5.39-.18,11.49-.41,15.36,3.34,5,4.8,3.67,13.76,8.72,18.46,4.72,4.39,12.2,2.8,18.54,4,10.77,2,18.46,14.15,15.72,24.77"/> | |
<path d="M420,323.22c5.34,6.5,68.55,28.52,87.89,30.19,19.7,1.7,39.62,3.39,59.18.47,7.36-1.1,14.62-2.85,22-4a161,161,0,0,1,32.33-1.4c12,.6,24.32,2.23,36-.61s23.08-11.53,24.59-23.5"/> |
Forked from Free Code Camp's Pen wMQrXV.
A Pen by freeCodeCamp on CodePen.
Just playing around with the CSS3 Multi-Column Layout Module.
A Pen by Jason Saba on CodePen.
An accordion built with only HTML and CSS. This method utilizes a checkbox as the toggle switch for the content.
A Pen by Grant Vinson on CodePen.
<div class="container-fluid" style="margin-top: 10px"> | |
<div class="table-row header"> | |
<div class="column index">#</div> | |
<div class="wrapper attributes"> | |
<div class="wrapper title-comment-module-reporter"> | |
<div class="wrapper title-comment"> | |
<div class="column title">Title</div> | |
<div class="column comment">Comment</div> | |
</div> | |
<div class="wrapper module-reporter"> |
<form action="#" method="post"> | |
<div> | |
<label for="name">Text Input</label> | |
<br> | |
<input type="text" name="name" /> | |
<input type="text" name="name" /> | |
</div> | |
<hr> | |
<div> | |
<p>Radio Buttons</p> |