Wrox Programmer Forums

Need to download code?

View our list of code downloads.

Go Back   Wrox Programmer Forums > Web Programming > JavaScript > Javascript How-To
Password Reminder
Register
Register | FAQ | Members List | Calendar | Search | Today's Posts | Mark Forums Read
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 tens of thousands of software programmers and website developers including Wrox book authors and readers. As a guest, you can read any forum posting. By joining today you can post your own programming questions, respond to other developers’ questions, and eliminate the ads that are displayed to guests. Registration is fast, simple and absolutely free .
DRM-free e-books 300x50
Reply
 
Thread Tools Search this Thread Display Modes
  #1 (permalink)  
Old March 3rd, 2007, 11:07 AM
Authorized User
 
Join Date: Mar 2007
Location: , , .
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

Reply With Quote
  #2 (permalink)  
Old March 3rd, 2007, 11:40 AM
Authorized User
 
Join Date: Mar 2007
Location: , , .
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
                }

Reply With Quote
  #3 (permalink)  
Old March 6th, 2007, 10:11 AM
Friend of Wrox
 
Join Date: Nov 2005
Location: Rotterdam, , Netherlands.
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.
Reply With Quote
  #4 (permalink)  
Old March 7th, 2007, 01:29 PM
Authorized User
 
Join Date: Mar 2007
Location: , , .
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


Reply With Quote
  #5 (permalink)  
Old March 7th, 2007, 02:16 PM
Authorized User
 
Join Date: Mar 2007
Location: , , .
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 " ??

Reply With Quote
  #6 (permalink)  
Old March 7th, 2007, 03:30 PM
Authorized User
 
Join Date: Mar 2007
Location: , , .
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 :(

Reply With Quote
  #7 (permalink)  
Old March 7th, 2007, 04:24 PM
Friend of Wrox
 
Join Date: Nov 2005
Location: Rotterdam, , Netherlands.
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.
Reply With Quote
  #8 (permalink)  
Old March 7th, 2007, 05:03 PM
Authorized User
 
Join Date: Mar 2007
Location: , , .
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.
Reply With Quote
Reply


Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is Off
HTML code is Off
Trackbacks are Off
Pingbacks are On
Refbacks are Off


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



All times are GMT -4. The time now is 10:07 AM.


Powered by vBulletin®
Copyright ©2000 - 2019, Jelsoft Enterprises Ltd.
© 2013 John Wiley & Sons, Inc.