[Simon Matthews]

Hi,

Thanks for the advice, will consider that in future. Was wondering what problems my images can cause? The home page seems to load quickly on my computer, much quicker than some other sites I’ve visited. Takes under a second to load. The other pages take longer to load though, especially the Motion Graphics page, because of all the video links.

Simon.

[Simon Matthews]

Hi, just to let you know I mistakenly sent you a link to the Matte Painting page of my site, but clicking on home will take you to the home page 🙂

Here’s a link to the homepage anyhoo:

https://triangledesignmedia.co.nf/index.html

Simon.

[Simon Matthews]

Hi,

Just thought I’d bring you up-to-date on the website I was working on for practice. I’ve got all the links working now, with each link taking you to pages containing various examples of my work. I’ve just embedded my YouTube videos for now, but when I learn more I may use custom videos. The banner on the homepage cross fades between a selection of different images that I produced. I didn’t write the code for that myself. I’ll add bits to the site as I go. The contact page doesn’t include a form because I don’t have a proper domain name yet, and apparently you need a proper domain name to use forms.

Here’s a link to the site, which is made using the non-absolute positioning methods that you instructed me on earlier:

https://triangledesignmedia.co.nf/matte-painting.html

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.

[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,

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.

[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, 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.

[Simon Matthews]

Thanks man, will do. I haven’t bought a domain name yet, using their free subdomain name for the time being.

Will keep you posted!

[Simon Matthews]

Hi,

Thanks so much for all your help!

I’ve cleaned up the margins now using the fixes you suggested. This reminds me very much of when I started to learn machine code and I couldn’t work out why my programmes weren’t working – there was always a logical reason, and you spotted the reasons why the margins weren’t working in my web page very well! This has been a great lesson for me and I will definitely take a lot from it and be more careful with my coding in future.

Well I joined 000webhosting.com, only to find out that Facebook won’t accept links to their site because they are regarded as spammers, so I joined Biz.nf, which was at the top spot on a top ten list I found. I think I’ll use this service whilst I’m building a website and then when it’s more complete I will definitely take your advice and upgrade to a more professional service.

Here is a link to the page on Biz.nf:

https://triangledesignmedia.co.nf/#

When it’s finished I’m hoping to have the picture in the middle fading to other images like a slideshow, and I think I’ll produce a demo reel of my work for the video at the bottom right of the page.

Thanks so much again for all your help, it’s been a real pleasure and I look forward to learning much more yet!

Simon.