www.webdeveloper.com
Results 1 to 11 of 11

Thread: Help with iframe Resizing

  1. #1
    Join Date
    Feb 2012
    Location
    Southern Sweden
    Posts
    7

    Unhappy Help with iframe Resizing

    Hello All!

    I am in the frustrated position of trying to create a re-sized height of an iframe sandwiched in between fixed dimension areas.

    Please see the image @ http://www.bcw.se/image_resources/iframe_help_01.png for reference of the goal and current state of my mission. I also pasted in the code that I used to create it below. As you can see the iframe is not expanding beyond a set standard I presume.

    THE CODE:

    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    
    </head>
    
    <body style="width:1024px; height:100%; line-height:175%; margin:auto; font-family:Verdana, Geneva, sans-serif; font-size:13px; background:#003; color:#CCC;">
    
    <!-- Header Area --><table width="100%" height="125" bgcolor="#003366" style="margin-top:0px; border-collapse:collapse;"></table>
    
    <!-- Menu Area --><table width="100%" height="30" bgcolor="#006699" style="margin-top:10px; border-collapse:collapse;"></table>
    
    <!-- Framed Content, FLEXIBLE RESIZED TO FIT THE SCREEN... I WISH!! --><table width="1024" height="100%" bgcolor="#003366" style="border-collapse:collapse;">
    <div style="margin-left:10px; margin-top:10px; position:relative;">
    <iframe src="http://www.ikea.se" width="1002" height="100%" scrolling="yes" style="border-radius: 0.3em 0.3em 0.3em 0.3em; border-collapse:collapse; position:relative;" ></iframe>
    </div>
    </table>
    
    <!-- Footer Area --><table height="50px" width="1024" bgcolor="#006699" style="margin-top:10px;"></table>
    
    </body>
    </html>

    Obviously the iframed content is en example page, so I am not looking to have an IKEA web page iframed, but I am wanting to have another complete webpage iframed and have the scrollbar only within the iframe area.

    As my handle suggests I am a novice developer playing for my own interest and benefit, so feel free to talk simply and down to me. All highly technical responses will likely give me a bloody nose.

    At any rate, thanks in advance!

    /Brian

  2. #2
    Join Date
    Feb 2012
    Posts
    61
    hi,
    add below style in head......
    <style type="text/css">
    html, body, div, iframe { margin:0; padding:0; height:100%; }
    </style>
    and remove the iframe container <table>
    its working.....
    below is the code..... hope it will be helpful 2 u...

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css">
    html, body, div, iframe { margin:0; padding:0; height:100%; }
    </style>
    </head>

    <body style="width:1024px; height:100%; line-height:175%; margin:auto; font-family:Verdana, Geneva, sans-serif;

    font-size:13px; background:#003; color:#CCC;">

    <!-- Header Area --><table width="100%" height="125" bgcolor="#003366" style="margin-top:0px;

    border-collapse:collapse;"></table>

    <!-- Menu Area --><table width="100%" height="30" bgcolor="#006699" style="margin-top:10px;

    border-collapse:collapse;"></table>

    <!-- Framed Content, FLEXIBLE RESIZED TO FIT THE SCREEN... I WISH!! -->
    <div style="margin-left:10px; margin-top:10px; position:relative;">
    <iframe src="http://www.ikea.se" width="1002" height="100%" scrolling="yes" style="border-radius: 0.3em 0.3em 0.3em 0.3em;

    border-collapse:collapse; position:relative;" ></iframe>
    </div>


    <!-- Footer Area --><table height="50px" width="1024" bgcolor="#006699" style="margin-top:10px;"></table>

    </body>
    </html>

  3. #3
    Join Date
    Feb 2012
    Location
    Southern Sweden
    Posts
    7

    Unhappy Still running into troubles

    Hello jadhav.soma!

    Thanks for your reply! I cannot get the result though.

    The iframe resizes to 100% of the screens resolution perfectly fine, but there in lies the problem. It resizes to the entire screens height dimension and not to the remaining height dimension.

    So the iframe runs off the screen and under or over the footer area depending upon if the footer's position is fixed or not.

    I have been surfing a lot and found that many forum posts suggest a javascript type solution. Though, with risk of overstating the obvious, my coding is at a fetal stage, and my jscript coding has not even been conceived yet.

    I continue my quest, thanks again though!

    /Capt Newbie

  4. #4
    Join Date
    Feb 2012
    Posts
    61
    i didn't get you???

  5. #5
    Join Date
    Feb 2012
    Location
    Southern Sweden
    Posts
    7
    Hello again!

    The iframe, on my computer at any rate, stretches to 100% of the window's total height. And what I need is: 100% minus the [header height], [menu height] and [footer height].

    Taking my sample as en example, the header, menu, footer and margins come to 235px (if I can add). So I need the iframe to fill in [100% - 235px.]

    When I try fixes that re-size the iframe to 100% it stretches it to the widow's max height; and not the remaining height after taking away the 235px.

    At least that is how it is showing on my machines.

    Hope that was a little be explanation.

    /Capt Dumbass .... I mean Newbie

  6. #6
    Join Date
    Feb 2012
    Posts
    61

    Cool

    thank you for details given....

    can you manage this using % (percentage) like below code...

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css">
    html, body, div, iframe { margin:0; padding:0; height:100%; }
    </style>
    </head>

    <body style="width:1024px; height:100%; line-height:175%; margin:auto; font-family:Verdana, Geneva, sans-serif;

    font-size:13px; background:#003; color:#CCC;">

    <!-- Header Area --><table width="100%" height="22%" bgcolor="#003366" style="margin-top:0px;

    border-collapse:collapse;"></table>

    <!-- Menu Area --><table width="100%" height="6%" bgcolor="#006699" style="margin-top:10px;

    border-collapse:collapse;"></table>

    <!-- Framed Content, FLEXIBLE RESIZED TO FIT THE SCREEN... I WISH!! -->
    <div style="margin-left:10px; margin-top:10px; position:relative;height:62%">
    <iframe src="http://www.ikea.se" width="1002" height="100%" scrolling="yes" style="border-radius: 0.3em 0.3em 0.3em 0.3em;

    border-collapse:collapse; position:relative;" ></iframe>
    </div>


    <!-- Footer Area --><table height="10%" width="1024" bgcolor="#006699" style="margin-top:10px;"></table>

    </body>
    </html>

  7. #7
    Join Date
    Feb 2012
    Location
    Southern Sweden
    Posts
    7
    Hey hey!!

    We have a heart beat! So close now...

    I noticed what you did with the height of the <iframe>'s <div> being 62%.

    Using deductive logic, the 235px is equal to 38%.

    I then was curious to find that the 100% is equal to approximately 620px.

    Ergo the 62% is equall to approx. 385px.

    Can I ask why the 62%? Is the 620px the key to things?

    also I noticed that there still existed a scroll bar on the right hand side of the window, so I played with the % a little and added a "hidden" overflow to the body style. the footer get cliped a hair, but I could massage the % even more I suppose.

    So oh wise wizzard of html, I think you can come up with the best possible solution without using j-script or other coding.

    So how did you come up with the 62%?

    /Capt Hopefull

  8. #8
    Join Date
    Feb 2012
    Location
    Southern Sweden
    Posts
    7

    Next stop: Idiot-ville. Population: me!

    God I am an idiot.... I see what you did, you divided the entire document heights from 100%.

    DUH!

    Unfortuntely that won't do me because the header, menu and footer have set graphic elements, darn it all.

    So close there...

  9. #9
    Join Date
    Feb 2012
    Posts
    61
    hi,

    you can decrease margin as you given top & bottom it will less your right main scroll ...........
    sorry for my bad english.....

    OR other than this scroll is appeared only becoz of top/bottom margin you can manage this top & bottom space using padding and then solve our problem ..(hide the scroll)..


    you can do it...
    Thnks,
    Som

  10. #10
    Join Date
    Feb 2012
    Location
    Southern Sweden
    Posts
    7

    Talking Think I got it now...

    So... after much toiling, I think I found the solution.

    I am going to use <frameset> html tags, an outline of the code is:

    HTML Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
       "http://www.w3.org/TR/html4/frameset.dtd">
    <HTML>
    <HEAD>
    <TITLE>Title</TITLE>
    </HEAD>
    
    <FRAMESET rows="125, 30, 1*, 50" framespacing="10" frameborder="0" >
    
    <!--HEADER-->
      <frame src="header.html" > 
    
    <!--MENU-->  
      <frame src="menu.html">
    
    <!--RESIZE CONTENT-->  
      <frame src="flexible_content.html">
    
    <!--FOOTER-->  
      <frame src="footer.html">
      
    </FRAMESET>
    
    <noframes></noframes>
    
    </HTML>
    The header, menu, resizable content and footer will be separate html files.

    The resizable <iframe> exists with no other elements within it's HTML file and is set to 100% height fixed to fill the html. the 100% then fills the 3rd frame nicely.

    A sample <iframe> html file is as here:

    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    </head>
    
    <body style="height:100%; margin:auto; width:1024px;">
    
    <table width="1024" height="100%" style="margin:auto;">
    
    <div style="margin-left:10px;>
    <iframe src="http://www.samplewebpage.se" width="1002" height="99%" scrolling="auto" style="border-radius: 0.35em 0.35em 0.35em 0.35em; border-collapse:collapse; position:fixed; bottom:2px;"></iframe>
    </div>
    
    </table>
    </body>
    </html>
    All preliminary testing and indications that this is the way to go. All the links from the "samplewebpage.se" are working fine (although I haven't tried any external links yet).

    Now I can move on with the project at last.

    Thanks Som for taking a little time out to lend me a hand!

    /Capt Possitive

  11. #11
    Join Date
    May 2005
    Location
    Gold Coast (MS)
    Posts
    2,216

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

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



Recent Articles