I have a marquee in a game that i would like to repeat once finished.
var elems = "<br />";
elems += "<marquee id='m1' direction='left' width='800' scrolldelay='5' scrollspeed='true' scrollamount='2' loop='infinite' >";
if (exp >= 0) {
elems += "Galactic News:" + arr0[exp] + "";
}
if (lfLvl >= 0) {
elems += "Planet News: " + arr1[lfLvl] + "";
}
elems += "</marquee>";
when I run app, the variable goes to a part of the page where i want the marquee. It plays through fine. But once it's over, it's does not begin again. It will start again if the user navigates away and comes back.
I would like to know some reason why it isn't repeating, as well as a solution. If i can't do it, i'm not too bothered. It's just a polishing issue that i would like to get out of the way. Thank you to anyone that can help.
Another alternate solution i was thinking of, was to detect when the last item runs, and the marquee has finished, then to throw in a last thing saying something like "end of feed" or something like:
if (marquee === over) {
elems += "End of Feed";
}
but i don't know exactly how to do that over variable, so i kinda had my fingers crossed with attribute
loop='infinite'
try changing your loop to -1 like this:
<marquee id='m1' direction='left' width='800' scrolldelay='5' scrollspeed='true' scrollamount='2' loop='-1' >
Related
I want to show a progress by changing an element's text like below:
for (i = 0; i < 1000; ++i)
{
$('#progressing > #num').html(i + '/' + 1000);
// do other things
...
}
But it seems that explorer has mingle the change on the element, i can only see the last loop's result.
i have tried to use setInterval, and it works well:
setInterval(function(self) {
$('#progressing > #num').html(self.progress + '/' + 1000);
self.progress += 1;
}, 1, this);
But i think it's not cool. May i ask for a elegant way to show element change immediately, just like flush function in IO, or some other way?
Not sure what's not 'cool' about it. If it's meant to measure an actual download progress, this isn't the way to do it. But for a general purpose counter, it works fine. Note you can reduce the code to one line if you like
let progress=0, max=1000, s=setInterval(()=>(progress++ > max-1 ? clearInterval(this) : $('#el').html(progress + '/' + max)),10);
let progress=0, max=1000, s=setInterval(()=>(progress++ > max-1 ? clearInterval(this) : $('#el').html(progress + '/' + max)),10);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='el'></div>
Because the for loop is running to fast, so the event will raise on the final result only. For debugging, i think you will need to log console or use interval instead of for loop.
var counter = 0;
var myInterval = setInterval(function(){
if(counter === 100){ //loop 100 times
//stop loop (finished loop)
clearInterval(myInterval);
}else{
counter ++;
$('#progressing > #num').html(self.progress + '/' + 1000);
//do your other code here
}
}, 2000); //each time process 2 seconds
This is my first post on these forums. I'm trying to create a table that calls its numbers from a VoIP test result on a program that I run in the HTML. currently, im trying to make the result table look "pretty" by if the VoIP Jitter is recorded 1 or above it will change the text color to red and vise versa to green.
function testFinished(vJit) {
voipcolor(vJit);
document.getElementById("aftert").innerHTML='<table class="tableRes" id="tableRes"><style>table {border:1px solid black; margin-left:auto; margin-right:auto;} th, td{border:1px solid black;}</style><thead><thead><tr><th colspan="2">VoIP Test</th></tr></thead><Tr><td>Jitter</td><td>' + vJit + 'ms</td></tr></table>';
}
I have also created the an if statement but for some reason, I keep getting errors for the "unexpected token if":
function voipcolor(vJit)
if (vJit < 1) {
let vJit = '<p style="color:green;">' + vJit + '</p>'
}else if (vJit >= 1) {
let vJit = '<p style="color:red;">' + vJit + '</p>'
}
}
there is more to the table but because i am asking about the colors i figured i would just refrence 2 cells instead of 10 or more.
what is causing the error with the if statement?
what is the proper way to insert the color change?
so I realize I need a return statement and tried adding that to the function also I beleave I edit the else issue that #Taplar was mentioning.
function voipcolor(vJit) {
if (vJit < 1) {
return voipcolor.style.color = "green"
}else{
return voipcolor.style.color = "red";
}
}
but nothing is happening. I believe I need to call the voipcolor(vJit) but im not sure how.
I'm not sure how all your HTML/CSS is defined, but can you make your code look something like this?
if (vJit < 1){
p.style.color = "green";}
if (rating >= 1){
p.style.color = "red";}
Playing with this might help too: https://www.w3schools.com/js/js_htmldom_css.asp
so I ended up asking my mentor/teacher/boss ... thing... person, for some help. I was not calling the function with the if statement. so what I did was called the function from the table replacing + vJit + with function voipcolor(vJit)
then in the voipcolor function instead of return voipcolor.style.color = "green" I used return '<span style="color: green">' + vJit + '</span>'
Because I am calling the function the whole function runs in order. when I use the return statement, the function stops running at the return statement. there are other ways to make this work and explaining this is more for my understanding than anything else. I do hope people will learn from this and understand the innerHTML attribute as I have.
I'm trying to code a rock paper scissors game where when I hit the new game button in the middle of the screen it prompts the user for two name inputs. I've seen this in action before but I can't figure out where I'm going wrong. Hopefully this is enough code to figure it out, otherwise I can post more! Thanks in advance.
$('#gameController').bind('click', function() {
if (game.running === false) {
if ($(this).text() == 'New Game') {
for (i = 1; i < 3; i++) {
do {
var player = prompt('Player ' + i + ', enter your name...');
} while (!player);
$('#player' + i + 'Name').text(player);
game.addPlayer(player);
}
};
I tried executing only the for loop with do...while in jsfiddle. It works fine.
Which means your error has something to do with $('#player' + i + 'Name').text(player); or game.addPlayer(player);
Based on the comments, I suspect an infinite recursion at game.addPlayer(player);. Glad that you found your solution.
You can use alert() e.g. var player = alert('Player ' + i + ', enter your name...');
I have been trying to loop traffic light images in JavaScript. I'm not sure what to do, can someone give advice.
A slight modification to your code. Here is a working sample.
I removed the dvi.count counter as it creates more confusion, We need to maintain the counters outside the function. I changed the logic to pass around the index of the image in the array starting from 0.
var image = new Array("red.jpg", "redamber.jpg", "green.jpg", "amber.jpg");
var timeout;
function stopIt() {
clearTimeout(timeout);
}
function changeimage (images, index) {
var dvi = document.getElementById(images);
if(image.length <= index)
index = 0;
dvi.src = image[index];
dvi.alt = image[index];
timeout = setTimeout('changeimage("' + images + '",' + (index + 1) + ')', 1000);
}
<body onload="changeimage('changer',0)">
<div>
<img src="t1" alt="test1" id="changer" />
</div>
</body>
I have made 3 changes to your code
Fixed the typeo div.count to dvi.count
Corrected the indenting and braces round the if statement (Not strictly necessary, but makes the code way more readable)
Replaced your nasty use of a string parameter in setTimeout to be a function reference
function changeimage(images){
var dvi=document.getElementById(images);
if(!dvi.count || dvi.count == image.length ){
dvi.count=0;
}
dvi.src=image[dvi.count];
dvi.alt=image[dvi.count];
dvi.count=dvi.count+1;
timeout=setTimeout(function(){
changeimage(images);
},3500);
}
Live example: https://jsfiddle.net/Lofug2hf/1/
I am new to javascript and am trying to create this loop to simulate some dice rolls. When I click roll none of the images are refreshed and it ends with the broken image shown. Can anyone see where my error is?
function roll(){
for(x=0;x<10;x++){
var die_num1 = Math.ceil(Math.random()*6);
for(y=0;y<20;y++){
var picturetype1 = Math.ceil(Math.random()*3);
if (picturetype1 == 1){prefix1 = "die-";}
if (picturetype1 == 2){prefix1 = "dicet-";}
if (picturetype1 == 3){prefix1 = "dices-";}
document.getElementById("dice").src='http://localhost/CodeIgniter_2.1.2/dice/' + prefix1 + die_num1 + '.gif';
}
}
}
body:
<input type ="button" value = "Roll" onclick="roll()" >
<img name="dice" id="dice" src="http://localhost/CodeIgniter_2.1.2/dice/die-1.gif" >
I used adocument.write to make sure that at least the final image existed in my folder and it does. I would expect to see the images cycling through as the loop progresses though. Again, I have no experience with javascript and have put this together based on how I thought it should look. Any help will be appreciated.enter code here
I wouldn't expect browser as an event-driven environment even to consider updating the screen before you return from you roll(). You need to get acquainted with setTimeout and handle it as a sequence of timer events.
Thanks for setting me in the right direction. I have reworked this to use setTimeout as Michael suggested and it is working great. Only needed 1/10 of a second per iteration, not much but made all the difference.
function roll2(){
var timer = setTimeout ("roll2();", 100);
i++;
if(i >= 15) clearTimeout(timer);
var die_num1 = Math.ceil(Math.random()*6);
var picturetype1 = Math.ceil(Math.random()*3);
if (picturetype1 == 1){prefix1 = "die-";}
if (picturetype1 == 2){prefix1 = "dicet-";}
if (picturetype1 == 3){prefix1 = "dices-";}
if (i <=15) {
document.getElementById("dice").src='http://localhost/CodeIgniter_2.1.2/dice/' + prefix1 + die_num1 + '.gif';
}
if (i >=15) {
document.getElementById("dice").src='http://localhost/CodeIgniter_2.1.2/dice/die-' + die_num1 + '.gif';
i=0;
}
}