I've been playing around with the code below and using it to create a progress bar that responds to a certain type of data input. The data I'm using comes in the form of an array but I've noticed that the code only creates one progress bar.
How could I embed this within my for loop so that it creates a separate progress bar for each item in the array?
function move() {
var elem = document.getElementById("myBar");
var width = 0;
var id = setInterval(frame, 2000);
function frame() {
if (width >= 100) {
clearInterval(id);
} else {
width=width + 10;
elem.style.width = width + '%';
elem.innerHTML = ((100 - width)/10) + ' mins';
}
}
}
move();
#myProgress {
width: 80%;
background-color: #ddd;
horizontal-align: center;
}
#myBar {
width: 0%;
height: 30px;
background-color: #4CAF50;
text-align: center;
line-height: 30px;
color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</head>
<body>
<div id="myProgress">
<div id="myBar"></div>
</div>
</body>
Here is the link to what I'm working on: My Workspace
Side Note: I've been trying to get the progress bar to be centered on the page with a margin: 200px on either side. The margin attribute in my CSS doesn't seem to be doing this and only applying the margin to the left but not to the right - where am I going wrong with this?
Try this
<html>
<style>
#myProgress {
width: 100%;
background-color: #ddd;
}
.myBar {
width: 10%;
height: 30px;
background-color: #4CAF50;
text-align: center;
line-height: 30px;
color: white;
}
</style>
<body>
<div id="myProgress">
</div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script>
$(document).ready(function(){
var progressbars="";
var i;
for (i = 1; i <=10; i++) {
progressbars+="<div class='myBar' style='width:"+i+"%'"
+ " id='myBar"+i+"px'"
+">"+i+"%"+"</div><br/>";
}
$("#myProgress").html(progressbars);
});
</script>
</html>
Using Javascript Only
Just replace previous script with this
<script>
window.onload=function(){
var progressbars="";
var i;
for (i = 1; i <=10; i++) {
progressbars+="<div class='myBar' style='width:"+i+"%'"
+ " id='myBar"+i+"px'"
+">"+i+"%"+"</div><br/>";
}
document.getElementById("myProgress").innerHTML=progressbars;
}
This will generate
I see that you have included bootstrap 4
In that case you can create progress bars with Bootstrap
var progressbars="";
for (var i = 1; i <=10; i++) {
progressbars+='<div class="progress">'
+'<div class="progress-bar" role="progressbar" style="width: '+i+'%" aria-valuenow="'+i+'" aria-valuemin="0" aria-valuemax="100">'+i+'%</div>'
+'</div>';
}
document.querySelector(".feefo").innerHTML=progressbars;
And it looks a lot nicer :)
Related
I'm trying to make my div element move back and forth inside a container infinitely.
The goal is to use Java Script only, no CSS animations, jQuery, etc.
const container = document.getElementById('container');
const box = document.getElementById('box');
let t = setInterval(move, 1);
let pos = 1;
function move() {
box.style.left = pos + 'px';
box.style.top = pos + 'px';
pos++;
if (pos === 150) {
clearInterval(t)
}
}
#container{
width: 200px;
height: 200px;
background-color: green;
position: relative;
}
#box{
width: 50px;
height: 50px;
background-color: red;
position: absolute;
animation-direction: alternate;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Animation</title>
<link href="animation.css" rel="stylesheet">
<script defer src="animation.js"></script>
</head>
<body>
<div id="container">
<div id="box"></div>
</div>
</body>
</html>
So here the code. As you see, I've used position relative/absolute to make the element move with setInterval function. But when I try to reverse it back to "it's corner", it just won't work. To be honest, I've tried some stuff already, but I really can't find the solution of doing it without using any other instruments.
Thanks in advance.
You need to increase/decrease the values considering a boolean variable like below:
const container = document.getElementById('container');
const box = document.getElementById('box');
let t = setInterval(move, 1);
let pos = 1;
let test = true;
function move() {
box.style.left = pos + 'px';
box.style.top = pos + 'px';
if (test)
pos++; /* move down */
else
pos--; /* move up */
/* update the direction when you reach the top or bottom limit*/
if (pos >= 150)
test = false
else if (pos <= 0)
test = true;
}
#container {
width: 200px;
height: 200px;
background-color: green;
position: relative;
}
#box {
width: 50px;
height: 50px;
background-color: red;
position: absolute;
}
<div id="container">
<div id="box"></div>
</div>
An alternative to get the same results
const box = document.getElementById('box');
let jump = 1;
let pos = 0;
window.setInterval(() => {
pos = pos + jump;
if (pos > 150 || pos < 0) {
jump = jump * (-1);
}
box.style.left = pos + 'px';
box.style.top = pos + 'px';
}, 1);
#container{
width: 200px;
height: 200px;
background-color: green;
position: relative;
}
#box{
width: 50px;
height: 50px;
background-color: red;
position: absolute;
animation-direction: alternate;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Animation</title>
<link href="animation.css" rel="stylesheet">
<script defer src="animation.js"></script>
</head>
<body>
<div id="container">
<div id="box"></div>
</div>
</body>
</html>
I've a few dynamic elements being generated on click of a button.
On click of this button, I get dynamic divs generated which also contain link.
I get only the first href attribute value("link0.com") in the array "linkArr".
How do I get all of the href attributes stored inside this array?
Here's my code.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css">
<style>
.parent {
height: 25%;
width: 90%;
padding: 1%;
margin-left: 1%;
margin-top: 1%;
border: 1px solid black;
}
.parent:nth-child(odd){
background: skyblue;
}
.parent:nth-child(even){
background: green;
}
</style>
</head>
<body>
<button class="btn btn-primary" onclick="getData()">Get data</button>
<div class="box">
</div>
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
var content = "";
linkArr = new Array();
function getData(){
var count = 0;
for(count=0; count<5; count++) {
content+= '<div class="container-fluid parent"><div class="row"><div class="col-md-6">Number: '+count+'</div><div class="col-md-6">Link'+count+'</div></div></div>';
}
$('.box').html(content);
$('.box').each(function(){
linkArr.push($(this).find('.mylink').attr('href'));
console.log(linkArr);
});
}
</script>
</body>
</html>
Since each of the link elements has it's own class, why not to just get all .myLink elements with a selector and push href attribute of each of them to the linkArr array?
var content = "",
linkArr = [];
function getData() {
var count = 0;
for (count = 0; count < 5; count++) {
content += '<div class="container-fluid parent"><div class="row"><div class="col-md-6">Number: ' + count + '</div><div class="col-md-6">Link' + count + '</div></div></div>';
}
$('.box').html(content);
$('.mylink').each(function() {
linkArr.push($(this).attr('href'));
});
console.log(linkArr);
}
.parent {
height: 25%;
width: 90%;
padding: 1%;
margin-left: 1%;
margin-top: 1%;
border: 1px solid black;
}
.parent:nth-child(odd) {
background: skyblue;
}
.parent:nth-child(even) {
background: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="btn btn-primary" onclick="getData()">Get data</button>
<div class="box"></div>
There is only one .box element, so $('.box').each is only going to run one time. Change your selector to iterate over the child elements and it should work:
$('.box .container-fluid parent').each(function(){
linkArr.push($(this).find('.mylink').attr('href'));
console.log(linkArr);
});
I have done this code with javascript to try out my first javascript animation, but when I open the page, it's showing me a blank page...
can anyone please tell me whats wrong with the code and why it's not showing anything?
thanks in advance...
<html>
<head>
<title>Trying js Animation</title>
</head>
<body>
<style>
#container{
width: 500px;
height: 500px;
color: green;
position: relative;
}
#box{
width: 50px;
height: 50px;
color: red;
position: absolute;
}
</style>
<div id="container">
<div id="box">
</div>
</div>
<script type="text/javascript">
var t = setInterval(move, 1);
var pos = 0;
var box = document.getElementById('box');
function move(){
pos += 1;
box.style.left = pos + "px";
}
</script>
</body>
</html>
The box is white. Change "color" to "background-color".
HTML:
<div id="container">
<div id="bar">
</div>
</div>
CSS:
#container {
width: 20px;
height: 150px;
position: relative;
}
#bar {
width: 100%;
height: 100%;
background-color: red;
position: absolute;
bottom: 0px;
}
JS:
function Bar(element) {
this.barEl = element;
this.progress = 100;
}
Bar.prototype.setProgress = function (p) {
if(p >= 0) {
this.progress = p;
this.barEl.style.height = this.progress + "%";
}
}
var barObj = new Bar(document.getElementById('bar'));
setInterval(function () {
barObj.setProgress(barObj.progress - 10);
}, 1000);
This code from jsfiddle http://jsfiddle.net/Mp7R3/ is not working when I copy paste the code but it is working fine on jsfiddle .maybe I have some onLoad problem but I dont know how to solve it . I tried $(document).ready(function() but it didnt help .
Be sure you don't forget the script for calling jQuery in the <head> of your code:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
You can also try to place the code at the bottom of your code so it's can run only if the full page is loaded.
I also write below the simplest page to make this code work (normally you should separate HTML, CSS and JS), so you can compare it with your own:
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<title>- That's Work!!! -</title>
<style>
#container {
width: 20px;
height: 150px;
position: relative;
}
#bar {
width: 100%;
height: 100%;
background-color: red;
position: absolute;
bottom: 0px;
}
</style>
</head>
<body>
<div id="container">
<div id="bar">
</div>
</div>
</body>
<script type="text/javascript">
function Bar(element) {
this.barEl = element;
this.progress = 100;
}
Bar.prototype.setProgress = function (p) {
if(p >= 0) {
this.progress = p;
this.barEl.style.height = this.progress + "%";
}
}
var barObj = new Bar(document.getElementById('bar'));
setInterval(function () {
barObj.setProgress(barObj.progress - 10);
}, 1000);
</script>
</html>
I hope it will help you!
i have a progress bar at the top of my page, i want the bar to show the progress of the loading of the web page. when the entire page is loaded for i want the bar to display 100%. i'm quite certain I need to list a variable of '$(window).load();' but i'm not sure where.
my code:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
<style>
progress {
width: 100%;
height: 5px;
top: 0;
left: 0;
position: absolute;
color: #1990c8;
appearance: none;
-webkit-appearance: none;
-o-appearance: none;
}
progress::-moz-progress-bar {
background: #1990c8;
}
progress::-webkit-progress-value {
background: #1990c8;
}
progress::-webkit-progress-bar {
background: #e1e1e1;
}
</style>
</head>
<body>
<progress id="progressbar" value="0" max="100"></progress>
<span id="status"></span>
<script type="text/javascript" language="javascript">
function progressbaranimation(a) {
var bar = document.getElementById('progressbar');
bar.value = a;
a++;
var sim = setTimeout("progressbaranimation("+a+")");
}
var amount = 0;
progressbaranimation(amount);
</script>
<img src="http://media.npr.org/images/picture-show-flickr-promo.jpg">
<img src="http://dd508hmafkqws.cloudfront.net/sites/default/files/mediaimages/gallery/2012/Dec/AA-502716%20(1).jpg">
</body>
</html>
You can do this with basic javascript.
Check this http://yensdesign.com/2008/11/how-to-create-a-stylish-loading-bar-as-gmail-in-javascript/