How to pass the jquery values to HTML5 progress bar - javascript

here i am trying to get the html5 progress bar with values passed from jquery.
Here i have one for loop to count till 100, now i want to pass the values from values from 1 to 100 to html5 progress bar. how can i do this?
<!DOCTYPE html>
<html>
<head>
<title>Welcome</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
for ( var i = 0; i < 100; i++ ) {
alert(i);
}
});
</script>
</head>
<body>
<progress value="55" max="100">
</progress>
</body>
</html>
When i run the web page. the progress bar should show progress from 1 to 100.

<!DOCTYPE html>
<html>
<head>
<title>Welcome</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
for ( var i = 0; i < 100; i++ ) {
document.getElementById('MyProgress').value = i;
}
});
</script>
</head>
<body>
<progress id="MyProgress" value="55" max="100">
</progress>
</body>
</html>

use setInterval function for slow progress changing
$(document).ready(function() {
var val = 0;
var interval = window.setInterval(function(){
$("progress").attr("value", val);
val++;
if (val > 100) window.clearInterval(interval);
}, 200);
});
http://www.w3schools.com/jsref/met_win_setinterval.asp
http://www.w3schools.com/jsref/met_win_clearinterval.asp

Related

Can't add 1 by pressing button

I made a simple HTML with JS inside, and its about add 1 to variable and keep running until user gets 1 by rng(random number generator). Here's the code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
function clicked(){
var num = Math.floor((Math.random() * 100) + 1);
var click = 0;
click = click+1;
if(num == 1){
document.getElementById("print").innerHTML="Congratz! You did it in "+click+" times!";
document.getElementById("press").disabled = true;
}
else{
document.getElementById("print").innerHTML="Not the right number! You 've pressed "+click+" times!";
}
}
</script>
</head>
<h1>TEST YOUR LUCK!</h1>
<body>
<input type="button" value="Press Me!" id="press" onclick="clicked()">
<div id="print"></div>
</body>
</html>
At this code, click = click+1 don't work and click is stuck at 1. What should I do?
The reason your click stuck to 1 is whenever function called you are declaring
click = 0, so it is initialized every time you press the button. So just declare var click outside of function clicked() and see the magic.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
var click = 0;
function clicked(){
var num = Math.floor((Math.random() * 100) + 1);
click = click+1;
if(num == 1){
document.getElementById("print").innerHTML="Congratz! You did it in "+click+" times!";
document.getElementById("press").disabled = true;
}
else{
document.getElementById("print").innerHTML="Not the right number! You 've pressed "+click+" times!";
}
}
</script>
</head>
<h1>TEST YOUR LUCK!</h1>
<body>
<input type="button" value="Press Me!" id="press" onclick="clicked()">
<div id="print"></div>
</body>
</html>

On load go to specific place

So i have some troubles getting to the right place when loading the page. I would like to when i open start.php to go to start.php#forside.
Right now i have something that works a little but its not the right way to do it and i would like something more stable.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Ane Lagoni Jewelry</title>
</head>
<body>
<img class="loadBackground" src="img/baggrund.jpg" alt="" />
<span id="counter">0</span>
<script type="text/javascript">
function countdown() {
var i = document.getElementById('counter');
if (parseInt(i.innerHTML) <= 0) {
location.href = 'start.php#forside';
}
i.innerHTML = parseInt(i.innerHTML)-1;
}
setInterval(function(){ countdown(); },75);
</script>
</body>
</html>
Would it be possible with some js?
EDIT:
i solved it with
<?php
header('Location: start.php#forside');
?>
What about this:
var timeLeft = 5;
var interval;
function timer() {
timeLeft--;
document.getElementById('counter').innerHTML = timeLeft;
if (timeLeft == 0) {
location.href = 'start.php#forside';
}
};
interval = setInterval(timer, 1000);
<!DOCTYPE html>
<html lang="en">
<head>
<title>Ane Lagoni Jewelry</title>
</head>
<body>
<img class="loadBackground" src="img/baggrund.jpg" alt="" />
<span id="counter"></span>
</body>
</html>
If you want to go to #forside when the page loads, you could use scrollIntoView() instead of replacing location.href.
if (parseInt(i.innerHTML) <= 0) document.getElementById('forside').scrollIntoView()
Further documentation: MDN

Using javascript to replace the html content

I am trying to replace the content of id='js' with javascript, but this is not working for me. here is the code.
<html>
<head>
<title></title>
<script type="text/javascript">
var ball = 0;
function count_balls(ball){
var count = ball + 1;
return count;
}
document.getElementById('js').innerHTML = count_balls(0);
</script>
</head>
<body>
<p id='js'>Result Here</p>
</body>
</html>
Because the element is not initialized yet, it's not working. You can either move the javascript to the end of the HTML (preferred) as shown below:
<html>
<head>
<title></title>
</head>
<body>
<p id='js'>Result Here</p>
<script type="text/javascript">
var ball = 0;
function count_balls(ball){
var count = ball + 1;
return count;
}
document.getElementById('js').innerHTML = count_balls(0);
</script>
</body>
Or you can use jquery document.ready to achieve the same thing.

How to make a progress bar using HTML and JavaScript

I am trying to make a progress bar just for looks, but it doesn't work. Here is the code:
<!DOCTYPE html>
<html>
<head>
<title>Page 1</title>
<style>
#loader {background-color:#ffffff;position:absolute;top:0px;left:0px;width:100%;height:100%;}
#loadertitle {position:relative;top:20px;left:39%;font-size:120px;}
#loadingdiv {position:relative;top:47%;left:43%;width:180px;height:55px;}
#loadingbar {position:absolute;top:50%;left:0px;width:100%;height:8px;background-color:#794c79;}
#loadingbarprogress {position:relative;top:0px;left:0px;height:100%;width:0%;background-color:#400040;}
#loadingtext {position:relative;top:13%;left:46%;}
</style>
<script>
var progress = document.getElementById('loadingbarprogress');
loadingbar(progress, 500);
function doMove() {
progress.style.width = parseInt(progress.style.width) + 1 +'%';
if (progress.style.width = '100%') {
progress = null;
}
setTimeout(doMove,20);
}
</script>
</head>
<body>
<div id="loader">
<h1 id="loadertitle">Site</h1>
<div id="loadingbar">
<div id="loadingbarprogress">
</div>
</div>
<p id="loadingtext">Loading...</p>
</div>
</body>
</html>
I have a div for the loader, a div for the progress, and some script containing a loop (that might not work), changing the width of the progress div.
Fixed code:
<!DOCTYPE html>
<html>
<head>
<title>Page 1</title>
<style>
#loader {background-color:#ffffff;position:absolute;top:0px;left:0px;width:100%;height:100%;}
#loadertitle {position:relative;top:20px;left:39%;font-size:120px;}
#loadingbar {position:absolute;top:50%;left:0px;width:100%;height:8px;background-color:#794c79;border:none}
#loadingbar::-moz-progress-bar {background-color:#400040;}
#loadingtext {position:relative;top:13%;left:46%;}
</style>
<script>
var bar = document.getElementById('loadingbar');
for (int x = 0; x <= 100; x++) {
bar.value = x;
}
</script>
</head>
<body>
<div id="loader">
<h1 id="loadertitle">Site</h1>
<progress id="loadingbar" value="10" max="100"></progress>
<p id="loadingtext">Loading...</p>
</div>
</body>
</html>
Thanks, Cameron!
HTML5 now has a progress element.
You can get a lot of customisation in some browsers. See the link to css-tricks above, it goes into a fair amount of detail.
<progress max="100" value="80" id="progress_bar"></progress>
Then you can just update the value attribute using javascript, with whatever data source your progress comes from.
If you just want it to increase at a steady rate, use a simple setTimeout:
var progress_element = document.getElementById('progress_bar');
function stepProgress() {
progress_element.value += 1;
if(progress_element.value < 100) {
setTimeout(stepProgress, 100);
}
};
You may need to use parseInt on your progress_element.value, or just have a separate counter variable.
There is a problem in your code. So far I noticed this:
if (progress.style.width = '100%') {//<-- single equals sign, its assignment not condition !
EDIT:
Try this then
if (progress.style.width == '100') {

jQuery Carousel Stop at End

I am making a jQuery carousel that is populated using JSON. I need it to stop at the end. I calculate the width of the list by multiplying the number of list items by the width of the list item, so new items can be added without changing the width in the CSS. Here is my code
slider.js
$(document).ready(function() {
var w = $("#carouselList").css("width");
var slider = $("#carouselList");
var leftProperty, newLeftProperty;
$("#rightButton").click(function(){
leftProperty = parseInt(slider.css("left"));
if (leftProperty - 991 <= -w) {
newLeftProperty = 0;
}
else {
newLeftProperty = leftProperty - 304;
}
slider.animate({left: newLeftProperty}, 500);
});
$("#leftButton").click(function(){
leftProperty = parseInt(slider.css("left"));
if (leftProperty < 0){
newLeftProperty = leftProperty + 304;
}
else {
newLeftProperty = 0;
}
slider.animate({left: newLeftProperty}, 500);
});
});
the HTML
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="slider.js"></script>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div id="carousel">
<h2>Recommended for You</h2>
<div id="leftButton" class="buttonPanel"></div>
<div id="display">
<ul id="carouselList">
</ul>
</div><!--display-->
<div id="rightButton" class="buttonPanel"></div>
<div class="clear"></div>
</div><!--carousel-->
<script>
$.getJSON('jsonData.json', function(data){
var items=[];
$.each(data, function(key, val){
items.push(val);
$("#carouselList").append(items[2]);
var c =$("#carouselList li").size();
$("#carouselList").css("width", c*250);
});
});
</script>
</body>
</html>

Categories