Tuesday 28 November 2023

Revisit "How to make the entire page fade in on load" using Vue.js

 index.html

<!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset="UTF-8" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title>Body Fade In</title>

    <link rel="stylesheet" href="./style.css" />

  </head>

  <body>

    <transition name="fade" appear>

      <h1>Hello World!</h1>

    </transition>

    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

    <script src="./app.js"></script>

  </body>

</html>

style.css

.fade-enter-active,

.fade-leave-active {

  transition: opacity 1s;

}

.fade-enter-from,

.fade-leave-to {

  opacity: 0;

}

app.js

const app = Vue.createApp({});

app.mount("body");

Revisit "Simple tab navigation using jQuery" using Vue.js

This is the first of a series in which I revisit old blog posts which made use of JavaScript and jQuery. I attempt to implement them, this time using Vue.js in order to improve my Vue.js skills.
First up is one from 2010 titled Simple tab navigation using jQuery.

index.html
<html lang="en">
  <head>
    <meta charset="UTF-8"></meta>
    <title>Tabbed Navigation</title>
    <style type="text/css">
      body {
        font-family: Sans-serif;
      }
      #subSystem {
        margin: 0 auto;
        width: 400px;
      }
      #subNav a.subMenu {
        display: block;
        text-decoration: none;
        float: left;
        text-align: center;
        width: 5rem;
        height: 2.5rem;
        padding-top: 1rem;
        border-top: 0.0625rem solid #ccc;
        border-left: 0.0625rem solid #ccc;
        border-right: 0.0625rem solid #ccc;
        color: #000;
      }
      #subNav a.subMenu:hover {
        background: #a3a3a3;
        color: #fff;
      }
      .menuSelected {
        background: #ccc;
        color: #fff;
      }
      #subContent {
        clear: left;
        min-height: 25rem;
        height: 25rem;
        border: 0.0625rem solid #ccc;
      }
    </style>
  </head>
  <body>
    <div id="subSystem">
      <div id="subNav">
        <a class="subMenu menuSelected" click="loadContent" href="./subPage1.html">First</a>
        <a class="subMenu" click="loadContent" href="./subPage2.html">Second</a>
        <a class="subMenu" click="loadContent" href="./subPage3.html">Third</a>
      </div>
      <div id="subContent"></div>
    </div>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script src="./app.js"></script>
  </body>
</html>

app.js

const app = Vue.createApp({
  methods: {
    loadContent(event) {
      event.preventDefault();
      const href = event.target.getAttribute("href");
      fetch(href)
        .then((response) => response.text())
        .then((data) => {
          document.getElementById("subContent").innerHTML = data;
        })
        .catch((error) => {
          console.error("Error loading content:", error);
        });
    },
  },
  mounted() {
    // Simulate a click on the first tab when the page loads
    const firstTab = document.querySelector(".subMenu.menuSelected");
    if (firstTab) {
      firstTab.click();
    }
  },
});

app.mount("#subSystem");