Resizable IFRAME in a div

[ChrisRChamberlain]

Hi all

Would like to create a webpage based on faq215-6195 whereby the only the 'content' div scrolls but also have only an IFRAME within the 'content' div.

Not sure how you can get the IFRAME to automatically resize within the div.

Ideas please?

TIA

FAQ184-2483​

Chris
PDFcommander.com
motrac.co.uk

 

[Vragabond]

Isn't that just doubling things? Why is it that you can't make an iframe of specific size that scrolls? It seems to me that that is what iframes do.

[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]

 

[vacunita]

I'm a little confused. You say you want to base it on the Alternative to Frames? but then you want to use a Frame? Kind of defeats the purpose of going to all the trouble of not using Frames to end up using one.

Frames are designed to Scroll the content within them, trying to make them adjust themselves to their content or a surrounding element requires Javascript.

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

 

[ChrisRChamberlain]

Vragabond, vacunita

Thanks for your replies

If you replace the 'content' div with an IFRAME, you then have both the browser and IFRAME scrolling whereas the desired effect is to have just the one part of the page scrolling which is what the code posted in the FAQ produces.

The FAQ produces a webpage with the required behaviour except it would be preferable to replace the content of the div or IFRAME rather than navigate to another page.

FAQ184-2483​

Chris
PDFcommander.com
motrac.co.uk

 

[vacunita]

The Page will only scroll if its larger than the browsers view port.

If you only want to scroll the section inside the DIV then, design your page so that it is no bigger then the browser view port.


If your General page is larger than the view port having a Div or having a iframe will still produce 2 scroll bars.

As far as the content goes, if you don't have a server side language or even an ajax interaction that can change the content of the DIV dynamically (which is the usual method), then yes, likely an iframe is what you want.

But again you would require some Javascript to have it extend to accommodate its content, and even then its not 100% functional.

Javascript could also be used to load content into the DIV dynamically if you need to, though it may end up being a bit more bloated, than having a server side language do the replacement.





----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

 

[Vragabond]

Let's assume your html and body elements have height of 100%. Your content div as well, occupying the entire browser viewport. If you put an iframe into this setup with a width and height of 80%, the iframe will take up 80% of the width, 80% of the height and will scroll when there's more content within it. There will be no other scrollbar.

[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]

 

[ChrisRChamberlain]

Vragabond

<style type="text/css">
 body{
  margin:0;
  padding:100px 0 0 150px;
  background:#ccc;
 }
 div#header{
  position:absolute;
  top:0;
  left:0;
  width:500%;
  height:100px;
  background:#999;
  color: #000;
 }
 div#left-sidebar{
  position:absolute;
  top:100px;
  left:0;
  width:150px;
  background:#ccc;
  color: #000;
 }
 div#content{
  background:#fff;
 }
 @media screen{
  body>div#header{
   position:fixed;
  }
  body>div#left-sidebar{
   position:fixed;
  }
 }
 * html body{
  overflow:hidden;
 }
 * html div#content{
  height:100%;
  overflow:auto;
 }
</style>

I've tried modifying this code as per your suggestion without being able to produce the required effect.

Would appreciate it if you could indicate where the changes should be made.

TIA

FAQ184-2483​

Chris
PDFcommander.com
motrac.co.uk