(Since Stack snippet is temporarily down, I included a jsfiddle link): Visit this link for the code
I've been struggling to get this script to work. Here's the simple Javascript code I have:
$(document).ready(function() {
showMessage();
setInterval(function() {
$(".msg-content").empty();
showMessage();
}, 7000);
}):root {
--msg-content-height: 26.75em;
--msg-spacing: 1em;
--msg1-height: 5.5em;
--msg2-height: 4em;
--msg3-height: 2.5em;
--msg4-height: 2.5em;
--msg5-height: 4em;
--msg6-height: 3.25em;
}
/* CSS Animation Styles */
.msg-send {
/* styles here */
}
.msg-receive {
/* styles here */
}
.msg-container {
/* styles here */
}
.msg-content {
height: var(--msg-content-height);
}
/*Keyframes for Animations*/
@keyframes msg1 {
/* keyframe animation details */
}
@keyframes msg2 {
/* keyframe animation details */
}
/* Repeat keyframes for msg3 to msg6 */
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="msg-container pv4 ph4 br3 center bg-white shadow-6">
<div class="msg-content w-100 relative">
<div id="msg1" class="msg-receive dib mb4 bg-message br4 pv2 ph3 white measure-narrow">Message #1</div>
<div id="msg2" class="msg-send dib mb4 bg-near-white br4 pv2 ph3 mid-gray measure-narrow">Message #2 </div>
<div id="msg3" class="msg-receive dib mb4 bg-message br4 pv2 ph3 white measure-narrow">Message #3</div>
</div>
</div>The script almost works perfectly, but I'm having trouble figuring out how to hide the messages once they reach the designated height specified by --msg-content-height. Is there a way to make the messages loop continuously and disappear once they reach the top?