I am attempting to tweak a javaScript animation I found on codepen here, displaying a messenger-esque chat box with predetermined text. I've gotten jquery set up on my workspace and have javascript enabled, but the script doesn't run. I know the external file is linked correctly and I've tested whether jQuery is working on the site I'm working on at all(it is.)
I notice when I put the code in any online compiler, It works! but in my own code I get nothing. I've attached my html, css, and js files, but I am just lost at why the animations don't show up. I am fairly new to this, hoping its just a small error on my part.
And preemptive apology for long post, trying to be as thorough as possible.
var chatMessages = [{
name: "ms1",
msg: "Who are you?",
delay: 1000,
align: "right",
showTime: true,
time: "19:58"
},
{
name: "ms2",
msg: "We are young team of entrepreneurs, developers, designers and visionaries. We are based in Berlin and started working on Freedactics in early 2015.",
delay: 6000,
align: "left",
showTime: true,
time: "19:58"
},
{
name: "ms3",
msg: "Could you describe Freedactics in one sentence?",
delay: 3000,
align: "right",
showTime: true,
time: "19:58"
},
{
name: "ms4",
msg: "Everything from lecture to exam in your pocket: Freedactics is a cloud-based platform build for students needs.",
delay: 7000,
align: "left",
showTime: true,
time: "19:58"
},
{
name: "ms5",
msg: "And the longer version?",
delay: 3000,
align: "right",
showTime: true,
time: "19:58"
},
{
name: "ms6",
msg: "As students we use to organize all our daily life around web and mobile technology, except the actual studying part. For learning we still use huge amounts of paper, books and heavy backpacks.",
delay: 11000,
align: "left",
showTime: false,
time: "19:58"
},
{
name: "ms7",
msg: "Why? Because there is no solution out there to help students or teachers to easily digitalize their learning processes and contents. We think that learning should be fast, simple and effective. A platform for studying should give people the option to learn at their own scope, with their own contents integrated.",
delay: 10000,
align: "left",
showTime: false,
time: "19:58"
},
{
name: "ms8",
msg: "This is why we developed Freedactics – a cloud-based solution tailored to students needs.",
delay: 8000,
align: "left",
showTime: true,
time: "19:58"
},
{
name: "ms9",
msg: "What makes you different from other learning platforms?",
delay: 4000,
align: "right",
showTime: true,
time: "19:58"
},
{
name: "ms10",
msg: "We understand the needs of individual student. We don’t focus so much on content publishing or learning management but on learning. At the same time we acknowledge the need to integrate different perspectives, such as flash cards, content and task management.",
delay: 8000,
align: "left",
showTime: false,
time: "19:58"
},
{
name: "ms11",
msg: "So we end up with a unique mix of focus on User Experience and thrive towards integration.",
delay: 4000,
align: "left",
showTime: true,
time: "19:58"
},
{
name: "ms12",
msg: "What is your vision for the future?",
delay: 4000,
align: "right",
showTime: true,
time: "19:58"
},
{
name: "ms14",
msg: "We are releasing an App right now. But that’s only breaking ground. In fact, we have something much bigger in mind: a universe of education! Our vision is to connect people, connect tools and power learning through intelligent systems.",
delay: 9000,
align: "left",
showTime: true,
time: "19:58"
},
{
name: "ms15",
msg: "Thanks! Something you want to add?",
delay: 3000,
align: "left",
showTime: true,
time: "19:58"
},
{
name: "ms16",
msg: "You are welcome! Yes, check out freedactics.com!",
delay: 9000,
align: "left",
showTime: true,
time: "19:58"
}
];
var chatDelay = 0;
function onRowAdded() {
$('.chat-container').animate({
scrollTop: $('.chat-container').prop('scrollHeight')
});
};
$.each(chatMessages, function(index, obj) {
chatDelay = chatDelay + 4000;
chatDelay2 = chatDelay + obj.delay;
chatDelay3 = chatDelay2 + 10;
scrollDelay = chatDelay;
chatTimeString = " ";
msgname = "." + obj.name;
msginner = ".messageinner-" + obj.name;
spinner = ".sp-" + obj.name;
if (obj.showTime == true) {
chatTimeString = "<span class='message-time'>" + obj.time + "</span>";
}
$(".chat-message-list").append("<li class='message-" + obj.align + " " + obj.name + "' hidden><div class='sp-" + obj.name + "'><span class='spinme-" + obj.align + "'><div class='spinner'><div class='bounce1'></div><div class='bounce2'></div><div class='bounce3'></div></div></span></div><div class='messageinner-" + obj.name + "' hidden><span class='message-text'>" + obj.msg + "</span>" + chatTimeString + "</div></li>");
$(msgname).delay(chatDelay).fadeIn();
$(spinner).delay(chatDelay2).hide(1);
$(msginner).delay(chatDelay3).fadeIn();
setTimeout(onRowAdded, chatDelay);
setTimeout(onRowAdded, chatDelay3);
chatDelay = chatDelay3;
});#wrapper {
width: 600px;
margin: 50px auto;
}
body {
font-family: Arial;
background: #fff;
}
.chat ul {
margin: 0px;
padding: 0px;
list-style: none;
}
.message-left .message-time {
display: block;
font-size: 12px;
text-align: left;
padding-left: 30px;
padding-top: 4px;
color: #ccc;
font-family: Courier;
}
.message-right .message-time {
display: block;
font-size: 12px;
text-align: right;
padding-right: 20px;
padding-top: 4px;
color: #ccc;
font-family: Courier;
}
.message-left {
text-align: left;
margin-bottom: 16px;
}
.message-left .message-text {
max-width: 80%;
display: inline-block;
background: #fff;
padding: 15px;
font-size: 14px;
color: #999;
border-radius: 30px;
font-weight: 100;
line-height: 1.5em;
}
.message-right {
text-align: right;
margin-bottom: 16px;
}
.message-right .message-text {
line-height: 1.5em;
display: inline-block;
background: #5ca6fa;
padding: 15px;
font-size: 14px;
color: #fff;
border-radius: 30px;
line-height: 1.5em;
font-weight: 100;
text-align: left;
}
.chat {
border-radius: 30px;
padding: 20px;
background: #f5f7fa;
}
.chat-container {
height: 400px;
overflow-y: scroll;
padding-right: 16px;
}
.spinme-right {
display: inline-block;
padding: 15px 20px;
font-size: 14px;
border-radius: 30px;
line-height: 1.25em;
font-weight: 100;
opacity: 0.2;
}
.spinme-left {
display: inline-block;
padding: 15px 20px;
font-size: 14px;
color: #ccc;
border-radius: 30px;
line-height: 1.25em;
font-weight: 100;
opacity: 0.2;
}
.spinner {
margin: 0;
width: 30px;
text-align: center;
}
.spinner > div {
width: 10px;
height: 10px;
border-radius: 100%;
display: inline-block;
-webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
animation: sk-bouncedelay 1.4s infinite ease-in-out both;
background: rgba(0,0,0,1);
}
.spinner .bounce1 {
-webkit-animation-delay: -0.32s;
animation-delay: -0.32s;
}
.spinner .bounce2 {
-webkit-animation-delay: -0.16s;
animation-delay: -0.16s;
}
@-webkit-keyframes sk-bouncedelay {
0%,
80%,
100% {
-webkit-transform: scale(0)
}
40% {
-webkit-transform: scale(1.0)
}
}
@keyframes sk-bouncedelay {
0%,
80%,
100% {
-webkit-transform: scale(0);
transform: scale(0);
}
40% {
-webkit-transform: scale(1.0);
transform: scale(1.0);
}
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="wrapper">
<div class="chat">
<div class="chat-container">
<div class="chat-listcontainer">
<ul class="chat-message-list">
</ul>
</div>
</div>
</div>
</div>Then below is my html and css
var chatMessages = [{
name: "ms1",
msg: "Who are you?",
delay: 1000,
align: "right",
showTime: true,
time: "19:58"
},
{
name: "ms2",
msg: "We are young team of entrepreneurs, developers, designers and visionaries. We are based in Berlin and started working on Freedactics in early 2015.",
delay: 6000,
align: "left",
showTime: true,
time: "19:58"
},
{
name: "ms3",
msg: "Could you describe Freedactics in one sentence?",
delay: 3000,
align: "right",
showTime: true,
time: "19:58"
},
{
name: "ms4",
msg: "Everything from lecture to exam in your pocket: Freedactics is a cloud-based platform build for students needs.",
delay: 7000,
align: "left",
showTime: true,
time: "19:58"
},
{
name: "ms5",
msg: "And the longer version?",
delay: 3000,
align: "right",
showTime: true,
time: "19:58"
},
{
name: "ms6",
msg: "As students we use to organize all our daily life around web and mobile technology, except the actual studying part. For learning we still use huge amounts of paper, books and heavy backpacks.",
delay: 11000,
align: "left",
showTime: false,
time: "19:58"
},
{
name: "ms7",
msg: "Why? Because there is no solution out there to help students or teachers to easily digitalize their learning processes and contents. We think that learning should be fast, simple and effective. A platform for studying should give people the option to learn at their own scope, with their own contents integrated.",
delay: 10000,
align: "left",
showTime: false,
time: "19:58"
},
{
name: "ms8",
msg: "This is why we developed Freedactics – a cloud-based solution tailored to students needs.",
delay: 8000,
align: "left",
showTime: true,
time: "19:58"
},
{
name: "ms9",
msg: "What makes you different from other learning platforms?",
delay: 4000,
align: "right",
showTime: true,
time: "19:58"
},
{
name: "ms10",
msg: "We understand the needs of individual student. We don’t focus so much on content publishing or learning management but on learning. At the same time we acknowledge the need to integrate different perspectives, such as flash cards, content and task management.",
delay: 8000,
align: "left",
showTime: false,
time: "19:58"
},
{
name: "ms11",
msg: "So we end up with a unique mix of focus on User Experience and thrive towards integration.",
delay: 4000,
align: "left",
showTime: true,
time: "19:58"
},
{
name: "ms12",
msg: "What is your vision for the future?",
delay: 4000,
align: "right",
showTime: true,
time: "19:58"
},
{
name: "ms14",
msg: "We are releasing an App right now. But that’s only breaking ground. In fact, we have something much bigger in mind: a universe of education! Our vision is to connect people, connect tools and power learning through intelligent systems.",
delay: 9000,
align: "left",
showTime: true,
time: "19:58"
},
{
name: "ms15",
msg: "Thanks! Something you want to add?",
delay: 3000,
align: "left",
showTime: true,
time: "19:58"
},
{
name: "ms16",
msg: "You are welcome! Yes, check out freedactics.com!",
delay: 9000,
align: "left",
showTime: true,
time: "19:58"
}
];
var chatDelay = 0;
function onRowAdded() {
$('.chat-container').animate({
scrollTop: $('.chat-container').prop('scrollHeight')
});
};
$.each(chatMessages, function(index, obj) {
chatDelay = chatDelay + 4000;
chatDelay2 = chatDelay + obj.delay;
chatDelay3 = chatDelay2 + 10;
scrollDelay = chatDelay;
chatTimeString = " ";
msgname = "." + obj.name;
msginner = ".messageinner-" + obj.name;
spinner = ".sp-" + obj.name;
if (obj.showTime == true) {
chatTimeString = "<span class='message-time'>" + obj.time + "</span>";
}
$(".chat-message-list").append("<li class='message-" + obj.align + " " + obj.name + "' hidden><div class='sp-" + obj.name + "'><span class='spinme-" + obj.align + "'><div class='spinner'><div class='bounce1'></div><div class='bounce2'></div><div class='bounce3'></div></div></span></div><div class='messageinner-" + obj.name + "' hidden><span class='message-text'>" + obj.msg + "</span>" + chatTimeString + "</div></li>");
$(msgname).delay(chatDelay).fadeIn();
$(spinner).delay(chatDelay2).hide(1);
$(msginner).delay(chatDelay3).fadeIn();
setTimeout(onRowAdded, chatDelay);
setTimeout(onRowAdded, chatDelay3);
chatDelay = chatDelay3;
});/*::-webkit-scrollbar {
width: 0px;
background: transparent; /* make scrollbar transparent
}*/
body, html{
height: 100%;
}
body {
margin: 0px;
padding: 0px;
color: black;
font-size: 12px;
font-family: Helvetica, Arial, sans-serif;
/*overflow: hidden; hides scroll bar for page1 animation*/
}
header {
width: 275px;
height: 100px;
margin: 0 0 0 30px;
}
h1 {
position: absolute;
margin: 0;
padding: 0;
text-align: center;
color: #fff;
text-shadow: 0 5px 10px rgba(0,0,0,1);
/*mix-blend-mode: overlay;*/ /*allows for a more adaptable font*/
font-size: 32px;
font-family: Bungee, cursive;
}
aside, section, article, footer, header, video {
display: block;
}
nav {
position:sticky;
top:0;
z-index: 40;
}
footer {
position: fixed;
bottom: 0px;
clear: both;
font-size: 10px;
color: white;
}
aside h3 {
padding-top: 20px;
font-family: Georgia, serif;
color: white;
}
ul {
list-style-type: none;
margin: 0;
padding: 0 100px;
overflow: hidden;
background-image: url(images/ulbg.png);
background-repeat: repeat;
background-color: rgb(34,46,80);
opacity: 0.5;
}
li {
float: right;
}
li a {
display: block;
color: white;
text-align: center;
padding: 12px 50px;
text-decoration: none;
}
nav li a:link {
background-color: rgba(82,101,91,0.7);
color: white;
text-decoration: none;
}
nav li a:hover, nav li a:focus {
background: #36453d;
}
.home-bg{
background-image: url(images/Bgtest.png);
height: 100%;
background-repeat: repeat;
/*background-size: cover;*/
}
.source-bg{
background-image: url(images/Bgtest.png);
height: 100%;
background-repeat: repeat;
}
.info-bg{
background-image: url(images/Bgtest.png);
height: 100%;
background-repeat: repeat;
}
a:link {
color: white;
}
a:visited {
color: white;
}
a:hover {
color: white;
}
a:active {
color: white;
}
@keyframes phonebody {
from {opacity:0; left: 0px; bottom:-500px;}
to {opacity:1; left: 0px; bottom: 0px;}
}
@keyframes screen {
from {opacity:0; left: 0px; bottom:-460px;}
to {opacity:1; left: 0px; bottom: 0px;}
}
@keyframes icon1 {
0% {transform: scale(.0001) rotateZ(360deg);}
100%{transform: scale(.99) rotateZ(-360deg);}
}
@keyframes icon2 {
from {opacity:0; bottom:-500px;}
to {opacity:1; bottom:0px;}
}
@keyframes icon4 {
from {transform: scale(.0001); opacity:0; bottom:-500px;}
to {transform: scale(.99); opacity:1; bottom:0px;}
}
@keyframes infoverlay {
from {opacity:0;}
to {opacity:0.9;}
}
.cssphone {
width: 600px;
height: 800px;
margin: 50px auto;
border-radius: 10px;
position: relative;
background-color: #333;
animation-name: phonebody;
animation-duration: 1.5s;
display: block;
}
.cssphone2 {
width: 600px;
height: 800px;
margin: 50px auto;
border-radius: 10px;
position: relative;
background-color: #333;
box-shadow: 10px 10px 5px rgba(0,0,0,0.5);
animation-name: phonebody;
animation-duration: 1.5s;
display: flex; /*allows the use of margin:auto auto;*/
z-index:10;
}
.cssscreen {
width: 95%;
height: 90%;
clear:both;
margin: auto auto;/*centers the "screen"*/
border-radius: 10px;
position: relative;
background-color: black/*#c0fff4*/;
animation-name: screen;
animation-duration: 1.5s;
display: block;
z-index:20;
}
.phoneicon1 {
width: 200px;
height: 200px;
margin: 15px 0 0 15px;
position: relative;
float: left;
background-image: url(images/sourceicon1.jpg);
animation-name: icon1;
animation-duration: 1.7s;
display: block;
z-index:30;
}
.phoneicon2 {
width: 325px;
height: 200px;
margin: 15px 0 0 15px;
position: relative;
float: left;
background-image: url(images/sourceicon2.jpg);
animation-name: icon2;
animation-duration: 1.6s;
display: block;
z-index:30;
}
.phoneicon3 {
width: 408px;
height: 280px;
margin: 15px 0 0 15px;
position: relative;
float: left;
background-image: url(images/sourceicon3.jpg);
animation-name: icon2;
animation-duration: 1.2s;
display: block;
z-index:30;
}
.phoneicon4 {
width: 132px;
height: 132px;
margin: 15px 0 0 10px;
position: relative;
float: left;
background-image: url(images/sourceicon4.png);
animation-name: icon4;
animation-duration: 1.9s;
display: block;
z-index:30;
}
.phoneicon5 {
width: 132px;
height: 132px;
margin: 15px 0 0 10px;
position: relative;
float: left;
background-image: url(images/sourceicon5.png);
animation-name: icon2;
animation-duration: 1.4s;
display: block;
z-index:30;
}
.phoneicon6 {
width: 540px;
height: 190px;
margin: 15px 0 0 15px;
position: relative;
float: left;
background-image: url(images/sourceicon6.jpg);
animation-name: icon2;
animation-duration: 1.5s;
display: block;
z-index:30;
}
.text {
display:none;
}
.phoneicon1:hover .text {
width: 100%;
height: 100%;
display:block;
color:black;
font-size: 20px;
position: absolute;
text-align: center;
background-color: #708090;
opacity: 0.9;
animation-name: infoverlay;
animation-duration: 1s;
font-family: 'Roboto', sans-serif;
}
.phoneicon2:hover .text {
width: 100%;
height: 100%;
display:block;
color:black;
font-size: 20px;
position: absolute;
text-align: center;
background-color: #708090;
opacity: 0.9;
animation-name: infoverlay;
animation-duration: 1s;
font-family: 'Roboto', sans-serif;
}
.phoneicon3:hover .text {
width: 100%;
height: 100%;
display:block;
color:black;
font-size: 20px;
position: absolute;
text-align: center;
background-color: #708090;
opacity: 0.9;
animation-name: infoverlay;
animation-duration: 1s;
font-family: 'Roboto', sans-serif;
}
.phoneicon5:hover .text {
width: 100%;
height: 100%;
display:block;
color:black;
font-size: 20px;
position: absolute;
text-align: center;
background-color: #708090;
opacity: 0.9;
animation-name: infoverlay;
animation-duration: 1s;
font-family: 'Roboto', sans-serif;
}
.phoneicon6:hover .text {
width: 100%;
height: 100%;
display:block;
color:black;
font-size: 20px;
position: absolute;
text-align: center;
background-color: #708090;
opacity: 0.9;
animation-name: infoverlay;
animation-duration: 1s;
font-family: 'Roboto', sans-serif;
}
/*javascript stuff test*/
#wrapper {
width: 600px;
margin: 50px auto;
}
.chat ul {
margin: 0px;
padding: 0px;
list-style: none;
}
.message-left .message-time {
display: block;
font-size: 12px;
text-align: left;
padding-left: 30px;
padding-top: 4px;
color: #ccc;
font-family: Courier;
}
.message-right .message-time {
display: block;
font-size: 12px;
text-align: right;
padding-right: 20px;
padding-top: 4px;
color: #ccc;
font-family: Courier;
}
.message-left {
text-align: left;
margin-bottom: 16px;
}
.message-left .message-text {
max-width: 80%;
display: inline-block;
background: #fff;
padding: 15px;
font-size: 14px;
color: #999;
border-radius: 30px;
font-weight: 100;
line-height: 1.5em;
}
.message-right {
text-align: right;
margin-bottom: 16px;
}
.message-right .message-text {
line-height: 1.5em;
display: inline-block;
background: #5ca6fa;
padding: 15px;
font-size: 14px;
color: #fff;
border-radius: 30px;
line-height: 1.5em;
font-weight: 100;
text-align: left;
}
.chat {
border-radius: 30px;
padding: 20px;
background: #f5f7fa;
}
.chat-container {
height: 400px;
overflow-y: scroll;
padding-right: 16px;
}
.spinme-right {
display: inline-block;
padding: 15px 20px;
font-size: 14px;
border-radius: 30px;
line-height: 1.25em;
font-weight: 100;
opacity: 0.2;
}
.spinme-left {
display: inline-block;
padding: 15px 20px;
font-size: 14px;
color: #ccc;
border-radius: 30px;
line-height: 1.25em;
font-weight: 100;
opacity: 0.2;
}
.spinner {
margin: 0;
width: 30px;
text-align: center;
}
.spinner > div {
width: 10px;
height: 10px;
border-radius: 100%;
display: inline-block;
-webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
animation: sk-bouncedelay 1.4s infinite ease-in-out both;
background: rgba(0,0,0,1);
}
.spinner .bounce1 {
-webkit-animation-delay: -0.32s;
animation-delay: -0.32s;
}
.spinner .bounce2 {
-webkit-animation-delay: -0.16s;
animation-delay: -0.16s;
}
@-webkit-keyframes sk-bouncedelay {
0%,
80%,
100% {
-webkit-transform: scale(0)
}
40% {
-webkit-transform: scale(1.0)
}
}
@keyframes sk-bouncedelay {
0%,
80%,
100% {
-webkit-transform: scale(0);
transform: scale(0);
}
40% {
-webkit-transform: scale(1.0);
transform: scale(1.0);
}
}<!DOCTYPE html>
<html class="source-bg" lang="en">
<head>
<meta charset="utf-8" />
<!--<script type="text/javascript" src="script.js"></script>-->
<title>Page 2</title>
<!--This is the title to the site-->
<link rel="stylesheet" type='text/css' href='capstone.css'>
<script language="JavaScript" type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script language="JavaScript" type="text/javascript" src="script.js"></script>
<link href="https://fonts.googleapis.com/css?family=Bungee" rel="stylesheet">
</head>
<body>
<nav>
<ul class="headul">
<li><a href="page2.html">Learn More</a></li>
<li><a href="page1.html">Infographic</a></li>
<li><a href="index.html">Home</a></li>
</ul>
</nav>
<h1 style="float:left;"><strong>Further Reading</strong></h1>
<div class="cssphone2">
<div class="cssscreen">
<div class="phoneicon1" onclick="window.open('https://www.southuniversity.edu/whoweare/newsroom/blog?postID=aaf0df8d-a609-48fd-bd12-1454765a1f94#.W9gMuy0TNZY.twitter','_blank');" style="cursor:pointer;">
<div class="text"><strong>South University Researchers and Affiliates on Mobile Phones' Impact on Society</strong></div>
</div>
<div class="phoneicon2" onclick="window.open('https://mobilebusinessinsights.com/2018/01/future-technology-of-mobile-phones-what-can-you-expect-to-see-at-mobile-world-congress-2018/','_blank');" style="cursor:pointer;">
<div class="text"><strong>Taylor Holland Reporting at Mobile World Congress 2018</strong></div>
</div>
<br>
<div class="phoneicon3" onclick="window.open('https://www.psychologytoday.com/us/blog/artificial-maturity/201409/nomophobia-rising-trend-in-students','_blank');" style="cursor:pointer;">
<div class="text"><strong>Tim Elmore Discussing the Rise in Nomophobia in Students</strong></div>
</div>
<div class="phoneicon4"></div>
<div class="phoneicon5" onclick="window.open('http://www.pewinternet.org/2015/08/26/chapter-1-always-on-connectivity/','_blank');" style="cursor:pointer;">
<div class="text"><strong>Lee Rainie on Society and Mobile Connectivity</strong></div>
</div>
<div class="phoneicon6" onclick="window.open('https://www.webdesignerdepot.com/2009/05/the-evolution-of-cell-phone-design-between-1983-2009/','_blank');" style="cursor:pointer;">
<div class="text"><strong>History and Development of the Cell Phone</strong></div>
</div>
</div>
</div>
<div id="wrapper">
<div class="chat">
<div class="chat-container">
<div class="chat-listcontainer">
<ul class="chat-message-list">
</ul>
</div>
</div>
</div>
</div>
</body>
</html>
