Friday, 1 December 2023
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.
index.html
app.js
First up is one from 2010 titled Simple tab navigation using jQuery.
<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>
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");
Thursday, 23 November 2023
Subscribe to:
Posts (Atom)