Text Animation for Webpage

Text Animation for Webpage - javascript

This is how my webpage looks:
I want the text "Carlos Qiano" and "Lorem Ipsum" to have the same animation effect as the link: https://neelbhavsar.me/
Note:
For the text "Carlos Qiano", it should fade out three times after you first land on the webpage. Then, the text zooms in and out repeatedly.
For the text "Lorem Ipsum.", it should zoom in and out repeatedly.
Here is my HTML code that needs to be modified. I used animate.css in my code. Feel free to change it up and use any other libraries for animation.
<!DOCTYPE html>
<html>
<head>
<title>Background Top</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1" >
<!-- Bootstrap 4 -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Animation -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
</head>
<style type="text/css">
body{
margin-top: 53px;
}
.jumbotron {
background-image: url("background1.jpg");
text-align: center;
height:523px;
background-size: cover;
margin:0 !important;
display: flex;
justify-content: center;
flex-direction: column;
}
.mainText {
width: 100%;
font-family: Verdana,sans-serif;
font-size: 120px !important;
margin-top: 35px;
color: black;
margin: 0 0 5rem 0;
animation-duration: 2s;
animation-iteration-count:infinite;
animation-delay: 1s;
}
.subText {
font-size: 20px;
font-family: Georgia,serif;
font-style:italic;
line-height: 1.6;
color: black;
animation-duration:2s;
animation-iteration-count:infinite;
animation-delay:1s;
}
#media screen and (max-width: 768px) {
.mainText {
margin-bottom: 0;
}
.subText {
display: none;
}
}
</style>
<body>
<!-- //SECTION FOR PAGE TOP -->
<section id="page-top">
<div class="jumbotron">
<p data-aos="zoom-out" data-aos-delay="500" class="lead mainText pulse green aos-init aos-animate" id="name">Carlos Qiano</p>
<p data-aos="zoom-out" data-aos-delay="500" class="lead pulse lightGreen aos-init aos-animate d-md-block subText">Lorem Ipsum.<br>Lorem Ipsum.</p>
</div>
</section>
<br><br><br>
<script>
$(function() {
$("#name").fadeOut(750).fadeIn(750);
$("#name").fadeOut(750).fadeIn(750);
$("#name").fadeOut(750).fadeIn(750);
});
</script>
</body>
</html>

I think its better to start pulse animation at start but tell if this is what you want :)
$(function() {
$("#name").fadeOut(750).fadeIn(750).fadeOut(750).fadeIn(750).fadeOut(750).fadeIn(750, function(){
$(".subText, #name").removeClass('animate__pulse');
// reset of pulse animation to make it sync
setTimeout(function(){ $(".subText, #name").addClass('animate__pulse'); }, 0);
});
});
body{
margin-top: 53px;
}
.jumbotron {
background-image: url("background1.jpg");
text-align: center;
height:523px;
background-size: cover;
margin:0 !important;
display: flex;
justify-content: center;
flex-direction: column;
}
.mainText {
width: 100%;
font-family: Verdana,sans-serif;
font-size: 80px !important;
margin-top: 35px;
color: black;
margin: 0 0 5rem 0;
animation-duration: 2s;
animation-iteration-count:infinite;
animation-delay: 1s;
}
.subText {
font-size: 20px;
font-family: Georgia,serif;
font-style:italic;
line-height: 1.6;
color: black;
animation-duration:2s;
animation-iteration-count:infinite;
animation-delay:1s;
}
#media screen and (max-width: 768px) {
.mainText {
margin-bottom: 0;
}
.subText {
display: none;
}
}
<meta name="viewport" content="width=device-width, initial-scale=1" >
<!-- Bootstrap 4 -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"/>
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<!-- Animation -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
<!-- //SECTION FOR PAGE TOP -->
<section id="page-top">
<div class="jumbotron">
<p data-aos="zoom-out" data-aos-delay="500" class="lead mainText green aos-init aos-animate" id="name">Carlos Qiano</p>
<p data-aos="zoom-out" data-aos-delay="500" class="lead animate__pulse lightGreen aos-init aos-animate d-md-block subText">Lorem Ipsum.<br>Lorem Ipsum.</p>
</div>
</section>
<br><br><br>

Related

Why is the scroll-snap not working in CSS?

I have no idea why the scroll-snap-type CSS property isn't working as expected.
I just want the page to scroll down to each div smoothly and it doesn't want to work.
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (scroll) {
scroll.preventDefault();
document.querySelector(this.getAttribute('href')).scrollIntoView({
behavior: 'smooth'
});
});
});
* {
box-sizing: border-box;
margin: 0px;
}
h1 {
font-family: 'Roboto', sans-serif;
margin-top: 1vh;
color: rgb(230,230,230);
}
a {
text-decoration:none;
font-family: 'Roboto', sans-serif;
color: rgb(230,230,230);
}
::-webkit-scrollbar {
width: 10px;
}
::-webkit-scrollbar-track {
background: rgb(24, 24, 24);
}
::-webkit-scrollbar-thumb {
background: rgb(170, 164, 164);
border-radius: 60px;
-webkit-border-radius: 60px;
-moz-border-radius: 60px;
-ms-border-radius: 60px;
-o-border-radius: 60px;
}
::-webkit-scrollbar-thumb:hover {
background: rgb(56, 56, 56);
}
.navbar {
height: 6.7vh;
width: 100vw;
padding: 0px 2vw;
position: fixed;
top: 0;
background-color: rgb(32, 32, 32);
display: flex;
justify-content: space-between;
align-items: center;
}
.navbarLinks {
display: flex;
justify-content: space-between;
align-items: center;
flex-direction: row;
width: 30vw;
}
.mainContent {
height: 500vh;
width: 100%;
padding: 0px 2vw;
background-color: rgb(24, 24, 24);
scroll-snap-type: y mandatory;
overflow-y: scroll;
}
.sactionDiv {
padding-top: 6.7vh;
height: 100vh;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
scroll-snap-align: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Project</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght#500&display=swap" rel="stylesheet">
<link href="" rel="icon" type="image/x-icon" >
<link href="indexStyle.css" rel="stylesheet" >
<script src="indexJS.js" defer ></script>
</head>
<body>
<div id="navbar" class="navbar">
<div id="navbarLogo" class="navbarLogo" >
</div>
<div id="navbarLinks" class="navbarLinks" >
First Div
Second Div
Third Div
Fourth Div
Fifth Div
</div>
</div>
<div id="mainContent" class="mainContent">
<div id="firstDiv" class="firstDiv sactionDiv">
<div id="firstDivTitle" class="firstDivTitle">
<h1>First Div</h1>
</div>
</div>
<div id="secondDiv" class="secondDiv sactionDiv">
<div id="secondDivTitle" class="secondDivTitle">
<h1>Second Div</h1>
</div>
</div>
<div id="thirdDiv" class="thirdDiv sactionDiv">
<div id="thirdDivTitle" class="thirdDivTitle">
<h1>Third Div</h1>
</div>
</div>
<div id="fourthDiv" class="fourthDiv sactionDiv">
<div id="fourthDivTitle" class="fourthDivTitle">
<h1>Fourth Div</h1>
</div>
</div>
<div id="fifthDiv" class="fifthDiv sactionDiv">
<div id="fifthDivTitle" class="fifthDivTitle">
<h1>Fifth Div</h1>
</div>
</div>
</div>
</body>
</html>

The reason your code isn't working is because you are using the body/html's scroll bar. You should be using the .mainContent's scrollbar instead. So the following code will hide the scroll bar of body/html and add the scroll bar to the .mainContent element by setting it's height to 100vh.
See modified CSS code below:
* {
box-sizing: border-box;
margin: 0px;
}
h1 {
font-family: 'Roboto', sans-serif;
margin-top: 1vh;
color: rgb(230,230,230);
}
a {
text-decoration:none;
font-family: 'Roboto', sans-serif;
color: rgb(230,230,230);
}
::-webkit-scrollbar {
width: 10px;
}
::-webkit-scrollbar-track {
background: rgb(24, 24, 24);
}
::-webkit-scrollbar-thumb {
background: rgb(170, 164, 164);
border-radius: 60px;
-webkit-border-radius: 60px;
-moz-border-radius: 60px;
-ms-border-radius: 60px;
-o-border-radius: 60px;
}
::-webkit-scrollbar-thumb:hover {
background: rgb(56, 56, 56);
}
html, body {
overflow: hidden;
}
.navbar {
height: 6.7vh;
width: 100vw;
padding: 0px 2vw;
position: fixed;
top: 0;
background-color: rgb(32, 32, 32);
display: flex;
justify-content: space-between;
align-items: center;
}
.navbarLinks {
display: flex;
justify-content: space-between;
align-items: center;
flex-direction: row;
width: 30vw;
}
.mainContent {
height: 100vh;
width: 100%;
padding: 0px 2vw;
background-color: rgb(24, 24, 24);
scroll-snap-type: y mandatory;
overflow: scroll;
}
.sactionDiv {
padding-top: 6.7vh;
height: 100vh;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
scroll-snap-align: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Project</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght#500&display=swap" rel="stylesheet">
<link href="" rel="icon" type="image/x-icon" >
<link href="indexStyle.css" rel="stylesheet" >
<script src="indexJS.js" defer ></script>
</head>
<body>
<div id="navbar" class="navbar">
<div id="navbarLogo" class="navbarLogo" >
</div>
<div id="navbarLinks" class="navbarLinks" >
First Div
Second Div
Third Div
Fourth Div
Fifth Div
</div>
</div>
<div id="mainContent" class="mainContent">
<div id="firstDiv" class="firstDiv sactionDiv">
<div id="firstDivTitle" class="firstDivTitle">
<h1>First Div</h1>
</div>
</div>
<div id="secondDiv" class="secondDiv sactionDiv">
<div id="secondDivTitle" class="secondDivTitle">
<h1>Second Div</h1>
</div>
</div>
<div id="thirdDiv" class="thirdDiv sactionDiv">
<div id="thirdDivTitle" class="thirdDivTitle">
<h1>Third Div</h1>
</div>
</div>
<div id="fourthDiv" class="fourthDiv sactionDiv">
<div id="fourthDivTitle" class="fourthDivTitle">
<h1>Fourth Div</h1>
</div>
</div>
<div id="fifthDiv" class="fifthDiv sactionDiv">
<div id="fifthDivTitle" class="fifthDivTitle">
<h1>Fifth Div</h1>
</div>
</div>
</div>

Display the whole image

There is a code. I layout class content. You need to display a picture <img src="../img/mobileimage.png"></img>
$(document).ready(function() {
all__buttons = document.querySelectorAll('.header__button');
/*selected__button.click= function(){
selected__button.backgroundColor='#5f3ec0';
};*/
/*
function changeColor(inputbutton) {
inputbutton.style.backgroundColor='#5f3ec0';
}
*/
[].forEach.call(all__buttons, function(selected__button) {
selected__button.addEventListener('click', function(event) {
event.target.style.backgroundColor = '#5f3ec0';
event.target.style.color = '#ffffff';
});
});
})
body {
margin: 0;
padding: 0;
}
.globalcontainer {
margin-top: 0px;
margin-right: 4%;
margin-bottom: 0px;
margin-left: 4%;
height: 100%;
}
.header>.header__text {
position: relative;
width: 93px;
height: 24px;
left: 0;
margin-top: 129px;
margin-bottom: 20px;
font-family: TT Norms;
font-style: normal;
font-weight: bold;
font-size: 24px;
line-height: 100%;
/* identical to box height, or 24px */
color: #000000;
}
/*
.header__buttons {
left: 0;
top: 193px;
}
*/
.header__button {
width: 75px;
height: 30px;
border-radius: 4px;
background-color: #fff;
margin-right: 1.75%;
display: flex;
justify-content: center;
align-items: center;
white-space: nowrap;
}
.header__buttons {
display: flex;
flex-direction: row;
align-items: center;
padding: 7px 15px 7px 0px;
/*margin-right: 10%;*/
}
.mobileimage {}
<html>
<head>
<!-- <link rel="stylesheet" href="testsite.css">-->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test Example</title>
<link rel="stylesheet" type="text/css" href="../css/mobile.css" media="screen and (min-width: 320px) and (max-width: 639px)"></link>
<link rel="stylesheet" type="text/css" href="../css/tablet.css" media="screen and (min-width: 640px) and (max-width: 1023px)"></link>
<link rel="stylesheet" type="text/css" href="../css/desktop.css" media="screen and (min-width: 1024px) and (max-width: 1920px)"></link>
<script type="text/javascript" src="http://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<div class="globalcontainer">
<div class="header">
<div class="header__text">
Обзоры
</div>
<div class="header__buttons">
<!-- <span> -->
<button class="header__button">Все</button>
<button class="header__button">Видео</button>
<button class="header__button">Текст</button>
<button class="header__button">Обзоры</button>
<button class="header__button">Сравнения</button>
<button class="header__button">Краш видео</button>
<button class="header__button">Распаковка</button>
<!-- </span> -->
</div>
</div>
<div class="content">
<div class="cardexample">
<div class="mobileimage">
<img src="../img/mobileimage.png"></img>
</div>
</div>
<div class="cardexample">
</div>
<div class="cardexample">
</div>
<div class="cardexample">
</div>
</div>
</div>
<script type="text/javascript" src="jsactions.js"></script>
</body>
</html>
The page is displayed like this
[real view]
but it is necessary (It is necessary that the picture is displayed in full)
[neededview]
[Image from site]
It is necessary to display the entire drawing, not part of it. Quick help is required. The drawing used to scale normally earlier.

$(document).ready(function() {
all__buttons = document.querySelectorAll('.header__button');
/*selected__button.click= function(){
selected__button.backgroundColor='#5f3ec0';
};*/
/*
function changeColor(inputbutton) {
inputbutton.style.backgroundColor='#5f3ec0';
}
*/
[].forEach.call(all__buttons, function(selected__button) {
selected__button.addEventListener('click', function(event) {
event.target.style.backgroundColor = '#5f3ec0';
event.target.style.color = '#ffffff';
});
});
})
body {
margin: 0;
padding: 0;
}
.globalcontainer {
margin-top: 0px;
margin-right: 4%;
margin-bottom: 0px;
margin-left: 4%;
height: 100%;
}
.header>.header__text {
position: relative;
width: 93px;
height: 24px;
left: 0;
margin-top: 129px;
margin-bottom: 20px;
font-family: TT Norms;
font-style: normal;
font-weight: bold;
font-size: 24px;
line-height: 100%;
/* identical to box height, or 24px */
color: #000000;
}
/*
.header__buttons {
left: 0;
top: 193px;
}
*/
.header__button {
width:100%;
height: 30px;
border-radius: 4px;
background-color: #fff;
display: flex;
justify-content: center;
align-items: center;
white-space: nowrap;
background-size:cover;
}
.header__buttons {
display: flex;
flex-direction: row;
align-items: center;
padding: 7px 15px 7px 0px;
/*margin-right: 10%;*/
}
img{
max-width:100%;
}
#back{
width:100%;
}
<html>
<head>
<!-- <link rel="stylesheet" href="testsite.css">-->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test Example</title>
<link rel="stylesheet" type="text/css" href="../css/mobile.css" media="screen and (min-width: 320px) and (max-width: 639px)"></link>
<link rel="stylesheet" type="text/css" href="../css/tablet.css" media="screen and (min-width: 640px) and (max-width: 1023px)"></link>
<link rel="stylesheet" type="text/css" href="../css/desktop.css" media="screen and (min-width: 1024px) and (max-width: 1920px)"></link>
<script type="text/javascript" src="http://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<div class="globalcontainer">
<div class="header">
<div class="header__text">
Обзоры
</div>
<div class="header__buttons" id="back">
<!-- <span> -->
<button class="header__button">Все</button>
<button class="header__button">Видео</button>
<button class="header__button">Текст</button>
<button class="header__button">Обзоры</button>
<button class="header__button">Сравнения</button>
<button class="header__button">Краш видео</button>
<button class="header__button">Распаковка</button>
<!-- </span> -->
</div>
</div>
<div class="content">
<div class="cardexample">
<div class="mobileimage" id="back">
<img src="https://images.unsplash.com/photo-1503023345310-bd7c1de61c7d?ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTJ8fG1hbnxlbnwwfHwwfHw%3D&ixlib=rb-1.2.1&w=1000&q=80"></img>
</div>
</div>
<div class="cardexample">
</div>
<div class="cardexample">
</div>
<div class="cardexample">
</div>
</div>
</div>
<script type="text/javascript" src="jsactions.js"></script>
</body>
</html>

wrong modal popup on click (html, css, js)

i'm having trouble figuring out how to have each example have a modal with it's own content. currently, if i click EXAMPLE2, the content from EXAMPLE1 still pops up. i also am not sure why the icons or the modals don't work on here, but i'm hoping someone can at least give pointers based on the code here. i tried changing the IDs to be unique, but i don't think i'm doing it correctly? thank you in advance
function togglePopup(){
document.getElementById("popup-1").classList.toggle("active");
}
function togglePopup(){
document.getElementById("popup-2").classList.toggle("active");
}
.icon-inner {
width: 120px;
/*height: 40vh;*/
float: left;
padding-right: 20px;
text-align: center;
/*position: relative;*/
border-radius: 50%;
position: relative;
display: inline-block;
}
/*.icon-inner span {
float: left;
padding-left: 20px;
text-align: center;
position: relative;
border-radius: 50%;
display: inline-block;
}*/
.icon-inner span:before {
margin-left: 0;
font-size: 40px;
}
.icon-inner span:hover {
margin-left: 0;
font-size: 40px;
color: #4FC1E9;
cursor: pointer;
}
.icon-inner-info span:before {
height: 15px;
width: 20px;
margin-left: 0;
padding-left: 2px;
padding-right: 5px;
font-size: 12px;
/*float: flex;*/
position: relative;
}
.icon-inner-info span:hover {
margin-left: 0;
cursor: help;
position: relative;
padding-right: 5px;
}
.icon-inner-info .tooltiptext {
visibility: hidden;
width: 400px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 1;
top: -5px;
left: 110%;
}
.icon-inner-info .tooltiptext::after {
content: "";
position: absolute;
top: 50%;
right: 100%;
margin-top: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent black transparent transparent;
}
.icon-inner-info:hover .tooltiptext {
visibility: visible;
}
.popup .overlay {
position:fixed;
top:0px;
left:0px;
width:100vw;
height:100vh;
background:rgba(0,0,0,0.7);
z-index:1;
display:none;
}
.popup .content-pop {
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%) scale(0);
background:#fff;
width:500px;
height:250px;
z-index:2;
text-align:center;
padding:20px;
box-sizing:border-box;
font-family:"Open Sans",sans-serif;
}
.popup .close-btn {
cursor:pointer;
position:absolute;
right:20px;
top:20px;
width:30px;
height:30px;
background:#222;
color:#fff;
font-size:25px;
font-weight:600;
line-height:30px;
text-align:center;
border-radius:50%;
}
.popup.active .overlay {
display:block;
}
.popup.active .content-pop {
transition:all 300ms ease-in-out;
transform:translate(50%,-50%) scale(1);
}
#media(max-width: 750px) {
.popup.active .content-pop {
transform:translate(-10%,-50%) scale(1);
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=devide-width, initialpscale=1.0">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="style.css">
<!-- link for back to top button -->
<!-- <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous"> -->
<link rel="stylesheet" href="font/flaticon.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<!-- -->
</head>
<body>
<div class="icon-inner">
<span class="flaticon-statistics" onclick="togglePopup()"></span>
<p>TITLE1</p>
<!-- <p class="tooltiptext">Interviewing, notetaking, storytelling</p> -->
<div class="popup" id="popup-1">
<div class="overlay"></div>
<div class="content-pop">
<div class="close-btn" onclick="togglePopup()">×</div>
<h1>Title1</h1>
<p>example1</p>
</div>
</div>
</div>
<div class="icon-inner">
<span class="flaticon-statistics" onclick="togglePopup()"></span>
<p>TITLE2</p>
<!-- <p class="tooltiptext">Interviewing, notetaking, storytelling</p> -->
<div class="popup" id="popup-2">
<div class="overlay"></div>
<div class="content-pop">
<div class="close-btn" onclick="togglePopup()">×</div>
<h1>Title2</h1>
<p>example2</p>
</div>
</div>
</div>

Initially your problem was duplicate IDs. However, after changing them the problem became having the same name for two different functions.
The simplest solution is to pass to the function the ID that you want to open:
For testing purposes, I removed all of your CSS because the popup wasn't aligning correctly.
The word OPEN in my example is your open icon. It works the same, just doesn't have the icon.
function togglePopup(id){
document.getElementById(id).classList.toggle("active");
}
.popup{display:none;}
.active{display:block;}
<div class="icon-inner">
<span class="flaticon-statistics" onclick="togglePopup('popup-1')">OPEN</span>
<p>TITLE1</p>
<!-- <p class="tooltiptext">Interviewing, notetaking, storytelling</p> -->
<div class="popup" id="popup-1">
<div class="overlay"></div>
<div class="content-pop">
<div class="close-btn" onclick="togglePopup('popup-1')">×</div>
<h1>Title1</h1>
<p>example1</p>
</div>
</div>
</div>
<div class="icon-inner">
<span class="flaticon-statistics" onclick="togglePopup('popup-2')">OPEN</span>
<p>TITLE2</p>
<!-- <p class="tooltiptext">Interviewing, notetaking, storytelling</p> -->
<div class="popup" id="popup-2">
<div class="overlay"></div>
<div class="content-pop">
<div class="close-btn" onclick="togglePopup('popup-2')">×</div>
<h1>Title2</h1>
<p>example2</p>
</div>
</div>
</div>

Bootstrap, scale image with other content to fit in static row on a display

I have a fiddle: https://jsfiddle.net/vbuf0gwL/62/
Basically dealing with three rows
img {
max-width: 100%;
max-height:100%;
}
html,
body {
height: 100%;
overflow: hidden;
}
.modal-lg {
max-width: 80% !important;
}
.my-container {
display: flex;
flex-direction: column;
height: 100%;
}
.my-container>.top [class^="col-"],
.my-container>.bottom [class^="col-"] {
background-color: #929292;
color: white;
text-align: center;
}
.my-container>.middle {
flex-grow: 1;
padding: 30px;
background-size: cover;
}
.my-container>.middle>* {}
#clock {
/*background-color:#333;*/
font-family: sans-serif;
font-size: 40px;
text-shadow: 0px 0px 1px #fff;
color: #fff;
}
#clock span {
color: #fff;
font-size: 40px;
position: relative;
}
#date {
margin-top: -10px;
letter-spacing: 3px;
font-size: 20px;
font-family: arial, sans-serif;
color: #fff;
}
.buttonContainer {
display: flex;
flex-direction: column;
justify-content: center;
}
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.css" crossorigin="anonymous">
<link href="https://cdn.jsdelivr.net/npm/gijgo#1.9.6/css/gijgo.min.css" rel="stylesheet" type="text/css" />
<link href="https://rawgit.com/tempusdominus/bootstrap-4/master/build/css/tempusdominus-bootstrap-4.min.css" rel="stylesheet" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="src/ytv.css" type="text/css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://npmcdn.com/tether#1.2.4/dist/js/tether.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.0/moment-with-locales.js"></script>
<script src="https://rawgit.com/tempusdominus/bootstrap-4/master/build/js/tempusdominus-bootstrap-4.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gijgo#1.9.6/js/gijgo.min.js" type="text/javascript"></script>
<script type='text/javascript' src='//cdn.jsdelivr.net/jquery.marquee/1.4.0/jquery.marquee.min.js'></script>
</head>
<body>
<div class="container-fluid my-container">
<div class="row">
<div class="col-lg-12">
</div>
</div>
<div class="row middle">
<div class="col-lg-6 leftFifty" id="leftFifty">
<div class="leftContent" style="background-color: white; height: 100%; border: dotted 1px black;">
<img src="https://via.placeholder.com/1024x942" />
<!-- This is the div that is clicked in to select an image -->
</div>
</div>
<div class="col-lg-6 rightFifty" id="rightFifty">
<div class="rightContent" style="background-color: white; height: 100%; border: dotted 1px black; ">
<!-- This is the div that is clicked in to select an image -->
</div>
</div>
</div>
</div>
<div class="row">
</div>
</body>
</html>
My problem is, I made a CMS where users can add images and text and when they save it it displays on large television displays.
I added max height and width of 100% to the images which is fine with just an image in one of the middle row columns, but with multiple images or an image with text, it pushes the image out of the container, past the footer row.
I want to make it so that when these are displayed, if the text spans more of the column then the images scale down so it fits in the column, since the middle row should always be between the header and footer with space between them.
This image shows what happens with just images and then what happens if text is added, but the third portion is what I want
How can I make this so that anything in the column will scale to always fit since this is a fixed static display with no interaction or scrolling?

JQuery/CSS Animate Sprite

I have a sprite image containing 4 different pictures. They are 520px in height. I would like to animate through them when either the left or right arrows are clicked. I'm unsure why it's not working.
Edited with changes and added css. still not working.
<!DOCTYPE html>
<html lang="en">
<head>
<title>FVRC Pics</title>
<meta charset="UTF-8">
<link type="text/css" href="styles/normalize.css" rel="stylesheet" />
<link type="text/css" href="styles/my_style.css" rel="stylesheet">
</head>
<body>
<h1> Fox Valley Runner Club</h1>
<div class="container">
<div id="slider">
<button id="leftArrow" class="fbtnFirst"/button>
<button id="rightArrow" class="fbtnLast"/button>
</div>
</div>
<div id="startApp">
<ul>
<li>Start here!</li>
</ul>
</div>
<!--<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"> </script>-->
<script type="text/javascript" src="scripts/jquery-3.2.1.min.js"></script>
<script>
$(document).ready(function() {
$("#leftArrow").click(function() {
$("#slider").css("backgroundPostionX","600px");
});
$("#rightArrow").click(function() {
$("#slider").css("backgroundPostionX","-600px");
});
});
</script>
</body>
</html>
CSS:
h1 {
color: #0000ff; /*blue*/
font-size: 44px;
padding-left: 10%;
}
.container {
max-height: 520px;
background-color: #808080; /*grey*/
}
#leftArrow, #rightArrow {
display: inline-block;
width: 38px;
height: 50px;
}
#leftArrow {
position: relative;
/*top: 0;*/
top: 235px;
left: 2%;
width: 5%;
height: 50px;
background: url('../images/left_arrow.png') 0 0 no-repeat;
z-index: 10;
}
#rightArrow {
position: relative;
/*top: 0;*/
top: 235px;
left: 87.5%;
width: 5%;
height: 50px;
background: url('../images/right_arrow.png') bottom right no-repeat;
z-index: 10;
}
#slider {
position: relative;
height: 520px;
max-width: 792px;
margin: 0 auto;
/*background: url("../images/Animate-Sprite_520a.png") -0 0 no-repeat;*/
background-image: url('../images/Animate-Sprite_520a.png');
background-repeat: no-repeat;
}
#startApp {
width: 235px;
margin: 0 auto;
}
#startApp ul {
list-style-type: none;
}
#startApp ul li a {
display: inline-block;
text-decoration: none;
width: 150px;
text-align: center;
background-color: steelblue;
border: 2px solid #808080;
color: white;
font-size: 32px;

Something like this should work but i don't know what is in your css files, i mean how you define your arrows
$("#leftArrow").click(function(){
$("#slider").css("backgroundPostionX","400px");
});
$("#rightArrow").click(function(){
$("#slider").css("backgroundPostionX","-400px");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1> Fox Valley Runner Club</h1>
<div class="container">
<div id="slider">
<button id="leftArrow" class="fbtnFirst"></button>
<button id="rightArrow" class="fbtnLast"></button>
</div>
</div>
<div id="startApp">
<ul>
<li>
Start here!
</li>
</ul>
</div>

The bigger issue is on the button element, you have onclick="move('left');" but the move function is never defined. You can take that out and let the even listener handle it instead.
<!DOCTYPE html>
<html lang="en">
<head>
<title>FVRC Pics</title>
<meta charset="UTF-8">
<link type="text/css" href="styles/normalize.css" rel="stylesheet" />
<link type="text/css" href="styles/my_style.css" rel="stylesheet">
</head>
<body>
<h1> Fox Valley Runner Club</h1>
<div class="container">
<div id="slider">
<button id="leftArrow" class="fbtnFirst"/button>
<button id="rightArrow" class="fbtnLast"/button>
</div>
</div>
<div id="startApp">
<ul>
<li>Start here!</li>
</ul>
</div>
<!--<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"> </script>-->
<script type="text/javascript" src="scripts/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="scripts/my_script.js"></script>
<script>
$(document).ready(function(){
$("#leftArrow").click(function(){
$("#slider").css("backgroundPostionX","400px");
});
$("#rightArrow").click(function(){
$("#slider").css("backgroundPostionX","-400px");
});
});
});
</script>
</body>
</html>

Develop Reference

JavaScript is the programming language of the Web.

Text Animation for Webpage - javascript

Related

Why is the scroll-snap not working in CSS?

Display the whole image

wrong modal popup on click (html, css, js)

Bootstrap, scale image with other content to fit in static row on a display

JQuery/CSS Animate Sprite

Categories

Resources