Iframe and scrollto

I have an iframe embedded half way down a longish webpage.

The iframe itself is long with a form that when submitted displays a new page within the iframe.

The problem is the new page in the iframe shows a big white void. You have to scroll up the main page till you get to the top of the iframe. Then you see the results.

I understand the problem and can use scrollto to get to the top of the main page but unfortunately this means you have to scroll down to the iframe.

What I was trying to do if poss is: Put a named anchor just above the iframe tag. Use scrollto or similar in the page that loads within the iframe to jump to the anchor. This would bring the user up the page to where the iframe starts.

My client does not want scroll bars and wont let me place the iframe at the top of thepage. Sorry for the essay, I hope I am making sense. Does anyone know if this can be done.

many thanks

Jon

Hi there,

It sounds like the problem is the size of the iframe, it’s long when the form is present but when submitted the iframe is much larger than the content.

It sounds like after you submit you want to scroll the parent to the top of the iframe and shrink the iframe’s height. If you have access to both pages, this isn’t too difficult.

// in the parent page
function resizeIframe(height) {
  window.location = '#iframe';
  $('#iframe').height(height);
}

// script in the iframes submit page
parent.resizeIframe(document.body.scrollHeight);

That will only work if both pages are hosted on the same domain.
Otherwise you can use window.postMessage() method to avoid cross-origin restrictions.

HI Mark, thanks for your reply. Where would I place this code on the submit form? parent.resizeIframe(document.body.scrollHeight);

Thanks Mark

Jon

At the bottom of page that the form submits to.

Hi Mark, this seems to load the submit page out of the iframe. It also stops my post data getting to the page as my page displays my “No Records Found” message.

I placed the parent.resizeIframe(document.body.scrollHeight); code at the bottom of the page that is posted to form the first page in the iframe.

The function, I placed above the iframe tag on the page that has the iframe on it.

I should point out perhaps that this iframe is in a wordpress site.

Thanks for your help Mark.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.