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') {
Related
I'm writing a simple Cat Clicker app with HTML and JS, but this code keeps spitting 'Cannot read property 'getElementById' of null' error.
What's wrong with it??
<!DOCTYPE html>
<html>
<head>
<title>Cat Clicker</title>
<script>
'use strict'
var cat = document.getElementById("cat");
var counter = document.getElementById("counter");
var meter = 0;
function incClick() {
meter++;
counter.innerHTML = meter;
};
cat.addEventListener('click', incClick);
</script>
</head>
<body>
<p id="counter" >0</p>
<img id="cat" src="img/cat1.jpg" alt="cat">
</body>
</html>
I've corrected a few issues below. You need to use document rather than document.body. You need to ensure the dom has completed loading so I added a content loaded event listener.
<!DOCTYPE html>
<html>
<head>
<title>Cat Clicker</title>
<script>
'use strict'
document.addEventListener("DOMContentLoaded", function() {
var cat = document.getElementById("cat");
var counter = document.getElementById("counter");
var meter = 0;
function incClick() {
meter++;
counter.innerHTML = meter;
};
cat.addEventListener('click', incClick);
});
</script>
</head>
<body>
<p id="counter" >0</p>
<h1 id="cat" src="img/cat1.jpg" alt="cat"></h1>
</body>
</html>
You need to include <script> Tags after the body of the HTML DOC or at least at the very end of your HTML content.
This is b/c how the DOM operates. It loads everything in a sequential order, thus your script it attempting to target an element which doesn't yet exist in the DOM
Just put your script tag after the body tag because I think the problem is that the DOM is rendering after the script runs.
And you can also use document.getElementById instead of document.body.getElementById
just use onclick="incClick()" in your h1 tag , or u can define it as image
<!DOCTYPE html>
<html>
<head>
<title>Cat Clicker</title>
</head>
<body>
<p id="counter">0</p>
<h1 id="cat" src="img/cat1.jpg" alt="cat"></h1>
<p class="counter">0</p>
<img class="cat" src="img/cat2.jpg" alt="cat">
<!--
You need to put the script tag at the end of the body
Because the document must first be created
-->
<script>
'use strict'
var cat = document.getElementById("cat");
var counter = document.getElementById("counter");
var meter = 0;
function incClick() {
meter++;
counter.innerHTML = meter;
};
cat.addEventListener('click', incClick);
</script>
</body>
</html>
This worked for me. You are mistakenly calling getElementById from document.body where it doesn't exist. It is document.getElementById:
<!DOCTYPE html>
<html>
<head>
<title>Cat Clicker</title>
<script>
'use strict'
var cat = document.getElementById("cat");
var counter = document.getElementById("counter");
var meter = 0;
function incClick() {
meter++;
counter.innerHTML = meter;
};
cat.addEventListener('click', incClick);
</script>
</head>
<body>
<p id="counter">0</p>
<h1 id="cat" src="img/cat1.jpg" alt="cat"></h1>
<!-- <p class="counter">0</p>
<img class="cat" src="img/cat2.jpg" alt="cat"> -->
</body>
</html>
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.
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
I've been trying to figure how to create an idea I had the other day for awhile now and can't seem to get it to work due to being a bit of noob still.
Anyway, to the point, I am trying to create as the title says, a paragraph where the user can simply click on the text / paragraph and have the font size increase each time.
I was able to get a working form where I could put in a multiple choice box and have the users change size with that, but that simply isn't what I want to do..
I was thinking it would look something like this:
<script type="text/javascript" language="javascript">
do
{
if (user-clicks) increase font size;
else keep current font size;
}
while (font-size < 4em)
</script>
Can anyone more experienced please help me getting this to work or at least put me on a path where I can more successfully figure it out myself? Thanks in advance for any help!
<html>
<head>
<script language="javascript">
function resizeText(multiplier) {
multiplyText(multiplier, document.getElementById('myContent'));
}
function multiplyText(multiplier, txtobj) {
//keep current font size
if (txtobj.style.fontSize == '') {
txtobj.style.fontSize = "100%";
}
//keep current font size
if (multiplier == 0) {
txtobj.style.fontSize = "100%";
}
else { //get only the number part of the fontsize
txtobj.style.fontSize = parseFloat(txtobj.style.fontSize) + multiplier + "%";
}
}
</script>
</head>
<body>
<p id="myContent">
Increase font</p>
</body>
</html>
Working Code with JQuery:
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(e) {
var gFont=1;
$('.fontAuto').click(function(e) {
if(gFont<4){
gFont=gFont+0.5;
$('.fontAuto').css('font-size',gFont+'em');
}else{
gFont =1;
$('.fontAuto').css('font-size','1em');
}
});
});
</script>
<style type='text/css'>
.fontAuto{
font-size:1em;
}
</style>
</head>
<body>
<p class="fontAuto">Text For testing</p>
</body>
</html>
Giving you a very short & simple answer-
<p id=p1 style="font-size:25">
click here to enlarge.
</p>
In case you want to do it on click at any part of the <p>...</p> tag use-
<p id=p1 style="font-size:25" onclick="this.style.fontSize=50">
click to enlarge.
</p>
Customize it as you wish.
I am programming a very simple JavaScript slideshow and it isn't working. I do not want jQuery. This code displays the first image after 5 seconds, however does not cycle through the rest of the images. The full code is as follows, I just can't figure out what I am doing wrong:
<!DOCTYPE html>
<html dir="ltr" lang="en">
<head>
<title>JavaScript Slideshow</title>
<style>
#slider > img { display: none }
</style>
</head>
<body>
<div id="slider">
<img src="img1.png">
<img src="img2.png">
<img src="img3.png">
<img src="img4.png">
<img src="img5.png">
</div>
<script>
var s = document.getElementById("slider").getElementsByTagName("img");
var c = s.length;
setInterval(function() {
s[(s.length++) % c].style.display="block";
}, 5000);
</script>
</body>
</html>
Your code has several errors in it.
You're trying to increment the array length, and modulo it by the counter. I bet you wanted to do that the other way around:
s[c % (s.length)].style.display="";
You're not hiding the images already cycled through, so your cycle will only display once.
var s = document.getElementById("slider").getElementsByTagName("img");
var c = s.length;
setInterval(function() {
s[c % s.length].style.display="";
s[(++c) % s.length].style.display="block";
}, 5000);