I am trying to do the most simple chronometer, just one number that keeps counting infinite. Please keep in mind I am trying to correct my own code, do refrain from answering with "this post is a duplicate of ...", because I probably won't understand other examples. For some reason my code doesn't work, please help.
<!doctype html>
<html>
<head>
<style>
#screen {
position: relative;
border: 2px solid black;
width: 800px;
height: 600px;
top: 50px;
left: 500px;
}
#chronometer {
position: absolute;
top: 150px;
left: 300px;
font-size: 100px;
width: 300px;
height: 300px;
}
</style>
</head>
<body>
<div id="screen">
<div id="chronometer"></div>
</div>
<script>
var chronometer = setInterval(increaseChronometer, 1000);
function increaseChronometer () {
var chronometerNumber = 1;
document.getElementById("chronometer").innerHTML = chronometerNumber;
chronometerNumber++;
}
</script>
</body>
</html>
You are defining the "chronometerNumber" variable inside the function, so it gets created and initialized to "1" every time you invoke the function.
Just move the line "var chronometerNumber=1" outside the function and it should work fine.
Hi i think i got it !
<!doctype html>
<html>
<head>
<style>
#screen {
position: relative;
border: 2px solid black;
width: 800px;
height: 600px;
top: 50px;
left: 500px;
}
#chronometer {
position: absolute;
top: 150px;
left: 300px;
font-size: 100px;
width: 300px;
height: 300px;
}
</style>
</head>
<body>
<div id="screen">
<div id="chronometer"></div>
</div>
<script>
var chronometerNumber = 1;
var chronometer = setInterval( function increaseChronometer () {
document.getElementById("chronometer").innerHTML = chronometerNumber;
chronometerNumber++;
}, 1000);
</script>
</body>
</html>
In the reference of the setInterval (){} function is written that you have to make anonimus function which will be called every time after timeout, and I did it i put your function inside the setInterval function also i move your var chronometerNumber = 1; declaration outside the function because if it is in there every time the function is called your counter will start from one again and again and so on and you will see only one every time. I home i was helpful and sorry for the english.
Related
I'm working on a progress bar (in Javascript) that cycles through every second and then starts again.
I tried to change value with setInteval() but nothing helped me.
I hope for help, thanks
here's my code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.progress {
position: relative;
width: 510px;
height: 60px;
background: #9cbab4;
overflow: hidden;
}
.progress__fill {
width: 0%;
height: 100%;
background: #009579;
transition: all 0.1s;
}
.progress__text{
position: absolute;
top: 50%;
right: 5px;
transform: translateY(-50%);
font: bold 20px 'Quicksand', sans-serif;
color: #ffffff;
}
</style>
</head>
<body>
<div class="progress">
<div class="progress__fill"></div>
<span class="progress__text">0%</span>
</div>
<script>
setInterval(function(){
value++;
}, 1000);
function updateProgressBar(ProgressBar, value){
ProgressBar.querySelector(".progress__fill").style.width = '${value}%'
ProgressBar.querySelector(".progress__text").textContent = '${value}%'
}
</script>
</body>
</html> ```
I tried reproducing your code by changing the progress, progress__fill, and progress__text into id's and changed the <div class="__" /> into <div id="__" />:
<style>
#progress {
position: relative;
width: 510px;
height: 60px;
background: #9cbab4;
overflow: hidden;
}
#progress_fill {
width: 0%;
height: 100%;
background: #009579;
transition: all 0.1s;
}
#progress_text{
position: absolute;
top: 50%;
right: 5px;
transform: translateY(-50%);
font: bold 20px 'Quicksand', sans-serif;
color: #ffffff;
}
</style>
here's the <div /> in my repro code:
<div id="progress">
<div id="progress_fill"></div>
<span id="progress_text">0%</span>
</div>
then on the <script>, You did not have a variable for value so I made one and set the value to zero: let value = 0; then concatenated it with '%'.
I used window.setInterval then changed the querySelector to document.getElementById because of the changes above.
here's what it looks like on the script tag:
<script>
let value = 0;
window.setInterval(function() {
if (value != 100) {
value++;
document.getElementById("progress_fill").style.width = value + '%';
document.getElementById("progress_text").textContent = value + '%';
}
}, 1000);
</script>
I included an if (value != 100) to stop the cycle when it reaches 100.
Hope this helps! here's my code snippet if you want some reference:
https://jsbin.com/xiwiyew/5/edit?html
I have taken you example and played around a bit.
I have changed it up for I think suits better.
Problem one was you did not call the updateProgressBar() in your interval. So it did not work.. I think the code speaks for itself. If you have a question let me know
My code. Note: you could chose to put the two lines in the update function and move them directly in the interval function. Also the function does not have a cap now. and will go above 100% if left running long enough.
Hope this helps
value = 0;
setInterval(function() {
value++;
updateProgressBar(value);
}, 1000);
function updateProgressBar(value) {
document.querySelector(".progress__fill").style.width = value + "%"
document.querySelector(".progress__text").innerHTML = value + "%"
}
Looking at your code I am geussing you are new. Try writing out/ describing what you want in your head and try have your code replicate that. Example: I want a progressbar with a value, that increments every second. (interval function tells that now). Than the logic that looks clunky/reads less easy can be put behind a function
First of all you have to understand that variables have a scope limitations, so what you can do is get value from your innerHTML and update it in each function call. this way you can get realtime value, without storing it somewhere globally.
Here is the working code for the same.
setInterval(function () {
const progress__text = document.querySelector(".progress__text");
const progress__fill = document.querySelector(".progress__fill");
if (progress__text && progress__fill) {
let value = parseInt(progress__text.innerHTML.split("%")[0]);
if (value === 100) {
progress__fill.style.width = "0%";
progress__text.innerHTML = "0%";
} else {
progress__fill.style.width = ++value + "%";
progress__text.innerHTML = ++value + "%";
}
}
}, 100);
.progress {
position: relative;
width: 510px;
height: 60px;
background: #9cbab4;
overflow: hidden;
}
.progress__fill {
width: 0%;
height: 100%;
background: #009579;
transition: all 0.1s;
}
.progress__text {
position: absolute;
top: 50%;
right: 5px;
transform: translateY(-50%);
font: bold 20px "Quicksand", sans-serif;
color: #ffffff;
}
<body>
<div class="progress">
<div class="progress__fill"></div>
<span value="0" class="progress__text">0%</span>
</div>
</body>
This isn't an accurate way of timing a animation, but pretty simple to implement
const animation = {
duration: 2, // animation length in seconds
steps: 60,
counter: 0,
incrementCounter() {
this.counter += ((1 / this.duration) * (this.steps / 1000) * 100);
this.counter = Math.min(this.counter, 100)
}
}
const draw = setInterval(updateAnimation, animation.steps);
function updateAnimation() {
animation.incrementCounter();
document.querySelector(".progress__fill").style.width = animation.counter + '%'
document.querySelector(".progress__text").textContent = animation.counter + '%'
if (animation.counter === 100) {
animation.counter = 0;
clearInterval(draw)
};
}
.progress {
position: relative;
width: 510px;
height: 60px;
background: #9cbab4;
overflow: hidden;
}
.progress__fill {
width: 0%;
height: 100%;
background: #009579;
transition: all 0.1s;
}
.progress__text {
position: absolute;
top: 50%;
right: 5px;
transform: translateY(-50%);
font: bold 20px 'Quicksand', sans-serif;
color: #ffffff;
}
<div class="progress">
<div class="progress__fill"></div>
<span class="progress__text">0%</span>
</div>
This question already has an answer here:
The drag doesn't work when it has a siblings img in IE
(1 answer)
Closed 6 years ago.
Sorry for it's me again to ask the same question because I didn't make clear the question so that no one can help me to clarify my confusion yesterday. Here is the codepen(seems it can't open in ie8).I want to drag the 'move-obj' but it doesn't work in IE browser(8,9,10) if there is an images at the background.How can I make this demo work on IE browser above IE8?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.wrap{
position: relative;
width: 100%;
height: 100%;
background-color: #f0f0f0;
padding: 10%;
}
.wrap-inside{
position: absolute;
top: 100px;
left: 100px;
width: 502px;
height: 502px;
border: 1px solid #ddd;
}
.move-obj{
cursor: move;
position: absolute;
top: 100px;
left: 100px;
width: 100px;
height: 100px;
border: 1px solid blue;
background-color: rgba(0,0,0,0);//if I add the background, it will work correctly in IE9 IE10
filter: progid:DXImageTransform.Microsoft.gradient(startcolorstr=#00000000,endcolorstr=#00000000); //doesn't work in IE8
}
.bg{
top: 102px;
left: 102px;
width: 500px;
height: 500px;
position: absolute;
}
</style>
</head>
<body>
<div class="wrap">
<img class="bg" src="images/img1.jpg" alt="">//if this tag remove, it work correctly
<div class="wrap-inside">
<div class="move-obj"></div>
</div>
</div>
<script src="js/jquery.min.js"></script>
<script>
$('.move-obj').on('mousedown',function(e){
var start_x = e.pageX;
var start_y = e.pageY;
var $that = $(this);
var t_left = parseInt($that.css('left'));
var t_top = parseInt($that.css('top'));
$('.wrap-inside').on('mousemove',function(e){
$that.css({
left: t_left + e.pageX - start_x,
top: t_top + e.pageY - start_y
});
}).on('mouseup',function(e){
$(this).off('mousemove');
});
});
</script>
</body>
</html>
Just set the a transparent image for a background of .move-obj or instead a transparent image try set it as url(about:blank) should also work.
As mentioned above in the title I cannot get the onchange to call myfunction() everytime users type in the textarea, it supposed to change the image everytime it type
Anyone can please help on that, I am a newbie to html and javascript. I just need the image to change to what people have typed in the text area.
<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:f="http://xmlns.jcp.org/jsf/core"
xmlns:p="http://xmlns.jcp.org/jsf/passthrough" lang="us">
<head>
<meta charset="utf-8">
<title>〈Magnetic〉writesomething</title>
<link href="jquery-ui.css" rel="stylesheet">
<style>
body{
font: 62.5% "Trebuchet MS", sans-serif;
margin: 50px;
}
html, body {
height: 100%;
}
html {
display: table;
margin: auto;
}
body {
display: table-cell;
padding: .8em 2em .8em 20px;
}
.image {
position: relative;
width: 100%; /* for IE 6 */
}
h2 {
position: relative;
top: 80px;
left: 360px;
width: 200px;
height: 90px;
color:#FFFFFF;
font-size:36px;
margin: 0 auto;
}
h4 {
width: 600px;
}
img {
width: 100%;
height: auto;
z-index:-1;
}
div.relative {
position: relative;
left: 20px;
border: 3px solid #8AC007;
}
#container {
width:600px;
height:350px;
position: relative;
}
#image {
position: absolute;
left: 0;
top: 0;
width:100%;
height: auto;
}
#text {
z-index: 100;
position: absolute;
color: white;
font-size: 22px;
font-weight: bold;
left: 250px;
top: 80px;
}
</style>
</head>
<body>
<div id="fb-root"></div>
<div class="container">
<h1 class="container">〈Magnetic〉writesomething</h1>
<div style="display: block;">
<div id="imgDiv" class="image">
<img src="http://game.magnetic.hk/image.php?text=writesomething
" />
<p id="display"></p>
</div>
</div>
<p>Write something：</p>
<form action="image.php" method="post" name="myform">
<textarea style="width:600px;" name="text" id="inputtext" onChange="myFunction()" placeholder="上限為16個字">中秋祝你乜乜乜</textarea></br> </br>
</form>
</div>
<script src="jquery-1.8.3.js"></script>
<script type="text/javascript">
function myFunction() {
var x = document.getElementById("inputtext").value;
document.getElementById("display").innerHTML = x;
document.getElementById('imgDiv').innerHTML='<img src=\'http://game.magnetic.hk/image.php?text='+ document.getElementById("display").innerHTML +'\'>'
}
</script>
</body>
</html>
When you use document.getElementById('imgDiv').innerHTML you remove the <p id="display"></p>.
If you replace
document.getElementById('imgDiv').innerHTML='<img src=\'http://game.magnetic.hk/image.php?text='+ document.getElementById("display").innerHTML +'\'>'
by:
document.getElementById('imgDiv').innerHTML='<img src=\'http://game.magnetic.hk/image.php?text='+ document.getElementById("display").innerHTML +'\'><p id="display"></p>'
It should work.
You can try it here.
Replace your code line with this one. And check the last element after closing image tag. The same paragraph should be there.
document.getElementById('imgDiv').innerHTML = '<img src=\'http://game.magnetic.hk/image.php?text=' + document.getElementById("display").innerHTML + '\'><p id="display"></p>'
#Elie Gnrd's answer explains why your code is broken.
Since you are using jQuery put its selectors and binding to use.
Modify your script to this,
$('#inputtext').on('input', function () {
var x = $("#inputtext").val();
$("#display").html(x);
$('#imgDiv').html('<img src=\'http://game.magnetic.hk/image.php?text=' + x + '\'>');
});
And, remove the onChange attribute from textarea
Checkout the working fiddle here.. https://jsfiddle.net/sachin_puthran/h2c06fjx/
Since you mentioned every time a user types and I see that you are using jQuery.
Try like this.
--Update--
Didn't realize the text not appearing.
$("#inputtext").on("keydown", myFunction);
function myFunction() {
var x = $(this).val();
console.log(x);
$("#display").text(x);
$('#imgDiv > img').attr('src', 'http://game.magnetic.hk/image.php?text=' + x);
}
JSFiddle
--EDIT--
Referring various sources, I've written a code to minimize and maximize a div tag in my JSP code which goes as follows,
<style type="text/css" media="screen" > #editor {
position: absolute;
top: 0;
right: 20%;
bottom: 0;
left: 0;
}
#widnow {
position: absolute;
top: 72.5%;
right: 0;
bottom: 0;
left: 0;
width: auto;
border: solid 1px;
}
#title_bar {
background: #FEFEFE;
height: 25px;
width: 100%;
}
#button {
border: solid 1px;
width: 25px;
height: 23px;
float: right;
cursor: pointer;
}
#box {
height: 250px;
background: #DFDFDF;
}
</style >
=============================
<div id="widnow">
<div id="title_bar">
<div id="button">-</div>
</div>
<div id="box">
</div>
</div>
============================
<script type="text/javascript">
$("#button").click(function(){
if($(this).html() == "-"){
$(this).html("+");
}
else{
$(this).html("-");
}
$("#box").slideToggle();
});
</script>
This gives me a div tag something like this,
But when I click the minimize button (i.e - on the top right) nothing happens.
The code works fine as shown in this demo but does not work in my jsp.
what to do? where is my mistake?
Did you Check for JavaScript conflicts? I had such issues before.
Removed
<script src="js/jquery.autocomplete.js"></script>
from head in JSP and added
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
This worked fine.
I have this Code in which there is only Two static div, So i want your kind help to generate new div automatically when new user come. Actually i am working with SignalR.
i need a more divs for new users, and each user have his own div. please provide any of CS or Jquery code help to solve it out. Thanks FOR your help :)
My index. Html
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
body, html {
margin: 0px;
padding: 0px;
}
#indicator {
width: 300px;
height: 20px;
background: lightgrey;
color: black;
position: absolute;
left: 500px;
top: 0px;
}
#myshape {
width: 100px;
height: 100px;
background-color: blue;
position: absolute;
z-index: 100;
}
#yourshape {
width: 100px;
height: 100px;
background-color: red;
position: absolute;
z-index: 1;
}
</style>
</head>
<body>
<script src="Scripts/jquery-1.6.4.js"></script>
<script src="Scripts/jquery-ui-1.10.3.js"></script>
<script src="Scripts/jquery.signalR-2.0.0.js"></script>
<script src="Scripts/jquery.signalR-2.0.0.min.js"></script>
<script src="/signalr/hubs"></script>
<script type="text/javascript">
$(function () {
$.connection.hub.start().done(function () {
$("#indicator").html("connected");
$("#myshape").draggable({
drag: function () {
var left = $("#myshape").offset().left;
var top = $("#myshape").offset().top;
$.connection.moveShapeHub.server.calculate(left, top);
}
});
});
$.connection.moveShapeHub.client.updateshape = function (left, top) {
$("#yourshape").offset({ "left": left, "top": top });
};
});
</script>
<div id="myshape"></div>
<div id="yourshape"></div>
<div id="indicator"></div>
</body>
</html>
Look at the jquery docs on using the append method. That sounds like all you need. http://api.jquery.com/append/