Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations strongm on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Locking position of iframe

Status
Not open for further replies.
Luongo1

Luongo1

Programmer
Oct 13, 2006
52
CA
Hi, I'm working on a project which includes an iframe that can be scrolled both vertically and horizontally. The basic purpose is for the user to be able to create an image map - on each click, the image in the iframe refreshes itself with red dots on the click coordinates and lines connecting the dots.

This is working fine - however, my problem is that each time the iframe refreshes it goes back to the default starting position, whereas I would like it to refresh and load at the position where the user is working. Is there any way to "lock" the position of the page in the iframe based on where the user clicks or achieve something similar?
 
Sort by date Sort by votes
When the images refreshes -that's server side, right? So you can send & return the scroll position back and forth.

To get the scroll pos, you can use:

document.body.scrollLeft;
document.body.scrollTop;

or:

window.pageXOffset;
window.pageYOffset;

To set the scroll pos you can use:

window.scrollBy(x,y);
 
Upvote 0 Downvote
Thanks for your reply dkdude. However, do you know how I could set this to work with the iframe? Right now, because the actual page in the iframe fits within a regular browser window, the scrollBy has no effect. However I would like the iframe itself to be scrolled - can't seem to get this function to do it. Thanks...
 
Upvote 0 Downvote
As a followup, would it be best to just force an increase in the height and width of the page in the iframe? Doesn't seem like the best option but it might get the job done...
 
Upvote 0 Downvote
No this does not seem to do it. I increased the iframe page to make it bigger than the browser window, and inserted the code into the <body> tag of the iframe page, but didn't seem to have an effect.

Sorry for the multiple posts here....
 
Upvote 0 Downvote
hmmm ... how about

window.scrollTo(x,y);

You shoul be able to calculate the relative positions I guess.
 
Upvote 0 Downvote
Luongo1, there's a few thing you're leaving out of your post. Are you calling the function from the code in the iframe, or are you trying to call it from the parent container page? For my example I'll assume that the code is being called from the parent and the frame you want to scroll is the first frame on the page, and that the img you're referencing has an id of "myImg":
Code: 
document.frames[0].getElementById("myImg").scrollIntoView();

-kaht

[small](All puppies have now found loving homes, thanks for all who showed interest)[/small]
 
Upvote 0 Downvote
Okay, sorry for the confusion. I managed to get dkdude's original ScrollBy function working in the framed page. There were a couple of <nobr> tags in the code that I removed and that seemed to get it working. My only problem now is how to pass the current scroll locations to the new page, so that it loads to that spot. I assume I have to send them as variables in the URL? If so, the URL also contains a few PHP variables so it might be difficult to combine...
 
Upvote 0 Downvote
If you use my solution you don't have to worry about all that stuff [smile]

-kaht

[small](All puppies have now found loving homes, thanks for all who showed interest)[/small]
 
Upvote 0 Downvote
Hi kaht. The problem is the image itself is very big - I'm basically using the iframe to navigate across the image, and would like it to load at certain coordinates depending on where the user wants. Unfortunately I guess this complicates things a bit...
 
Upvote 0 Downvote
Alternatively, maybe instead of trying to pass that info in the URL, could I create two hidden form fields that would contain these variables, and then read them on the next page? If so how could I get the fields to update themselves based on this info?

Thanks again...
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

Mike Lewis
  • Locked
  • Question
Anyone here got any experience of Grid.JS (a sortable Javascript grid) 1
Replies
5
Views
714
Mike Lewis
Mike Lewis
jomat
  • Locked
  • Question
JS to show the timer in html under title instead of in the status bar
Replies
2
Views
352
xwb
xwb
malpa
  • Locked
  • Question
Graph the selection of a html table row
Replies
0
Views
321
malpa
malpa
coldbohemia
  • Locked
  • Question
jquery function always returns contents of the same table cell, no matter which table cell i click
Replies
0
Views
286
coldbohemia
coldbohemia
CrxC01
  • Locked
  • Question
Sum of All Primes
Replies
0
Views
84
CrxC01
CrxC01

Part and Inventory Search

Sponsor

Back
Top