We Keep Coding

How do I do this to the progress bar?(html-css)

How do I do this to the progress bar like below:
.detail-load {
height: 42px;
border: 1px solid #A2B2C5;
padding: 1px;
border-radius: 10px;
}
.detail-load > .detail-loading {
background: #904BFF;
height: 100%;
border-radius: 10px;
}
.detail-load-text {
position: absolute;
right: 0;
left: 0;
top: 10px;
text-align: center;
color: #fff;
font-weight: 600;
font-size: 17px;
}
<div class="detail-pop-item">
<div class="detail-load">
<div class="detail-loading" style="width: 80%;"></div>
</div>
<div class="detail-load-text">80%</div>
</div>
The progress bar I want to make is like the image I shared above. Can anyone help?

You could use the clip-path property to achieve your desired result. I included some dummy javascript in the snippet to simulate loading.
You can set --loading-color-primary and --loading-color-secondary to any two colors you'd like.
const front = document.getElementById('progress-front');
const back = document.getElementById('progress-back');
let progress = 0;
setInterval(() => {
front.style.webkitClipPath = `inset(0 0 0 ${progress}%)`;
if(++progress >= 100) {
progress = 0;
}
front.innerHTML = back.innerHTML = progress + "%";
}, 50);
:root {
--loading-color-primary: purple;
--loading-color-secondary: white;
}
.progress {
position: relative;
display: flex;
font-size: 50px;
border: 2px solid var(--loading-color-primary);
overflow: hidden;
width: 100%;
}
.back {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
background: var(--loading-color-primary);
color: var(--loading-color-secondary);
}
.front {
position: absolute;
display: flex;
justify-content: center;
align-items: center;
left: 0;
width: 100%;
right: 0;
top: 0;
bottom: 0;
background: var(--loading-color-secondary);
color: var(--loading-color-primary);
}
<div class="progress">
<div class="back" id="progress-back">0%</div>
<div class="front" id="progress-front">0%</div>
</div>

This is an example of what you want to accomplish:
https://codepen.io/robinrendle/pen/wKqmbW
<div class="wrapper">
<div class="bg">
<div class="el"></div>
</div>
</div>
$loadingTime: 10s;
$color: rgb(255,0,0);
body {
background-color: white;
}
#keyframes loading {
0% {
width: 0;
} 100% {
width: 100%;
}
}
#keyframes percentage {
#for $i from 1 through 100 {
$percentage: $i + "%";
#{$percentage} {
content: $percentage;
}
}
}
.bg {
background-color: $color;
animation: loading $loadingTime linear infinite;
}
.el{
color: $color;
width: 200px;
border: 1px solid $color;
&:after {
padding-left: 20px;
content: "0%";
display: block;
text-align: center;
font-size: 50px;
padding: 10px 20px;
color: rgb(0,255,255);
mix-blend-mode: difference;
animation: percentage $loadingTime linear infinite;
}
}
html {
height: 100%;
background-color: white;
font-family: 'PT Sans', sans-serif;
font-weight: bold;
}
body {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}
The key item here is the mix-blend-mode property which defines how an element's content should blend with its background.
You can learn more about it here and here.

I used a different approach, where you can set a CSS variable to control the length of the loading progress as well as displaying the value.
Because I used a pseudo-class to display the value, I needed to use a number hack, using counter-reset on the ::after pseudo-element.
As for having the dark text turn white, you can use mix-blend-mode: color-dodge. It's not perfect, as you can see, but perhaps good enough?
.detail-load {
height: 42px;
border: 1px solid #A2B2C5;
padding: 1px;
border-radius: 10px;
}
.detail-load > .detail-loading {
background: #904BFF;
height: 100%;
border-radius: 10px;
/* ADDED */
width: calc(var(--progress) * 1%);
position: relative;
}
.detail-load > .detail-loading::after {
font-weight: 600;
font-size: 17px;
/* ADDED */
counter-reset: number-hack var(--progress);
content: counter(number-hack)"%";
position: absolute;
right: 0px;
top: 50%;
transform: translate(50%, -50%);
color: #d2b6ff;
mix-blend-mode: color-dodge;
}
.detail-load > .detail-loading.grey-text::after {
color: #b5b5b5;
}
<div class="detail-pop-item">
<div class="detail-load">
<div class="detail-loading" style="--progress: 30"></div>
</div>
</div>
<div class="detail-pop-item">
<div class="detail-load">
<div class="grey-text detail-loading" style="--progress: 60"></div>
</div>
</div>

Following Veselin's answer, you just need to change the color attributes as follows:
$color: rgb(255,0,0); becomes $color: rgb(255,0,255);
and
.el{
...
&:after {
...
color: rgb(0,255,255);
}
}
becomes
.el{
...
&:after {
...
color: rgb(0,255,0);
}
}
The result is:
$loadingTime: 10s;
$color: rgb(255,0,255);
body {
background-color: white;
}
#keyframes loading {
0% {
width: 0;
} 100% {
width: 100%;
}
}
#keyframes percentage {
#for $i from 1 through 100 {
$percentage: $i + "%";
#{$percentage} {
content: $percentage;
}
}
}
.bg {
background-color: $color;
animation: loading $loadingTime linear infinite;
}
.el{
color: $color;
width: 200px;
border: 1px solid $color;
&:after {
padding-left: 20px;
content: "0%";
display: block;
text-align: center;
font-size: 50px;
padding: 10px 20px;
color: rgb(0,255,0);
mix-blend-mode: difference;
animation: percentage $loadingTime linear infinite;
}
}
html {
height: 100%;
background-color: white;
font-family: 'PT Sans', sans-serif;
font-weight: bold;
}
body {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}

Toggle between 2 divs - visibility and css animation

In my site, I have two divs within a container. One div has text in English and the other has text in mandarin I have a button on the side that I want the user to toggle and control the visibility of each div/language they are comfortable with. I'm using JS to add/remove class visibility (opacity and display). By default, I have the English one in view. My sketch works halfway, when a user clicks the button, the English div fades but the mandarin one doesn't appear. Code below-
HTML -
<div class="textSection">
<div class="eng about" id="eng">
<p>SHEK LEUNG
</p>
</div>
<div class="mandarin about" id="man">
<p>
「為Samson畢業後在倫敦創立的品牌
</p>
</div>
</div>
<button class="langChange">⥃</button>
css -
.textSection {
width: 50vw;
height: 80vh;
position: relative;
top: 10vh;
left: 30vw;
display: flex;
justify-content: center;
align-items: center;
}
.about {
position: absolute;
width: 100%;
height: 100%;
opacity: 1;
box-sizing: border-box;
transition: all 1s;
}
.eng {
border-radius: 10px;
background: url("72ppi/Asset\ 3.png");
background-size: 100% 100%;
font-family: Helvetica, sans-serif;
font-weight: bold;
font-size: 1.2rem;
line-height: 1.7;
text-align: justify;
text-transform: uppercase;
color: white;
padding: 3rem;
opacity: 1;
display: block;
}
.mandarin {
font-family: Hiragino Sans GB;
font-size: 1.3rem;
line-height: 2;
text-align: justify;
text-transform: uppercase;
font-weight: bold;
color: black;
padding: 3rem;
opacity: 1;
border-radius: 10px;
border: solid 2px black;
opacity: 0;
display: none;
}
.hidden {
display: none;
}
.visuallyhidden {
opacity: 0;
}
.seen {
display: block;
}
.visual {
opacity: 1;
}
.langChange {
position: absolute;
border: none;
padding: 1rem 2rem;
border-radius: 10px;
margin: 0;
text-decoration: none;
font-size: 2rem;
left: 20vw;
cursor: pointer;
background-color: transparent;
color: black;
}
JS -
let engBox = document.getElementById('eng'),
manBox = document.getElementById('man')
langbtn = document.querySelector('.langChange');
langbtn.addEventListener('click', function () {
console.log(engBox.classList);
if (engBox.classList.contains('hidden')) {
engBox.classList.remove('hidden');
setTimeout(function () {
engBox.classList.remove('visuallyhidden');
}, 20);
} else {
engBox.classList.add('visuallyhidden');
engBox.addEventListener('transitionend', function (e) {
engBox.classList.add('hidden');
}, {
capture: false,
once: true,
passive: false
});
}
}, false);
langbtn.addEventListener('click', function () {
console.log(manBox.classList);
if (manBox.classList.contains('seen')) {
manBox.classList.remove('seen');
setTimeout(function () {
manBox.classList.remove('visual');
}, 20);
} else {
manBox.classList.add('seen');
manBox.addEventListener('transitionend', function (e) {
manBox.classList.add('seen');
}, {
capture: false,
once: true,
passive: false
});
}
}, false);

Start simple and build up. Here is a minimal working visibility toggle. Position changes, layout, and most timing can be added to the CSS piece by piece until you have what you want.
const engBox = document.getElementById('eng');
const manBox = document.getElementById('man');
const langbtn = document.querySelector('.langChange');
langbtn.addEventListener('click', function () {
engBox.classList.toggle('transparent');
manBox.classList.toggle('transparent');
});
.about {
overflow: hidden;
transition: all 2s;
}
.transparent {
opacity: 0;
}
<div class="textSection">
<div class="eng about" id="eng">
<p>SHEK LEUNG
</p>
</div>
<div class="mandarin about transparent" id="man">
<p>
「為Samson畢業後在倫敦創立的品牌
</p>
</div>
</div>
<button class="langChange">⥃</button>
</div>

Button not working in certain parts of my HTML

I have a button id="getstarted" located near the top and the bottom of my HTML. The button near the top works, but the one near the bottom does not work. They are formatted exactly the same. I want both buttons to work.
Here is my code.
**edited code. I added onclick="window.location.href = 'getstarted.html';" to my buttons. now the first button works, but the second one does not work. how do I get the second button to work?
$(document).ready(function() {
$(window).scroll(function() {
if ($(this).scrollTop() > 70) {
$('#header').fadeIn(500);
} else {
$('#header').fadeOut(500);
}
});
});
$(document).ready(function() {
$(window).scroll(function() {
if ($(this).scrollTop() > 70) {
$('#pricing').css("color", "#000");
} else {
$('#pricing').css("color", "#FFF");
}
});
});
// slideshow
$(document).ready(function() {
$("#laptopslideshop > div:gt(0)").hide();
setInterval(function() {
$('#laptopslideshop > div:first')
.fadeOut(500)
.next()
.fadeIn(500)
.end()
.appendTo('#laptopslideshop');
}, 3000);
});
#import url('https://fonts.googleapis.com/css?family=Nunito+Sans');
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
#header {
position: fixed;
top: 0px;
width: 100%;
height: 84px;
background-color: #FFFFFF;
color: #000;
z-index: 1;
display: none;
}
#media (max-width: 768px) {
#header {
height: 60px;
}
}
#main {
height: 100vh;
width: 100%;
background: url(Images/teamchat.jpg) no-repeat center;
background-size: contain;
background-size: cover;
}
.headerContents {
text-align: right;
height: 100%;
width: 100%;
float: right;
z-index: 2;
position: fixed;
}
.headerpandc {
margin-right: 18%;
margin-top: 17px;
position: relative;
}
#media (max-width: 768px) {
.headerpandc {
margin-right: 4%;
margin-top: 14px;
}
}
#pricing {
font-family: Nunito Sans;
margin-right: 55px;
font-weight: 800;
letter-spacing: 0.1em;
font-size: 18px;
text-decoration: none;
color: #FFF;
transition: 0.6s;
}
#media (max-width: 768px) {
#pricing {
font-size: 12px;
margin-right: 3%;
}
}
#media (max-width: 355px) {
#pricing {
display: none;
}
}
#pricing:hover {
text-decoration: underline;
}
#pricing:active {
color: #000;
}
#getstarted {
font-family: Nunito Sans;
background-color: #5a52ff;
border-radius: 10px;
border: none;
color: white;
padding: 11px 25px;
text-align: center;
font-size: 18px;
transition: 0.3s;
text-decoration: none;
cursor: pointer;
font-weight: 800;
letter-spacing: 0.05em;
outline: none;
}
#media (max-width: 768px) {
#getstarted {
padding: 8px 15px;
font-size: 12px;
}
}
#getstarted:hover {
background-color: #3d33ff;
}
#getstarted:active {
transform: translateY(2px);
box-shadow: 0 1px #666;
}
#telosdesignlogo {
float: left;
height: 30px;
margin-left: 18%;
margin-top: 6px;
}
#media (max-width: 768px) {
#telosdesignlogo {
margin-left: 4%;
height: 23px;
}
}
/*main text*/
#mainbox {
height: 470px;
width: 500px;
text-align: left;
position: relative;
top: 250px;
left: 28%;
font-family: Nunito Sans;
color: #FFF;
}
#hitelos {
font-size: 2.5em;
font-weight: lighter;
}
#maintext {
font-weight: 800;
font-size: 3.5em;
}
#mainpricing {
z-index: 5;
}
/* Laptop slideshow begins */
#laptopslideshop {
position: relative;
margin-top: 50px;
width: 240px;
height: 240px;
padding: 10px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.4);
}
.mySlides {
position: absolute;
width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<div id="header"></div>
<div class="headerContents">
<div class="headerpandc">
<a id="pricing" href="pricing.html">Pricing</a><button id="getstarted" onclick="window.location.href = 'getstarted.html';">Get Started</button>
<img src="Images/TelosLogo with text.png" href="index.html" alt="TelosDesign" id="telosdesignlogo" />
</div>
</div>
<div id="main">
<div id="mainbox">
<div id="hitelos">
Hi! We're Telos.
</div>
<div id="maintext">
Beautiful websites tailored to your unique business.
</div>
<button id="getstarted" onclick="window.location.href = 'getstarted.html';">Get Started</button>
</div>
</div>
<div id="laptopslideshop">
<div>
<img class="mySlides" src="Images/laptoppic1test.png" alt="Laptop and Phone" />
</div>
<div>
<img class="mySlides" src="Images/laptoppic2test.png" alt="Laptop and Phone" />
</div>
</div>

id should be unique to an element(just one), use a class instead
In your code you use javascript(jquery) to control href, not html, see onclick.
<button id="getstarted" onclick="window.location.href = 'getstarted.html';">
The javascript is taking in consideration only the first element because no other element with the same id should exist.
--
I see that you have also:
<script type="text/javascript" src="app.js"></script>
What this code is doing ?
Check the web browser console for JavaScript errors from other sources/code.

Try with this code
<a id="pricing" href="http://google.com">Pricing</a>
<button id="getstarted">Get Started</button>
<a href="index.html">
<img src="Images/TelosLogo with text.png" href="http://google.com" alt="TelosDesign" id="telosdesignlogo"></a>

Velocity.js - triggering animations

I'm currently trying to get rid of a bunch of CSS animations and replace with the Velocity.js (along the way building in new animations).
At present I have a grid Item:
<div class="video-thumbnail">
<img src="http://placehold.it/1280x720" class="imgspacer" alt="{$info['title']}" />
<div class="overlay">
<a href="http://bbc.co.uk" class="thumbnail-link">
<div class="title">
<div class="title-display">
<h5 class="SlideIn">Title One</h5>
<h6 class="SlideIn">Title Two</h6>
</div>
</div>
</a>
</div>
</div>
This is controlled through CSS to fade in the .overlay element. What I then want to do is for the h5 & h6 classes to slide up in.
I've written the following code:
$('.overlay').hover(function(){
$(this).find('.SlideIn').velocity("transition.slideUpIn", {stagger: 100, duration: 500});
});
But nothing seems to be happening. I'm quite new to Javascript so I'm presuming I've made a silly mistake somewhere along the line but can't work out what it is.
I've included a full snippet below and it can also be found here
$('.overlay').hover(function(){
$(this).find('.SlideIn').velocity("transition.slideUpIn", {stagger: 100, duration: 500});
});
#thumbnail-array {
width: 100%;
}
.gutter-sizer {
width: 0.03%;
}
.video-thumbnail {
position: relative;
background-color: #777;
overflow: hidden;
line-height: 0px;
margin: 0px;
}
.video {
position: absolute;
margin-top: none;
left: 0;
right: 0;
bottom: 0;
padding: 0;
width: 100%;
height: 100%;
z-index: 100;
display: none;
}
.overlay {
position: absolute;
left: 0px;
top: 0px;
bottom: 0px;
right: 0px;
width: 100%;
height: 100%;
z-index: 50;
}
.thumbnail-link {
display: table;
width: 100%;
height: 100%; /*important, forces to 100% height of parent*/
opacity:0;
-webkit-transition: opacity .5s ease;
-moz-transition: opacity .25s ease;
background: rgba(0, 0, 0, 0.5);
color: #FFFFFF;
text-decoration: none;
}
.title {
display: table-cell;
vertical-align: middle;
text-align: center;
text-decoration: none;
color: #FFFFFF;
font-family: helvetica;
width: 100%;
line-height: 0px;
}
.title-display {
display: block;
width: 100%;
}
.video-thumbnail:hover .thumbnail-link {
text-decoration: none;
opacity:1;
}
.imgspacer {
width: 100%;
max-width:100%;
}
.picturehelper {
display: inline-block;
}
.video-thumbnail:hover .video {
display: inline;
}
h5 {
display: inline-block;
width: 100%;
font-size: 2em;
margin: 0px;
padding: 0px;
line-height: normal;
}
h6 {
display: inline-block;
width: 100%;
font-size: 0.75em;
letter-spacing: 0.3em;
padding: 0px;
margin: 0px;
font-weight: 100;
line-height: normal;
}
<script src="https://raw.githubusercontent.com/julianshapiro/velocity/master/velocity.min.js"></script>
<script src="https://raw.githubusercontent.com/julianshapiro/velocity/master/velocity.ui.js"></script>
<script src="https://raw.githubusercontent.com/julianshapiro/velocity/master/velocity.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="video-thumbnail">
<img src="http://placehold.it/1280x720" class="imgspacer" alt="{$info['title']}" />
<div class="overlay">
<a href="http://bbc.co.uk" class="thumbnail-link">
<div class="title">
<div class="title-display">
<h5 class="SlideIn">Title One</h5>
<h6 class="SlideIn">Title Two</h6>
</div>
</div>
</a>
</div>
</div>

As mentioned by #AldoRomo88 and #jmcgriz there was an issue with the load order of the scripts on the page.
I fixed the issue by simply loading query first up (and hosting the scripts on my own server!)

I'm adding <li> via my submit button and it is pushing past my div. My js function can't fix it

So I'm trying to make the page continue to add the list items without breaking past the body element as shown.
I would like to keep the all the list items within the body and div like the first few. My best idea on how to go through this is by using if statement at the bottom of the JS to rerun autoResizeDiv. Thanks for any help!!
JS
$(function() {
var $newItemButton= $('#newItemButton');
var $newItemForm= $('#newItemForm');
var $textInput= $('input:text');
$newItemButton.show();
$newItemForm.hide();
$('#showForm').on('click', function() {
$newItemButton.hide();
$newItemForm.show();
});
$newItemForm.on('submit', function(e) {
e.preventDefault();
// this prevents the form from submitting which you need
var newText=$('input:text').val();
$('li:last').after('<li>'+ newText + '</li>');
$newItemForm.hide();
$newItemButton.show();
$textInput.val('')
// this empties the text box so you can add a new entry
});
function autoResizeDiv() {
document.getElementById('page').style.height = window.innerHeight +'px';
// document.getElementById('newItemButton').style.height = window.innerHeight +'px';
}
window.onresize = autoResizeDiv;
autoResizeDiv();
if(document.getElementById('addButton').clicked == true) {
autoResizeDiv();
}
})
CSS
#media screen and (max-width:700px) {
body {
background: #111;
background-size: 780px;
font-family: 'Dosis', sans-serif;
color: white;
display: block;
height:100%;
}
h1, h2, p {
text-align: center;
}
img {
max-width: 50px;
/* display: inline-block; */
/* margin: 4% 0 0% 165px;*/
padding: 10% 45% 0 44%;
/* vertical-align: middle;*/
/* position: absolute;*/
}
h1 {
margin: -1% 0 0 0;
font-size: .8rem;
letter-spacing: 1.2px;
}
h2 {
min-width: 70%;
letter-spacing: 8px;
text-transform: uppercase;
margin: 5% 0 4% 0%;
font-size: 1.4rem;
}
div {
margin: auto;
background: #222;
width: 360px;
}
#page {
/* padding: auto;*/
/* display: inline-block;*/
height: 465px;
}
ul {
list-style: none;
padding: 0;
margin: 5%;
}
li:nth-child(-n+3) {
background-color: #B80000;
}
li:nth-child(n+4) {
background-color: coral;
}
li {
margin: .3% -5.2% .3% -5.2%;
padding: 12px 0 1px 16px;
height: 35px;
font-size: 1.1rem;
/* width: 100%;*/
/*text-align: 30% 0 30% 30%*/
}
p {
color: #111;
background: #FFF;
border-radius: 1.5% / 10%;
font-size: .85rem;
margin: 0% 10%;
}
#newItemButton {
position: absolute;
background: #222;
}
#newItemForm {
display: -webkit-flex;
-webkit-flex-direction: row;
-webkit-justify-content: center;
-webkit-flex-wrap: wrap;
background: #222;
z-index: 10; position:relative
}
#itemDescription {
margin: 3.8px 10px 0 0;
width: 68%;
border: none;
border-radius: 2.5% / 18%;
/* padding: 10px 0 0 0;*/
font-size: 1rem;
text-align: left;
text-indent: 10px;
}
#addButton, #showForm {
background: #B80000;
border: none;
text-transform: uppercase;
font-weight: bold;
font-size: 1rem;
color: white;
letter-spacing: .9px;
text-align: center;
}
#addButton {
border-radius: 8% / 20%;
padding: 10px 22px;
margin: 3px 0px 0 0;
}
#showForm {
border-radius: 3% / 11%;
padding: 10px 22px;
margin: 3px 17px 0 0;
float: right;
}
HTML
<!DOCTYPE html>
<html lang="en">
<script src="jquery-1.11.2.min.js"></script>
<script src="jquery-1.11.2.js"></script>
<script src="myscript.js"></script>
<link href='http://fonts.googleapis.com/css?family=Dosis:300|Yanone+Kaffeesatz'
rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="main.css">
<head>
<title> JavaScript Foundations: Variables</title>
<style>
html {
background: #FAFAFA;
font-family: sans-serif;
}
</style>
</head>
<body id="body">
<div id="page">
<img src="lion.png" alt="there's supposed to be a lion">
<h1 id="header">LISTKING</h1>
<h2>Buy Groceries</h2>
<p>"Lions are awesome, fun to play with, and have to pee a lot"
-J.K. Growling</p>
<ul>
<li id="one" class="hot"><em>fresh</em> figs</li>
<li id="two" class="hot">pine nuts</li>
<li id="three" class="hot">honey</li>
<li id="four">balsamic vinegar</li>
</ul>
<div id="newItemButton"><button href="#" id="showForm">new item</button></div>
<form id="newItemForm">
<input type="text" id="itemDescription" placeholder="Add description..." />
<input type="submit" id="addButton" value="add" />
</form>
</div>
</body>
</html>

Please have a look at your CSS and adjust the #page div to have overflow, or remove the height entirely.
#page {
/* padding: auto;*/
/* display: inline-block;*/
height: 465px;
overflow: scroll;
}

try changing your body height:100% to min-height: 100%;
making ul overflow-y:scroll also solves the problem, but a scroll bar may disrupt your look and feel