Javascript

Jellyfish UI is fundamentally a CSS framework, however it does come with a few helpful Javascript functions.

As mentioned in Getting Started, you should include the dist/jellyfish.min.js script in your project; this is because some core functionality such as navigation and accessibility is dependent on Javascript.

Cookies

Jellyfish provides a simple way to set, get and delete cookies.

    
      /**
        * Set a Cookie
        * @param {string} name - The name of the cookie
        * @param {string} value - The value of the cookie
        * @param {number} days - The number of days until the cookie expires
        */
      jfSetCookie(name, value, days);

      /**
        * Get a Cookie
        * @param {string} name - The name of the cookie
        * @returns {string} The value of the cookie
        */
      jfGetCookie(name);

      /**
        * Delete a Cookie
        * @param {string} name - The name of the cookie
        */
      jfDestroyCookie(name);
    
  

Debouncing functionality

Jellyfish provides a simple way to debounce functionality in the browser, eg on scroll or resize. This should be used whenever possible to avoid excessive execution of JS.

You need to :

• Declare the function you wish to run on debounce
• Hook the function into jfDebounce() which takes four args:
• eventListener - the window EventListener you wish to listen to (eg. resize or scroll)
• function - the function to run on debounce
• timeout - optional timeout (defaults to 300)
• args - any arguments you wish to pass to the function. If timeout is not set, args can be the third argument of jfDebounce()

This page uses the example below, on resize the letters in the heading above will change font size. On scroll, the letters will randomly change color.

    
      // On document ready, set up the letters inside the element to be split into spans
      document.addEventListener("DOMContentLoaded", function () {
        let itemToChange = document.querySelector("#debounce-example");
        if (!itemToChange) return;

        if (!itemToChange.classList.contains("is-split")) {
          // Add the is-split class to the element
          itemToChange.classList.add("is-split");

          let letters = itemToChange.innerHTML.split("");

          // Wrap each letter inside the element with a span
          itemToChange.innerHTML = letters
            .map(
              (letter) =>
                `<span class="debounce-letter" style="transition-delay: ${
                  Math.random() * 1
                }s">${letter}</span>`
            )
            .join("");
        }
      });

      function debounceExample(eventType) {
        let itemToChange = document.querySelector("#debounce-example");
        if (!itemToChange) return;

        if (eventType === "changeCase") {
          // Get all the letters inside the element and randomly set size between 0.8em and 1.2em
          let lettersToChange = document.querySelectorAll(".debounce-letter");
          lettersToChange.forEach((letter) => {
            letter.style.fontSize = `${Math.random() * 0.4 + 0.8}em`;
          });
        } else if (eventType === "changeColor") {
          let lettersToChange = document.querySelectorAll(".debounce-letter");
          lettersToChange.forEach((letter) => {
            let randomColor = Math.floor(Math.random() * 16777215).toString(16);
            letter.style.color = `#${randomColor}`;
          });
        }
      }
      jfDebounce("resize", debounceExample, 100, ["changeCase"]);
      jfDebounce("scroll", debounceExample, ["changeColor"]);
    
  

Lazy Load Background Images

Jellyfish will lazy-load background images; you need to add a class .has-bg-img and a data-bg-img attribute to the element.

    
      <div class="has-bg-img" style="background-image:url('https://placekitten.com/450/150');" data-bg-img="https://placekitten.com/1800/600"></div>