J Wiggiff J Wiggiff - 1 month ago 7
CSS Question

JQuery and HTML not working

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 ma 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 somthing stupid.
Please Help!

Answer

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