We Keep Coding

How to display radio button value on checked (not on clicked). *or pls guide me if there is better way for ecommerce product page*

I'm creating an ecommerce website and I'm having issue on the pricing of product page based on radio (product) button.
The price is obtain from weight * wesell (wesell is value store in database)
Issue 1 - the price is not displayed when the page is loaded
Issue 2 - the price displayed has lots of decimal point (I tried used number_format("price",2) but it couldn't be displayed)
Below are the codes of the page
code
window.addEventListener('DOMContentLoaded', function() {
const groups = [...document.querySelectorAll(".swatch")].slice(1); // drop the first div
document.getElementById("container").addEventListener("click", function(e) {
const tgtDiv = e.target.closest(".swatch-element")
if (tgtDiv) {
const groupId = tgtDiv.querySelector("input[type=radio]").dataset.group;
groups.forEach(aGroup => aGroup.classList.toggle("hide", groupId !== aGroup.id))
}
});
});
function check() {
$("#swatch-1-9").prop("checked", true);
}
function check2() {
$("#swatch-1-6").prop("checked", true);
}
function check3() {
$("#swatch-1-4").prop("checked", true);
}
function check4() {
$("#swatch-1-1").prop("checked", true);
}
function displayRadioValue() {
var ele = document.getElementsByName('length');
for(i = 0; i < ele.length; i++) {
if(ele[i].checked)
document.getElementById("price").innerHTML
= "RM " + ele[i].value*<?php echo $product['wesell'];?>
;
}
}
.swatch {
margin: 1em 0;
display:flex;
flex-flow: row;
}
.header { width:70px}
.hide { display: none; }
.swatch .header {
margin: 0.5em 0;
}
.swatch input {
display: none;
}
.swatch label {
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
float: left;
min-width: 50px;
height: 35px;
margin: 0;
border: #ccc 1px solid;
background-color: #ddd;
font-size: 13px;
text-align: center;
line-height: 35px;
white-space: nowrap;
text-transform: uppercase;
}
.swatch-element label {
padding: 0 10px;
}
.color.swatch-element label {
padding: 0;
}
.swatch input:checked+label {
-webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.8);
-moz-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.8);
box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.8);
border-color: transparent;
}
.swatch .swatch-element {
float: left;
-webkit-transform: translateZ(0);
-webkit-font-smoothing: antialiased;
margin: 0px 10px 10px 0;
position: relative;
}
.crossed-out {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
}
.swatch .swatch-element .crossed-out {
display: none;
}
.swatch .swatch-element.soldout .crossed-out {
display: block;
}
.swatch .swatch-element.soldout label {
filter: alpha(opacity=60);
-khtml-opacity: 0.6;
-moz-opacity: 0.6;
opacity: 0.6;
}
.swatch .tooltip {
text-align: center;
background: gray;
color: #fff;
bottom: 100%;
padding: 10px;
display: block;
position: absolute;
width: 100px;
left: -23px;
margin-bottom: 15px;
filter: alpha(opacity=0);
-khtml-opacity: 0;
-moz-opacity: 0;
opacity: 0;
visibility: hidden;
-webkit-transform: translateY(10px);
-moz-transform: translateY(10px);
-ms-transform: translateY(10px);
-o-transform: translateY(10px);
transform: translateY(10px);
-webkit-transition: all .25s ease-out;
-moz-transition: all .25s ease-out;
-ms-transition: all .25s ease-out;
-o-transition: all .25s ease-out;
transition: all .25s ease-out;
-webkit-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
-moz-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
-ms-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
-o-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
z-index: 10000;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.swatch .tooltip:before {
bottom: -20px;
content: " ";
display: block;
height: 20px;
left: 0;
position: absolute;
width: 100%;
}
.swatch .tooltip:after {
border-left: solid transparent 10px;
border-right: solid transparent 10px;
border-top: solid gray 10px;
bottom: -10px;
content: " ";
height: 0;
left: 50%;
margin-left: -13px;
position: absolute;
width: 0;
}
.swatch .swatch-element:hover .tooltip {
filter: alpha(opacity=100);
-khtml-opacity: 1;
-moz-opacity: 1;
opacity: 1;
visibility: visible;
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-ms-transform: translateY(0px);
-o-transform: translateY(0px);
transform: translateY(0px);
}
.swatch.error {
background-color: #E8D2D2!important;
color: #333!important;
padding: 1em;
border-radius: 5px;
}
.swatch.error p {
margin: 0.7em 0;
}
.swatch.error p:first-child {
margin-top: 0;
}
.swatch.error p:last-child {
margin-bottom: 0;
}
.swatch.error code {
font-family: monospace;
}
<div class="swatch color clearfix" id="container" data-option-index="0">
<div class="header">
Product
</div>
<div data-value="black" class="swatch-element color black available">
<div class="tooltip">black</div>
<input id="swatch-0-black" checked name="option-0" value="0.96" type="radio" data-group="group1" checked onclick="displayRadioValue() ">
<label for="swatch-0-black" style="background-color: black; background-image: url(./assets/images/black.png)"><img class="crossed-out" src="./assets/images/soldout.png" alt=""></label>
</div>
<div data-value="red" class="swatch-element color red available">
<div class="tooltip">
red
</div>
<input id="swatch-0-red" name="option-0" value="1.34" type="radio" data-group="group2" onclick="check2(),displayRadioValue()">
<label for="swatch-0-red" style="background-color: red; background-image: url(./assets/images/red.png)">
<img class="crossed-out" src="./assets/images/soldout.png" alt="">
</label>
</div>
<div data-value="white" class="swatch-element color white available">
<div class="tooltip">
white
</div>
<input id="swatch-0-white" name="option-0" value="1.48" type="radio" data-group="group3" onclick="check3(),displayRadioValue()">
<label for="swatch-0-white" style="background-color: white; background-image: url(./assets/images/white.png)">
<img class="crossed-out" src="./assets/images/soldout.png" alt="">
</label>
</div>
<div data-value="blue" class="swatch-element color blue available">
<div class="tooltip">
blue
</div>
<input id="swatch-0-blue" name="option-0" value="1.52" type="radio" data-group="group4" onclick="check4(),displayRadioValue()">
<label for="swatch-0-blue" style="background-color: blue; background-image: url(./assets/images/blue.png)">
<img class="crossed-out" src="./assets/images/soldout.png" alt="">
</label>
</div>
</div>
<div class="swatch clearfix" data-option-index="1" id="group1">
<div class="header">
Weight
</div>
<div data-value="small" class="swatch-element small available">
<input id="swatch-1-9" name="length" value="0.96" type="radio" id="group4a" checked onclick="displayRadioValue()">
<label for="swatch-1-9">
0.96g <img class="crossed-out" src="./assets/images/soldout.png" alt="">
</label>
</div>
</div>
<div class="swatch clearfix hide" id="group2">
<div class="header">
Weight
</div>
<div data-value="small" class="swatch-element small available">
<input id="swatch-1-6" name="length" value="1.34" type="radio" onclick="displayRadioValue()">
<label for="swatch-1-6">
1.34g
</label>
</div>
<div data-value="medium" class="swatch-element medium available">
<input id="swatch-1-7" name="length" value="1.44" type="radio" id="group3b" onclick="displayRadioValue()">
<label for="swatch-1-7">
1.44g
</label>
</div>
<div data-value="medium" class="swatch-element medium available">
<input id="swatch-1-8" name="length" value="1.54" type="radio" id="group3c" onclick="displayRadioValue()">
<label for="swatch-1-8">
1.54g
</label>
</div>
</div>
<div class="swatch clearfix hide" id="group3">
<div class="header">
Weight
</div>
<div data-value="small" class="swatch-element small available">
<input id="swatch-1-4" name="length" value="1.48" type="radio" onchange="displayRadioValue()">
<label for="swatch-1-4">
1.48g
</label>
</div>
<div data-value="medium" class="swatch-element medium available">
<input id="swatch-1-5" name="length" value="1.49" type="radio" id="group2b" onclick="displayRadioValue()">
<label for="swatch-1-5">
1.49g <img class="crossed-out" src="./assets/images/soldout.png" alt="">
</label>
</div>
</div>
<div class="swatch clearfix hide" id="group4">
<div class="header">
Weight
</div>
<div data-value="small" class="swatch-element small available">
<input id="swatch-1-1" name="length" value="1.52" type="radio" onclick="displayRadioValue()">
<label for="swatch-1-1">
1.52g
</label>
</div>
<div data-value="medium" class="swatch-element medium available">
<input id="swatch-1-2" name="length" value="1.54" type="radio" onclick="displayRadioValue()">
<label for="swatch-1-2">
1.54g
</label>
</div>
<div data-value="medium" class="swatch-element medium available">
<input id="swatch-1-3" name="length" value="1.57" type="radio" onclick="displayRadioValue()">
<label for="swatch-1-3">
1.57g
</label>
</div>
</div>
<div id="purchase-1293235843">
<div class="detail-price" itemprop="price">
<span class="price" id="price">
</span>
</div>
</div>

for issue 2 use toFixed(2)
e.g.
const amount.toFixed(2) // 408.70

Why does z-index not work in text, even though it is set?

So, I have this example of an html form:
function submit(){
document.getElementById('load').style.width = "80%";
}
.load{
border-radius:12px;
background-color:#00ff88;
height:80%;
position:relative;
z-index:2;
top:0;
display:block;
width:0;
transition: 1.5s ease-in;
margin:5% auto 15% auto;
position:fixed;
top:2.5%;
left:10%;
}
.load:hover{
border-radius: 8px;
}
body {font-family: Noto Sans, IBM Plex Sans Condensed; overflow:hidden;}
* {box-sizing: border-box;
/* Set a style for all buttons */
button {
border-radius: 12px;
background-color: #4CAF50;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 100%;
opacity: 0.9;
transition: 0.3s ease;
font-size: 15px;
font-weight: bold;
outline-style: solid;
outline-width:1px;
}
button:hover {
border-radius: 5px;
opacity:1;
}
/* Extra styles for the cancel button */
.cancelbtn {
padding: 14px 20px;
background-color: #f44336;
}
/* Float cancel and signup buttons and add an equal width */
.cancelbtn, .signupbtn, .refreshbtn {
float: left;
width: 100%;
}
/* Add padding to container elements */
.container {
padding: 16px;
border-radius: 12px;
box-shadow: 5px 5px 40px -1px rgba(10,10,10,0.74);
transition: .6s ease;
}
.container:hover {
box-shadow: 10px 10px 40px -3px rgba(10,10,10,0.74);
border-radius: 5px;
}
.clearfix > p{
position:fixed;
bottom:15%;
left:40%;
margin-top: 0%;
vertical-align: top;
}
#options{
overflow-y:scroll;
}
}
<div class="center load" id="load" style="position: absolute"></div>
<div class="container modal-content" style="height:80%;max-height:100%;position:fixed;top:2.5%;left:10%;z-index:1;" id="quiz">
<div id="content" style="z-index: 50;position:relative;background-color:rgba(255, 255, 255, 0)">
<h1 id="Qtitle">Example Poll [title]</h1>
<hr>
<div id="options" style="display: block;">
<p style="font-size:20px;" onclick="select('option1')"><input type="radio" name="cXVlc3Rpbwo" value="1" id="option1"><label style="cursor:pointer;" for="cXVlc3Rpbwo" id="first" onclick="select('option1')"><b>[Option1]</b></label></p>
<p style="font-size:20px;" onclick="select('option2')"><input type="radio" name="cXVlc3Rpbwo" value="2" id="option2"><label style="cursor:pointer;" for="cXVlc3Rpbwo" id="second" onclick="select('option2')"><b>[Option2]</b></label></p>
<p style="font-size:20px;" onclick="select('option3')"><input type="radio" name="cXVlc3Rpbwo" value="3" id="option3"><label style="cursor:pointer;" for="cXVlc3Rpbwo" id="third" onclick="select('option3')"><b>[Option3]</b></label></p>
<p style="font-size:20px;" onclick="select('option4')"><input type="radio" name="cXVlc3Rpbwo" value="4" id="option4"><label style="cursor:pointer;" for="cXVlc3Rpbwo" id="fourth" onclick="select('option4')"><b>[Option4]</b></label></p>
</div>
<input name="UUNvZGU" style="display:none;" id="QCode" value="error">
<br>
<hr>
<div class="clearfix" style="margin-bottom:50%;margin-top:0%;">
<button class="signupbtn" onclick="submit()" id="submit">Vote</button>
</div>
</div>
</div>
<script>
function submit(){
document.getElementById('load').style.width = "80%";
}
</script>
As you can see, even though the back div's z-index is 1, the green div's is 2 and the text's is 50, the green div grows over the text.
Any suggestions?
(Sorry for the terrible snippet quality, but, my project is 3000 lines long and I got a bit confused. Please run the snippet in full screen instead).

If you give the green div a z-index that is lower than the z-index of the form, then everything should work as you wanted.
I gave the green div a height and a width too see it. Then i gave it a z-index of 0 (Remove the heightand the width!!! I just added that to show)
Here's an image of what i added:
Here is how it looks like now:
Here's the code:
.load{
border-radius:12px;
background-color:#00ff88;
height:80%;
position:relative;
z-index:2;
top:0;
display:block;
width:0;
transition: 1.5s ease-in;
margin:5% auto 15% auto;
position:fixed;
top:2.5%;
left:10%;
/* I gave the green div a height and a width too see it */
height: 100px;
width: 100px;
/* z-index for the green Div */
z-index: 0;
}
.load:hover{
border-radius: 8px;
}
body {font-family: Noto Sans, IBM Plex Sans Condensed; overflow:hidden;}
* {box-sizing: border-box;
/* Set a style for all buttons */
button {
border-radius: 12px;
background-color: #4CAF50;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 100%;
opacity: 0.9;
transition: 0.3s ease;
font-size: 15px;
font-weight: bold;
outline-style: solid;
outline-width:1px;
}
button:hover {
border-radius: 5px;
opacity:1;
}
/* Extra styles for the cancel button */
.cancelbtn {
padding: 14px 20px;
background-color: #f44336;
}
/* Float cancel and signup buttons and add an equal width */
.cancelbtn, .signupbtn, .refreshbtn {
float: left;
width: 100%;
}
/* Add padding to container elements */
.container {
padding: 16px;
border-radius: 12px;
box-shadow: 5px 5px 40px -1px rgba(10,10,10,0.74);
transition: .6s ease;
}
.container:hover {
box-shadow: 10px 10px 40px -3px rgba(10,10,10,0.74);
border-radius: 5px;
}
.clearfix > p{
position:fixed;
bottom:15%;
left:40%;
margin-top: 0%;
vertical-align: top;
}
#options{
overflow-y:scroll;
}
}
<div class="center load" id="load" style="position: absolute"></div>
<div class="container modal-content" style="height:80%;max-height:100%;position:fixed;top:2.5%;left:10%;z-index:1;" id="quiz">
<div id="content" style="z-index: 50;position:relative;background-color:rgba(255, 255, 255, 0)">
<h1 id="Qtitle">Example Poll [title]</h1>
<hr>
<div id="options" style="display: block;">
<p style="font-size:20px;" onclick="select('option1')"><input type="radio" name="cXVlc3Rpbwo" value="1" id="option1"><label style="cursor:pointer;" for="cXVlc3Rpbwo" id="first" onclick="select('option1')"><b>[Option1]</b></label></p>
<p style="font-size:20px;" onclick="select('option2')"><input type="radio" name="cXVlc3Rpbwo" value="2" id="option2"><label style="cursor:pointer;" for="cXVlc3Rpbwo" id="second" onclick="select('option2')"><b>[Option2]</b></label></p>
<p style="font-size:20px;" onclick="select('option3')"><input type="radio" name="cXVlc3Rpbwo" value="3" id="option3"><label style="cursor:pointer;" for="cXVlc3Rpbwo" id="third" onclick="select('option3')"><b>[Option3]</b></label></p>
<p style="font-size:20px;" onclick="select('option4')"><input type="radio" name="cXVlc3Rpbwo" value="4" id="option4"><label style="cursor:pointer;" for="cXVlc3Rpbwo" id="fourth" onclick="select('option4')"><b>[Option4]</b></label></p>
</div>
<input name="UUNvZGU" style="display:none;" id="QCode" value="error">
<br>
<hr>
<div class="clearfix" style="margin-bottom:50%;margin-top:0%;">
<button class="signupbtn" onclick="submit()" id="submit">Vote</button>
</div>
</div>
</div>
<script>
function submit(){
document.getElementById('load').style.width = "80%";
}
</script>

Using JS to filter by multiple categories?

I'm currently working on a website that shows a visual representation of all the movies I watched. A Movie List if you will. I figured out how to filter the list based on button presses using JS, however, it only filters by 1 button at a time. I'd like the list to be filtered based on multiple buttons.
For example: "All completed movies with a rating of 3 and the action genre*".
Or: "All completed and watching movies"
I've never learned JS (though I plan to eventually) so I am kinda lost on how to do this.
Here's my current code:
filterSelection("all")
function filterSelection(c) {
var eles = document.getElementsByClassName("flex-card");
for(var i=0; i < eles.length; i++) {
if (c === "all" || eles[i].classList.contains(c)) {
eles[i].classList.remove("displayNone");
}
else {
eles[i].classList.add("displayNone");
}
}
}
.card:hover .overlay {
display: none;
}
.btn:hover {
background-color: hsl(14,80%,70%);
}
.displayNone {
display: none;
}
.yellow {
color: hsl(14,80%,70%);
}
.heading {
color: white;
}
.button-container {
margin: 0px 0px 12px;
text-align: center;
padding-bottom: 12px;
}
.btn {
color: hsl(14,80%,30%);
background-color: hsl(43,83%,55%);
border: 1px solid rgba(0, 0, 0, 0.94);
border-radius: 10px;
text-align: center;
font-weight: 600;
font-size: 10px;
line-height: 20px;
width: 80px;
margin: 5px 0px 5px 5px;
padding: 0px 12px;
}
.flex-container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
padding-left: 15%;
padding-right: 15%;
}
/* I am using a 7:10 aspect ratio (width:height) */
.flex-card {
position: relative;
height: 265px;
width: 185px;
perspective: 1000px;
margin-right: 1rem;
margin-bottom: 1rem;
}
.a {
}
.card {
position: relative;
width: 100%;
height: 100%;
transition: transform 0.6s 0s;
transform-style: preserve-3d;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
}
.image {
object-fit: cover;
width: 100%;
height: 100%;
}
.overlay {
position: absolute;
bottom: 0;
background-color: rgba(0, 0, 0, 0.7);
width: 100%;
transition: .1s ease;
}
.title {
text-align: center;
color: white;
font-size: 14px;
font-weight: 600;
margin: 8px;
}
.subtitle {
margin: 8px;
font-size: 12px;
font-weight: 600;
text-align: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="">
<meta name="author" content="">
<title>New page</title>
<link href="css/new.css" rel="stylesheet" type="text/css">
</head>
<body style="background-color: rgb(19,23,29);">
<div>
<h1 style="text-align: center;" class="heading">Movie List</h1>
<div class="button-container" data-pg-name="Buttons">
<button class="btn" onclick="filterSelection('all')">All</button>
<button class="btn" onclick="filterSelection('watching')">Watching</button>
<button class="btn" onclick="filterSelection('planned')">Planned</button>
<button class="btn" onclick="filterSelection('completed')">Completed</button>
<button class="btn" onclick="filterSelection('dropped')">Dropped</button>
<br>
<button class="btn" onclick="filterSelection('five')">5</button>
<button class="btn" onclick="filterSelection('four')">4</button>
<button class="btn" onclick="filterSelection('three')">3</button>
<button class="btn" onclick="filterSelection('two')">2</button>
<button class="btn" onclick="filterSelection('one')">1</button>
<br>
<button class="btn" onclick="filterSelection('action')">Action</button>
<button class="btn" onclick="filterSelection('horror')">Horror</button>
<button class="btn" onclick="filterSelection('romance')">Romance</button>
<button class="btn" onclick="filterSelection('etc')">etc.</button>
<button class="btn" onclick="filterSelection('etc')">etc.</button>
</div>
</div>
<div class="flex-container">
<div class="watching five flex-card">
<a href="#">
<div class="card">
<img src="https://via.placeholder.com/300" class="image">
<div class="overlay">
<p class="title">Title</p>
<p class="subtitle yellow">Studio</p>
</div>
</div>
</a>
</div>
<div class="planned three flex-card">
<a href="#">
<div class="card">
<img src="https://via.placeholder.com/300" class="image">
<div class="overlay">
<p class="title">Title</p>
<p class="subtitle yellow">Studio</p>
</div>
</div>
</a>
</div>
<div class="completed two flex-card">
<a href="#">
<div class="card">
<img src="https://via.placeholder.com/300" class="image">
<div class="overlay">
<p class="title">Title</p>
<p class="subtitle yellow">Studio</p>
</div>
</div>
</a>
</div>
</div>
</body>
</html>
also on jsfidle

It would be possible to store all clicked selectors in an array, and render cards based on the whole array's state, not just the last clicked button. Quick and dirty example could look like this:
const allCards = document.querySelectorAll(".flex-card");
var displayAll = true // special value for displaying all - default true
var activeCards = [] // array holding all selected values
function toggleSelector(c) {
if (c === 'all') {
displayAll = !displayAll
activeCards = [] // optional
return
}
displayAll = false
if (activeCards.includes(c)) {
activeCards = activeCards.filter(card => card !== c)
} else {
activeCards.push(c)
}
}
// quick dirty way to render cards
function renderCards() {
if (displayAll) {
allCards.forEach(card => showCard(card))
return
}
allCards.forEach(card => hideCard(card))
for (let card of allCards) {
for (let cardClass of card.classList) {
if (activeCards.includes(cardClass)) {
showCard(card)
break;
}
}
}
}
// on each click toggle clicked selector and re-render cards
function filterSelection(c) {
toggleSelector(c)
renderCards()
}
function showCard(card) {
card.classList.remove("displayNone");
}
function hideCard(card) {
card.classList.add("displayNone");
}
renderCards()
.card:hover .overlay {
display: none;
}
.btn:hover {
background-color: hsl(14,80%,70%);
}
.displayNone {
display: none;
}
.yellow {
color: hsl(14,80%,70%);
}
.heading {
color: white;
}
.button-container {
margin: 0px 0px 12px;
text-align: center;
padding-bottom: 12px;
}
.btn {
color: hsl(14,80%,30%);
background-color: hsl(43,83%,55%);
border: 1px solid rgba(0, 0, 0, 0.94);
border-radius: 10px;
text-align: center;
font-weight: 600;
font-size: 10px;
line-height: 20px;
width: 80px;
margin: 5px 0px 5px 5px;
padding: 0px 12px;
}
.flex-container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
padding-left: 15%;
padding-right: 15%;
}
/* I am using a 7:10 aspect ratio (width:height) */
.flex-card {
position: relative;
height: 265px;
width: 185px;
perspective: 1000px;
margin-right: 1rem;
margin-bottom: 1rem;
}
.a {
}
.card {
position: relative;
width: 100%;
height: 100%;
transition: transform 0.6s 0s;
transform-style: preserve-3d;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
}
.image {
object-fit: cover;
width: 100%;
height: 100%;
}
.overlay {
position: absolute;
bottom: 0;
background-color: rgba(0, 0, 0, 0.7);
width: 100%;
transition: .1s ease;
}
.title {
text-align: center;
color: white;
font-size: 14px;
font-weight: 600;
margin: 8px;
}
.subtitle {
margin: 8px;
font-size: 12px;
font-weight: 600;
text-align: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="">
<meta name="author" content="">
<title>New page</title>
<link href="css/new.css" rel="stylesheet" type="text/css">
</head>
<body style="background-color: rgb(19,23,29);">
<div>
<h1 style="text-align: center;" class="heading">Movie List</h1>
<div class="button-container" data-pg-name="Buttons">
<button class="btn" onclick="filterSelection('all')">All</button>
<button class="btn" onclick="filterSelection('watching')">Watching</button>
<button class="btn" onclick="filterSelection('planned')">Planned</button>
<button class="btn" onclick="filterSelection('completed')">Completed</button>
<button class="btn" onclick="filterSelection('dropped')">Dropped</button>
<br>
<button class="btn" onclick="filterSelection('five')">5</button>
<button class="btn" onclick="filterSelection('four')">4</button>
<button class="btn" onclick="filterSelection('three')">3</button>
<button class="btn" onclick="filterSelection('two')">2</button>
<button class="btn" onclick="filterSelection('one')">1</button>
<br>
<button class="btn" onclick="filterSelection('action')">Action</button>
<button class="btn" onclick="filterSelection('horror')">Horror</button>
<button class="btn" onclick="filterSelection('romance')">Romance</button>
<button class="btn" onclick="filterSelection('etc')">etc.</button>
<button class="btn" onclick="filterSelection('etc')">etc.</button>
</div>
</div>
<div class="flex-container">
<div class="watching five flex-card displayNone">
<a href="#">
<div class="card">
<img src="https://via.placeholder.com/300" class="image">
<div class="overlay">
<p class="title">Title</p>
<p class="subtitle yellow">Studio</p>
</div>
</div>
</a>
</div>
<div class="planned three flex-card displayNone action">
<a href="#">
<div class="card">
<img src="https://via.placeholder.com/300" class="image">
<div class="overlay">
<p class="title">Title</p>
<p class="subtitle yellow">Studio</p>
</div>
</div>
</a>
</div>
<div class="completed two flex-card displayNone action">
<a href="#">
<div class="card">
<img src="https://via.placeholder.com/300" class="image">
<div class="overlay">
<p class="title">Title</p>
<p class="subtitle yellow">Studio</p>
</div>
</div>
</a>
</div>
</div>
</body>
</html>

Sign in & Slide Out format

I have a question and would love to get some feedback from you all. I'm stuck in a situation with my code that will not slide left to right. I have a SignUp/SignIn form and I need the slide in animation going left to right when you click either those 2 buttons. I feel like I have everything intact but it just does not want to work! :( Any help will be a blessing.
window.onload - function() {
const signupButton = document.getElementById('signup');
const signinButton = document.getElementById('signin');
const container = document.getElementById('container');
signUpButton.addEventListener('click', () => {
container.classList.add("right-panel-active");
});
signInButton.addEventListener('click', () => {
container.classList.remove("right-panel-active");
});
}
* {
box-sizing: border-box;
}
body {
font-family: "Monteserrat", sans-serif;
background: #f6f5f7;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
margin: -20px 0 50px;
}
h2 {
font-weight: bold;
margin: 0;
}
p {
font-size: 14px;
font-weight: 100;
line-height: 20px;
letter-spacing: 0.5px;
margin: 20px 0 30px;
}
span {
font-size: 12px;
}
a {
color: #333;
font-size: 14px;
text-decoration: none;
margin: 15px 0;
}
.container {
background: white;
border-radius: 10px;
box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
position: relative;
overflow: hidden;
width: 768px;
max-width: 100%;
min-height: 480px;
}
.form-container form {
background: white;
display: flex;
flex-direction: column;
padding: 0 50px;
height: 100%;
align-items: center;
text-align: center;
}
.social-container {
margin: 20px 0;
}
.social-container a {
border: 1px solid #ddd;
border-radius: 50%;
display: inline-flex;
justify-content: center;
text-align: center;
margin: 0 5px;
height: 40px;
width: 40px;
}
.form-container input {
background: #eee;
border: none;
padding: 12px 15px;
margin: 8px 0;
width: 100%;
}
button {
border-radius: 20px;
border: 1px solid;
#ff4b2b;
background: #ff4b2b;
color: white;
font-size: 12px;
font-weight: bold;
padding: 12px 45px;
letter-spacing: 1px;
text-transform: uppercase;
transition: transform 80ms ease-in;
}
button:active {
transform: scale(0.95);
}
button:focus {
outline: none;
}
button.ghost {
background-color: transparent;
border-color: #fff;
}
.form {
background-color: #FFFFFF;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
padding: 0 50px;
height: 100%;
text-align: center;
}
.form-container {
position: absolute;
top: 00;
height: 100%;
transition: all 0.6 ease-in-out;
}
.sign-in-container {
left: 0;
width: 50%;
z-index: 2;
}
.sign-up-container {
left: 0;
width: 50%;
z-index: 1;
opacity: 0;
}
.overlay-container {
position: absolute;
top: 0;
left: 50%;
width: 50%;
height: 100%;
overflow: hidden;
transition: transform 0.6s ease-in-out;
z-index: 100;
}
.overlay {
background: #ff416c;
background: linear-gradient(to right, #ff4b2b, #ff416c) no-repeat 0 0 / cover;
color: #fff;
position: relative;
left: -100%;
height: 100%;
width: 200%;
transform: translateX(0);
transition: transform 0.6s ease-in-out;
}
.overlay-panel {
position: absolute;
top: 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 0 40px;
height: 100%;
width: 50%;
text-align: center;
transform: translateX(0);
transition: transform 0.6s ease-in-out;
}
.overlay-right {
right: 0;
transform: translateX(0);
}
.overlay-left {
transform: translateX(-20%);
}
/* Animation */
/* Move sign in to the right */
.container.right-panel-active .sign-In-container {
transform: translateX(100%);
}
.container.right-panel-active .overlay-container {
transform: translateX(-100%);
}
.container.right-panel-active .sign-up-container {
transform: translateX(100%);
opacity: 1;
z-index: 5;
}
.container.right-panel-active .overlay {
transform: translateX(50%);
}
<html>
<link rel="stylesheet" href="style.css" />
<script src="buttonwork.js"></script>
<div class="container" id="container">
<div class="form-container sign-up-container">
<form action="#">
<h1>Create Account</h1>
<div class="social-container">
<i class="fab fa-facebook-f"></i>
<i class="fab fa-google-plus-g"></i>
<i class="fab fa-linkedin-in"></i>
</div>
<span>or use your email for registration</span>
<input type="text" placeholder="Name" />
<input type="email" placeholder="Email" />
<input type="password" placeholder="Password" />
<button>Sign Up</button>
</form>
</div>
<div class="form-container sign-in-container">
<form action="#">
<h1>Sign in</h1>
<div class="social-container">
<i class="fab fa-facebook-f"></i>
<i class="fab fa-google-plus-g"></i>
<i class="fab fa-linkedin-in"></i>
</div>
<span>or use your account</span>
<input type="email" placeholder="Email" />
<input type="password" placeholder="Password" />
Forgot your password?
<button>Sign In</button>
</form>
</div>
<div class="overlay-container">
<div class="overlay">
<div class="overlay-panel overlay-left">
<h1>Welcome Back!</h1>
<p>To keep connected with us please login with your personal info</p>
<button class="ghost" id="signIn">Sign In</button>
</div>
<div class="overlay-panel overlay-right">
<h1>Hello, Friend!</h1>
<p>Enter your personal details and start journey with us</p>
<button class="ghost" id="signUp">Sign Up</button>
</div>
</div>
</div>
</div>
<footer>
</footer>
</html>
Thanks again!
Dominik

You just have a few typo in your javascript code . Your "signup" and "signin" should be "signUp" and "signIn"
const signUpButton = document.getElementById('signUp');
const signInButton = document.getElementById('signIn');
const container = document.getElementById('container');
signUpButton.addEventListener('click', () => {
container.classList.add("right-panel-active");
});
signInButton.addEventListener('click', () => {
container.classList.remove("right-panel-active");
});
Here is the codepen if you want to see it in action => https://codepen.io/l0609890/pen/dyyKBeo

In React we don't directly mutate the DOM. It is also considered anti-pattern to query the DOM to access the DOMNodes (document.getElementById), use React refs instead to gain access to the underlying DOMNodes. I have converted it in react hope it helps
In this case you should use and update some React state to conditionally add the "right-panel-active" class to the ".container" div element.
const SignInForm = () => {
const [swapPanel, setSwapPanel] = useState(false);
const signUpButton = () => {
setSwapPanel(true);
};
const signInButton = () => {
setSwapPanel(false);
};
return (
<div className="sigin">
<div
className={["container", swapPanel ? "right-panel-active" : null]
.filter(Boolean)
.join(" ")}
id="container"
>
<div className="form-container sign-up-container">
<form action="#">
<h1>Create Account</h1>
<div className="social-container"></div>
<span>or use your email for registration</span>
<input type="text" placeholder="Name" />
<input type="email" placeholder="Email" />
<input type="password" placeholder="Password" />
<button onClick={signUpButton}>Sign Up</button>
</form>
</div>
<div className="form-container sign-in-container">
<form action="#">
<h1>Sign in</h1>
<div className="social-container"></div>
<span>or use your account</span>
<input type="email" placeholder="Email" />
<input type="password" placeholder="Password" />
Forgot your password?
{/* Forgot your password? */}
<button onClick={signInButton}>Sign In</button>
</form>
</div>
<div className="overlay-container">
<div className="overlay">
<div className="overlay-panel overlay-left">
<h1>Welcome Back!</h1>
<p>
To keep connected with us please login with your personal info
</p>
<button
type="button"
onClick={signInButton}
className="ghost"
id="signIn"
>
Sign In
</button>
</div>
<div className="overlay-panel overlay-right">
<h1>Hello, Friend!</h1>
<p>Enter your personal details and start journey with us</p>
<button
type="button"
onClick={signUpButton}
className="ghost"
id="signUp"
>
Sign Up
</button>
</div>
</div>
</div>
</div>
</div>
);
};

jQuery count to a target number only when the section appears in the browser view

In this website, if you scroll down to the "medal part"
and refresh the page,you will see the numbers roll and stop at a target.
Now the problem is can we have the numbers roll only when the medal section appears in the browser view.
What is happening is that when the user loads the website, the numbers roll perfectly but they happen in the background. The user when he/she scrolls down to the medal section, that effect is not visible as it gets over by then and he needs to refresh the page to see the effect.
One guy from the community suggested this jQuery Plugin. I tried using the plugin in my JavaScript (please follow the comment in the JavaScript part of the fiddle or code)
Code involved :
(function($) {
$.fn.countTo = function(options) {
options = options || {};
return $(this).each(function() {
// set options for current element
var settings = $.extend({}, $.fn.countTo.defaults, {
from: $(this).data('from'),
to: $(this).data('to'),
speed: $(this).data('speed'),
refreshInterval: $(this).data('refresh-interval'),
decimals: $(this).data('decimals')
}, options);
// how many times to update the value, and how much to increment the value on each update
var loops = Math.ceil(settings.speed / settings.refreshInterval),
increment = (settings.to - settings.from) / loops;
// references & variables that will change with each update
var self = this,
$self = $(this),
loopCount = 0,
value = settings.from,
data = $self.data('countTo') || {};
$self.data('countTo', data);
// if an existing interval can be found, clear it first
if (data.interval) {
clearInterval(data.interval);
}
data.interval = setInterval(updateTimer, settings.refreshInterval);
// initialize the element with the starting value
render(value);
function updateTimer() {
value += increment;
loopCount++;
render(value);
if (typeof(settings.onUpdate) == 'function') {
settings.onUpdate.call(self, value);
}
if (loopCount >= loops) {
// remove the interval
$self.removeData('countTo');
clearInterval(data.interval);
value = settings.to;
if (typeof(settings.onComplete) == 'function') {
settings.onComplete.call(self, value);
}
}
}
function render(value) {
var formattedValue = settings.formatter.call(self, value, settings);
$self.html(formattedValue);
}
});
};
$.fn.countTo.defaults = {
from: 0, // the number the element should start at
to: 0, // the number the element should end at
speed: 1000, // how long it should take to count between the target numbers
refreshInterval: 100, // how often the element should be updated
decimals: 0, // the number of decimal places to show
formatter: formatter, // handler for formatting the value before rendering
onUpdate: null, // callback method for every time the element is updated
onComplete: null // callback method for when the element finishes updating
};
function formatter(value, settings) {
return value.toFixed(settings.decimals);
}
}(jQuery));
jQuery(function($) {
// custom formatting example
$('#count-number').data('countToOptions', {
formatter: function(value, options) {
return value.toFixed(options.decimals).replace(/\B(?=(?:\d{3})+(?!\d))/g, ',');
}
});
// start all the timers
$('.timer').each(count);
function count(options) {
var $this = $(this);
options = $.extend({}, options || {}, $this.data('countToOptions') || {});
$this.countTo(options);
}
});
// plugin for appear/disappear events which are fired when an element became visible/invisible in the browser viewport.
// singleRun : boolean to ensure we only animate once
var singleRun = true;
// executes when .counter container becomes visible
$(".counter").on("appear", function(data) {
// initialise the counters
var counters = {};
var i = 0;
if (singleRun) {
// track each of the counters
$(".timer").each(function() {
counters[this.id] = $(this).data("to");
i++;
});
// animate the counters
$.each(counters, function(key, val) {
$({
countVal: 0
}).animate({
countVal: val
}, {
duration: 1500,
easing: "linear",
step: function() {
// update the display
$("#" + key).text(Math.floor(this.countVal));
}
});
});
singleRun = false;
}
});
/* CSS Document */
/* Float Elements
---------------------------------*/
.fl-lt {
float: left;
}
.fl-rt {
float: right;
}
/* Clear Floated Elements
---------------------------------*/
.clear {
clear: both;
display: block;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0;
}
.clearfix:before,
.clearfix:after {
content: '\0020';
display: block;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0;
}
.clearfix:after {
clear: both;
}
.figure {
margin: 0px;
}
img {
max-width: 100%;
}
a,
a:hover,
a:active {
outline: 0px !important
}
#font-face {
font-family: 'FontAwesome';
src: url('../fonts/fontawesome-webfont.eot?v=4.1.0');
src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.1.0') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff?v=4.1.0') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.1.0') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.1.0#fontawesomeregular') format('svg');
font-weight: normal;
font-style: normal;
}
/* Primary Styles
---------------------------------*/
body {
background: #fff;
font-family: 'Open Sans', sans-serif;
font-size: 14px;
font-weight: normal;
color: #888888;
margin: 0;
}
h2 {
font-size: 34px;
color: #222222;
font-family: 'Montserrat', sans-serif;
font-weight: 700;
letter-spacing: -1px;
margin: 0 0 15px 0;
text-align: center;
text-transform: uppercase;
}
h3 {
font-family: 'Montserrat', sans-serif;
color: #222222;
font-size: 16px;
margin: 0 0 5px 0;
text-transform: uppercase;
font-weight: 400;
}
h6 {
font-size: 16px;
color: #888888;
font-family: 'Open Sans', sans-serif;
font-weight: 400;
text-align: center;
margin: 0 0 60px 0;
}
p {
line-height: 24px;
margin: 0;
}
/* Header Styles
---------------------------------*/
.header {
text-align: center;
background: url(../img/pw_maze_black_2X.png) left top repeat;
padding: 280px 0;
}
.logo {
width: 130px;
margin: 0 auto 35px;
}
.header h1 {
font-family: 'Montserrat', sans-serif;
font-size: 50px;
font-weight: 400;
letter-spacing: -1px;
margin: 0 0 22px 0;
color: #fff;
}
.we-create {
padding: 0;
margin: 35px 0 55px;
}
.wp-pic {
margin-bottom: 20px;
}
.we-create li {
display: inline-block;
font-family: 'Montserrat', sans-serif;
font-size: 14px;
color: #bcbcbc;
text-transform: uppercase;
font-weight: 400;
margin: 0 5px 0 0;
padding: 0 0 0 15px;
}
.we-create li:first-child {
background: none;
}
.start-button {
padding-left: 0px;
}
.start-button li a {
color: #fff;
}
.link {
padding: 15px 35px;
background: #7cc576;
color: #fff !important;
font-size: 16px;
font-weight: 400;
font-family: 'Montserrat', sans-serif;
display: inline-block;
border-radius: 3px;
text-transform: uppercase;
line-height: 25px;
margin-bottom: 20px;
transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
}
.link:hover {
text-decoration: none;
color: #7cc576 !important;
background: #fff;
}
.link:active,
.link:focus {
background: #7cc576;
text-decoration: none;
color: #fff !important;
}
/* Team
---------------------------------*/
.team-leader-block {
max-width: 993px;
margin: 0 auto;
}
.team-leader-box {
width: 30.66%;
margin-right: 3.82979%;
height: 490px;
overflow: hidden;
text-align: center;
float: left;
}
.team-leader-box span {
margin-bottom: 24px;
display: block;
}
.team-leader-box:nth-of-type(3n+0) {
margin: 0;
}
.team-leader {
width: auto;
height: auto;
position: relative;
border-radius: 50%;
box-shadow: 0px 0px 0px 7px rgba(241, 241, 241, 0.80);
margin: 7px 7px 25px 7px;
}
.team-leader-shadow {
transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
border-radius: 50%;
position: absolute;
width: 100%;
height: 100%;
z-index: 10;
border-radius: 50%;
}
.team-leader-shadow a {
display: flex;
width: 100%;
height: 100%;
align-items: center;
justify-content: center;
transition: all 0.6s ease-in-out;
font-size: 20px;
opacity: 0;
color: #fff;
text-decoration: none;
}
.team-leader:hover .team-leader-shadow {
box-shadow: inset 0px 0px 0px 148px rgba(17, 17, 17, 0.80);
}
.team-leader:hover .team-leader-shadow a {
opacity: 1;
}
/*.team-leader:hover ul {
display: block;
opacity: 7
}*/
.team-leader img {
display: block;
border-radius: 50%;
}
.team-leader ul {
display: block;
opacity: 0;
padding: 0;
margin: 0;
list-style: none;
position: absolute;
left: 0;
top: 50%;
width: 100%;
text-align: center;
margin-top: -14px;
z-index: 15;
transition: all 0.6s ease-in-out;
-moz-transition: all 0.6s ease-in-out;
-webkit-transition: all 0.6s ease-in-out;
}
/*change hover text*/
.team-leader ul p2 {
display: inline;
font-size: 25px;
color: blue;
text-align: center;
cursor: pointer;
cursor: hand;
}
.
/* Footer
---------------------------------*/
.footer {
background: url(../img/pw_maze_black_2X.png) left top repeat;
padding: 35px 0 35px;
}
.footer-logo {
margin: 15px auto 35px;
width: 76px;
}
.copyright,
.credits {
color: #cccccc;
font-size: 14px;
display: block;
text-align: center;
}
.copyright a,
.credits a {
color: #7cc576;
font-weight: 600;
text-decoration: none;
transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
}
/* Animation Timers
---------------------------------*/
.delay-02s {
animation-delay: 0.2s;
-webkit-animation-delay: 0.2s;
}
.delay-03s {
animation-delay: 0.3s;
-webkit-animation-delay: 0.3s;
}
.delay-04s {
animation-delay: 0.4s;
-webkit-animation-delay: 0.4s;
}
.delay-05s {
animation-delay: 0.5s;
-webkit-animation-delay: 0.5s;
}
.delay-06s {
animation-delay: 0.6s;
-webkit-animation-delay: 0.6s;
}
.delay-07s {
animation-delay: 0.7s;
-webkit-animation-delay: 0.7s;
}
.delay-08s {
animation-delay: 0.8s;
-webkit-animation-delay: 0.8s;
}
.delay-09s {
animation-delay: 0.9s;
-webkit-animation-delay: 0.9s;
}
.delay-1s {
animation-delay: 1s;
-webkit-animation-delay: 1s;
}
.delay-12s {
animation-delay: 1.2s;
-webkit-animation-delay: 1.2s;
}
#team.main-section.team {
background-color: #e6e6e6;
}
/*css related to the points box*/
body {
font-family: Arial;
padding: 25px;
background-color: #f5f5f5;
color: #808080;
text-align: center;
}
/*-=-=-=-=-=-=-=-=-=-=-=- */
/* Column Grids */
/*-=-=-=-=-=-=-=-=-=-=-=- */
.team-leader-box {
.col_half {
width: 49%;
}
.col_third {
width: 32%;
}
.col_fourth {
width: 23.5%;
}
.col_fifth {
width: 18.4%;
}
.col_sixth {
width: 15%;
}
.col_three_fourth {
width: 74.5%;
}
.col_twothird {
width: 66%;
}
.col_half,
.col_third,
.col_twothird,
.col_fourth,
.col_three_fourth,
.col_fifth {
position: relative;
display: inline;
display: inline-block;
float: left;
margin-right: 2%;
margin-bottom: 20px;
}
.end {
margin-right: 0 !important;
}
/* Column Grids End */
.wrapper {
width: 980px;
margin: 30px auto;
position: relative;
}
.counter {
background-color: #808080;
padding: 10px 0;
border-radius: 5px;
}
.count-title {
font-size: 40px;
font-weight: normal;
margin-top: 10px;
margin-bottom: 0;
text-align: center;
}
.count-text {
font-size: 13px;
font-weight: normal;
margin-top: 10px;
margin-bottom: 0;
text-align: center;
}
.fa-2x {
margin: 0 auto;
float: none;
display: table;
color: #4ad1e5;
}
}
.counter.col_fourth {
background-color: #fff;
border-radius: 10px;
}
.counter.col_fourth :hover {
cursor: pointer;
cursor: hand;
color: blue;
}
.counter.col_fourth :hover {
display: block;
opacity: 1
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, maximum-scale=1">
<title>Homepage</title>
<link rel="icon" href="favicon.png" type="image/png">
<link rel="shortcut icon" href="favicon.ico" type="img/x-icon">
<!-- related to number count -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel='stylesheet prefetch' href='http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css'>
<link rel="stylesheet" href="css/style1.css">
<!-- number count ends -->
<link href='https://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,800italic,700italic,600italic,400italic,300italic,800,700,600' rel='stylesheet' type='text/css'>
<link href="css/bootstrap.css" rel="stylesheet" type="text/css">
<link href="css/style.css" rel="stylesheet" type="text/css">
<link href="css/font-awesome.css" rel="stylesheet" type="text/css">
<link href="css/responsive.css" rel="stylesheet" type="text/css">
<link href="css/animate.css" rel="stylesheet" type="text/css">
<!--[if IE]><style type="text/css">.pie {behavior:url(PIE.htc);}</style><![endif]-->
<!-- <script type="text/javascript" src="js/jquery.1.8.3.min.js"></script> -->
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
<script type="text/javascript" src="js/jquery-scrolltofixed.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="js/jquery.isotope.js"></script>
<script type="text/javascript" src="js/wow.js"></script>
<script type="text/javascript" src="js/classie.js"></script>
<script src="contactform/contactform.js"></script>
</head>
<body>
<header class="header" id="header">
<!--header-start-->
</header>
<!--header-end-->
<section class="main-section paddind" id="Portfolio">
<!--main-section-start-->
<div class="container">
<h2>Portfolio</h2>
<h6>Fresh portfolio of designs that will keep you wanting more.</h6>
<div class="portfolioFilter">
<ul class="Portfolio-nav wow fadeIn delay-02s">
<li>All
</li>
<li>Branding
</li>
<li>Web design
</li>
<li>Print design
</li>
<li>Photography
</li>
</ul>
</div>
</div>
<div class="portfolioContainer wow fadeInUp delay-04s">
<div class=" Portfolio-box printdesign">
<a href="#">
<img src="img/Portfolio-pic1.jpg" alt="">
</a>
<h3>Foto Album</h3>
<p>Print Design</p>
</div>
<div class="Portfolio-box webdesign">
<a href="#">
<img src="img/Portfolio-pic2.jpg" alt="">
</a>
<h3>Luca Theme</h3>
<p>Web Design</p>
</div>
<div class=" Portfolio-box branding">
<a href="#">
<img src="img/Portfolio-pic3.jpg" alt="">
</a>
<h3>Uni Sans</h3>
<p>Branding</p>
</div>
<div class=" Portfolio-box photography">
<a href="#">
<img src="img/Portfolio-pic4.jpg" alt="">
</a>
<h3>Vinyl Record</h3>
<p>Photography</p>
</div>
<div class=" Portfolio-box branding">
<a href="#">
<img src="img/Portfolio-pic5.jpg" alt="">
</a>
<h3>Hipster</h3>
<p>Branding</p>
</div>
<div class=" Portfolio-box photography">
<a href="#">
<img src="img/Portfolio-pic6.jpg" alt="">
</a>
<h3>Windmills</h3>
<p>Photography</p>
</div>
</div>
</section>
<!--main-section-end-->
<section class="main-section team" id="team">
<!--main-section team-start-->
<div class="container">
<h2>Medals</h2>
<h6></h6>
<div class="team-leader-block clearfix">
<div class="team-leader-box">
<div class="team-leader wow fadeInDown delay-03s">
<div class="team-leader-shadow">
Click For Details
</div>
<img src="http://www.owltemplates.com/demo/wordpress/success/wp-content/uploads/2013/01/man4.png" alt="">
</div>
<!-- Modal -->
<div class="modal fade" id="myModal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span>
</button>
<h4 class="modal-title" id="myModalLabel">Gold Medal Summary</h4>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div class="wrapper wow fadeInDown delay-05s">
<div class="counter col_fourth">
<i class="fa fa-check fa-2x"></i>
<h2 class="timer count-title" id="count-number1" data-to="50" data-speed="1500"></h2>
<p class="count-text ">points</p>
</div>
</div>
</div>
<!-- update this code -->
<div class="team-leader-box">
<div class="team-leader wow fadeInDown delay-06s">
<div class="team-leader-shadow">
Click For Details
</div>
<img src="http://www.owltemplates.com/demo/wordpress/success/wp-content/uploads/2013/01/man4.png" alt="">
<!-- <ul> Remove this
<p2>Click For Details</p2>
</ul> -->
</div>
<div class="modal fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span>
</button>
<h4 class="modal-title" id="myModalLabel">Silver Medal Summary</h4>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div class="wrapper wow fadeInDown delay-05s">
<div class="counter col_fourth">
<i class="fa fa-check fa-2x"></i>
<h2 class="timer count-title" id="count-number2" data-to="30" data-speed="1500"></h2>
<p class="count-text ">points</p>
</div>
</div>
</div>
<div class="team-leader-box">
<div class="team-leader wow fadeInDown delay-06s">
<div class="team-leader-shadow">
Click For Details
</div>
<img src="http://www.owltemplates.com/demo/wordpress/success/wp-content/uploads/2013/01/man4.png" alt="">
<!-- <ul> Remove this
<p2>Click For Details</p2>
</ul> -->
</div>
<div class="modal fade" id="myModal3" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span>
</button>
<h4 class="modal-title" id="myModalLabel">Bronze Medal Summary</h4>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div class="wrapper wow fadeInDown delay-05s">
<div class="counter col_fourth">
<i class="fa fa-check fa-2x"></i>
<h2 class="timer count-title" id="count-number3" data-to="10" data-speed="1500"></h2>
<p class="count-text ">points</p>
</div>
</div>
</div>
<!-- team-leader-box div ends -->
</div>
<!-- team-leader-block clearfix div ends -->
<!-- popup div ends -->
</div>
<!-- container div ends -->
</section>
<!--main-section team-end-->
<footer class="footer">
<div class="container">
<div class="footer-logo">
<a href="#">
<img src="img/footer-logo.png" alt="">
</a>
</div>
<span class="copyright">© Knight Theme. All Rights Reserved</span>
<div class="credits">
Business Bootstrap Themes by BootstrapMade
</div>
</div>
</footer>
<script src="js1/index1.js">
</script>
</body>
</html>
Fiddle link for above: https://jsfiddle.net/L3tntu6a/
Help from the community: Stack Overflow similar links

You need to check when the user is either scrolling through or just about to scroll through the div. For example:
$(document).scroll(function() {
//Basically your position in the page
var x = $(this).scrollTop();
//How far down (in pixels) you want the user to be when the effect to starts, eg. 500
var y = 500;
if (x > y) {
//Put your effect functions in here.
}
});
You can also add effects when the user scrolls back up or more effects with more if/else blocks.

You have to put these medals in a div and make it show when you scroll to it.
here is a example
$(document).scroll(function() {
var y = $(this).scrollTop();
if (y > 800) {
$('.yourDiv').fadeIn();
} else {
$('.yourDiv').fadeOut();
}
});
you can see working example below
http://jsfiddle.net/apaul34208/ZyKar/3/