SitePoint Sponsor |
|
User Tag List
Results 1 to 9 of 9
-
Jan 3, 2009, 11:30 #1
- Join Date
- Jan 2007
- Posts
- 130
- Mentioned
- 1 Post(s)
- Tagged
- 0 Thread(s)
This Iframe Problem is Driving me Crazy...
Hi, this iframe problem is driving me crazy, but I don't know IF there is a solution to this problem.
Here are the facts...
I am loading a form that has multiple pages inside an iframe.
I don't have control over the page inside the iframe tag, I only control the iframe page itself.
The iframe has a fixed height because I don't want the iframe itself to show a scrollbar, only the browser should show a scrollbar.
Now here's the problem...
When I scroll down a form page and press submit, the next page loads but the scrollbar remains in the "down scrolled" position.
This results is that the user is already halfway down the form when arriving on the next page.
I created an example here that illustrates the problem: http://allmarketing.com/iframe/iframe.html
The solution I'm looking for is...
I want the browser scrollbar to jump to the top everytime a new page is loaded in the iframe (I can't use a frameset because I need to be able to float graphics on top of the form page).
If you can come up with a workable solution for this I'd be very grateful. I need to get this done fast, and hope it's possible.
If you have any questions feel free to ask.Last edited by jeanpaul1979; Jan 3, 2009 at 13:24.
-
Jan 3, 2009, 11:56 #2
- Join Date
- May 2006
- Location
- Lancaster University, UK
- Posts
- 7,062
- Mentioned
- 2 Post(s)
- Tagged
- 0 Thread(s)
Have you tried appending #top to the URL?
Jake Arkinstall
"Sometimes you don't need to reinvent the wheel;
Sometimes its enough to make that wheel more rounded"-Molona
-
Jan 3, 2009, 12:45 #3
- Join Date
- Jan 2007
- Posts
- 130
- Mentioned
- 1 Post(s)
- Tagged
- 0 Thread(s)
Just tried that, it doesn't work. I think this problem might be easier solved with Javascript. If a mod reads this, can you please move it to the JS forum?
-
Jan 3, 2009, 12:46 #4
- Join Date
- Apr 2006
- Location
- Maryland
- Posts
- 1,838
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Did the scrollTo(0,0) method not work, with the function I supplied to dynamically generate an iframe?
-
Jan 3, 2009, 13:11 #5
- Join Date
- May 2007
- Location
- Countryside, Sweden
- Posts
- 3,407
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Maybe just add the target attribute in the link to the next page ?
Code:target="_top"
Edit:
But the appending #top (href="next.html#top") arkinstall suggested would be preferred and should work the same.Happy ADD/ADHD with Asperger's
-
Jan 3, 2009, 13:36 #6
- Join Date
- Jan 2007
- Posts
- 130
- Mentioned
- 1 Post(s)
- Tagged
- 0 Thread(s)
The probem is that I have no control over the content inside the page that is loaded by the iframe, and #top might be working for the first page, but when I click inside the first page loaded inside the iframe click to load the second page in the iframe it doesn't work.
-
Jan 3, 2009, 13:46 #7
- Join Date
- Apr 2006
- Location
- Maryland
- Posts
- 1,838
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Code:<iframe target="_top" src="page1.html" width="800" height="10000" scrolling="auto" frameborder="0" style="z-index:100;"></iframe> <script> (function() { var frame = document.getElementsByTagName('iframe')[0]; frame.onload = function() { window.parent.scrollTo(0,0); } })(); </script>
-
Jan 3, 2009, 14:38 #8
- Join Date
- Jan 2007
- Posts
- 130
- Mentioned
- 1 Post(s)
- Tagged
- 0 Thread(s)
Thanks SoulScratch! that does the trick.
-
Jan 3, 2009, 17:41 #9
- Join Date
- Apr 2006
- Location
- Maryland
- Posts
- 1,838
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
The amended code to account for IE and it not liking invalid markup or invalid script code in an iframe:
Code:onload = function() { var frame = document.getElementsByTagName('iframe')[0]; frame.onload = function() { window.scrollTo(0,0); } var msie = /*@cc_on!@*/false; if ( msie ) { frame.onreadystatechange = function() { if ( frame.readyState == 'complete' ) { window.scrollTo(0,0); } } } }
Bookmarks