I am creating a progrees bar is it working fine in jsfiddle demo but when i use in html file it is not working here is my code
i am writing same code as given in jsfiddle but it is not working
<html>
<head>
<style>
.ui-progressbar.beginning .ui-progressbar-value { background: red; }
.ui-progressbar.middle .ui-progressbar-value { background: yellow; }
.ui-progressbar.end .ui-progressbar-value { background: green; }
</style>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<script>
var $progressbar = $("div").progressbar();
function updateProgressbar(current, target) {
var value = parseInt(current / target * 100);
$progressbar
.progressbar("value", value)
.removeClass("beginning middle end")
.addClass(value < 40 ? "beginning" : value < 80 ? "middle" : "end");
}
var total = 255;
var working = 0;
function update() {
working++;
updateProgressbar(working, total);
if (working < total) setTimeout(update, 10);
}
var $progressbar = $("div").progressbar();
function updateProgressbar(current, target) {
var value = parseInt(current / target * 100);
$progressbar
.progressbar("value", value)
.removeClass("beginning middle end")
.addClass(value < 40 ? "beginning" : value < 80 ? "middle" : "end");
}
var total = 255;
var working = 0;
function update() {
working++;
updateProgressbar(working, total);
if (working < total) setTimeout(update, 10);
}
</script>
</head>
<body onload="update()">
<div>
</div></body></html>
and here is js fiddle link working
http://jsfiddle.net/ZQrnC/305/
Look in the left sidebar of jsfiddle below "External Resources". You are embedding the jQuery UI css and js for your progressbar() there, but your html file jQuery UI is missing.
Add the following after your jquery-1.9.1.js-script-tag:
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
There are three reasons why it does not work:
As robbi5 stated you don't import the jquery ui JS and CSS files
Your var $progressbar is initialized in the header when the page is not already loaded and so no div can be found. In other words $progressbar points on nothing
Your progress bar has an height of zero making it invisble, you should wrap him a container div with a fixed height
Also your code contains duplicate part but it may due to a wrong copy/paste.
Here is an updated working version of your page with the corrected points. I checked rapidly only on chrome and firefox and it works.
<html>
<head>
<style>
.ui-progressbar.beginning .ui-progressbar-value { background: red; }
.ui-progressbar.middle .ui-progressbar-value { background: yellow; }
.ui-progressbar.end .ui-progressbar-value { background: green; }
</style>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.9.1.js" type="text/javascript"></script>
<script src=" http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js" type="text/javascript"></script>
</head>
<script>
var $progressbar;
function updateProgressbar(current, target) {
var value = parseInt(current / target * 100);
$progressbar.progressbar("value", value).removeClass("beginning middle end")
.addClass(value < 40 ? "beginning" : value < 80 ? "middle" : "end");
}
var total = 255;
var working = 0;
function update() {
$progressbar = $("#pbholder").progressbar();
working++;
updateProgressbar(working, total);
if (working < total) setTimeout(update, 10);
}
</script>
</head>
<body onload="update()">
<div id="container" style="height:50px">
<div id="pbholder">
</div>
</div>
</body></html>
Related
I'm new to Javascript and I've been through some tutorials and project to become familiar with the language. There is one Progress-Bar tutorial I found provided by "dcode" at this link: https://www.youtube.com/watch?v=QxQRtwAtqKE That I've been following along with but I seem to get an error on my java script code where the instructor does not.
It seems to be in the style method of the update function in the Javascript section.
I tried rearranging the update function's location (placed it above setValue() at one point), thinking that maybe its not able to be read where it's placed. But that did not seem to work. I followed this tutorial to the letter, so I'm not really sure how I'm getting this wrong. Is there something I'm missing?
Here is the code with a few edits from me:
Javascript code:
// JavaScript source code
//creating a class for the progess bar (HP bar)
class ProgressBar {
contructor(element, initialValue = 0) {
this.valueElem = element.querySelector('.HP-value');
this.fillElem = element.querySelector('.HP-bar-fill');
this.setValue(initialValue);
//console.log(this.valueElem);
//console.log(this.fillElem);
}
setValue(newValue) {
if (newValue < 0) {
newValue = 0;
}
if (newValue > 100) {
newValue = 100;
}
this.value = newValue;
this.update();
}
update() {
const percentage = this.value + '%'; // 50%
this.fillElem.style.width = percentage; //Error displays for me here but not the instructor.
this.valueElem.textContent = percentage;
}
}
const pb1 = new ProgressBar(document.querySelector('.HP'), 80);
//calls the value from user to display the new percentage.
//In this case it should go from 50% to 80%.
body
{
}
.HP {
position: relative;
width: 300px;
height: 40px;
border: 2px solid black;
}
.HP-bar-fill {
height: 100%;
background: #36ed1a;
transition: width 0.5s;
}
.HP-value {
position: absolute; /*float above the nearest parent positioned element*/
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
}
<!DOCTYPE html>
<!--Create your own progress bar in HTML, CSS, and Javascript | Web development tutorial-->
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="css/style.css">
<title>HealthBar</title>
</head>
<body>
<h1>Your HP</h1>
<div class="HP">
<div class="HP-value">50%</div>
<div class="HP-bar-fill"></div>
</div>
<script src="js/script.js"></script>
</body>
</html>
In your JS, you have made a typo for 'constructor'. You have called it 'contructor' because of which it never gets called and your this.fillElem.style.width = percentage; throws undefined because JS has no idea where fillElem came from and that in itself is undefined. So in your JS code fix that constructor typo:
//creating a class for the progess bar (HP bar)
class ProgressBar {
constructor(element, initialValue = 0) {
console.log('constructor called');
this.valueElem = element.querySelector('.HP-value');
this.fillElem = element.querySelector('.HP-bar-fill');
this.setValue(initialValue);
//console.log(this.valueElem);
}
setValue(newValue) {
if (newValue < 0) {
newValue = 0;
}
if (newValue > 100) {
newValue = 100;
}
this.value = newValue;
this.update();
}
update() {
const percentage = this.value + '%'; // 50%
this.fillElem.style.width = percentage; //Error displays for me here but not the instructor.
this.valueElem.textContent = percentage;
}
}
const pb1 = new ProgressBar(document.querySelector('.HP'), 80);
//calls the value from user to display the new percentage.
//In this case it should go from 50% to 80%.
Here's the fiddle:
https://jsfiddle.net/0b7cs35x/
I found some code which will scale some text when the browser window is resized and it seems to work well.
Here is the code:
document.body.setScaledFont = function (f) {
var s = this.offsetWidth,
fs = s * f;
this.style.fontSize = fs + '%';
return this
};
document.body.setScaledFont(0.35);
window.onresize = function () {
document.body.setScaledFont(0.35);
}
My question is:
How can I modify this code so the text scales when a specified div is scaled instead?
Updated code from suggested answer by #Deano. This code scales only when the browser is resized.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#window {
border:1px dashed #ccc;
overflow: hidden;
resize: both;
text-align: center;
}
</style>
</head>
<body>
<div id="window">Scale the window</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('#window').mouseup( function() {
document.getElementById('window').setScaledFont = function (f) {
var s = this.offsetWidth,
fs = s * f;
this.style.fontSize = fs + '%';
return this
};
document.getElementById('window').setScaledFont(0.35);
window.onresize = function () {
document.getElementById('window').setScaledFont(0.35);
}
});
});
</script>
</body>
</html>
document.body targets the entire body, if you want to target a specific element, use Id or class.
document.getElementById('window').setScaledFont = function (f) {
var s = this.offsetWidth,
fs = s * f;
this.style.fontSize = fs + '%';
return this
};
document.getElementById('window').setScaledFont(0.35);
window.onresize = function () {
document.getElementById('window').setScaledFont(0.35);
}
div {
font-size:2em;
}
<div id="window">Scale the window</div>
JSfiddle
Update Since the question requirement has changed :-/
You will need to use a libary like mimetic.js DEMO
I'm currently updating my website. I wanted to have an animated cursor on one of the pages. I found out that modern browsers don't support the .ani format or animated gifs, so I had the idea that I could use the .ani format for older browsers, and for modern browsers have a .png cursor that changes using javascript.
Here's what I tried:
<!DOCTYPE html>
<html>
<head>
<body background="example.gif">
<style type="text/css" id="cursor"> body {cursor: url('assets/shared/cursors/drum.ani'), url('assets/shared/cursors/drum3.png'), default;} </style>
<script type = "text/javascript">
function displayNextImage() {
x = (x === images.length - 1) ? 0 : x + 1;
document.getElementById("cursor") .body images[x];
}
function startTimer() {
setInterval(displayNextImage, 400);
}
var images = [], x = -1;
images[0] = {cursor: url('assets/shared/cursors/drum.ani'), url('assets/shared/cursors/drum1.png'), default;};
images[1] = {cursor: url('assets/shared/cursors/drum.ani'), url('assets/shared/cursors/drum2.png'), default;};
images[2] = {cursor: url('assets/shared/cursors/drum.ani'), url('assets/shared/cursors/drum3.png'), default;};
</script>
<script type = "text/javascript">
function displayNextImage() {
x = (x === images.length - 1) ? 0 : x + 1;
document.getElementById("test") .src = images[x];
}
function startTimer() {
setInterval(displayNextImage, 400);
}
var images = [], x = -1;
images[0] = "assets/shared/cursors/drum1.png";
images[1] = "assets/shared/cursors/drum2.png";
images[2] = "assets/shared/cursors/drum3.png";
</script>
</head>
<body onload="startTimer()">
<img id=test src="assets/shared/cursors/drum3.png">
<div style="height: 1000px; width: 1000px;"></div>
</body>
</html>
I put the 'test' image in to see if the code worked at all, and sure enough the 'test' image does change as planned, but the cursor just stays at 'drum3.png', not changing. I've tried it many different ways, but can't get it to work.
If possible I'd like to avoid JQuery.
Any help is really appreciated. Thank you!
You can use something like this:
var images = [
'http://lorempixel.com/21/21/',
'http://lorempixel.com/22/22/',
'http://lorempixel.com/23/23/'
];
var x = 0;
function displayNextImage() {
x = (x === images.length - 1) ? 0 : x + 1;
document.body.style.cursor = 'url("' + images[x] + '"), default';
}
setInterval(displayNextImage, 400);
html, body {
height: 100%;
}
body {
cursor: url('http://lorempixel.com/20/20/'), default;
}
I couldn't work out how to also have a .ani fallback cursor, so instead I changed my .png files to .cur files, which work in old and new browsers. So, the code ended up looking like this:
<!DOCTYPE html>
<html>
<head>
<script type = "text/javascript">
var images = [
'assets/shared/cursors/drum1.cur',
'assets/shared/cursors/drum2.cur',
'assets/shared/cursors/drum3.cur',
'assets/shared/cursors/drum4.cur'
];
var x = 0;
function displayNextImage() {
x = (x === images.length - 1) ? 0 : x + 1;
document.body.style.cursor = 'url("' + images[x] + '"), default';
}
setInterval(displayNextImage, 250);
</script>
<body>
<div style="height: 1000vh; width: 1000vw;"></div>
</body>
</html>
</head>
</html>
Thank you again Shiva. I couldn't have worked this out without you.
I've asked a related, but different question here: Changing CSS URL for pointer cursor (using Javascript)
I'm looking for a way to fill a div with single characters.
The div should be the width of the viewport. I get the width with:
$(window).width();
JS should build a HTML-code like this:
<div id="text">ccccccccccccccccccccccccccccccccccccccccc</div>
Thanks for your inputs.
Here's a way to do it:
var char = 'i';
$('#text').html($('#text').html() + char)
var initialheight = $('#text').height();
while ($('#text').height() === initialheight) $('#text').html($('#text').html() + char)
$('#text').html($('#text').html().slice(0,-1))
#text {
word-break: break-all;
font-size: 2em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="text"></div>
The way this works is that the script inserts a character int the div and gets the height. Then in repeatedly adds characters until the height changes, which indicates that more than one line has occurred. Then it trims the last character that caused it to overflow onto two lines. It's independent of any font characteristics.
Because a character size can be fixed or not accordig to the font I suggest to use a function to approximate the numbers of characters to print:
function writeMaxNumCharsInOneLine(textObj, charToWrite) {
var innWidth = textObj.innerWidth();
textObj.append('<span id="charSize" style="visibility: visible; white-space: nowrap;">' + charToWrite + '</span>');
var charSize = $('#charSize').width();
var numCharsToWrite = (innWidth / charSize).toFixed(0);
var strToWrite = charToWrite.repeat(numCharsToWrite);
$('#charSize').text(strToWrite);
charSize = $('#charSize').width();
while (charSize < innWidth) {
strToWrite = strToWrite + charToWrite;
$('#charSize').text(strToWrite);
charSize = $('#charSize').width();
}
if (charSize > innWidth) {
strToWrite = strToWrite.slice(0,-1);
}
$('#charSize').remove();
textObj.text(textObj.text() + '\n' + strToWrite);
}
$(function () {
writeMaxNumCharsInOneLine($('#text'), 'Y')
writeMaxNumCharsInOneLine($('#text'), 'a')
writeMaxNumCharsInOneLine($('#text'), 'b')
writeMaxNumCharsInOneLine($('#text'), 'c')
});
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<div id="text" style="border: double;width: 50%;height: 100px;"></div>
Next time you may want to add more information as well as what you have tried, your question doesn't show much troubleshooting on your side; however I think the code below should work or help you figure out something for what you are trying to do.
var w = $(document).width();
var d = $("#text").width();
var s = "";
do{
s+= "X";
$("#text").text(s)
d = $("#text").width();
}
while(d < w)
<div>
<span id="text"></span>
</div>
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function() {
var b=$( "<span padding=0 margin=0></span>").appendTo( $("#text") );
do {
$(b).append("M");
} while ($(b).width() < $(b).parent().width() )
});
});
</script>
</head>
<body>
<div id="text"></div>
<button>Click me</button>
</body>
</html>
You mean this?
$(function() {
var windowWidth = $(window).width();
var oneCharacterWidth = $("#text").width();
var total = windowWidth / oneCharacterWidth;
$("#text").html("");
for (i = 0; i < total; i++) {
$("#text").append("c");
}
})
#text {
display:inline;
font-size:12px;
}
body {
margin:0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="text">c</div>
Fairly rudimentary question. If I have a random number variable which picks a random selection out of an array for example "red" I want to be able to store that as the current color whilst it picks a new colour after 5 seconds and then animate from the current colour "red" to the new colours for example "green" so it fades the background or body of the document slowly from one to the other.
I have some code that I have written so far but I am unsure how I would get this, I know I would have to store the current color if it was found then find the next color but Im not sure how.
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Roger</title>
<link rel="stylesheet" href="Roger.css"/>
<script src="jquery-1.11.0.min.js" type="text/javascript"></script>
<script src="Roger.js" type="text/javascript"></script>
</head>
<body>
<div class="container">
<!-- end .container --></div>
</body>
<script>
var Colours = [];
var randCol;
var curCol;
Colours[0] = "red";
Colours[1] = "green";
Colours[2] = "blue";
Colours[3] = "black";
Colours[4] = "grey";
window.setInterval(function(){
randCol = Math.floor(Math.random() * 5) + 0
alert(randCol);
var nextCol= Colours[randCol];
if(Colours[randCol] == Colours[0]) {
document.body.style.backgroundColor="red";
curCol = "red";
}
else if(Colours[randCol] == Colours[1]) {
document.body.style.backgroundColor="green";
curCol = "green";
}
else if(Colours[randCol] == Colours[2]) {
document.body.style.backgroundColor="blue";
curCol = "green";
}
else if(Colours[randCol] == Colours[3]) {
document.body.style.backgroundColor="black";
curCol = "black";
}
else if(Colours[randCol] == Colours[4]) {
document.body.style.backgroundColor="grey";
curCol = "grey";
}
}, 5000);
</script>
</html>
I'd try something more like this
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>Roger</title>
<link rel="stylesheet" href="Roger.css" />
<script src="jquery-1.11.0.min.js" type="text/javascript"></script>
<script src="Roger.js" type="text/javascript"></script>
</head>
<body>
<div class="container">
<!-- end .container -->
</div>
<script>
var Colours = [
"red",
"green",
"blue",
"black",
"grey"
],
prevCol = null;
window.setInterval(function () {
var randCol = Math.floor(Math.random() * Colours.length)
while (randCol === prevCol) randCol = Math.floor(Math.random() * 5);
prevCol = randCol;
document.body.style.backgroundColor = Colours[randCol];
}, 5000);
</script>
</body>
</html>
FIDDLE
To animate colors with jQuery you'll need a plugin, it that's what you're going to next ?
To do the fading from one color to the other without additional plugins, you could set the start background color to the body, the end background color to the .container and then incrementally change the opacity of the .container from 0 (transparent) to 1 (visible) using setInterval or setTimeout function.