FORUMS: list search recent posts

JavaScript Moving Images

COW Forums : Web Design

<< PREVIOUS   •   FAQ   •   VIEW ALL   •   PRINT   •   NEXT >>
Simon Matthews
JavaScript Moving Images
on Jul 2, 2013 at 1:14:42 pm

Hi, I'm basically new to everything that is to do with web design - such as HTML, CSS and JavaScript. I've started to play around with JavaScript as I have an interest in coding, but I'm used to languages like the original BASIC that was used on Spectrums, though I also know assembly language for the Spectrum.

Yesterday I followed this JavaScript tutorial: Moving Image Inside HTML page: Javascript ( A Small Fun Application ), which is available here: http://technotip.com/269/moving-image-javascript-small-fun-application/

The script allows the user to input x and y coordinates for an image and then moves an image to that location on the screen. The image jumps from the old position to the new position. I've tried to amend the script so that the image can be seen moving from the old position to the new position, without jumping, so that you can actually see the image moving across the screen, but I can't get the image to be displayed every time round the loop. For example, in BASIC you would just print the image onto the screen at the new coordinates every time round the loop, and then just increase or decrease the variables containing the coordinates in the same loop. How can I print the image to the screen every time round the loop in JavaScript? I'd like to learn how to do this without using jQuery. There are other issues with the coding, such as checking whether the y coordinate has moved off the screen, but just ignore that for now and enter zero for both x and y when prompted (I'm just interested in learning how to get the image to be displayed for now).

This is my amended script, though I think the format may get a bit muddled in the forum page:





Move It


#kids { position: relative; top: 400px; left: 400px; }




// These variables will be used to move the image from coordinates 400, 400:
var movx = 400;
var movy = 400;


function moveIt()
{
var newx = 0;
while (movx > newx)
{
var newx = document.getElementById("x").value;
var newy = document.getElementById("y").value;

var kids = document.getElementById("kids").style;

kids.top = movx + "px";
kids.left = movy + "px";

// For now I'm assuming the new coordinates are nearer the top left of the screen.
movx--;
movy--;

// This next bit is just to slow things down:
var i = 0;
while (i<1000000)
{
i++;
}
}

}








X axis:
Y axis:













Any help would be much appreciated!

Thanks,

Simon.


Return to posts index

Curtis Thompson
Re: JavaScript Moving Images
on Jul 2, 2013 at 9:10:49 pm

hello...

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

http://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:

http://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


Return to posts index

Simon Matthews
Re: JavaScript Moving Images
on Jul 3, 2013 at 9:41:10 am

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.


Return to posts index


Curtis Thompson
Re: JavaScript Moving Images
on Jul 3, 2013 at 6:31:41 pm

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:

http://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:

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

if you have any questions, let me know!

sitruc


Return to posts index

Simon Matthews
Re: JavaScript Moving Images
on Jul 3, 2013 at 7:52:06 pm

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:

http://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.


Return to posts index

Curtis Thompson
Re: JavaScript Moving Images
on Jul 4, 2013 at 4:39:30 pm

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


Return to posts index


Simon Matthews
Re: JavaScript Moving Images
on Jul 4, 2013 at 7:04:19 pm

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.


Return to posts index

Simon Matthews
Re: JavaScript Moving Images
on Jul 4, 2013 at 10:34:49 am

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.


Return to posts index

Curtis Thompson
Re: JavaScript Moving Images
on Jul 4, 2013 at 5:43:23 pm

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:

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

sitruc


Return to posts index


Simon Matthews
Re: JavaScript Moving Images
on Jul 4, 2013 at 7:13:12 pm

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.


Return to posts index

Curtis Thompson
Re: JavaScript Moving Images
on Jul 4, 2013 at 9:24:06 pm

no problem - always good practice to keep the skills sharp... :-)


Return to posts index

<< PREVIOUS   •   VIEW ALL   •   PRINT   •   NEXT >>
© 2017 CreativeCOW.net All Rights Reserved
[TOP]