Develop Reference

How to have different color for each progress bar?

I am trying to have a different color for each progress bar. I can't change the color of the second bar and so on. Should I create a class for each bar in JavaScript to inject color? How can I load this same animation with a different color for each bar?
Hi, I am trying to have a different color for each progress bar. I can't change the color of the second bar and so on. Should I create a class for each bar in JavaScript to inject color? How can I load this same animation with a different color for each bar?
Html:
<div class="progressbar">
<h1 class="title">My Tools & Skills</h1>
<div class="skill-progress">
<h3>HTML5</h3>
<div class="progress">
<div class="progress-done" data-done="70">
</div>
</div>
<div class="progress">
<div class="progress-done" data-done="60">
</div>
</div>
<div class="progress">
<div class="progress-done" data-done="50">
</div>
</div>
<div class="progress">
<div class="progress-done" data-done="40">
</div>
</div>
</div>
</div>
CSS:
.progressbar h3 {
font-family: 'Poppins', sans-serif;
font-size: 1.2em;
color: #666666;
margin: auto;
}
.skill-progress {
margin-bottom: 10px;
}
.progress {
background-color: #f2f2f2;
border-radius: 20px;
height: 25px;
width: 450px;
margin: 20px auto;
}
.progress-done {
background: linear-gradient(to right, #f83600 0%, #f9d423 100%);
box-shadow: 0 3px 3px -5px #f83600, 0 2px 5px #f9d423;
border-radius: 20px;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
height: 100%;
width: 0;
opacity: 0;
transition: 4s ease 0.3s;
}
JS:
const progresses = document.querySelectorAll('.progress-done');
progresses.forEach(progress => {
const done = progress.getAttribute('data-done');
const duration = getComputedStyle(progress).transitionDuration;
const timeoutDuration = +duration.slice(0, 1) * 1000;
progress.style.width = done + "%";
progress.style.opacity = 1;
for (let i = 0; i <= done; i++) {
setTimeout(() => {
progress.innerText = i + "%";
}, (timeoutDuration / done) * i);
}
});

You can have have many colors, than u can keep data in array in js. If you have very limited combination, you can create class like .progress-done.success .progress-done.error .progress-done.info
Sample:
const progresses = document.querySelectorAll(".progress-done");
const colors = [
["#f83600", "#f9d423"],
["#f8ff00", "#f9d423"],
["#f83660", "#f9d423"],
["#f86600", "#f9d423"],
["#f86600", "#f9d423"],
["#f86600", "#f9d423"]
];
progresses.forEach((progress, index) => {
const [bgColor, bgShadow] = colors[index];
const background = `linear-gradient(to right, ${bgColor} 0%, ${bgShadow} 100%)`;
const boxShadow = `0 3px 3px -5px ${bgColor}, 0 2px 5px ${bgShadow}`;
const done = progress.getAttribute('data-done');
const duration = getComputedStyle(progress).transitionDuration;
const timeoutDuration = +duration.slice(0, 1) * 1000;
progress.style.width = done + "%";
progress.style.opacity = 1;
progress.style.background = background;
progress.style.boxShadow = boxShadow;
for (let i = 0; i <= done; i++) {
setTimeout(() => {
progress.innerText = i + "%";
}, (timeoutDuration / done) * i);
}
});
// By class name
progresses[4].className += " success"
progresses[5].className += " info"
.progressbar h3 {
font-family: 'Poppins', sans-serif;
font-size: 1.2em;
color: #666666;
margin: auto;
}
.skill-progress {
margin-bottom: 10px;
}
.progress {
background-color: #f2f2f2;
border-radius: 20px;
height: 25px;
width: 450px;
margin: 20px auto;
}
.progress-done {
background: linear-gradient(to right, #f83600 0%, #f9d423 100%);
box-shadow: 0 3px 3px -5px #f83600, 0 2px 5px #f9d423;
border-radius: 20px;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
height: 100%;
width: 0;
opacity: 0;
transition: 4s ease 0.3s;
}
.progress-done.success {
background: linear-gradient(to right, #00ff00 0%, #f9d423 100%) !important;
box-shadow: 0 3px 3px -5px #00ff00, 0 2px 5px #f9d423!important;
}
.progress-done.info {
background: linear-gradient(to right, #00ffff 0%, #00ff00 100%)!important;
box-shadow: 0 3px 3px -5px #00ffff, 0 2px 5px #00ff00!important;
}
<div class="progressbar">
<h1 class="title">My Tools & Skills</h1>
<div class="skill-progress">
<h3>HTML5</h3>
<div class="progress">
<div class="progress-done" data-done="70">
</div>
</div>
<div class="progress">
<div class="progress-done" data-done="60">
</div>
</div>
<div class="progress">
<div class="progress-done" data-done="50">
</div>
</div>
<div class="progress">
<div class="progress-done" data-done="40">
</div>
</div>
</div>
</div>

I suggest you insert a css subclass where you specify the color of the bar.

Why not add unique classes to each progress bar?
HTML
<div class="progress progress-1">
<div class="progress-done" data-done="70"></div>
</div>
<div class="progress progress-2">
<div class="progress-done" data-done="60"></div>
</div>
CSS
.progress-1 .progress-done {
background: linear-gradient(to right, #f83600 0%, #f9d423 100%);
box-shadow: 0 3px 3px -5px #f83600, 0 2px 5px #f9d423;
}
.progress-2 .progress-done {
background: linear-gradient(to right, #e7e7e7 0%, #f9f9f9 100%);
box-shadow: 0 3px 3px -5px #e7e7e7, 0 2px 5px #f9f9f9;
}
.progress {
background-color: #f2f2f2;
border-radius: 20px;
height: 25px;
width: 450px;
margin: 20px auto;
}
.progress-done {
/* Remove colour from here */
border-radius: 20px;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
height: 100%;
width: 0;
opacity: 0;
transition: 4s ease 0.3s;
}

You just need to change the colors. In this example I added a color class to each .progress element and then created class for each child element with the corresponding color.
const progresses = document.querySelectorAll('.progress-done');
progresses.forEach(progress => {
const done = progress.getAttribute('data-done');
const duration = getComputedStyle(progress).transitionDuration;
const timeoutDuration = +duration.slice(0, 1) * 1000;
progress.style.width = done + "%";
progress.style.opacity = 1;
for (let i = 0; i <= done; i++) {
setTimeout(() => {
progress.innerText = i + "%";
}, (timeoutDuration / done) * i);
}
});
.progressbar h3 {
font-family: 'Poppins', sans-serif;
font-size: 1.2em;
color: #666666;
margin: auto;
}
.skill-progress {
margin-bottom: 10px;
}
.progress {
border-radius: 20px;
height: 25px;
width: 450px;
margin: 20px auto;
}
.progress-done {
border-radius: 20px;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
height: 100%;
width: 0;
opacity: 0;
transition: 4s ease 0.3s;
}
.red{ background-color: #ff0000; }
.blue{ background-color: #0000ff; }
.green{ background-color: #00ff00; }
.yellow{ background-color: #ffff00; }
.red .progress-done {
background: linear-gradient(to right, #ff0000 0%, #ffffff 100%);
box-shadow: 0 3px 3px -5px #ff0000, 0 2px 5px #ffffff;
}
.blue .progress-done {
background: linear-gradient(to right, #0000ff 0%, #ffffff 100%);
box-shadow: 0 3px 3px -5px #0000ff, 0 2px 5px #ffffff;
}
.green .progress-done {
background: linear-gradient(to right, #00ff00 0%, #ffffff 100%);
box-shadow: 0 3px 3px -5px #00ff00, 0 2px 5px #ffffff;
}
.green .progress-done {
background: linear-gradient(to right, #ffff00 0%, #ffffff 100%);
box-shadow: 0 3px 3px -5px #ffff00, 0 2px 5px #ffffff;
}
<div class="progressbar">
<h1 class="title">My Tools & Skills</h1>
<div class="skill-progress">
<h3>HTML5</h3>
<div class="progress red">
<div class="progress-done" data-done="70">
</div>
</div>
<div class="progress blue">
<div class="progress-done" data-done="60">
</div>
</div>
<div class="progress green">
<div class="progress-done" data-done="50">
</div>
</div>
<div class="progress yellow">
<div class="progress-done" data-done="40">
</div>
</div>
</div>
</div>

How to make a progress bar that fills every time a textbox is filled

Today i'm trying to put a progress bar that fills every time the user fills a textbox, like this : let's say i have 10 textbox on the screen if none is filled i want the progress bar to be at 0% but if the user fills 5 of them i want it to be 50%. I found how to make the progress bar but can't figure how to make this condition to work with a TextBoxFor
If someone could help

Lets say yours textbox (input type=text ?).
<input type="text" class="check-fill">
You can add the jQuery keyup event on each input field, to check the number of input fields already done.
$(function(){ //When document is ready
$(".check-fill").keyup(function(){ //Prefer keyup so you check after, in case the user delete his entry.
var $fields = $(".check-fill");
var count = 0;
$fields.each(function(){
if($(this).val().length > 0)
count++;
});
});
var percentage = Math.floor(count * 100 / $fields.length);
//Here you have your percentage;
});
You can replace the keyup event by the "focusout" one, to reduce the numbers of verifitcations, but it will only check when the user click out of the input field.

If you are using JQuery you could use Progressbar. Then you can apply a certain class to all inputs OR a selector that apply to all of them, and finally attach an event to capture when they are not empty.
Example:
The form can be something like this:
<form class="progessform" ...>
<input type="text" ..../>
<input type="text" ..../>
</form>
And you can select these by using .progressform input[type=text] in a jquery script:
$('.progressform input[type=text]').on('change', function (e) {
var total = count all .progressform input[type=text] within the same form
var filled = count all .progressform input[type=text] values that are not empty
modify your progressbar according to the count: filled * 100 / total
}
This event is attached to every input text inside your form with class progressform, and it is called anytime the input text is changed.
Note that you might need to do extra things on this to distinguish if the input is validated correctly or not (ie, not to count some input in the progressbar if the value is not correct, like an invalid email or alphab characters in a numerical phone input)

** **PROGRESS BAR FILLUP ACCORDING TO TIME SET IN SECOUNDS ** **
function move() {
var elem = document.getElementById("myBar");
var width = 1;
var id = setInterval(frame, 100); // set time ex: 100 as 10s & 1000 as 1min
function frame() {
if (width >= 100) {
clearInterval(id);
} else {
width++;
elem.style.width = width + '%';
document.getElementById("label").innerHTML = width * 1 + '%';
}
}
return false;
}
<style>
<body>
#label {
text-align: center;
line-height: 22px;
color: white;
}
.meter {
height: 20px;
position: relative;
margin: 60px 0 20px 0;
background: #555;
-moz-border-radius: 25px;
-webkit-border-radius: 25px;
border-radius: 25px;
padding: 10px;
-webkit-box-shadow: inset 0 -1px 1px rgba(255,255,255,0.3);
-moz-box-shadow: inset 0 -1px 1px rgba(255,255,255,0.3);
box-shadow: inset 0 -1px 1px rgba(255,255,255,0.3);
}
.meter > span {
display: block;
width:1%;
height: 100%;
-webkit-border-top-right-radius: 8px;
-webkit-border-bottom-right-radius: 8px;
-moz-border-radius-topright: 8px;
-moz-border-radius-bottomright: 8px;
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
-webkit-border-top-left-radius: 20px;
-webkit-border-bottom-left-radius: 20px;
-moz-border-radius-topleft: 20px;
-moz-border-radius-bottomleft: 20px;
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
background-color: rgb(43,194,83);
background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0, rgb(43,194,83)), color-stop(1, rgb(84,240,84)) );
background-image: -moz-linear-gradient( center bottom, rgb(43,194,83) 37%, rgb(84,240,84) 69% );
-webkit-box-shadow: inset 0 2px 9px rgba(255,255,255,0.3), inset 0 -2px 6px rgba(0,0,0,0.4);
-moz-box-shadow: inset 0 2px 9px rgba(255,255,255,0.3), inset 0 -2px 6px rgba(0,0,0,0.4);
box-shadow: inset 0 2px 9px rgba(255,255,255,0.3), inset 0 -2px 6px rgba(0,0,0,0.4);
position: relative;
overflow: hidden;
}
.meter > span:after, .animate > span > span {
content: "";
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background-image: -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.25, rgba(255, 255, 255, .2)), color-stop(.25, transparent), color-stop(.5, transparent), color-stop(.5, rgba(255, 255, 255, .2)), color-stop(.75, rgba(255, 255, 255, .2)), color-stop(.75, transparent), to(transparent) );
background-image: -moz-linear-gradient( -45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent );
z-index: 1;
-webkit-background-size: 50px 50px;
-moz-background-size: 50px 50px;
background-size: 50px 50px;
-webkit-animation: move 1s linear infinite;
-moz-animation: move 2s linear infinite;
-webkit-border-top-right-radius: 8px;
-webkit-border-bottom-right-radius: 8px;
-moz-border-radius-topright: 8px;
-moz-border-radius-bottomright: 8px;
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
-webkit-border-top-left-radius: 20px;
-webkit-border-bottom-left-radius: 20px;
-moz-border-radius-topleft: 20px;
-moz-border-radius-bottomleft: 20px;
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
overflow: hidden;
}
</style>
<body onload="move()">
<div id="myProgress" class="meter">
<span id="myBar">
<center><div id="label">1%</div></center>
</span>
</div>
<br>
</body>

how to print slide number on controlNav in flexslider

I want slide number on each navigation bar bullet points
HTML code
<div id="slideshow">
<div class="container">
<div class="flexslider showOnMouseover ">
<ul class="slides">
<li> <img src="sliders/images/1.png" alt="" /> <div class="flex-caption"><img src="sliders/images/1-1.png" alt=""></div></li>
<li> <img src="sliders/images/2.png" alt="" /> <div class="flex-caption"><img src="sliders/images/1-2.png" alt=""></div></li>
</ul>
</div>

you can do that by removing a class name
use the below code to do it as soon as the slider starts.
$('.flexslider').flexslider({
start : function(){
$('.flex-control-paging').removeClass('flex-control-paging');
}
});
NOTE: You may need to change some more css to make it look pretty

Anyone still looking for the solution to this as I was, it can be solved simply by modifying the style sheet 'flexslider.css'.
The script already gives each nav link a number, but hides the number from view using a text-indent of -9999px. To get the numbers back, modify the class '.flex-control-paging li a'. As an example, here's the original:
.flex-control-paging li a {
width: 11px;
height: 11px;
display: block;
background: #666;
background: rgba(0, 0, 0, 0.5);
cursor: pointer;
text-indent: -9999px;
-webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
-moz-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
-o-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
}
Modify it to:
.flex-control-paging li a {
width: 20px;
height: 20px;
font-size: 20px;
display: block;
background: #ddd;
cursor: pointer;
}
And...
.flex-control-paging li a:hover {
background: #333;
color:#eee;
}
.flex-control-paging li a.flex-active {
background: #333;
color:#FFF;
cursor: default;
}
Should give you a good starting point to add your own style to.

Append does not work for appending text to an element

Similar to this question:
jQuery append fadeIn
But the solution isn't working for me.
Basically trying to ask the user their name and then append a greeting below.
Preferably on a fade in, I've tried a few solutions I came across here but to no avail.
The "document.name_form..etc) works fine when called inside an alert as well.
Can anyone see where I'm going wrong?
function doit() {
$('#item2').append( document.name_form.fname.value +"U WOT");
}
(The function doit gets triggered from the html forms "onSubmit", and has triggered alerts etc successfully)
Code snippet:
var greeting = "hello "
var div = document.getElementById('#item2');
function doit() {
$('#item2').append(document.name_form.fname.value + "U WOT");
}
// alert(greeting + document.name_form.fname.value)
//
//
// $( " HEYTHERDUDE " + document.name_form.fname.value).appendTo($( " #item2 " ));
//
// div.innerHTML = div.innerHTML + 'LOOK AT ME' + document.name_form.fname.value;
/***************************/
/*****CONTAINER STYLES******/
/***************************/
body {
background-color: #212130;
}
#container {
font-family: 'Exo 2', sans-serif;
color: #c5c520;
font-weight: 300;
width: 100%;
min-width: 225px;
max-width: 325px;
}
/***************************/
/*******INPUT STYLES********/
/***************************/
.input {
height: 25px;
width: 100%;
background-color: transparent;
border-style: solid;
border-width: 0px 0px 1px 0px;
border-color: #c5c520;
outline: 0;
-webkit-transition: background-color 0.2s;
-o-transition: background-color 0.2s;
transition: background-color 0.2s;
-webkit-transition: box-shadow 0.2s;
-o-transition: box-shadow 0.2s;
transition: box-shadow 0.2s;
font-family: 'Exo 2', sans-serif;
color: #c5c520;
font-weight: 300;
}
.input:hover {
box-shadow: inset 0 -10px 20px -10px #131322;
-moz-box-shadow: inset 0 -10px 20px -10px #131322;
-webkit-box-shadow: inset 0 -10px 20px border-right-width: 1px;
border-left-color: #181825;
border-right-color: #181825;
}
.input:focus {
background-color: #191929;
}
.name_submit {
color: #181825;
background-color: #c5c520;
border: none;
}
.submit_btn {
display: none;
}
.question {
display: block;
bottom: 15px;
}
/***********************************/
/*******ITEM SPECIFIC STYLES********/
/***********************************/
#item1 {
display: block;
}
#item2 {
top: 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
<!-- WHAT IS YOUR NAME -->
<div class="question" id="item1">
<div class="text">
<p>
Before we get started, what is your name?
</p>
</div>
<form name="name_form" action="" onSubmit="doit()">
<input type="text" class="input" name="fname">
<p></p>
<input type="button" value="Submit" class="submit_btn">
</form>
</div>
<!-- GREETING RE NAME -->
<div class="question" id="item2">
HI THERE
</div>
</div>

.append() should be used to add new DOM elements. To add text to an existing element, use .text.
function doit(e) {
e.preventDefault();
$('#item2').text( function(i, oldtext) {
return oldtext + $("form[name=name_form] input[name=fname]").val()+"U WOT";
});
}
You also have to use preventDefault() to prevent the form from being submitted. To match this, I changed the <form> to:
<form name="name_form" action="" onSubmit="doit(event)">
Demo:
var greeting = "hello "
var div = document.getElementById('#item2');
function doit(e) {
e.preventDefault();
$('#item2').text(function(i, oldtext) {
return oldtext + $("form[name=name_form] input[name=fname]").val() + "U WOT";
});
}
// alert(greeting + document.name_form.fname.value)
//
//
// $( " HEYTHERDUDE " + document.name_form.fname.value).appendTo($( " #item2 " ));
//
// div.innerHTML = div.innerHTML + 'LOOK AT ME' + document.name_form.fname.value;
/***************************/
/*****CONTAINER STYLES******/
/***************************/
body {
background-color: #212130;
}
#container {
font-family: 'Exo 2', sans-serif;
color: #c5c520;
font-weight: 300;
width: 100%;
min-width: 225px;
max-width: 325px;
}
/***************************/
/*******INPUT STYLES********/
/***************************/
.input {
height: 25px;
width: 100%;
background-color: transparent;
border-style: solid;
border-width: 0px 0px 1px 0px;
border-color: #c5c520;
outline: 0;
-webkit-transition: background-color 0.2s;
-o-transition: background-color 0.2s;
transition: background-color 0.2s;
-webkit-transition: box-shadow 0.2s;
-o-transition: box-shadow 0.2s;
transition: box-shadow 0.2s;
font-family: 'Exo 2', sans-serif;
color: #c5c520;
font-weight: 300;
}
.input:hover {
box-shadow: inset 0 -10px 20px -10px #131322;
-moz-box-shadow: inset 0 -10px 20px -10px #131322;
-webkit-box-shadow: inset 0 -10px 20px border-right-width: 1px;
border-left-color: #181825;
border-right-color: #181825;
}
.input:focus {
background-color: #191929;
}
.name_submit {
color: #181825;
background-color: #c5c520;
border: none;
}
.submit_btn {
display: none;
}
.question {
display: block;
bottom: 15px;
}
/***********************************/
/*******ITEM SPECIFIC STYLES********/
/***********************************/
#item1 {
display: block;
}
#item2 {
top: 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
<!-- WHAT IS YOUR NAME -->
<div class="question" id="item1">
<div class="text">
<p>
Before we get started, what is your name?
</p>
</div>
<form name="name_form" action="" onSubmit="doit(event)">
<input type="text" class="input" name="fname">
<p></p>
<input type="button" value="Submit" class="submit_btn">
</form>
</div>
<!-- GREETING RE NAME -->
<div class="question" id="item2">
HI THERE
</div>
</div>
Actually, your append() DOES work. You had two problems in your fiddle:
You had onLoad selected. This causes all the code to be inside a window.onload function, so it wasn't in the global scope, which is needed for functions used in onsubmit attributes. Using No wrap fixes this.
You weren't preventing the default submission. Beside the way I did this above, you can also do it by simply returning false in the onsubmit:
onsubmit="doit(); return false;"
Demo:
var greeting = "hello "
var div = document.getElementById('#item2');
function doit() {
$('#item2').append(document.name_form.fname.value + "U WOT");
}
// alert(greeting + document.name_form.fname.value)
//
//
// $( " HEYTHERDUDE " + document.name_form.fname.value).appendTo($( " #item2 " ));
//
// div.innerHTML = div.innerHTML + 'LOOK AT ME' + document.name_form.fname.value;
/***************************/
/*****CONTAINER STYLES******/
/***************************/
body {
background-color: #212130;
}
#container {
font-family: 'Exo 2', sans-serif;
color: #c5c520;
font-weight: 300;
width: 100%;
min-width: 225px;
max-width: 325px;
}
/***************************/
/*******INPUT STYLES********/
/***************************/
.input {
height: 25px;
width: 100%;
background-color: transparent;
border-style: solid;
border-width: 0px 0px 1px 0px;
border-color: #c5c520;
outline: 0;
-webkit-transition: background-color 0.2s;
-o-transition: background-color 0.2s;
transition: background-color 0.2s;
-webkit-transition: box-shadow 0.2s;
-o-transition: box-shadow 0.2s;
transition: box-shadow 0.2s;
font-family: 'Exo 2', sans-serif;
color: #c5c520;
font-weight: 300;
}
.input:hover {
box-shadow: inset 0 -10px 20px -10px #131322;
-moz-box-shadow: inset 0 -10px 20px -10px #131322;
-webkit-box-shadow: inset 0 -10px 20px border-right-width: 1px;
border-left-color: #181825;
border-right-color: #181825;
}
.input:focus {
background-color: #191929;
}
.name_submit {
color: #181825;
background-color: #c5c520;
border: none;
}
.submit_btn {
display: none;
}
.question {
display: block;
bottom: 15px;
}
/***********************************/
/*******ITEM SPECIFIC STYLES********/
/***********************************/
#item1 {
display: block;
}
#item2 {
top: 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
<!-- WHAT IS YOUR NAME -->
<div class="question" id="item1">
<div class="text">
<p>
Before we get started, what is your name?
</p>
</div>
<form name="name_form" action="" onSubmit="doit(); return false">
<input type="text" class="input" name="fname">
<p></p>
<input type="button" value="Submit" class="submit_btn">
</form>
</div>
<!-- GREETING RE NAME -->
<div class="question" id="item2">
HI THERE
</div>
</div>

I think the problem is that the function doit is not available when you bind onsubmit.
You can try to declare doit like a variable:
doit = function(){
By the way, if you don't want to submit really the form you can bind onclick instead of onsubmit.
Code snippet:
var greeting = "hello "
var div = document.getElementById('#item2');
doit = function() {
$('#item2').append(document.name_form.fname.value + "U WOT");
return false;
}
// alert(greeting + document.name_form.fname.value)
//
//
// $( " HEYTHERDUDE " + document.name_form.fname.value).appendTo($( " #item2 " ));
//
// div.innerHTML = div.innerHTML + 'LOOK AT ME' + document.name_form.fname.value;
/***************************/
/*****CONTAINER STYLES******/
/***************************/
body {
background-color: #212130;
}
#container {
font-family: 'Exo 2', sans-serif;
color: #c5c520;
font-weight: 300;
width: 100%;
min-width: 225px;
max-width: 325px;
}
/***************************/
/*******INPUT STYLES********/
/***************************/
.input {
height: 25px;
width: 100%;
background-color: transparent;
border-style: solid;
border-width: 0px 0px 1px 0px;
border-color: #c5c520;
outline: 0;
-webkit-transition: background-color 0.2s;
-o-transition: background-color 0.2s;
transition: background-color 0.2s;
-webkit-transition: box-shadow 0.2s;
-o-transition: box-shadow 0.2s;
transition: box-shadow 0.2s;
font-family: 'Exo 2', sans-serif;
color: #c5c520;
font-weight: 300;
}
.input:hover {
box-shadow: inset 0 -10px 20px -10px #131322;
-moz-box-shadow: inset 0 -10px 20px -10px #131322;
-webkit-box-shadow: inset 0 -10px 20px border-right-width: 1px;
border-left-color: #181825;
border-right-color: #181825;
}
.input:focus {
background-color: #191929;
}
.name_submit {
color: #181825;
background-color: #c5c520;
border: none;
}
.submit_btn {
display: none;
}
.question {
display: block;
bottom: 15px;
}
/***********************************/
/*******ITEM SPECIFIC STYLES********/
/***********************************/
#item1 {
display: block;
}
#item2 {
top: 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
<!-- WHAT IS YOUR NAME -->
<div class="question" id="item1">
<div class="text">
<p>
Before we get started, what is your name?
</p>
</div>
<form name="name_form" action="#" onSubmit="doit()">
<input type="text" class="input" name="fname">
<p></p>
<input type="button" value="Submit" class="submit_btn">
</form>
</div>
<!-- GREETING RE NAME -->
<div class="question" id="item2">
HI THERE
</div>
</div>

JQuery function to show element dependent on the value of hidden HTML input element

Just to preface my answer, I'm an absolute novice when it comes to JQUERY.
I'm trying to create a DOM ready function which takes the value of a hidden HTML input field and if the value is ... (something) then show a certain <div> class.
Here's my code:
JS - UPDATED
$(document).ready(function(){
var money = 19.95;
/* not sure if this is written correctly, but this is supposed to
check whether the hidden input element value is equal to var money */
if ($("input[id='VAT_shipping'][type='hidden']").val() == money ) {
$("#ac-wrapper").show();
$("#popup").show();
};
// hide popup when user clicks on close button
$(".close-btn").click(function(){
$("#ac-wrapper").hide();
// hide
});
// hides the popup if user clicks anywhere outside the container
$("#ac-wrapper").click(function(){
$("#popup").hide();
})
// prevents the overlay from closing if user clicks inside the popup overlay
$("#ac-wrapper.").click(function(e) {
e.preventDefault();
var $this = $(this);
var horizontalPadding = 30;
var verticalPadding = 30;
});
});
HTML
<input type="hidden" id="VAT_shipping" value="<? print $shipping; ?>" />
<div id="ac-wrapper">
<div id="popup">
<center>
<p>
<strong> You have selected World Free Tax Zone - £19.95 for shipping. </strong>
We will automatically remove the VAT - 20% from your order.
Please click close to return to review your order.
</p>
<button class="close-btn">Close</button>
</center>
</div>
</div>
CSS
#ac-wrapper {
display:none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(255,255,255,.6);
z-index: 1001;
}
#popup {
width: 555px;
height: 375px;
background: #FFFFFF;
border: 5px solid #000;
border-radius: 25px;
-moz-border-radius: 25px;
-webkit-border-radius: 25px;
box-shadow: #64686e 0px 0px 3px 3px;
-moz-box-shadow: #64686e 0px 0px 3px 3px;
-webkit-box-shadow: #64686e 0px 0px 3px 3px;
position: relative;
top: 200px; left: 375px;
font-size: 16px;
font-family: 'Oxygen', sans-serif;
text-align: center
}
.close-btn {
cursor: pointer;
font-family:Tahoma, Geneva, sans-serif;
border: 1px solid #000000;
color: #ffffff;
background-color: #AC9E33;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
text-shadow: 0 1px 1px #000000;
font: bold 11px Sans-Serif;
text-transform:none;
padding: 7px 12px;
margin:0;
background-image: -webkit-linear-gradient(transparent, rgba(0, 0, 0, 0.2));
background-image: -moz-linear-gradient(transparent, rgba(0, 0, 0, 0.2));
background-image: -o-linear-gradient(transparent, rgba(0, 0, 0, 0.2));
background-image: -ms-linear-gradient(transparent, rgba(0, 0, 0, 0.2));
background-image: linear-gradient(transparent, rgba(0, 0, 0, 0.2));
-webkit-transition: background-color 0.3s;
-moz-transition: background-color 0.3s;
-o-transition: background-color 0.3s;
-ms-transition: background-color 0.3s;
transition: background-color 0.3s;
}
.close-btn:hover {
font-family:Tahoma, Geneva, sans-serif;
border: 1px solid #000000;
color: #ffffff;
background-color: #515280;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
text-shadow: 0 1px 1px #000000;
font: bold 11px Sans-Serif;
text-transform:none;
padding: 7px 12px;
margin:0;
background-image: -webkit-linear-gradient(transparent, rgba(0, 0, 0, 0.2));
background-image: -moz-linear-gradient(transparent, rgba(0, 0, 0, 0.2));
background-image: -o-linear-gradient(transparent, rgba(0, 0, 0, 0.2));
background-image: -ms-linear-gradient(transparent, rgba(0, 0, 0, 0.2));
background-image: linear-gradient(transparent, rgba(0, 0, 0, 0.2));
-webkit-transition: background-color 0.3s;
-moz-transition: background-color 0.3s;
-o-transition: background-color 0.3s;
-ms-transition: background-color 0.3s;
transition: background-color 0.3s;
}
So the jQuery function checks the value of the shipping input field and if it is equal to var money = 19.95 then the ac-wrapper and nested popup is shown. The client can then close this window, using the `close-btn' or by clicking outside of the element.
Can somebody explain how to do this please.

Your first problem is
if ($("input[name='shipping']").val(money); ) {
should be
if ($("input[id='shipping']").val() == money ) {
OR
if ($("input[id='shipping'][type='hidden']").val() == money ) {

From the looks of things you're trying to determine whether or not to show a pop-up based on the value of a drop-down (says in your code). For that you'd need a dropdown.
<select id="shipping_dropdown" name="shipping_dropdown" required>
<option value="">Select shipping method</option>
<option value="25.00">Not this one</option>
<option value="19.95">This one</option>
</select>
Next you say that you want to read the value from a hidden <input> field. Why? This seems unnecessary. You could do the following to read a users' selection.
<script type="text/javascript">
$(document).ready(function({
$("#shipping_dropdown").change(function(){
//Handler for when the value of this ID (shippping_dropdown) changes
if( $(this).val() == "19.95" ){
//Replace alert() with your pop-up
alert("You have selected World Free Tax Zone - £19.95 for shipping.");
}
});
});
</script>
See about the .change() function here.

Your code
if ($("input[name='shipping']").val(money); ) {
//code
$('.ac-wrapper').show().css({'height' : docHeight});
$('.popup').css({'top': scrollTop+20+'px'});
});
two syntax error
first line: if ($("input[id='shipping']").val()==money ) {
last line: }