This code didn't work with me just one work and when i remove script tag from html to external file didn't work i need need help to all record work and move it to external file.....................................
window.onload = function() {
var elem = document.getElementById("myBar");
var valuee = document.getElementById("bar").value;
var width = 0;
var id = setInterval(frame, 10);
function frame() {
if (width >= 100) {
clearInterval(id);
} else {
width++;
elem.style.width = width + '%';
elem.innerHTML = width * 1 + '%';
}
}
}
#myProgress {
width: 100%;
background-color: #ddd;
}
#myBar {
width: 10%;
height: 30px;
background-color: #4CAF50;
text-align: center;
line-height: 30px;
color: white;
}
<h1>JavaScript Progress Bar</h1>
<div id="myProgress">
<div id="myBar">0%</div>
<input type="hidden" id="bar" name="bar" value="60" />
</div>
<div id="myProgress">
<div id="myBar">0%</div>
<input type="hidden" id="bar" name="bar" value="60" />
</div>
<br>
<button onclick="move()">Click Me</button>
window.onload = function() {
var elem = document.getElementById("myBar");
var valuee = document.getElementById("bar").value;
var width = 0;
var id = setInterval(frame, 10);
function frame() {
if (width >= 100) {
clearInterval(id);
} else {
width++;
elem.style.width = width + '%';
elem.innerHTML = width * 1 + '%';
}
}
var elem_1 = document.getElementById("myBar_1");
var valuee_1 = document.getElementById("bar_1").value;
var width_1 = 0;
var id_1 = setInterval(frame_1, 10);
function frame_1() {
if (width_1 >= 100) {
clearInterval(id_1);
} else {
width_1++;
elem_1.style.width = width_1 + '%';
elem_1.innerHTML = width_1 * 1 + '%';
}
}
}
#myProgress,
#myProgress_1 {
width: 100%;
background-color: #ddd;
}
#myBar,
#myBar_1 {
width: 10%;
height: 30px;
background-color: #4CAF50;
text-align: center;
line-height: 30px;
color: white;
}
<h1>JavaScript Progress Bar</h1>
<div id="myProgress">
<div id="myBar">0%</div>
<input type="hidden" id="bar" name="bar" value="60" />
</div>
<div id="myProgress_1">
<div id="myBar_1">0%</div>
<input type="hidden" id="bar_1" name="bar" value="60" />
</div>
<br>
<button>Click Me</button>
Related
I have the following code:
var i = 0;
var My_Button = document.getElementById("btn1")
var Numerica = parseInt(My_Button.value)
function update() {
var element = document.getElementById("myprogressBar");
var width = 1;
var identity = setInterval(scene, 10);
function scene() {
if (width >= Numerica) {
clearInterval(identity);
} else {
width++;
element.style.width = width + '%';
}
}
}
#Progress_Status {
width: 50%;
background-color: #ddd;
}
#myprogressBar {
width: 2%;
height: 20px;
background-color: red;
}
<h3>Example of Progress Bar Using JavaScript</h3>
<input style="height:50px; width:50px; font-size:30px" type = text id = "btn1" name = "btn10" > <span id ="option1" style="font-size:30px">Option1</span>
<p>Pogress Bar</p>
<div id="Progress_Status">
<div id="myprogressBar"></div>
</div>
<br>
<button onclick="update()">Start Download</button>
I want to decide a number inside the Input box and make to that the bar progress until that decided number.
Why is the previously showed code the bar never stop?
I am transforming right the value into an integer
First, if you want to take value from an input element, you need to take .value of your getElementById().
Second, you tried taking the value before you actually inserted any value, basically on page load.
Conclusion:
I've moved those lines of code inside your update() function, and added .value on your My_Button variable. That's all that's changed.
var My_Button = document.getElementById("btn1").value;
var Numerica = Number(My_Button)
var i = 0;
function update() {
var element = document.getElementById("myprogressBar");
var width = 1;
var identity = setInterval(scene, 10);
var My_Button = document.getElementById("btn1").value;
var Numerica = Number(My_Button)
console.log(Numerica);
function scene() {
if (width >= Numerica) {
clearInterval(identity);
} else {
width++;
element.style.width = width + '%';
}
}
}
<!DOCTYPE html>
<html>
<style>
#Progress_Status {
width: 50%;
background-color: #ddd;
}
#myprogressBar {
width: 2%;
height: 20px;
background-color: red;
}
</style>
<body>
<h3>Example of Progress Bar Using JavaScript</h3>
<input style="height:50px; width:50px; font-size:30px" type = text id = "btn1" name = "btn10" > <span id ="option1" style="font-size:30px">Option1</span>
<p>Pogress Bar</p>
<div id="Progress_Status">
<div id="myprogressBar"></div>
</div>
<br>
<button onclick="update()">Start Download</button>
<script src ="index.js"></script>
</body>
</html>
You don't need to use interval in your case. You can achieve it with transition in CSS.
Side note if you want to get a value from an input field, you need to call .value. In your case, it is document.getElementById("btn1").value.
var i = 0;
var My_Button = document.getElementById("btn1");
function update() {
var element = document.getElementById("myprogressBar");
var width = My_Button.value || 1; //need to get value every time
element.style.width = width + '%';
}
#Progress_Status {
width: 50%;
background-color: #ddd;
}
#myprogressBar {
width: 1%;
height: 20px;
background-color: red;
transition: width .2s;
}
<!DOCTYPE html>
<html>
<body>
<h3>Example of Progress Bar Using JavaScript</h3>
<input style="height:50px; width:50px; font-size:30px" type = text id="btn1" name = "btn10" > <span id ="option1" style="font-size:30px">Option1</span>
<p>Pogress Bar</p>
<div id="Progress_Status">
<div id="myprogressBar"></div>
</div>
<br>
<button onclick="update()">Start Download</button>
</body>
</html>
If you still want to use interval, you need to call clearInterval every time when you trigger update() like below
var i = 0;
var My_Button = document.getElementById("btn1")
var identity; //move the declaration here
function update() {
var Numerica = parseInt(My_Button.value) //need to get value every time
var element = document.getElementById("myprogressBar");
var width = 1;
//var identity = setInterval(scene, 10); //remove this
if(identity) {
clearInterval(identity) //clear the interval if you click Start Download again
}
identity = setInterval(scene, 10);
function scene() {
if (width >= Numerica) {
clearInterval(identity);
} else {
width++;
element.style.width = width + '%';
}
}
}
#Progress_Status {
width: 50%;
background-color: #ddd;
}
#myprogressBar {
width: 1%;
height: 20px;
background-color: red;
}
<!DOCTYPE html>
<html>
<body>
<h3>Example of Progress Bar Using JavaScript</h3>
<input style="height:50px; width:50px; font-size:30px" type = text id="btn1" name = "btn10" > <span id ="option1" style="font-size:30px">Option1</span>
<p>Pogress Bar</p>
<div id="Progress_Status">
<div id="myprogressBar"></div>
</div>
<br>
<button onclick="update()">Start Download</button>
</body>
</html>
I had a hard time coding, so I asked a question here.
If you press the button on the upper left, you can make the color boxes invisible. At the same time, I wrote down the code the the button can make the color boxes could be placed in a random location.
I would like to make sure that the color boxes do not go out of the screen. Even if the width and height were set to 100% on the body, the color box was placed off the screen.
And I want to correct the color boxes so that they can be moved by draggable function, but they don't work together. I would also like to ask for help with this.
and I am not a coding expert man so, I need a comment with coding example.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
body {margin:0; padding:0;}
button {position: absolute; width: 30px; height: 30px; background: #edd6bc;}
.random {position: absolute; width: 30px; height: 30px;}
</style>
<script>
</script>
</head>
<body >
<button onclick="showhide()" value="Zeige Features" id="button"></button>
<div style="display: none; background: #6d97b4;" class="random" ></div>
<div style="display: none; background: #c9656f;" class="random" ></div>
<div style="display: none; background: #f1eb40;" class="random" ></div>
<div style="display: none; background: #00825c;" class="random" ></div>
<div style="display: none; background: #009ce0;" class="random" ></div>
<div style="display: none; background: #cee4a6;" class="random" ></div>
<script type="text/javascript">
const btn = document.querySelector("button");
const height = document.documentElement.clientHeight;
const width = document.documentElement.clientWidth;
const boxes = document.querySelectorAll(".random");
btn.addEventListener("click", () => {
Array.from(boxes).forEach(box => {
box.style.top = Math.floor((Math.random() * height) + 1) + "px";
box.style.right = Math.floor((Math.random() * width) + 1) + "px";
})
});
function showhide() {
var x = document.querySelectorAll(".random");
var i;
for (i = 0; i < x.length; i++) {
if (x[i].style.display === "block") {
x[i].style.display = "none";
} else {
x[i].style.display =
"block";
}
}
}
</script>
</body>
</html>
If you want an explanation tell me.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
body {margin:0; padding:0;}
button {position: absolute; width: 30px; height: 30px; background: #edd6bc;}
.random {position: absolute; width: 30px; height: 30px;}
</style>
<script>
</script>
</head>
<body >
<button onclick="showhide()" value="Zeige Features" id="button"></button>
<div style="display: none; background: #6d97b4;" class="random"></div>
<div style="display: none; background: #c9656f;" class="random"></div>
<div style="display: none; background: #f1eb40;" class="random"></div>
<div style="display: none; background: #00825c;" class="random"></div>
<div style="display: none; background: #009ce0;" class="random"></div>
<div style="display: none; background: #cee4a6;" class="random"></div>
<script type="text/javascript">
const btn = document.querySelector("button");
const height = document.documentElement.clientHeight - 30;
const width = document.documentElement.clientWidth - 30;
const boxes = document.querySelectorAll(".random");
btn.addEventListener("click", () => {
Array.from(boxes).forEach(box => {
box.style.top = Math.floor(Math.random() * height) + "px";
box.style.left = Math.floor(Math.random() * width) + "px";
})
});
function showhide() {
var x = document.querySelectorAll(".random");
var i;
for (i = 0; i < x.length; i++) {
if (x[i].style.display === "block") {
x[i].style.display = "none";
} else {
x[i].style.display =
"block";
}
}
}
function mouseDown(downEvent) {
var box = downEvent.srcElement;
var offX = box.getBoundingClientRect().left - downEvent.x;
var offY = box.getBoundingClientRect().top - downEvent.y;
document.onmousemove = e => {
box.style.top = Math.min(Math.max(e.y + offY, 0), height) + "px";
box.style.left = Math.min(Math.max(e.x + offX, 0), width) + "px";
}
document.onmouseup = e => {
document.onmousemove = document.onmouseup = null;
}
return false;
}
Array.from(boxes).forEach(box => {
box.onmousedown = mouseDown;
})
</script>
</body>
</html>
While generating the top * right subtract the height and width of the div
const btn = document.querySelector("button");
const height = document.documentElement.clientHeight;
const width = document.documentElement.clientWidth;
const boxes = document.querySelectorAll(".random");
btn.addEventListener("click", () => {
Array.from(boxes).forEach(box => {
const top = Math.floor(Math.random() * (height - 30) + 1) + "px";
const right = Math.floor(Math.random() * (width - 30) + 1) + "px";
box.style.top = top;
box.style.right = right;
})
});
function showhide() {
var x = document.querySelectorAll(".random");
var i;
for (i = 0; i < x.length; i++) {
if (x[i].style.display === "block") {
x[i].style.display = "none";
} else {
x[i].style.display =
"block";
}
}
}
body {
margin: 0;
padding: 0;
}
button {
position: relative;
width: 30px;
height: 30px;
background: #edd6bc;
}
.random {
position: absolute;
width: 30px;
height: 30px;
}
<button onclick="showhide()" value="Zeige Features" id="button"></button>
<div style="display: none; background: #6d97b4;" class="random"></div>
<div style="display: none; background: #c9656f;" class="random"></div>
<div style="display: none; background: #f1eb40;" class="random"></div>
<div style="display: none; background: #00825c;" class="random"></div>
<div style="display: none; background: #009ce0;" class="random"></div>
<div style="display: none; background: #cee4a6;" class="random"></div>
I'm using the scroll function, but the code in my else if blocks do not appear to be executing.
I'm trying to hide one div and show another, once the user scrolls past a certain point.
Here's my code - what am I doing wrong?
var scrolTop = $('.content').offset().top;
var showOneHeight = $('.showOne').height();
var showTwoHeight2 = $('.showTwo').height();
var showThreeHeight3 = $('.showThree').height();
var showFourHeight4 = $('.showFour').height();
var offSetValue = scrolTop + (showOneHeight - 50);
var offSetValue2 = scrolTop + (showTwoHeight2 - 50);
var offSetValue3 = scrolTop + (showThreeHeight3 - 50);
var offSetValue4 = scrolTop + (showFourHeight4 - 50);
// alert(offSetValue3)
$(window).scroll(function() {
var height = $(window).scrollTop();
if (height > offSetValue) {
$('.showOne').fadeOut();
$('.showTwo').fadeIn('slow');
} else if (height > offSetValue2) {
$('.showOne').fadeOut();
$('.showTwo').fadeOut();
$('.showThree').fadeIn('slow');
} else if (height > offSetValue3) {
$('.showOne').fadeOut();
$('.showTwo').fadeOut();
$('.showThree').fadeOut();
$('.showFour').fadeIn();
}
});
body {
margin: 0px;
}
.contentArea {
display: flex;
height: 100vh;
}
.boxes {
width: 50%;
}
.pinned {
background: rgb(72, 91, 35);
}
h1 {
position: relative;
top: 50%;
transform: translateY(-50%);
margin: 0;
padding: 20px;
text-transform: capitalize;
font-family: system-ui;
color: #fff;
}
.content {
position: relative;
}
.box {
position: absolute;
left: 0px;
top: 50%;
transform: translateY(-50%);
display: none;
}
.showOne {
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<div style="height: 500px; background: violet;"></div>
<div style="height: 500px; background:yellowgreen;"></div>
<div class="contentArea">
<div class="pinned boxes">
<h1>i am pinned side</h1>
</div>
<div class="content boxes">
<div class="box showOne">
<strong>paragraph one</strong>
<p>i am a paragraph. i have more text then a heading mostly too lines i have.</p>
</div>
<div class="box showTwo">
<strong>paragraph two</strong>
<p>i am a paragraph. i have more text then a heading mostly too lines i have.</p>
</div>
<div class="box showThree">
<strong>paragraph three</strong>
<p>i am a paragraph. i have more text then a heading mostly too lines i have.</p>
</div>
<div class="box showFour">
<strong>paragraph three</strong>
<p>i am a paragraph. i have more text then a heading mostly too lines i have.</p>
</div>
</div>
</div>
<div class="test" style="height: 500px; background: rgb(39, 96, 106);"></div>
<div style="height: 500px; background: rgb(46, 35, 46);"></div>
if (height > offSetValue) {
$('.showOne').fadeOut();
$('.showTwo').fadeIn('slow');
} else if (height > offSetValue2) {
$('.showOne').fadeOut();
$('.showTwo').fadeOut();
$('.showThree').fadeIn('slow');
} else if (height > offSetValue3) {
$('.showOne').fadeOut();
$('.showTwo').fadeOut();
$('.showThree').fadeOut();
$('.showFour').fadeIn();
}
The problem is the else if conditions. The else if is not executed because the first condition is ever true when the second and third is true.
You need to specify the range beetween heights are really true:
if ( (height > offSetValue) && (height < offSetValue2)) {
//exec
}
else if ( (height > offSetValue2) && (height < offSetValue3)) {
//exec
}
else if (height > offSetValue3) {
// exec
}
This resolve the problems whit if/else if (Y)
Edit 1:
Try this for confirm:
var scrolTop = $('.content').offset().top;
var showOneHeight = $('.showOne').height();
var showTwoHeight2 = $('.showTwo').height();
var showThreeHeight3 = $('.showThree').height();
var showFourHeight4 = $('.showFour').height();
var offSetValue = scrolTop + 500;
var offSetValue2 = scrolTop + 700;
var offSetValue3 = scrolTop + 900;
var offSetValue4 = scrolTop + 1100;
$(window).scroll(function() {
var height = $(window).scrollTop();
if ( (height > offSetValue) && (height < offSetValue2)) {
console.log(1)
$('.showOne').fadeOut();
$('.showTwo').fadeIn('slow');
$('.showThree').fadeOut();
$('.showFour').fadeOut();
} else if ( (height > offSetValue2) && (height < offSetValue3)) {
console.log(2)
$('.showOne').fadeOut();
$('.showTwo').fadeOut();
$('.showThree').fadeIn('slow');
$('.showFour').fadeOut();
} else if (height > offSetValue3) {
console.log(3)
$('.showOne').fadeOut();
$('.showTwo').fadeOut();
$('.showThree').fadeOut('slow');
}
});
I have button that creates block. When i click on the button, pops up a window with the settings of this block. And there i have settings with position of this block. When i create block and give theme position right, all is ok. But when add another block and give position left, left is givven to first and secont block, but not to second. Why?
function showBlockWindow() {
var modal = $(".modal-block-container");
if (modal.css('display', "none")) {
modal.css('display', "grid");
} else {
modal.css('display', "none");
}
}
function addBlock() {
var widthInp = $("#width").val();
var heightInp = $("#height").val();
var align = $(".form-align-block").val();
var background = "background-color:";
var backgroundColor = "black";
var closeTag = ";";
var width = "width:";
var percent = "%";
var px = "px";
var onclick = 'onclick="editBlock(this)"';
var margin = "margin:";
var height = "height:";
var block = ("<div class='block-" + align + " preview-block' " + onclick + " style=" + background + backgroundColor + closeTag + width +
widthInp + percent + closeTag + height + heightInp + px + "></div>");
$(".preview").append(block);
if (align == "left" || "right") {
$(".preview .preview-block").css("margin-" + align + "", "auto");
} else if (align == "center") {
$(".preview .preview-block").css("margin", "auto");
}
}
function editBlock(elem) {
$('.preview-block').removeClass('preview-block');
$(elem).addClass('preview-block');
$('.preview-edit-block').show();
}
.addBlock {
font-size: 1.2em;
list-style: none;
transition: 0.1s;
padding: 5px;
}
.modal-block-container {
justify-content: center;
right: 0;
left: 0;
position: fixed;
top: 15%;
display: none;
}
.input-block {
padding-bottom: 2%;
padding-top: 1%;
}
#width,
#height {
padding: 4px;
font-family: 'Scada', sans-serif;
}
.edit-block-modal {
padding-bottom: 2%;
}
.preview-edit-block {
background: #272822;
width: 20%;
height: 100vh;
float: right;
color: white;
font-family: 'Scada', sans-serif;
padding: 20px;
display: none;
position: fixed;
z-index: 9;
top: 0;
right: 0;
overflow: scroll;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="add-block">
<li class="addBlock" onclick="showBlockWindow()">Пустой блок</li>
</ul>
<div class="modal-block-container">
<div class="modal-insert-txt">
<div class="header-modal">
<h2>Вставить пустой блок</h2>
</div>
<hr>
<div class="edit-block-modal">
<span>Ширина</span><br>
<div class="input-block">
<input type="text" id="width"> %
</div>
<span>Длина</span><br>
<div class="input-block">
<input type="text" id="height"> px
</div>
<span>Выравнивание блока</span>
<div class="form-group">
<select class="form-align-block">
<option value="left">Слева</option>
<option value="center">По центру</option>
<option value="right">Справа</option>
</select>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn-insert-txt" onclick="addBlock()">Вставить текст</button>
</div>
</div>
</div>
<div class="preview">
</div>
<div class="preview-edit-block">
</div>
Help me please
I'm using the example progress bar shown in W3Schools.com.
How would I make the progress bar stop at a fixed point, let's say, 90%? I see that it has something to do with the width of the bar, but I can't figure out how to change it to a fixed point, or even a variable.
function move() {
var elem = document.getElementById("myBar");
var width = 10;
var id = setInterval(frame, 10);
function frame() {
if (width >= 100) {
clearInterval(id);
} else {
width++;
elem.style.width = width + '%';
document.getElementById("label").innerHTML = width * 1 + '%';
}
}
}
#myProgress {
position: relative;
width: 100%;
height: 30px;
background-color: #ddd;
}
#myBar {
position: absolute;
width: 10%;
height: 100%;
background-color: #4CAF50;
}
#label {
text-align: center;
line-height: 30px;
color: white;
}
<h1>JavaScript Progress Bar</h1>
<div id="myProgress">
<div id="myBar">
<div id="label">10%</div>
</div>
</div>
<br>
<button onclick="move()">Click Me</button>
Change the condition to width >= 90.
Code:
function move() {
var elem = document.getElementById("myBar");
var width = 10;
var id = setInterval(frame, 10);
function frame() {
/* CHANGE THIS TO 90 */
if (width >= 90) {
clearInterval(id);
} else {
width++;
elem.style.width = width + '%';
document.getElementById("label").innerHTML = width * 1 + '%';
}
}
}
Working sample: https://jsfiddle.net/mspinks/vLfhno9x/