JavaScript Moving Images

[Curtis Thompson]

hello…

in this case, window.setTimeout() will be your friend:

https://www.w3schools.com/jsref/met_win_settimeout.asp

basically what you would do is create a function that moves the image to a specified x/y place, and then you could call that function with new coordinates after any desired pause in milliseconds via setTimeout().

also i’ll throw out javascript libraries as an option – you are learning the manual way, which i do highly recommend. that’s because you then see how things are actually working. but once you get that going, it can be done this way as well:

https://viralpatel.net/blogs/understanding-jquery-animate-function/

that’s using jquery. all jquery is underneath is all the javascript that you are writing here yourself and then packaged up nicely in functions. so definitely learn about this as much as you can by hand, but then also consider implementing something like jquery to do the heavy lifting for you…

sitruc

[Simon Matthews]

Hi, thanks for your reply. I’ve put setTimeout into a loop so that the moveImage function is called multiple times, and each time the function is called the coordinates of the image are changed, but the result is the same – the image is not being displayed on the screen until the loop is finished. In other words, when the script is run the screen displays nothing, then after a brief pause a whole bunch of images appear at once, so the program is going through the entire loop before displaying any images on the screen. How do you code it so that the image is refreshed every time around the loop, so that you can see it moving across the screen?

This is the code that calls the moveImage function:

for (var i=0; i<10; i++)
{
setTimeout(moveImage(),1000);

}

And the moveImage function itself:

function moveImage() {

// The variable imgpos is used to contain the style attributes of the image:
var imgpos = document.getElementById(“image”).style;

// The next two lines put the new x and y values into the top and left style attributes of the image.
imgpos.top = movx + “px”;
imgpos.left = movy + “px”;

// Not 100% sure how the next lines work as I got them from a forum, but it does seem to print an image to the screen, but only after the loop has finished:
var img = document.createElement(“IMG”);
img.src = “Triangle Design & Media Banner New.png”;

// I think this next line is the one that actually displays the image, but only after the loop has finished:
document.getElementById(‘image’).appendChild(img);

// This is something to slow it all down so we can see what is happening:
var i = 0;
while (i<100000000)
{
i++;
}

// The next two lines decrease the x and y coordinates by 1 pixel. I don’t use the JavaScript shorthand method because I much prefer the classical way of writing code as it’s much more readable to me:
movx = movx – 1;
movy = movy – 1;

}

Not sure if you can make head nor tail of any of that, but really what I’m asking is how an image can be displayed/refreshed every time around a loop? I must be using the wrong method to actually print the image to the screen in the first place.

This is really defeating me at the moment. It’s a pity because I would much prefer to learn how to do it myself rather than rely on jQuery, but for now it looks as though that’s what I’m going to have to do!

Thanks,

Simon.

[Curtis Thompson]

hello…

i think it’s easier to just write you an example as opposed to trying to debug what you have – you were going a bit far down some rabbit holes that might be hard to pull you out of… 🙂

here’s what i wrote sans jquery:

https://sitruc.com/cow/js_image_move/

view the source on that to see how it works. also note that i used the console for debug/logging purposes – you should get used to using that as well, as it can be very handy to tell you what is going on. here’s how to use that:

https://stackoverflow.com/questions/4743730/what-is-console-log-and-how-do-i-use-it

if you have any questions, let me know!

sitruc

[Simon Matthews]

Thank you very much for the code! It looks complicated but I am going to study it carefully as I think it will be worth my while getting to grips with how this kind of thing is done in JavaScript. Ultimately I would like to emulate an effect I recently saw in someone’s website, in which several images moved from the left side of the page and spread out evenly to construct the page content, which I thought looked pretty neat. Here’s a link to the page I’m referring to:

https://www.designdough.co.uk/ourportfolio

Perhaps there is a jQuery script to achieve this effect?

Hopefully I will be able to work out how your code works, but if I can’t I may pop back to pick your brains some more! 🙂

About the console – I have Firebug installed because it was recommended in a Learn JavaScript book I’m currently reading. I’ve used it once or twice but mostly I just use Dreamweaver because I find the Firebug editor very small to use. What are the benefits of using Firebug over Dreamweaver?

Many thanks,

Simon.

[Simon Matthews]

Hi,

Good news! I carefully read through your script this morning and I could (just about) understand what was going on! Well, to a degree anyway! It will be a while before I can confidently say I know how it’s done. The pxDim() function confused me for a while but I eventually worked out what was going on. The only bit I didn’t understand was the console.log bit, which I guess is what you were trying to tell me about yesterday.

I liked the way you calculated for an even move with the factor variable! That was nice!

Say you wanted to amend this script to control the simultaneous movement of multiple images, would it be correct to replace all of the required variables with arrays, so for example instead of having just an endTop variable you would have an endTop [img1, img2, img3] array? And then give each image an id of its own?

Thanks again,

Simon.

[Curtis Thompson]

hello…

the example i wrote here is a good argument for why one would use jquery. i wrote all the code here to move the image, but in jquery, that’s all bundled in there, so you don’t have to reinvent the wheel each time. but it is good to know how it works if you want to be a javascript coder in general, as it makes life much easier. i just come from a time when things like jquery didn’t exist, so everything had to be written out like this… 🙂

[Simon Matthews] ” Perhaps there is a jQuery script to achieve this effect?”

there are lots of code examples for jquery out there that are similar to this. you’d just have to get comfortable with how to use it. you could also pretty easily modify this example here that i wrote to do this effect.

[Simon Matthews] “What are the benefits of using Firebug over Dreamweaver”

well – for me, since i don’t use dreamweaver, they are endless… 🙂

but if you have a good enough console in dreamweaver then go ahead and use that – note however that all browsers now have a version of it, and you might see things in different browsers that dreamweaver wouldn’t show…

sitruc

[Curtis Thompson]

hello…

you’d have to work on the factor math to get them all to move at the same speed, but here’s the same script moving multiple images:

https://sitruc.com/cow/js_image_move/index_multi.html

sitruc

[Simon Matthews]

Hi,

[Curtis Thompson] “…you don’t have to reinvent the wheel each time, but it is good to know how it works if you want to be a javascript coder in general…”

Thanks, yes that’s exactly why I wanted to learn how to do it without using jQuery. I used to program a lot in machine code on my Speccy back in the 80s and early 90s, so have a good grounding, but have been off the scene since about 1994. I don’t want to reinvent the wheel, but I do want to know how the wheel was made in the first place 🙂

I’ll look further into Firebug to learn of its benefits.

Thanks,

Simon.

[Simon Matthews]

Hi,

Thank you very much for the amended script! You shouldn’t have, I’ve taken enough of your time already! I do appreciate it a lot though, thanks very much! I’m going to study it very carefully and hopefully I’ll be able to work out what’s going on and learn a whole lot from it! I’ve spent the last 18 months learning how to make graphics and I think that learning web design along with JavaScript is the next logical step for me. Enjoying this very much!

Thanks,

Simon.

[Curtis Thompson]

no problem – always good practice to keep the skills sharp… 🙂