1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Quick Question On Iframes And Embedded Webpages

Discussion in 'HTML & Website Design' started by adityam, Feb 4, 2013.

  1. #1

    When embedding a url into iframe how do you set the height equal to the height of the web page?


    Current code is this
    <iframesrc="http://tutsplus.com/course/30-days-to-learn-html-and-css/"width=1100height=5000onLoad="window.parent.scroll(0,0);"></iframe>
    See the problem when you scroll down to the bottom of this page.
    adityam, Feb 4, 2013 IP
  2. joshwebguy

    joshwebguy Active Member

    Messages:
    21
    Likes Received:
    0
    Best Answers:
    1
    Trophy Points:
    61
    #2
    Are you wanting the iframe to be the height of the page it is embedded within or the height of the page being displayed within the iframe?
    joshwebguy, Feb 5, 2013 IP
  3. adityam

    adityam Greenhorn

    Messages:
    3
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    21
    #3
    Hey Josh - the height of the image being displayed in the frame. Any help would be greatly appreciated!!

    Thanks
    adityam, Feb 5, 2013 IP
  4. wetkon

    wetkon Member

    Messages:
    64
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    41
    #4
    Tough, that is depening on Screen Resolution too, but i found a good solution for you! Please follow this steps:

    1. Add this code, to your <head></head> Section:
    <script type="text/javascript"> function autoIframe(frameId) { try{ frame = document.getElementById(frameId); innerDoc = (frame.contentDocument) ? frame.contentDocument : frame.contentWindow.document; objToResize = (frame.style) ? frame.style : frame; objToResize.height = innerDoc.body.scrollHeight + 10+'px'; } catch(err){ window.status = err.message; } } </script>

    2. In Body Tag: Please add this: onload="autoIframe('myiframe');"

    3.
    <iframe src="......tutsplus.com/course/30-days-to-learn-html-and-css/" marginwidth="0" marginheight="0" frameborder="0" vspace="0" hspace="0" width="100%" height="620" style="min-height:100%"></iframe>



    I am sure that Will do a Great a Job for you!
    wetkon, Feb 5, 2013 IP
  5. wetkon

    wetkon Member

    Messages:
    64
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    41
    #5
    sorry for red Text....
    wetkon, Feb 5, 2013 IP
  6. adityam

    adityam Greenhorn

    Messages:
    3
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    21
    #6
    Hey tried to implement this code - however the iFrame now simply has a height of 620, not the height of the page

    Thanks
    adityam, Feb 5, 2013 IP
  7. wetkon

    wetkon Member

    Messages:
    64
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    41
    #7
    Let me explain, i tried hard to find a way, but i think no good options are available!

    So if we take this a Globally, People use Laptop most off, or you can say people use 1368x786 something resolution, or 1368x6**, so in that way make this in full width screen and make this in height as per your screen height,

    Also if you give height more then screen height, then it will show 2 Scroll Bars, so better to use a good height option!

    And it will be good to go!

    Thanks
    wetkon, Feb 5, 2013 IP
  8. joshwebguy

    joshwebguy Active Member

    Messages:
    21
    Likes Received:
    0
    Best Answers:
    1
    Trophy Points:
    61
    #8
    Well. This has to be achieved by first finding the scroll height of the page being loaded in, then applying it using Javascript to the iframe. Only problem is it looks like you are trying to load in a page that is NOT on your own domain... so it's not going to work. You are locked out of getting that info cross-site.

    If you were loading in a page that is on the same domain, you'd be all good and would do it like this:

    HTML:
    1. <body onload="setHeight();">
    2.  
    3. <script type='text/javascript'>
    4.    
    5. function setHeight() {
    6.     parent.document.getElementById('awesome-iframe').height = document['body'].scrollHeight;
    7. }
    8.  
    9.  
    10. <iframe src="iframe.html" class="iframe" scrolling="no" frameborder="0" id="awesome-iframe"></iframe>
    11.  
    12. </body>
    Last edited by a moderator: Feb 8, 2013
    joshwebguy, Feb 8, 2013 IP
  9. BillyBOBqwwe

    BillyBOBqwwe Peon

    Messages:
    1
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    1
    #9
    Hey, I am having a similar issue! I have a google forms sheet that is long, when submit is pressed the confirmation is at the top. I found this forum and tried to use the code, but it hasn't worked. Am I doing something wrong? Here is the code (actual src form edited to keep anonymity):


    <iframe src="https://docs.google.com/forms/d/1xTjBmneSEL_i4mfPjeP0S6NoP0lIOaP1sySWZ7M/viewform?embedded=true" width="600" height="2100" frameborder="0" marginheight="0" marginwidth="0"onload="window.parent.scroll(0,0)>"</iframe>


    Summary: I need page to scroll to top after pressing submit so that ppl can see the confirmation, the onload thing I think I am putting in wrong!

    Thanks!
    BillyBOBqwwe, Nov 21, 2013 IP