iFrame height

Is there a way with adding an extended attribute to make the iframe
extend to the height of it’s content?

What I’m after is to remove the vertical scroll so that whichever page
is displayed within it, it would extend down to accomodate the content
stopping the need for the scroll bar.

Or, will it have to ba hand-coded and added as a mark up item - would
this work?

Nathan Garner
Partner

Austin Wells Design Consultants
1 Elmgate Drive, Littledown, Bournemouth BH7 7EF
+44 (0)1202 301271
email@hidden
http://www.awdc-creative.com

Member of NAPP


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

You have to do this with JavaScript, you can’t do it within HTML/css. Have a Google for “javascript resize iframe” and pick what looks likely; if you get stuck, post your attempt somewhere on a server and I’ll get my tow-rope!

Walter


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Cheers Walter, I’ll give it a go.

Nathan Garner
Partner

Austin Wells Design Consultants
1 Elmgate Drive, Littledown, Bournemouth BH7 7EF
+44 (0)1202 301271
email@hidden
http://www.awdc-creative.com

Member of NAPP

On 15 May 2009, at 14:08, waltd wrote:

You have to do this with JavaScript, you can’t do it within HTML/
css. Have a Google for “javascript resize iframe” and pick what
looks likely; if you get stuck, post your attempt somewhere on a
server and I’ll get my tow-rope!

Walter


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

This worked an absolute treat…

Just had to change the width in the code to suit my page and put the
new URL in.

Nathan Garner
Partner

Austin Wells Design Consultants
1 Elmgate Drive, Littledown, Bournemouth BH7 7EF
+44 (0)1202 301271
email@hidden
http://www.awdc-creative.com

Member of NAPP

On 15 May 2009, at 14:08, waltd wrote:

You have to do this with JavaScript, you can’t do it within HTML/
css. Have a Google for “javascript resize iframe” and pick what
looks likely; if you get stuck, post your attempt somewhere on a
server and I’ll get my tow-rope!

Walter


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Excellent!

Walter

On May 15, 2009, at 10:38 AM, Nathan Garner wrote:

This worked an absolute treat…

Resize iframe according to page contents - atguy.com

Just had to change the width in the code to suit my page and put the
new URL in.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

The iFrame height resizing worked perfectly… until another page
within the iFrame is clicked on. The iFrame doesn’t resize, it would
only resize if the parent is reloaded, but that would only bring up
the original iFrame content again.

Nathan Garner
Partner

Austin Wells Design Consultants
1 Elmgate Drive, Littledown, Bournemouth BH7 7EF
+44 (0)1202 301271
email@hidden
http://www.awdc-creative.com

Member of NAPP

On 15 May 2009, at 16:10, Walter Lee Davis wrote:

Excellent!

Walter

On May 15, 2009, at 10:38 AM, Nathan Garner wrote:

This worked an absolute treat…

Resize iframe according to page contents - atguy.com

Just had to change the width in the code to suit my page and put
the new URL in.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

You’ll need to change your function a little, and add a periodical
executer (Prototype-speak for a robot that runs a function over and
over).

Either link Prototype to your page head, or use the Protaculous Action
to add it to your page. Then the function you were using will need to
change a little bit (it will get simpler and more compact, because
Prototype does all the deep knee bends for you):

var elm = $('the_iframe');
var calcHeight = function(){
	var h = elm.contentWindow.document.body.scrollHeight;
	elm.height = h;
	return h;
};

Now if you’re not using Protaculous, you’ll need to wrap the following
function around the function that follows, but if you’re using
Protaculous, you can skip this and move to the third function block on
the page.

document.observe('dom:loaded',function(){
	//insert next function here
});

Now, we set up the robot to keep checking the height and adjusting it
if it’s different. If you’re using Protaculous, at this point you
would click on the top-most of the Function Body buttons, which places
the code you enter inside a function exactly like the one above.

new PeriodicalExecuter(calcHeight,1);

As promised, very compact and succinct and perfessional looking. What
this does is watch the iframe like a hawk, once a second, and if the
content changes height, so will the iframe.

Walter

On May 21, 2009, at 9:45 AM, Nathan Garner wrote:

The iFrame height resizing worked perfectly… until another page
within the iFrame is clicked on. The iFrame doesn’t resize, it would
only resize if the parent is reloaded, but that would only bring up
the original iFrame content again.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Wow, I will have a play. Thank you Walter. Will post back the finished
article.

Nathan Garner
Partner

Austin Wells Design Consultants
1 Elmgate Drive, Littledown, Bournemouth BH7 7EF
+44 (0)1202 301271
email@hidden
http://www.awdc-creative.com

Member of NAPP

On 21 May 2009, at 23:24, Walter Lee Davis wrote:

You’ll need to change your function a little, and add a periodical
executer (Prototype-speak for a robot that runs a function over and
over).

Either link Prototype to your page head, or use the Protaculous
Action to add it to your page. Then the function you were using will
need to change a little bit (it will get simpler and more compact,
because Prototype does all the deep knee bends for you):

var elm = $('the_iframe');
var calcHeight = function(){
	var h = elm.contentWindow.document.body.scrollHeight;
	elm.height = h;
	return h;
};

Now if you’re not using Protaculous, you’ll need to wrap the
following function around the function that follows, but if you’re
using Protaculous, you can skip this and move to the third function
block on the page.

document.observe('dom:loaded',function(){
	//insert next function here
});

Now, we set up the robot to keep checking the height and adjusting
it if it’s different. If you’re using Protaculous, at this point you
would click on the top-most of the Function Body buttons, which
places the code you enter inside a function exactly like the one
above.

new PeriodicalExecuter(calcHeight,1);

As promised, very compact and succinct and perfessional looking.
What this does is watch the iframe like a hawk, once a second, and
if the content changes height, so will the iframe.

Walter

On May 21, 2009, at 9:45 AM, Nathan Garner wrote:

The iFrame height resizing worked perfectly… until another page
within the iFrame is clicked on. The iFrame doesn’t resize, it
would only resize if the parent is reloaded, but that would only
bring up the original iFrame content again.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

I just discovered that this will only work if the pages you are
serving up in the iframe come from exactly the same domain as the
outer page. So if you had an iframe served from ‘www.example.com/iframe.html
and that iframe was hosted at ‘http://example.com/content.html’,
then the script would fail. Likewise if the iframe was at example.com
and you were hosting a page from apple.com. Everything about the two
domains must match or the security framework in JavaScript will
complain and nothing will happen.

Walter

On May 22, 2009, at 2:01 AM, Nathan Garner wrote:

Wow, I will have a play. Thank you Walter. Will post back the
finished article.

Nathan Garner
Partner

Austin Wells Design Consultants
1 Elmgate Drive, Littledown, Bournemouth BH7 7EF
+44 (0)1202 301271
email@hidden
http://www.awdc-creative.com

Member of NAPP

On 21 May 2009, at 23:24, Walter Lee Davis wrote:

You’ll need to change your function a little, and add a periodical
executer (Prototype-speak for a robot that runs a function over and
over).

Either link Prototype to your page head, or use the Protaculous
Action to add it to your page. Then the function you were using
will need to change a little bit (it will get simpler and more
compact, because Prototype does all the deep knee bends for you):

var elm = $('the_iframe');
var calcHeight = function(){
	var h = elm.contentWindow.document.body.scrollHeight;
	elm.height = h;
	return h;
};

Now if you’re not using Protaculous, you’ll need to wrap the
following function around the function that follows, but if you’re
using Protaculous, you can skip this and move to the third function
block on the page.

document.observe('dom:loaded',function(){
	//insert next function here
});

Now, we set up the robot to keep checking the height and adjusting
it if it’s different. If you’re using Protaculous, at this point
you would click on the top-most of the Function Body buttons, which
places the code you enter inside a function exactly like the one
above.

new PeriodicalExecuter(calcHeight,1);

As promised, very compact and succinct and perfessional looking.
What this does is watch the iframe like a hawk, once a second, and
if the content changes height, so will the iframe.

Walter

On May 21, 2009, at 9:45 AM, Nathan Garner wrote:

The iFrame height resizing worked perfectly… until another page
within the iFrame is clicked on. The iFrame doesn’t resize, it
would only resize if the parent is reloaded, but that would only
bring up the original iFrame content again.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

I have all my pages constructed using the expanding iFrame technique
which does work really well, and am now going to tackle this.
Currently my pages will be at http://www.example.co.uk/ and all the
PHP files are located at http://www.example.co.uk/test/ so I will have
a play with the location of the iFramed pages and see how it comes
along. If I can get this working it will be a great technique to use
for a lot of the sites I work on.

Thanks Walter

Nathan Garner
email@hidden

FW5 Pro | MacBook Pro | Leopard

On 26 May 2009, at 19:50, Walter Lee Davis wrote:

I just discovered that this will only work if the pages you are
serving up in the iframe come from exactly the same domain as the
outer page. So if you had an iframe served from ‘www.example.com/iframe.html
and that iframe was hosted at ‘http://example.com/content.html’,
then the script would fail. Likewise if the iframe was at
example.com and you were hosting a page from apple.com. Everything
about the two domains must match or the security framework in
JavaScript will complain and nothing will happen.

Walter

On May 22, 2009, at 2:01 AM, Nathan Garner wrote:

Wow, I will have a play. Thank you Walter. Will post back the
finished article.

Nathan Garner
Partner

Austin Wells Design Consultants
1 Elmgate Drive, Littledown, Bournemouth BH7 7EF
+44 (0)1202 301271
email@hidden
http://www.awdc-creative.com

Member of NAPP

On 21 May 2009, at 23:24, Walter Lee Davis wrote:

You’ll need to change your function a little, and add a periodical
executer (Prototype-speak for a robot that runs a function over
and over).

Either link Prototype to your page head, or use the Protaculous
Action to add it to your page. Then the function you were using
will need to change a little bit (it will get simpler and more
compact, because Prototype does all the deep knee bends for you):

var elm = $('the_iframe');
var calcHeight = function(){
	var h = elm.contentWindow.document.body.scrollHeight;
	elm.height = h;
	return h;
};

Now if you’re not using Protaculous, you’ll need to wrap the
following function around the function that follows, but if you’re
using Protaculous, you can skip this and move to the third
function block on the page.

document.observe('dom:loaded',function(){
	//insert next function here
});

Now, we set up the robot to keep checking the height and adjusting
it if it’s different. If you’re using Protaculous, at this point
you would click on the top-most of the Function Body buttons,
which places the code you enter inside a function exactly like the
one above.

new PeriodicalExecuter(calcHeight,1);

As promised, very compact and succinct and perfessional looking.
What this does is watch the iframe like a hawk, once a second, and
if the content changes height, so will the iframe.

Walter

On May 21, 2009, at 9:45 AM, Nathan Garner wrote:

The iFrame height resizing worked perfectly… until another page
within the iFrame is clicked on. The iFrame doesn’t resize, it
would only resize if the parent is reloaded, but that would only
bring up the original iFrame content again.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

If your site is accessible from either www.example.org.uk or
example.org.uk (without the www) then you have a 50% chance of this
failing. If you can either lock the URL to one or the other, or you
can address all of the iframes using relative links (leave the domain
out altogether) then you will be fine.

By the way, what is the reason for this technique? I never asked, and
now I’m curious.

Walter

On May 27, 2009, at 3:49 AM, Nathan Garner wrote:

I have all my pages constructed using the expanding iFrame technique
which does work really well, and am now going to tackle this.
Currently my pages will be at


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

My client sells audio equipment. When the user clicks on the
‘Products’ link, only 9 featured products are show- so setting up the
iFrame to contain this was easy. There are sub categories: CD Players,
Tuners etc. etc. and each have a widely different amount of products
in each sub category. My client just didn’t want 2 scroll bars on the
page - 1 for the overall page (as it cannot all fit in the window) and
one in the iFrame - gets a little tricky to move up and down when
there’s 2 vertical scroll bars.

Once the site goes live (later today) I will post a link so you can
see what I mean.

Nathan Garner
Partner

Austin Wells Design Consultants
1 Elmgate Drive, Littledown, Bournemouth BH7 7EF
+44 (0)1202 301271
email@hidden
http://www.awdc-creative.com

Member of NAPP

On 27 May 2009, at 12:27, Walter Lee Davis wrote:

If your site is accessible from either www.example.org.uk or
example.org.uk (without the www) then you have a 50% chance of this
failing. If you can either lock the URL to one or the other, or you
can address all of the iframes using relative links (leave the
domain out altogether) then you will be fine.

By the way, what is the reason for this technique? I never asked,
and now I’m curious.

Walter

On May 27, 2009, at 3:49 AM, Nathan Garner wrote:

I have all my pages constructed using the expanding iFrame
technique which does work really well, and am now going to tackle
this. Currently my pages will be at


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Walter, this is the url for the page/s using the iFrame.
http://www.jordanacoustics.co.uk/digital-source.html

We’ve custom written the database and are still working on the
asthetics / stylesheets.

p.s. I know there is way to many graphic elements on the site and not
enough text (in my opinion) but the client said and I quote “I don’t
care if it shows up in google or not - I want it like this!” who can
argue hey!

Nathan Garner
Partner

Austin Wells Design Consultants
1 Elmgate Drive, Littledown, Bournemouth BH7 7EF
+44 (0)1202 301271
email@hidden
http://www.awdc-creative.com

Member of NAPP

On 27 May 2009, at 12:27, Walter Lee Davis wrote:

If your site is accessible from either www.example.org.uk or
example.org.uk (without the www) then you have a 50% chance of this
failing. If you can either lock the URL to one or the other, or you
can address all of the iframes using relative links (leave the
domain out altogether) then you will be fine.

By the way, what is the reason for this technique? I never asked,
and now I’m curious.

Walter

On May 27, 2009, at 3:49 AM, Nathan Garner wrote:

I have all my pages constructed using the expanding iFrame
technique which does work really well, and am now going to tackle
this. Currently my pages will be at


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Well you’ve gone to the trouble to make this using a CMS – is there a
reason why you are sticking the CMS output into a frame rather than
simply making a template that looks like the surrounding page and
inserting the results there? It looks like you’re 99% of the way
there, and it wouldn’t take much to push through to a single-page
solution. That will get rid of your frame height problem (which is not
entirely solved here – I see scroll bars about half the time).

Walter

On May 27, 2009, at 3:07 PM, Nathan Garner wrote:

Walter, this is the url for the page/s using the iFrame.
http://www.jordanacoustics.co.uk/digital-source.html


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

I see your point. So to make the single page, I guess, I would have to
publish the page and then let the ‘Coder’ access to the published html
pages. Or is it possible to change the string on the page to .php and
insert his php page as MarkUp… (probably talking nonsence!) I will
have a word with him and see if he has a suggestion to do what you’re
syaing. My overall page content isn’t going to change drastically over
time (once it has all been approved).

Thanks again for your advice.

Nathan Garner
email@hidden

FW5 Pro | MacBook Pro | Leopard

On 27 May 2009, at 20:16, Walter Lee Davis wrote:

Well you’ve gone to the trouble to make this using a CMS – is there
a reason why you are sticking the CMS output into a frame rather
than simply making a template that looks like the surrounding page
and inserting the results there? It looks like you’re 99% of the way
there, and it wouldn’t take much to push through to a single-page
solution. That will get rid of your frame height problem (which is
not entirely solved here – I see scroll bars about half the time).

Walter

On May 27, 2009, at 3:07 PM, Nathan Garner wrote:

Walter, this is the url for the page/s using the iFrame.
http://www.jordanacoustics.co.uk/digital-source.html


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

You can change the page to .php right in Freeway, and if your coder
gives you the PHP he or she is using, you can paste it right into the
page in a Markup Item and have the dynamic page directly inside Freeway.

Walter

On May 28, 2009, at 4:04 AM, Nathan Garner wrote:

I see your point. So to make the single page, I guess, I would have
to publish the page and then let the ‘Coder’ access to the published
html pages. Or is it possible to change the string on the page
to .php and insert his php page as MarkUp… (probably talking
nonsence!) I will have a word with him and see if he has a
suggestion to do what you’re syaing. My overall page content isn’t
going to change drastically over time (once it has all been approved).


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

The protaculous explanation didn’t work for me. I really need this. Any chance you would be willing to write a quick step by step on using the protaculous action to dynamically resize an iframe that is loading content from the same server? Thanks in advance.

TB


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Okay, here’s one way. It has some trade-offs, but it’s the easiest to get into a Freeway page.

Apply Protaculous to the page that holds the iframe. Choose prototype-packed from the Library picker in the Actions palette.

Click on the top Function Body button and paste in this code:

var calcHeight = function(){
	var elm = $$('iframe').first();
	var h = elm.contentWindow.document.body.scrollHeight + 40;
	elm.height = h;
	return h;
};
new PeriodicalExecuter(calcHeight,1);

This assumes you have only one iframe on the page, by the way.

See how this works for you, also be sure to test on various browsers, particularly IE on the PC. It should work, but there might be some weirdness we’re not anticipating there.

There’s another way to do this that would mean you would need to add a function to your iframe page AND to each of the pages you want to include into it. The benefit to that is that you would have zero lag between the page loading and the frame resizing. Also, the function would only run once. This one sets up a loop and keeps watching that iframe for changes until the parent page unloads.

In this current implementation, you will most likely see a lag between the iframe loading a new page and the frame resizing, so there will probably be a flash of scrollbars for a moment. You can mitigate that by setting Scrolling to No in the iframe Action.

Walter


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Walter,

Thank you so much! This worked perfectly. You are right about the wierdness- it keeps reading the page and the scrollbars in the browser keep growing and growing until the end of the content is reached.

What code(s) would I have to place in the page and the pages being called in order to eliminate the lag? Thanks again.

TB


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Walter,

On second glance- it’s very funky indeed. The iframe just keeps growing and growing and never stops. Any way to fix?

TB


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options