Wrox Programmer Forums
|
Javascript How-To Ask your "How do I do this with Javascript?" questions here.
Welcome to the p2p.wrox.com Forums.

You are currently viewing the Javascript How-To section of the Wrox Programmer to Programmer discussions. This is a community of software programmers and website developers including Wrox book authors and readers. New member registration was closed in 2019. New posts were shut off and the site was archived into this static format as of October 1, 2020. If you require technical support for a Wrox book please contact http://hub.wiley.com
 
Old March 3rd, 2007, 11:07 AM
Authorized User
 
Join Date: Mar 2007
Posts: 11
Thanks: 0
Thanked 0 Times in 0 Posts
Default Moving viewport

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

 
Old March 3rd, 2007, 11:40 AM
Authorized User
 
Join Date: Mar 2007
Posts: 11
Thanks: 0
Thanked 0 Times in 0 Posts
Default

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
                }

 
Old March 6th, 2007, 10:11 AM
Friend of Wrox
 
Join Date: Nov 2005
Posts: 223
Thanks: 0
Thanked 0 Times in 0 Posts
Default

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.
 
Old March 7th, 2007, 01:29 PM
Authorized User
 
Join Date: Mar 2007
Posts: 11
Thanks: 0
Thanked 0 Times in 0 Posts
Default

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


 
Old March 7th, 2007, 02:16 PM
Authorized User
 
Join Date: Mar 2007
Posts: 11
Thanks: 0
Thanked 0 Times in 0 Posts
Default

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 " ??

 
Old March 7th, 2007, 03:30 PM
Authorized User
 
Join Date: Mar 2007
Posts: 11
Thanks: 0
Thanked 0 Times in 0 Posts
Default

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 :(

 
Old March 7th, 2007, 04:24 PM
Friend of Wrox
 
Join Date: Nov 2005
Posts: 223
Thanks: 0
Thanked 0 Times in 0 Posts
Default

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
Code:
<button onclick="findPos('foto4')">Test</button>
__________________________________________________ ________
I am DJ Kat...that's my name. Its a D and a J and a Kat with a K.
 
Old March 7th, 2007, 05:03 PM
Authorized User
 
Join Date: Mar 2007
Posts: 11
Thanks: 0
Thanked 0 Times in 0 Posts
Default

Quote:
quote:Originally posted by Dj Kat
 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
Code:
<button onclick="findPos('foto4')">Test</button>
Yeah I meant there was a error on that line XD

and OMG ! it works... I'm so stressed :P
I tried it with double quotes, but I had to use singe ones like you are saying now...
So thnx again, very much :)
I can Finally go on now :)
__________________________________________________ ________
I am DJ Kat...that's my name. Its a D and a J and a Kat with a K.





Similar Threads
Thread Thread Starter Forum Replies Last Post
Moving an ellipse ironchef Java GUI 0 November 2nd, 2006 06:20 PM
Moving Tags stefan.yu XSLT 1 February 22nd, 2006 03:44 PM
moving around a page ozPATT Excel VBA 1 October 17th, 2005 02:42 AM
Need help moving my database seanmayhew BOOK: ASP.NET Website Programming Problem-Design-Solution 1 December 30th, 2004 05:00 PM
moving a column p_gauri7 Crystal Reports 6 December 20th, 2004 03:27 PM





Powered by vBulletin®
Copyright ©2000 - 2020, Jelsoft Enterprises Ltd.
Copyright (c) 2020 John Wiley & Sons, Inc.