Hi, I still want to create the postcardviewer in Javascript:
http://www.airtightinteractive.com/p...iewer/example/

My code now shows all the pictures, and when I click on one of them then they all resize and get big ( looks like sooming in ).

I have to problems but just lets solve the first one,
I'm trying to move the viewport to the picture i'm clicking on.

But I cant find functions for that,
do I have to use the window object for that
like moveBy(x,y) and moveTo(x,y)

Or is there a viewport object ( I assume there is ).

So I have a
mijnImg.onclick = function(){clickImg(this)}

function clickImg(img)
{
   //move the viewport to this image
}

So I also have to get the X and Y position of the picture i'm clicking on.

I've been " googeling " for methods but I cant find the ones I need for this.


So you dont have to give the code directly, but try to tell me what functions / methods I have to use for this

thnx for reading again :) cool that there are people willing to help others with coding :D

I'm trying to solve it with document.body.offsetWidth and
document.body.offsetHeight but it doesnt work ( dont know if its what i'm looking for )

But the code stops after the alert "hooi"
anyone knows what i'm doing wrong ?

var geklikt = false
    function clickImg(img)
    {
        if(geklikt == false)
        {
           var allPictures = document.getElementsByTagName("img")
            for(var i=0;i<allPictures.length;i++)
            {
                allPictures[i].width = 400
                allPictures[i].height = 400
            }
        alert("hooi")
        document.body.offsetWidth = 1000
        alert("hooi2")
         document.body.offsetHeight = 1000
        alert("hooi3")
        geklikt = true
        }

        else
        {
                      //other code
                }

Beste Schooljongen,

Do you use Firefox?
If you do have you installed the webdeveloper plugin?
https://addons.mozilla.org/firefox/60/
This way you will have a error console which will display all your javascript errors and make your javascript programming much easier.

Good Luck


__________________________________________________ ________
I am DJ Kat...that's my name. Its a D and a J and a Kat with a K.

Finally found how I could solve my problem.
I can find the position of a picture with
picture.offsetLeft
picture.offsetTop
and then return those values,

and I can make the viewport move with the scrollbars using
window.scrollTo(xpos,ypos)
So the x and I have to be the offsets of the picture i'm clicking on.
Later I can even remove the scrollbars with CSS and people will think their viewport is moving while i'm actually moving the scrollbars.

to bad I didnt found this earlier, it has to be done before friday
( its wendsday now ) So I'm back to work XD

Ok I have some code, but it isnt working yet, can someone see if I typed something wrong here ? :

mijnImg.setAttribute("id", "foto" + i)

function findPos(id)
    {
        alert("hooi")
        var picture = document.getElementById(id)
        alert("hooi2")
        pxLeft = picture.offsetLeft
        alert("hooi3")
        pxTop = picture.offsetTop
        alert("hooi4")

        alert(pxLeft + " " + pxTop)
    }

<button onclick="findPos(foto4)">Test</button>

so when I click the button it would have to give back 2 numbers right ? ( after all the " hooi " alerts XD )

But it doesnt go further then "hooi2"

So there should be a error in " pxLeft = picture.offsetLeft " ??

DJ Kat I already installed the error console but just didnt knew where it was or how to use it, now I do XD
thnx for the tip

atm it says: "picture has no properties" line 181
and thats line: pxLeft = picture.offsetLeft


Code
mijnImg.setAttribute("id", "foto" + i)

function findPos(id)
    {
        alert("hooi")
        var picture = document.getElementById(id)

        var pxleft = pxTop = 0;

        alert("hooi2")
        pxLeft = picture.offsetLeft
        alert("hooi3")
        pxTop = picture.offsetTop
        alert("hooi4")

        alert(pxLeft + " " + pxTop)
    }

<button onclick="findPos(foto4)">Test</button>

So whats wrong ?

I just cant get it working :(

Hi again,

What's on line 181? Im guessing it is something with picture in it?
picture has no properties means that your variable picture is empty.
It could mean your id is empty.

I do see something that might change it try this
__________________________________________________ ________
I am DJ Kat...that's my name. Its a D and a J and a Kat with a K.