This script works to show a banner on all platforms, but I would like it to show only when it detects iOS devices.
<---- Good Script------->
const cookieBanner = document.querySelector(".cookie-banner");
const cookieButton = document.querySelector(".cookie-btn");
cookieButton.addEventListener("click", () => {
cookieBanner.classList.remove("active");
localStorage.setItem("cookieBannerDisplayed", "true");
});
setTimeout(() => {
if (!localStorage.getItem("cookieBannerDisplayed")) {
cookieBanner.classList.add("active");
}
}, 2000);
I tried doing this below but it didn't work. Instead, it completely no longer works on any platform; not on Safari iOS, Safari, Chrome nor Firefox.
<---- Bad Script------->
const cookieBanner = document.querySelector(".cookie-banner");
const cookieButton = document.querySelector(".cookie-btn");
var t = window.navigator.userAgent,
a = window.navigator.platform;
cookieButton.addEventListener("click", () => {
cookieBanner.classList.remove("active");
localStorage.setItem("cookieBannerDisplayed", "true");
});
setTimeout(() => {
if (!localStorage.getItem("cookieBannerDisplayed")) && if (!["iPhone", "iPad", "iPod"].indexOf(a)) {
cookieBanner.classList.add("active");
}
}, 2000);
Edit: I'm including the CSS code that it 'active'ates.
What this does is show the banner sliding into the users view:
.cookie-banner{
display: flex;
flex-direction: row;
background-color:#282828;
opacity: 0.90;
color: #fff;
width: 100%;
position: fixed;
top: -100%;
right: 0;
z-index: 100;
align-items: center;
justify-content: start;
font-size: 0.875rem;
line-height: 1.5;
font-weight: 400;
box-shadow: rgba(255, 255, 255, 0.05) 0px -1px 0px 0px;
padding: 1rem 1.25rem 1rem 18px;
transition: 400ms;
}
.cookie-banner a{
color: #f5f6fa;
text-decoration: underline;
}
.cookie-btn {
display: inline-flex;
background-color: transparent;
border: 1px solid #fff;
color: #f5f6fa;
padding: .2rem 1rem;
font-size: .875rem;
margin-bottom: 9px;
margin-left: 30px;
border-radius: 50px;
cursor: pointer;
}
.cookie-banner.active {
top: 0;
}
Below is the main page that the user is looking at basically the body is normally filled with article words.
On the main page I have this
<head>
<link rel="stylesheet" type="text/css" href="assets/css/ios-banner.css">
</head>
<body>
div class="cookie-banner">
<p> We use cookies to provide you with the best experience on our site. Learn More </p>
<button class="cookie-btn">Okay</button>
</div>
<script src="assets/js/ios-banner.js"></script>
</body>
Any ideas what I'm doing wrong?
Your issue was you had bad logic in your set timeout callback, and you have not got a proper opening tag to your banner div in the html you list.
Also in general try to use good naming practices instead of variable names like 't' and 'a' as it will make your code hard to read and therefore hard to understand.
Here is what worked for me:
The CSS (unchanged)
.cookie-banner {
display: flex;
flex-direction: row;
background-color: #282828;
opacity: 0.90;
color: #fff;
width: 100%;
position: fixed;
top: -100%;
right: 0;
z-index: 100;
align-items: center;
justify-content: start;
font-size: 0.875rem;
line-height: 1.5;
font-weight: 400;
box-shadow: rgba(255, 255, 255, 0.05) 0px -1px 0px 0px;
padding: 1rem 1.25rem 1rem 18px;
transition: 400ms;
}
.cookie-banner a {
color: #f5f6fa;
text-decoration: underline;
}
.cookie-btn {
display: inline-flex;
background-color: transparent;
border: 1px solid #fff;
color: #f5f6fa;
padding: .2rem 1rem;
font-size: .875rem;
margin-bottom: 9px;
margin-left: 30px;
border-radius: 50px;
cursor: pointer;
}
.cookie-banner.active {
top: 0;
}
The HTML, used ids for selectors and fixed the opening div tag error
<div id="cookie-banner-id" class="cookie-banner">
<p>
We use cookies to provide you with the best experience on our site.
<a href="https://somewebsitehere.website/privacy.php">
Learn More
</a>
</p>
<button id="cookie-btn-id" class="cookie-btn">Okay</button>
</div>
The JS
const cookieBanner = document.getElementById("cookie-banner-id");
const cookieButton = document.getElementById("cookie-btn-id");
const userAgentValue = navigator.userAgent;
let cookieBannerDisplayed = false;
let activeClassAdded = false; // so we only add active once
cookieButton.addEventListener("click", () => {
cookieBanner.classList.remove("active");
localStorage.setItem("cookieBannerDisplayed", true);
});
setTimeout(() => {
if (!localStorage.getItem("cookieBannerDisplayed")){
["iPhone", "iPad", "iPod"].forEach((targetBrowserName) => {
if (userAgentValue.includes(targetBrowserName) && !activeClassAdded) {
cookieBanner.classList.add("active");
activeClassAdded = true;
}
});
}
}, 2000);
When testing you may need to clear local storage for each test run, else switch out the local storage for a local variable.
Related
What I want to do is when I click the task it will have a line through the text means that I'm done with the task. but the add event listener function for this is not working, I'm working with the javascript toggle and that's all I can think of right now to achieve this functionality.
Is there another way to do this? I searched on the internet and it seems complicated when I'm trying to figure it out.
const addBtn = document.querySelector("#push");
const taskInput = document.querySelector("#taskInput");
const taskOutput = document.querySelector("#tasks");
addBtn.addEventListener("click", function() {
let newTasks = taskInput.value;
if (newTasks.length == 0) {
alert("Please enter a task");
} else {
taskOutput.innerHTML += `<div class="task">
<span id="taskname">${newTasks} </span>
<button class="delete" id="deleteButton"><i class="fa-solid fa-trash"></i> </button>
</div>
`;
//delete
let deleteBtn = document.querySelector("#deleteButton");
deleteBtn.addEventListener("click", function() {
this.parentNode.remove();
});
//line through
let theTask = document.querySelectorAll(".task");
theTask.addEventListener("click", function() {
this.classList.toggle("completed");
});
}
});
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
height: 100vh;
background: linear-gradient( 90deg, rgba(241, 206, 221, 1) 0%, rgba(124, 184, 254, 1) 100%);
display: flex;
justify-content: center;
align-items: center;
font-family: 'Kumbh Sans', sans-serif;
}
.container {
border: 2px solid white;
width: 50%;
min-width: 450px;
margin: auto;
padding: 30px 40px;
}
#new-task {
position: relative;
background-color: white;
padding: 30px 20px;
border-radius: 1em;
}
#new-task input {
width: 70%;
height: 45px;
font-family: 'Manrope', sans-seif;
font-size: 1.2em;
border: 2px solid #d1d3d4;
padding: 12px;
color: #111111;
font-weight: 500;
position: relative;
border-radius: 5px;
}
#new-task input:focus {
outline: none;
border-color: violet;
}
#new-task button {
font-family: 'Manrope', sans-seif;
position: relative;
float: right;
width: 25%;
height: 45px;
border-radius: 5px;
font-weight: bold;
font-size: 16px;
border: none;
background-color: violet;
color: white;
cursor: pointer;
}
#tasks {
background-color: white;
padding: 30px 20px;
margin-top: 50px;
border-radius: 10px;
width: 100%;
}
.task {
background-color: white;
height: 50px;
padding: 5px 10px;
margin-top: 10px;
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 2px solid violet;
cursor: pointer;
}
.task span {
font-size: 18px;
font-weight: 400;
}
.task button {
background-color: violet;
color: white;
height: 100%;
width: 40px;
border: none;
border-radius: 5px;
outline: none;
cursor: pointer;
}
.task button:hover {
background-color: red;
}
.completed {
text-decoration: line-through;
}
<body>
<div class="container">
<div id="new-task">
<input type="text" name="" id="taskInput" placeholder="Task to be done" />
<button id="push">ADD</button>
</div>
<div id="tasks"></div>
</div>
<script src="/script.js"></script>
</body>
querySelectorAll will return the list of nodes matching the selector tasks. So you have to iterate through each of those nodes and add your listener. See the below code snippet
let theTasks = document.querySelectorAll(".task");
theTasks.forEach((task) => {
task.addEventListener("click", function() {
this.classList.toggle("completed");
});
});
theTask is a list of nodes. Trying to attach event listener on this list is causing issues.
Also, you will be inserting lots of buttons with same id deleteButton and spans with same id taskname which is incorrect and can cause undefined behavior.
For theTask fix, you may want to do something like:
let theTasks = [...document.querySelectorAll(".task")];
theTasks.forEach(task => {
task.addEventListener("click", function() {
this.classList.toggle("completed");
})
});
Using innerHTML to create manipulate the DOM for an application like a todo list is probably not a good idea. The answers to Advantages of createElement over innerHTML? give good explanations why.
It is worth noting that in the innerHTML code, the span and the button are created with an id and so all of these elements will have the same id. It is also probably not a good idea to have duplicate ids on one page. Why are duplicate ID values not allowed in HTML? explains why.
Also, adding event listeners to every new task is also probably not a good idea. What is DOM Event delegation? gives a good explanation why.
Finally, the Difference between HTMLCollection, NodeLists, and arrays of objects and Document.querySelectorAll() explain how to get lists of elements that can be manipulated.
So, I have rewritten the task creation code in the addBtn.addEventListener to show one way how this could be done with document.createElement().
And I have created a separate event listener on the Tasks container div, which handles both task deletion and task completion.
I also added the following CSS so that clicking on a trash can icon is handled by the parent button. Without this CSS, clicking on an icon would not delete the task.
div#tasks i {
pointer-events: none;
}
To make the todo list more visible in the code snippet below, I reduced the heights, margins, and paddings of some of the elements in the CSS.
I also added a link to the font awesome icon library.
const addBtn = document.querySelector("#push");
const taskInput = document.querySelector("#taskInput");
const taskOutput = document.querySelector("#tasks");
taskOutput.addEventListener("click", function(event) {
if (event.target && event.target.nodeName === "SPAN") {
event.target.classList.toggle("completed");
}
if (event.target && event.target.nodeName === "BUTTON") {
event.target.parentNode.remove();
}
});
addBtn.addEventListener("click", function() {
let newTasks = taskInput.value;
if (newTasks.length == 0) {
alert("Please enter a task");
} else {
// Create a task DIV
const newTaskElement = document.createElement("div");
newTaskElement.classList.add("task");
// Create a SPAN with the task name
const newTaskNameElement = document.createElement("span");
const taskTextnode = document.createTextNode(newTasks);
newTaskNameElement.appendChild(taskTextnode);
// Create a BUTTON with a TRASH CAN ICON
const newTaskDeleteButton = document.createElement("button");
const deleteImageElement = document.createElement("i");
deleteImageElement.classList.add("fa-solid", "fa-trash");
newTaskDeleteButton.appendChild(deleteImageElement);
// Append the SPAN and the BUTTON to the task DIV
newTaskElement.appendChild(newTaskNameElement);
newTaskElement.appendChild(newTaskDeleteButton);
// Append the task DIV to the TASK LIST DIV
taskOutput.appendChild(newTaskElement);
}
});
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
height: 100vh;
background: linear-gradient( 90deg, rgba(241, 206, 221, 1) 0%, rgba(124, 184, 254, 1) 100%);
font-family: 'Kumbh Sans', sans-serif;
}
/* ADDED TO MAKE SURE THAT THE TRASH ICON DOES NOT PROCESS CLICKS */
div#tasks i {
pointer-events: none;
}
.container {
border: 2px solid white;
width: 50%;
min-width: 450px;
margin: auto;
padding: 3px 4px;
}
#new-task {
position: relative;
background-color: white;
padding: 6px 4px;
border-radius: 1em;
}
#new-task input {
width: 70%;
height: 45px;
font-family: 'Manrope', sans-seif;
font-size: 1.2em;
border: 2px solid #d1d3d4;
padding: 12px;
color: #111111;
font-weight: 500;
position: relative;
border-radius: 5px;
}
#new-task input:focus {
outline: none;
border-color: violet;
}
#new-task button {
font-family: 'Manrope', sans-seif;
position: relative;
float: right;
width: 25%;
height: 45px;
border-radius: 5px;
font-weight: bold;
font-size: 16px;
border: none;
background-color: violet;
color: white;
cursor: pointer;
}
#tasks {
background-color: white;
padding: 6px 4px;
margin-top: 5px;
border-radius: 10px;
width: 100%;
min-height: 50px;
}
.task {
background-color: white;
height: 50px;
padding: 5px 10px;
margin-top: 10px;
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 2px solid violet;
cursor: pointer;
}
.task span {
font-size: 18px;
font-weight: 400;
}
.task button {
background-color: violet;
color: white;
height: 100%;
width: 40px;
border: none;
border-radius: 5px;
outline: none;
cursor: pointer;
}
.task button:hover {
background-color: red;
}
.completed {
text-decoration: line-through;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css" rel="stylesheet" />
<div class="container">
<div id="new-task">
<input type="text" name="" id="taskInput" placeholder="Task to be done" />
<button id="push">ADD</button>
</div>
<div id="tasks"></div>
</div>
I am trying to change a menu from a list to a dropdown.
I am using the Mapplic - Custom Interactive Map WordPress Plugin
I found the code for it, but I don't seem to get it to
this.addLevelSwitcher = function() {
if (self.data.levels.length > 1) {
var control = $('<div></div>').addClass('mapplic-level-switcher');
self.data.levels.forEach(function(level, i) {
var button = $('<button></button>').attr('data-level', level.id).text(level.title).prependTo(control).click(function(e) {
e.preventDefault();
self.switchLevel(level.id);
});
if (level.show) button.addClass('mapplic-selected');
});
this.el.append(control);
self.el.on('levelswitched', function(e, target) {
$('button', control).removeClass('mapplic-selected');
$('button[data-level="' + target + '"]', control).addClass('mapplic-selected');
});
}
}
Also here is the css
/* new switcher */
.mapplic-level-switcher {
position: absolute;
right: 0;
top: 0px;
margin: 12px;
}
.mapplic-level-switcher button {
background-color: #f8f8f8;
border-radius: 0;
color: #888;
cursor: pointer;
display: block;
font-size: 11px;
font-weight: 600;
line-height: 20px;
padding: 4px 10px;
text-align: center;
user-select: none;
width: 100%;
border: none;
transition: transform 0.2s;
position: relative;
}
.mapplic-level-switcher button:hover { background-color: #f8f8f8; }
.mapplic-level-switcher button:focus { outline: none; }
.mapplic-level-switcher button.mapplic-selected {
box-shadow: 0 0 12px rgba(0, 0, 0, 0.06);
background-color: #fff;
color: #222;
transform: scale(1.15);
z-index: 100;
}
I am trying to make it more responsive on mobile...
Another thing I was thinking was to hide this menu on mobile and add indiviuals buttons in order to trigger the floor plan.
Any ideas on how could I do any of this?
Thanks
Hi I am trying to figure out how to display images when clicked on a section on my bar. So far I have a working animation to switch between sections but I would like to display images under it. It's my first time doing this so I absolutely don't know how to do this and would very much appreciate the help.
var indicator = document.querySelector('.stefan-indicator');
var items = document.querySelectorAll('.stefan-item');
function handleIndicator(el) {
items.forEach(function (item) {
item.classList.remove('is-active');
item.removeAttribute('style');
});
indicator.style.width = "".concat(el.offsetWidth, "px");
indicator.style.left = "".concat(el.offsetLeft, "px");
indicator.style.backgroundColor = el.getAttribute('active-color');
el.classList.add('is-active');
el.style.color = el.getAttribute('active-color');
}
items.forEach(function (item, index) {
item.addEventListener('click', function (e) {
handleIndicator(e.target);
});
item.classList.contains('is-active') && handleIndicator(item);
});
.stefan {
margin-top:4%;
display: inline-flex;
position: relative;
overflow: hidden;
max-width: 100%;
background-color: inherit;
padding: 0 20px;
border-radius: 40px;
/* box-shadow: 0 10px 40px rgba(159, 162, 177, .8); */
display: flex;
justify-content: center;
}
.stefan-item {
color: #252525;
padding: 20px;
text-decoration: none;
transition: 0.3s;
margin: 0 6px;
z-index: 1;
font-family: 'Open sans', sans-serif;
position: relative;
cursor: pointer;
font-weight: 500;
}
.stefan-item:before {
content: "";
position: absolute;
bottom: -6px;
left: 0;
width: 100%;
height: 5px;
background-color: #ffb833;
border-radius: 8px 8px 0 0;
opacity: 0;
transition: 0.3s;
}
.stefan-item:not(.is-active):hover:before {
opacity: 1;
bottom: 0;
}
.stefan-item:not(.is-active):hover {
color: #ffb833;
cursor: pointer;
}
.stefan-indicator {
position: absolute;
left: 0;
bottom: 0;
height: 4px;
transition: 0.4s;
height: 5px;
z-index: 1;
border-radius: 8px 8px 0 0;
}
<div class="stefan">
<a class="stefan-item is-active" active-color="#ffb833">Section1</a>
<a class="stefan-item" active-color="#ffb833">Section2</a>
<a class="stefan-item" active-color="#ffb833">Section3</a>
<a class="stefan-item" active-color="#ffb833">Section4</a>
<a class="stefan-item" active-color="#ffb833">Section5</a>
<span class="stefan-indicator"></span>
</div>
If what you are trying to do is build tabs component you need to create elements for every tab that are hidden by default and only are displayed when your code tells it to.
So when stefan-item with section1 content is clicked, your javascript should tell stefan-content-1 to change it's style to display:block (by directly changing style or adding class).
You can have a look here: https://web.dev/building-a-tabs-component/ or use a ready made component. Bootstrap, Material UI and other systems have tabs for the taking.
I am working with Electron and I'm trying to make a custom title bar - I have been successful so far. But the most important function of a title bar is gone - dragging the app across the screen.
I read on the internet about the -webkit-app-region: drag; property and it works! Problem is... I can't click any of the buttons in the title bar now!
Is there a way to fix this?
HTML:
<div style="position: absolute; top: 0; width: 100%; height: 29px; overflow: hidden; z-index: 50; background: rgba(255, 255, 255, 0.8);" class="titlebar">
<h1 style="float: left; opacity: 0.85; margin: 4px 0 0 44%; font-family: Jost-400-Book; font-size: 12pt;">Dashboard - Wealm</h1>
<button id="closeApp" style="font-weight: bold; opacity: 0.55; float: right; background: none; border: none; outline: none; font-family: Multicolore; font-size: 18pt; margin-top: 2px;">x</button>
<button id="minApp" style="font-weight: bold; opacity: 0.55; float: right; background: none; border: none; outline: none; font-family: Multicolore; font-size: 18pt; margin-top: 2px;">-</button>
</div>
JavaScript:
...
const remote = require('electron').remote;
document.getElementById("minApp").addEventListener("click", function (e) {
document.getElementById('minApp').style.opacity = '0.55';
var window = remote.getCurrentWindow();
window.minimize();
});
document.getElementById("closeApp").addEventListener("click", function (e) {
document.getElementById('closeApp').style.opacity = '0.55';
var window = remote.getCurrentWindow();
window.close();
});
document.getElementById('minApp').onmouseover = function() {
document.getElementById('minApp').style.opacity = '1';
}
document.getElementById('minApp').onmouseout = function() {
document.getElementById('minApp').style.opacity = '0.55';
}
document.getElementById('closeApp').onmouseover = function() {
document.getElementById('closeApp').style.opacity = '1';
}
document.getElementById('closeApp').onmouseout = function() {
document.getElementById('closeApp').style.opacity = '0.55';
}
...
Any kind of advice is highly appreciated! Have a great day!
It's me again! I managed to solve the issue by changing the HTML like this:
<div style="position: absolute; top: 0; width: 100%; height: 29px; overflow: hidden; z-index: 50; background: rgba(255, 255, 255, 0.8);" class="titlebar">
<div class="dragzone" style="-webkit-app-region: drag; overflow: hidden; position: absolute; left: 0; width: 990px; height: 29px;"></div>
<h1 style="float: left; opacity: 0.85; margin: 4px 0 0 44%; font-family: Jost-400-Book; font-size: 12pt;">Dashboard - Wealm</h1>
<button id="closeApp" style="font-weight: bold; opacity: 0.55; float: right; background: none; border: none; outline: none; font-family: Eight One; font-size: 18pt; margin-top: 2px;">x</button>
<button id="minApp" style="font-weight: bold; opacity: 0.55; float: right; background: none; border: none; outline: none; font-family: Eight One; font-size: 18pt; margin-top: 2px;">-</button>
</div>
There's now a new element that covers part of the whole title bar except for the buttons and is set with the property -webkit-app-region: drag; that allows the window to be dragged.
Have a great day!
Glad you resolved it! I think also setting the style:
-webkit-app-region: no-drag;
on the buttons should also work.
I am trying to make a website. This is my JQuery, CSS, and part of my HTML:
var featureDisplay;
var featureUnderline;
var features = [
"comprehensive moderation", "utility commands", "music commands", "fun commands", "game integrations", "social system"
];
var featureID = 0;
function updateFeature() {
var pushinFeatureDisplay = featureDisplay.clone();
pushinFeatureDisplay.appendTo(featureDisplay.parent());
pushinFeatureDisplay.text(features[featureID]);
pushinFeatureDisplay.css("opacity", 0);
pushinFeatureDisplay.css("margin-left", -pushinFeatureDisplay.width());
pushinFeatureDisplay.animate({
opacity: 1,
marginLeft: -(pushinFeatureDisplay.width() * 0.5)
}, 1000);
var oldFeatureUnderline = featureUnderline.clone();
oldFeatureUnderline.prependTo(featureUnderline.parent());
oldFeatureUnderline.animate({
width: 0
}, 1000);
featureUnderline.prependTo($(".feature-box")[featureID]);
featureUnderline.css("width", 0);
featureUnderline.animate({
width: featureUnderline.parent().find(".feature-title").first().innerWidth()
}, 1000);
featureDisplay.animate({
opacity: 0,
marginLeft: (pushinFeatureDisplay.width() * 0.25)
}, 1000, function() {
featureDisplay.text(features[featureID++]);
if (featureID >= features.length) featureID = 0;
featureDisplay.css("opacity", 1);
featureDisplay.css("margin-left", -(pushinFeatureDisplay.width() * 0.5));
pushinFeatureDisplay.remove();
oldFeatureUnderline.remove();
});
}
$(document).ready(function() {
alert("I did the thing!");
featureDisplay = $("#feature-display");
featureUnderline = $("<div class='feature-underline'></div>");
setTimeout(updateFeature, 1000);
setInterval(updateFeature, 2500);
});
h4 {
margin-top: 4px;
margin-bottom: 4px;
color: #00cc99;
font-size: 24px;
font-weight: 400;
}
.large-text {
font-size: 48px;
font-weight: 300;
}
.information-main {
width: 66%;
margin: auto;
text-align: center;
}
.bot-avatar {
border-radius: 100%;
margin: auto;
display: block;
width: 256px;
height: 256px;
}
.button-panel {
text-align: center;
}
.button-panel a {
background-color: #fafafa;
border: 2px solid #00cc99;
color: #00cc99;
font-weight: 400;
font-size: 20px;
padding: 8px;
margin: 8px;
text-transform: uppercase;
text-decoration: none;
transition: background-color 500ms, color 500ms;
}
.button-panel a:hover {
background-color: #00cc99;
color: #fafafa;
cursor: pointer;
}
.feature-display {
color: #00cc99;
position: absolute;
}
.feature-row {
margin-top: 16px;
margin-bottom: 16px;
box-sizing: border-box;
display: table;
content: " ";
}
.feature-box {
width: 33%;
padding-left: 8px;
padding-right: 8px;
float: left;
display: inline-block;
position: relative;
box-sizing: border-box;
}
.feature-title {
margin-top: 4px;
margin-bottom: 4px;
color: #00cc99;
font-size: 24px;
font-weight: 400;
}
.feature-description {
font-weight: 300;
}
.feature-underline {
position: absolute;
width: 0;
height: 2px;
margin-top: 28px;
background-color: #00cc99;
border-radius: 128px;
}
<div class="information-main">
<img src="./JARVIS_files/JARVIS.png" class="bot-avatar">
<br>
<span class="large-text">JARVIS is an adaptable, multipurpose bot for Discord. Features include </span>
<br>
<span class="large-text feature-display" id="feature-display" style="opacity: 1; margin-left: -268.5px;">social system</span>
</div>
When I open it in my browser I don't even get a pop up.
I am trying to make the words slide in and out. I saved it from Aethex.xyz and edited it. I want it to be like on that website. Even when I download the exact source of the website and don't edit it, it still doesn't work. I am new to HTML so please do not freak out if it is something stupid.
UPDATE: I've come back almost a year later now, and I've actually figured out what I'm doing so sorry to anyone who thought this was a stupid question (it was :)).
You're missing a crucial part: jQuery.
Add this: <script src="https://code.jquery.com/jquery-3.1.1.js"></script>
Also, if you download it directly, you'll still be missing several items. In their code, they call their scripts in this fashion: <script src="/js/odometer.min.js"></script>.
You have to modify it for your own use:
<script src="https://aethex.xyz/js/odometer.min.js"></script>
Add the https://aethex.xyz/js/odometer.min.js to every script, and it should work