I know iframes are so yeaterday but I need to implement something quick and my development team are struggling to make this work:
We have a landing page hosted on our website . Size 900px x 2000px
Within this we have an Iframe which has a website form that is hosted by a third party companies website. (subscription company). Size of form 900 x 500 px
Once a customer has filled out their name/email address/home addresses etc they click proceed to another third parties website (payment provider company)
Upon clicking proceed above the page shown next is hosted by the payment providers website and their form is much larger 900px x 1250px then previous website form.
Upon successful payment the payment provider then links back to the thank you page hosted on the subscription companies website . Size 900px x 500px.
I want to achieve all of this linking to other pages hosted on two different domains in a seamless user journey, which means I want visitors to our site to remain on our site and not have them go through this sign up process in multiple windows.
I was hoping to use something like an auto height detection for an Iframe so height is adjusted as I can ensure width remains constant but am struggling to find a solution .
We are running out of time to develop something as we only have till next week to develop this ..... This is my first post here and I am really hoping someone can guide me in right direction. If you need further info let me know .
Here's to hoping someone will have a solution.
Thanks in advance
Sunny
Page 1 of 1
Iframe resizing for multiple domains Landing page with form and payment page hosted by 3rd party
#2
Posted 17 January 2012 - 07:11 AM
Iframes usually have to have a fixed height. However, I googled iframe auto height and this was the first item:-
http://www.sitepoint...AME-Auto-Height
and another
http://www.frontpage.../m-89000/tm.htm
They are slightly different situations but it might help.
Reading the posts it seems that javascript will adjust the height for the first inserted page, but cannot do it again for a linked page from the inserted page.
Also, this post reckons it will do it using a special toolbar:-
http://www.amirharel...iframe-toolbar/
resizeIframe
In order to solve the 100% height bug i’m going to calculate the exact height that i need to set teh iframe. to do so, i’ll use the following logic:
iframe height = window height – toolbar height
Otherwise you haven't got much option but to make the iframe the height of the longest inserted page and accept a blank space under the shorter pages
http://www.sitepoint...AME-Auto-Height
and another
http://www.frontpage.../m-89000/tm.htm
They are slightly different situations but it might help.
Reading the posts it seems that javascript will adjust the height for the first inserted page, but cannot do it again for a linked page from the inserted page.
Also, this post reckons it will do it using a special toolbar:-
http://www.amirharel...iframe-toolbar/
resizeIframe
In order to solve the 100% height bug i’m going to calculate the exact height that i need to set teh iframe. to do so, i’ll use the following logic:
iframe height = window height – toolbar height
Otherwise you haven't got much option but to make the iframe the height of the longest inserted page and accept a blank space under the shorter pages
This post has been edited by Wickham: 17 January 2012 - 07:25 AM
- ← How to implement FAQs in my Weebly based site
- CSS, XHTML/HTML & JavaScript
- jQuery scrollable navigation →
Share this topic:
Page 1 of 1
Help















