I have a loop that puts img elements next to each other inside a div, however, my loop doesnt work. i get a timeout, but I don't know why.. Is there something obvious I'm missing?
for(var i = 0; i < 3; i++){
var hatch = document.createElement('img');
hatch.src = "img/Sand.png";
hatch.style.width ="1cm";
hatch.style.position = "absolute";
for(var x=0; Math.ceil((cm2px(2.5)-1)/cm2px(1)) < x; x++) {
if (x != 0) {
hatch.style.left = `"${x*cm2px(1)}cm"`;
}
}
Lith.appendChild(hatch);
}
the condition of the inner loop is > instead of <
Related
Hi I am trying to get an image to blink using the code below by changing the image. Is there something wrong with my "setTimeout"? TIA
var Test = new Array();
Test.length = 2;
for (var i = 0; i < Test.length; i++) {
Test[i] = new Image();
Test[i].src = "images/Image2" + (i+1) + ".png";
}
function ChangeImage() {
for (var i = 0; i < Test.length; i++) {
document.getElementById('Test_Image').src = Test[i].src;
}
setTimeout("ChangeImage()", 1000);
}
ChangeImage();
First.. you complicated yourself with the new Image() part. You could just use Test[i] = "images/Image2" + (i+1) + ".png";
And for your code, firstly you change the images really fast once every 1 second.
It should be something like this:
function ChangeImage() {
for (var i = 0; i < Test.length; i++) {
setTimeout(function(){document.getElementById('Test_Image').src = Test[i];
}, (i+1) *1000);
}
if(play){
setTimeout("ChangeImage()", Test.length * 1000);
}
}
This will not halt the javascript code at any point.
After 1 sec it will put image21, after 2 seconds image21 and it will call itself again and it will start all over again;
I put the variable play so you could stop the animation if you wanted.
setTimeout() is not blocking. That means it only schedules an activity to happen some time in the future and the rest of your Javascript just keeps running. So, you were scheduling Test.length setTimeout() all for the exact same time 1 second from now. Instead, you need to schedule the next image change and then, when that timer fires, you schedule the one after that and so on.
If you just want to cycle through the various images one second apart, you can do this:
function ChangeImage() {
var cntr = 0;
function next() {
if (cntr < Test.length) {
document.getElementById('Test_Image').src = Test[cntr++].src;
// after changing src, schedule next change for 1 second from now
setTimeout(next, 1000);
}
}
// start first iteration
next();
}
ChangeImage();
You may also need to make sure that all your images are properly preloaded so they display immediately when you set their source. There are numerous ways to make sure the preload is done before starting the rotation such as these:
Image preloader javascript that supports events
How do you cache an image in Javascript
Try something like this.
Edit: Accidentally put setTimeout instead of setInterval. Thanks Santi for point that out.
var Test = new Array();
Test.length = 2;
for (var i = 0; i < Test.length; i++) {
Test[i] = new Image();
Test[i].src = "images/Image2" + (i+1) + ".png";
}
var count = 0;
function ChangeImage() {
if (count >= Test.length)
count = 0;
document.getElementById('Test_Image').src = Test[count].src;
count++;
}
setInterval(ChangeImage, 1000);
Your for loop switches the src once and immediately switches it back, so you can't see it change. Try this instead:
var Test = [];
for (var i = 0; i < 2; i++) {
Test.push("images/Image2" + (i+1) + ".png");
};
var x = 0;
document.getElementById('Test_Image').src = Test[x];
(function ChangeImage() {
if(++x >= Test.length) x = 0;
document.getElementById('Test_Image').src = Test[x];
setTimeout(ChangeImage, 1000);
})();
EDIT: As Santi pointed out, my original solution only supported two images, while OP requested to loop through an array.
I've got a very similar process that occurs in many places, with one small change. I was wondering what would be the best way to make the code neater. Currently, the process is:
var drawx = 0;
var drawy = 0;
while(drawy < 22){
while(drawx < 10){
if(nextBlock[drawx][drawy] != false){
base[drawx][drawy] = nextBlock[drawx][drawy];
}
drawx++;
}
drawx = 0;
drawy++;
}
Within the while drawx < 10 is where I usually have different things to run, and I'm not sure how I would create a function with a variable process in the middle of it. Is there a way to do this, or should I just create a function that does this process and executes a certain if statement depending on the parameter that was called when running the function?
EDIT: I think I might have not gotten my initial problem across. I want to be able to have a process such as the if statement within the loop to be a variable process while the rest of it to be the same
javascript has first class functions so you can do something like this:
function drawLoop(action) {
var drawx = 0;
var drawy = 0;
while(drawy < 22){
while(drawx < 10){
action(drawx, drawy);
drawx++;
}
drawx = 0;
drawy++;
}
}
And then call it like this:
drawLoop(function(drawx, drawy){
if(nextBlock[drawx][drawy] != false){
base[drawx][drawy] = nextBlock[drawx][drawy];
}
});
And of course, you can change the function you pass to drawLoop to suite your needs.
you could inject a function as a variable to your generic function like
function genericDraw(xValidation) {
var drawx = 0;
var drawy = 0;
while(drawy < 22){
while(xValidation(drawX)){
if(nextBlock[drawx][drawy] != false){
base[drawx][drawy] = nextBlock[drawx][drawy];
}
drawx++;
}
drawx = 0;
drawy++;
}
}
where xValidation is
function someValidation(value) {
return (value < 10);
}
and you call it
genericDraw(someValidation);
for( var drawy = 0 ; drawy < 22 ; drawy++) {
for( var drawx = 0 ; drawx < 10 ; drawx ++) {
if(nextBlock[drawx][drawy] != false) {
base[drawx][drawy] = nextBlock[drawx][drawy];
}
}
}
This is my code, but it does not work.
for (i = 0; i < 5; i++) {
$(function(){
$('.tt'+ [i]).appendTo('.td'+ [i]);
});
}
I want the result:
$('.tt1').appendTo('.td1')
$('.tt2').appendTo('.td2')
$('.tt3').appendTo('.td3')
$('.tt4').appendTo('.td4')
$('.tt5').appendTo('.td5')
Please correct me, thanks you in advance!
You have some syntax errors, try this:
for (var i = 0; i <= 5; i++) {
$('.tt'+ i).appendTo('.td'+ i);
}
As already mentioned: remove the array initialization.
If you want to iterate from 1 to 5 then do so (not var = 0, but var i = 1):
for (var i = 1; i < 6; i++) {
$('.tt'+ i).appendTo('.td'+ i);
}
Also I don't see any sense in wrapping it the appendTo call.
The 1st Thing
You will never jump into the i=5 iteration
$('.tt5').appendTo('.td5')
because your for loop
for (i = 0; i < 5; i++)
ends at i = 5
Change it to
for (i = 1; i <= 5; i++)
It starts at i=1 because your example didn't show a ".tt0"
The 2nd thing
Remote the brackets!
Change
$('.tt'+ [i]).appendTo('.td'+ [i]);
to
$('.tt'+ i).appendTo('.td'+ i);
Otherwise you will create an Array and the JS interpreter performs an unnecessary Array.toString() operation.
The 3rd thing
I think you can remove the surrounding function inside the for loop
$(function(){
...
}
Just use:
for (var i = 1; i <= 5; i++) {
$('.tt'+ i).appendTo('.td'+ i);
}
See Fiddle
http://jsfiddle.net/Spaghettirocker/knkpaczg/1/
function CheckavailOnload()
{
var elems = document.getElementsByClassName('box-collateral box-related');
var av = document.getElementsByClassName('availability in-stock');
var x;
for (var i = 0; i < elems.length; i++)
{
if (getComputedStyle(elems[i]).visibility == 'visible')
{
for (var j = 0; j < av.length; j++)
{
av[j].style.visibility = 'visible';
if(elems[i].offsetTop < 0)
{
var x = (elems[i].offsetHeight + (elems[i]).offsetTop).toString() + "px";
alert(x);
}
for(m = 0;m < av.length; m++)
{
av[m].style.Bottom = (-x);
return;
}
}
}
}
for (var k = 0; k < av.length; k++)
{
av[k].style.visibility = 'hidden';
}
var divs = document.getElementsByClassName('add-to-cart');
for(var l = 0; l < divs.length; l++)
{
divs[l].style.marginTop = (-500).toString() + "px";
divs[l].style.marginLeft = (-20).toString() + "px";
}
}
window.onload = CheckavailOnload;
here i am trying to move a paragraph tag have baground image depending upon the div offsetTop and Offset height div also have bacground image i am moving para tag just below the div but addition of offsetHeight and offsetTop is coming NAN please anyone can help me
You've declared var x; at the beginning of your script. Then later you're checking:
if(elems[i].offsetTop < 0) {
var x = (elems[i]...); // var is not recommended to be here, x has been already declared once
}
If elems[i].offsetTop happens to be >= 0, x will be undefined in this line:
av[m].style.Bottom = (-x); // Notice a typo here: should be av[m].style.bottom
This last expression gives you NaN. To avoid this, you need to either assign a default value to x in the beginning of the script, or add an else statement after the if wherein some numeric value is assigned to x.
Also return in the for...m-loop seems to break your code, the loop will never finish the job and the rest of the code will be never executed.
Using (-500).toString() + "px"; feels complex, why not just use "-500px";?
I'm trying to increase the row each time around the loop, but it's not increasing is there something wrong with my JavaScript code?
var image= [];
for (var i = 0; i < test.length; i++) {
var avatar = test[i].image; // The profile image
var row =5;
if(i % 2 === 0){
image[i]= Titanium.UI.createImageView({
top:row,
image:avatar
});
win.add(image[i]);
//trying to increase the image
row =row+200;
} else if(i % 2 === 1) {
image[i]= Titanium.UI.createImageView({
top:row,
image:avatar
});
win.add(image[i]);
}
}
Can't say I'm certain of what you're attempting to achieve, but at the beginning of your for iteration you're resting row to 5. You should move your var row=5; declaration to the top with var image[];
You might also consider the short form row+=200;
try to move this line upper outside of the loop :
var image= [];
var row =5;
for (var i = 0; i < test.length; i++) {
...
}
You are initializing row in each start of loop. Try taking your var row = 5 outside of the loop:
var image= [];
var row =5;
for (var i = 0; i < test.length; i++) {
var avatar = test[i].image; // The profile image
...
}