SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Zealot
    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.

  2. #2
    Theoretical Physics Student bronze trophy Jake Arkinstall's Avatar
    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

  3. #3
    SitePoint Zealot
    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?

  4. #4
    Guru in training bronze trophy SoulScratch's Avatar
    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?
    Cross browser css bugs

    Dan Schulz you will be missed

  5. #5
    Design Your Site Team bronze trophy Erik J's Avatar
    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

  6. #6
    SitePoint Zealot
    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.

  7. #7
    Guru in training bronze trophy SoulScratch's Avatar
    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>
    Cross browser css bugs

    Dan Schulz you will be missed

  8. #8
    SitePoint Zealot
    Join Date
    Jan 2007
    Posts
    130
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Thanks SoulScratch! that does the trick.

  9. #9
    Guru in training bronze trophy SoulScratch's Avatar
    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);
    	    }
    	}
        }
    }
    Cross browser css bugs

    Dan Schulz you will be missed


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •