CHROMATIC-SYSTEM v1.03_FOOTNOTE_NUMBERED_LINKS_DISPLAY_ENGINE

INFORMATION & CODE

Footnotes Numbered Links Display

What the Code Does

The code creates a numbered footnote system for a webpage. The numbered buttons such as [1], [2], and [3] appear within the text like traditional footnote references. When the user moves the mouse over one of these numbers, the corresponding footnote appears as a small green pop-up box.

How the Code Works

The HTML provides the structure of the page. The .footnote elements at the beginning contain the actual footnote text, while the .btn buttons placed throughout the paragraphs act as references to those footnotes. The buttons use IDs from 0 to 10, while their visible labels run from [1] to [11]. The stylesheet styles.css and JavaScript file scripts.js are loaded externally.

The CSS controls the appearance and positioning. .page creates a centered, 600-pixel-wide document-like container with a border and shadow. The .btn class makes the footnote references look like small blue links rather than normal buttons. The .footnote class initially hides each footnote using display: none, and the :nth-child() rules give each footnote a specific position on the page. When JavaScript changes display to block, the footnote becomes visible at that predefined position.

The JavaScript connects each numbered button to the footnote with the same position in the two NodeLists. querySelectorAll(".btn") collects all the numbered buttons, while querySelectorAll(".footnote") collects all the footnotes. The forEach() loop goes through the buttons and uses the index to identify the matching footnote. For example, button 0 controls footnote 0, button 1 controls footnote 1, and so on.

When the mouse moves over a button, the mouseover event changes the corresponding footnote's display property from none to block, making it visible. When the mouse leaves the button, the mouseout event changes it back to none, hiding it again. In effect, the user can hover over [1] to see footnote 1, hover over [2] to see footnote 2, and continue in the same way through [11].

How to Use the Code

To use the code, place the HTML in your webpage, put the CSS in a file called styles.css, and put the JavaScript in scripts.js. Both files need to be in the appropriate location specified by the HTML. You can then replace the placeholder footnote text with your own content and adjust the top and left values in the CSS if you want the pop- ups to appear in different locations.

HTML


                <!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Footnote Numbered Links</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <div class="page">
      <div class="footnote">
        <p><strong><em>Footnote:</em></strong> Praesent convallis urna a lacus interdum ut labore et hendrerit no risus congue.</p>
      </div>
      <div class="footnote">
        <p><strong><em>Footnote:</em></strong> Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac.</p>
      </div>
      <div class="footnote">
        <p><strong><em>Footnote:</em></strong> In at libero sed nunc venenatis imperdiet sed ornare turpis.</p>
      </div>
      <div class="footnote">
        <p><strong><em>Footnote:</em></strong> Donec vitae dui eget tellus gravida venenatis.</p>
      </div>
      <div class="footnote">
        <p><strong><em>Footnote:</em></strong> Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta.</p>
      </div>
      <div class="footnote">
        <p><strong><em>Footnote:</em></strong> Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      </div>
      <div class="footnote">
        <p><strong><em>Footnote:</em></strong> Phasellus imperdiet, nulla dictum interdum, nisi lorem egestas odio, vitae ligula venenatis dolor.</p>
      </div>
      <div class="footnote">
        <p><strong><em>Footnote:</em></strong> Maecenas nisl est, ultrices nec congue eget, auctor vitae massa.</p>
      </div>
      <div class="footnote">
        <p><strong><em>Footnote:</em></strong> Fusce luctus vestibulum augue ut aliquet.</p>
      </div>
      <div class="footnote">
        <p><strong><em>Footnote:</em></strong> Mauris ante ligula, facilisis sed ornare eu, lobortis in odio.</p>
      </div>
      <div class="footnote">
        <p><strong><em>Footnote:</em></strong> Praesent convallis urna a lacus interdum ut hendrerit risus congue.</p>
      </div>
      <h1>Footnote Numbered Buttons</h1>
      <div class="p">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut           enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
		    <button class="btn" id="0">[1]</button>
		    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
		    <button class="btn" id="1">[2]</button>
		    Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit,            sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>

      <p>Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius            te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et.
		    <button class="btn" id="2">[3]</button>
		    Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>

      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae               scelerisque enim ligula venenatis dolor.
		    <button class="btn" id="3">[4]</button>
		    Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed          ornare eu, lobortis in odio.
		    <button class="btn" id="4">[5]</button>
		    Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at              libero sed nunc venenatis imperdiet sed ornare turpis.
		    <button class="btn" id="5">[6]</button>
		    Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac           leo purus. Mauris quis diam velit.
		    <button class="btn" id="6">[7]</button>
		    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae                scelerisque enim ligula venenatis dolor.</p>
        <p>Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet.
		    <button class="btn" id="7">[8]</button>
		    Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue.
		    <button class="btn" id="8">[9]</button>
		    Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis.
		    <button class="btn" id="9">[10]</button>
		    Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac           leo purus. Mauris quis diam velit.
		    <button class="btn" id="10">[11]</button>
		    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae                scelerisque enim ligula venenatis dolor.</p>
      </div>
	  </div>	  
    <script src="scripts.js"></scripts>
  </body>
</html>

CSS


                      .page {
        position: relative;
        top: 30px;
        left: 50%;
        transform: translatex(-50%);
        width: 600px;
        padding: 20px;
        margin-bottom: 30px;
        background-color: #ffffff;
        border: 1px solid #777777;
        box-shadow: 2px 2px 10px #555555;
        
      }
      h1 {
        font-family: "Courier New", monospace;
        font-size: 2em;
        text-align: center;
      }
      p {
        font-family: "Courier New", monospace;
        font-size: 0.75em;
        text-align: justify;
      }
      .p {
        font-family: "Courier New", monospace;
        font-size: 0.75em;
        text-align: justify;
      }
      .btn {
        padding: 0;
        background: transparent;
        border: 0;
        outline: 0;
        color: #0000ff;
        font-size: 11px;
		    letter-spacing: 2px;
        cursor: pointer;
      }
      .btn:not(.num) {
        cursor: pointer;
      }
      .num {
        color: #0000ff;
      }
      .footnote {
        position: absolute;
        display: none;
        width: 250px;
        height: 75px;
        padding: 5px 15px;
        background-color: #00cc00;
        border-radius: 15px;
        color: rgba(255, 255, 255, 1);
        font-family: "Courier New", monospace;
        font-size: .75em;
        text-align: justify;
      }
      .footnote:nth-child(1) {
        top: 75px;
        left: -13px;
      }
      .footnote:nth-child(2) {
        top: 92px;
        left: 165px;
      }
      .footnote:nth-child(3) {
        top: 225px;
        left: 373px;
      }
      .footnote:nth-child(4) {
        top: 297px;
        left: 248px;
        transform: translatex(-50%);
      }
      .footnote:nth-child(5) {
        top: 333px;
        left: 427px;
        transform: translatex(-50%);
      }
      .footnote:nth-child(6) {
        top: 390px;
        left: 45px;
      }
      .footnote:nth-child(7) {
        top: 423px;
        left: 225px;
      }
      .footnote:nth-child(8) {
        top: 513px;
        left: 123px;
      }
      .footnote:nth-child(9) {
        top: 542px;
        left: -33px;
      }
      .footnote:nth-child(10) {
        top: 563px;
        left: 322px;
      }
      .footnote:nth-child(11) {
        top: 620px;
        left: 0px;
      }

JAVASCRIPT


                var btn = document.querySelectorAll(".btn");
var foot = document.querySelectorAll(".footnote");
        
      
btn.forEach((btns, index) => {
  btn[index].addEventListener("mouseover", () => {
    foot[index].style.display = "block";
    btn[index].addEventListener("mouseout", () => {
      foot[index].style.display = "none";
    });
  });
});

PREVIEW

Footnote: Praesent convallis urna a lacus interdum ut labore et hendrerit no risus congue.

Footnote: Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac.

Footnote: In at libero sed nunc venenatis imperdiet sed ornare turpis.

Footnote: Donec vitae dui eget tellus gravida venenatis.

Footnote: Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta.

Footnote: Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Footnote: Phasellus imperdiet, nulla dictum interdum, nisi lorem egestas odio, vitae ligula venenatis dolor.

Footnote: Maecenas nisl est, ultrices nec congue eget, auctor vitae massa.

Footnote: Fusce luctus vestibulum augue ut aliquet.

Footnote: Mauris ante ligula, facilisis sed ornare eu, lobortis in odio.

Footnote: Praesent convallis urna a lacus interdum ut hendrerit risus congue.

Footnote Numbered Buttons

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor.

Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor.

MENU