sivartravis

A WYSIWYG Rich Text Editor with contentEditable attribute

A Pen by Monty on CodePen.

License.

sivartravis

The following macros show how to break up a multi-page document into separate files. The two macros use the Page or Section property of a Microsoft Word document to select and move through the document content. This code can be used in an automation scenario with Word not visible.
MORE INFORMATION
Microsoft provides programming examples for illustration only, without warranty either expressed or implied. This includes, but is not limited to, the implied warranties of merchantability or fitness for a particular purpose. This article assumes that you are familiar with the programming language that is being demonstrated and with the tools that are used to create and to debug procedures. Microsoft support engineers can help explain the functionality of a particular procedure, but they will not modify these examples to provide added functionality or construct procedures to meet your specific requirements. 

Separate File by Page

Sub BreakOnPage()
   ' Used to set criteria for moving through the document by page.

sivartravis

Gooey Menu - CSS Only

Gooey Menu animation is done purely with css.

The inspiration comes from Soheil's post on Material Up called "Material In a Liquid State".

A Pen by Matthew Sechrest on CodePen.

License.

sivartravis

$('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

(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%");

sivartravis

<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

/***************************************************
 * 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

sivartravis

<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

Forked from Free Code Camp's Pen wMQrXV.

A Pen by freeCodeCamp on CodePen.

License.

sivartravis

CSS3 Multi-Column Layout Module Demo

Just playing around with the CSS3 Multi-Column Layout Module.

A Pen by Jason Saba on CodePen.

License.