Categoria: css

Pubblicato il

Pop-up footnotes (at the window bottom)

A good starting point is the Hugo footnotes

But I have done some improvements (according to my needs), as the following:

  1. link (at the end of a html page) the file footnotes.js, with this content:
function getFootnoteContent(index) {
  const id = "fn:" + index;
  const fn = document.getElementById(id);
  return fn.innerHTML.trim();
}

function footnotePopup(showIndex, showCloseBtn) {
  const popupWrapper = document.querySelector("#popup-wrapper");

  // Set whether to display index and/or close button. Default is true for both
  if (showIndex === undefined) {
    showIndex = true;
  }

  if (showCloseBtn === undefined) {
    showCloseBtn = false;
  }

  // Create main container that will hold footnote content
  const popupContent = popupWrapper.appendChild(document.createElement("div"));
  popupContent.id = "popup-content";

  let popupIndex = null;
  if (showIndex) {
    popupIndex = popupWrapper.insertBefore(
      document.createElement("div"),
      popupContent
    );
    popupIndex.id = "popup-index";
  }

  let popupCloseButton = null;
  if (showCloseBtn) {
    popupCloseButton = popupWrapper.appendChild(document.createElement("div"));
    popupCloseButton.innerHTML = "[x]";
    popupCloseButton.id = "popup-close";
  }

  // Remove redundant [return] links from footnote list (optional)
  const fnReturns = document.querySelectorAll("a.footnote-return");
  fnReturns.forEach(function (fnReturn) {
    const parent = fnReturn.parentNode;
    parent.removeChild(fnReturn);
  });

  const fnRefs = document.querySelectorAll("a[id^='fnref:']");
  fnRefs.forEach(function (fnRef) {
    fnRef.addEventListener("click", handler("refs", fnRef));
  });

  //window.addEventListener("scroll", handler("close"));
  
  document.addEventListener(
    "click",
    function (event) {
      if (
        event.target.matches("a[id^='fnref']") ||
        event.target.matches("#popup-content")
      ) {
        return;
      }
      popupWrapper.style.display = "none";
    },
    false
  );

  if (showCloseBtn) {
    popupCloseButton.addEventListener("click", handler("close"));
  }

  function handler(type, node) {
    console.log("test");
    return function (event) {
      if (type === "close") {
        popupWrapper.style.display = "none";
      }

      if (type === "refs") {
        event.preventDefault();

        const index = node.id.substring(6);

        if (showIndex) {
          popupIndex.innerHTML = index + ".";
        }

        popupContent.innerHTML = getFootnoteContent(index);
        popupWrapper.style.display = "flex";
      }
    };
  }
}

footnotePopup(false, true);

2) Put, before that link, the div where the note will be shown

<div class=\"bottom-panel\" id=\"bottom-panel\">
 <div class=\"popup-wrapper\" id=\"popup-wrapper\"></div>
</div>

3) Modify the anchor tag (within your main text), with something like 

<a href="#n1" id="fnref:1">[1]</a>

4) and the footnote should be like the following:

<p id="fn:1"><a href="#fnref:1">[1]</a> your footnote here.</p>
Pubblicato il

Html emojis

Here you can find a complete set of available emojis to use in your website.

You can have an image from a simple html code, like this:

📆 🌤

To add an emoji via css, you have to set something like

.book:before {
  content: "\01F4D5";
}
Pubblicato il

tables and small screens

Tables, mainly if with more than two columns, are badly rendered on small screens (smartphones, tablets and the like). Indeed, not only they are unreadable, but they mess up the whole page, making it unreadable on small screens.

Therefore the best would be avoid as possible tables used as layout or even concept map.

The only tables you should use are for data (as from a database). In these cases you can use this helpful css code:

 <style type="text/css">
 /*<![CDATA[*/
 table {
  border: 1px solid #ccc;
  border-collapse: collapse;
  margin: 0;
  padding: 0;
  width: 100%;
  table-layout: fixed;
 }

 table caption {
  font-size: 1.5em;
  margin: .5em 0 .75em;
 }

 table tr {
  background-color: #f8f8f8;
  border: 1px solid #ddd;
  padding: .35em;
 }

 table th,
 table td {
  padding: .625em;
  text-align: center;
 }

 table th {
  font-size: .85em;
  letter-spacing: .1em;
  text-transform: uppercase;
 }

 @media screen and (max-width: 600px) {
  table {
    border: 0;
  }

  table caption {
    font-size: 1.3em;
  }
  
  table thead {
    border: none;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
  }
  
  table tr {
    border-bottom: 3px solid #ddd;
    display: block;
    margin-bottom: .625em;
  }
  
  table td {
    border-bottom: 1px solid #ddd;
    display: block;
    font-size: .8em;
    text-align: right;
  }
  
  table td::before {
    /*
    * aria-label has no advantage, it won't be read inside a table
    content: attr(aria-label);
    */
    content: attr(data-label);
    float: left;
    font-weight: bold;
    text-transform: uppercase;
  }
  
  table td:last-child {
    border-bottom: 0;
  }
 }

 /*]]>*/
 </style>

In this way you can get you data perfectly readable on small screen., as you can see in this example.

Pubblicato il

How to set the css :.after size

It may happen that an image you chose for a css after content is too big. Therefore you need to resize it.

The following code doesn’t work:

yourelement::after {
  content: url(image.jpg);
  width: 10px;
}

You should use this, instead

yourelement::after{
    background-image: url(image);
    background-size: 10px 20px;
    display: inline-block;
    width: 10px; 
    height: 20px;
    content:"";
}

Pubblicato il

center (v and h) an expanded element

It is not easy to center vertically and horizontally an expanded element in a page.

I found this code working for me:

.expansible {max-width: 10vw; 
    transition: all 1s; 
    transition:transform 0.25s ease;}
.expanded {
    max-width: 20vw;
    transform:scale(2.6);
    position: absolute;
    left: 30%;
    top: 25%;
    outline:0;
}

The image is expended with this js code (put at the end of a file):

document.querySelectorAll('img.expansible').forEach(imageElement => {
  imageElement.addEventListener('click', e => {
    e.preventDefault()
    imageElement.classList.toggle('expanded')
  })
})

and adding the class expansible to the images you want expansible.