Forked from Free Code Camp's Pen wMQrXV.
A Pen by freeCodeCamp on CodePen.
Travis Taylor sivartravis
sivartravis
/ auto-footnote.js
Last active
September 19, 2017 21:09
— forked from murtaugh/auto-footnote.js
Sniff out superscripts that should be footnote links
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| $('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> '); | |
| }); |
sivartravis
/ footnotes-0.0.2.js
Created
September 19, 2017 21:08
— forked from devdays/footnotes-0.0.2.js
Sample for moving footnotes using jQuery plugin
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| (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%"); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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 |
sivartravis
/ 1_using_queries.js
Created
March 10, 2017 22:37
— forked from katowulf/1_using_queries.js
Methods to search for user accounts by email address in Firebase
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /*************************************************** | |
| * 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 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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"/> |
sivartravis
/ freecodecamp-build-a-tribute-page.markdown
Created
March 10, 2017 16:11
freeCodeCamp : Build a Tribute Page
sivartravis
/ css3-multi-column-layout-module-demo.markdown
Created
March 10, 2017 16:10
CSS3 Multi-Column Layout Module Demo
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.
sivartravis
/ index.html
Created
March 10, 2017 16:09
Really Responsive Tables using CSS Flexbox (complex)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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"> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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> |
NewerOlder