[Pro] resizing iFrame

Hello. Ive got an iFrame at a page that shows several pages content, if you pressone or the other button. These pages are web yep editable, and the content of the first one is too short and the content of the second one is too long, so I would like to make the iframe get the size of the content by itself, without scroling. Is it possible?
Thanks.


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

I think this can be done with the inline html object, but I always have a mess at this point…
is there any tutorial or something to make this been understood?
Thanks


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

Are both the iframe content and the outer page that contains the iframe served from the exact same server? (Everything – hostname, protocol, port EXACTLY the same?) If so, you can force an iframe to take on the size of its content page using some JavaScript. But if any part of this is different, the Same Origin Policy will fail, and a script from one host cannot affect content from another.

It’s best if the iframe URL does not have any hostname information in it, as though the code was like this:

<iframe src="/path/to/page.html"></iframe>

rather than

<iframe src="http://example.com/path/to/page.html"></iframe>

If the first example looks like your code, then the iframe’s origin will always match that of the outer page, and you can use this trick.

In the Page / HTML Markup / Before section, paste the following code:

<script type="text/javascript">
  (function(){
    var iframe = document.querySelector('iframe');
    iframe.addEventListener('load', function(){
      var new_height = iframe.contentWindow.document.body.offsetHeight;
      iframe.style.height = new_height + 'px';
    });
  })();
</script>

This script requires that there only be one iframe on the page in order to work. If you have applied Twitter or Facebook Actions to your page, that may no longer be true. Let me know if this works for you, and if you need to adjust it to work around the multiple iframe problem, there is a way to do that.

Walter

On Nov 22, 2014, at 11:12 AM, rakeljuice email@hidden wrote:

Hello. Ive got an iFrame at a page that shows several pages content, if you pressone or the other button. These pages are web yep editable, and the content of the first one is too short and the content of the second one is too long, so I would like to make the iframe get the size of the content by itself, without scroling. Is it possible?
Thanks.


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

Forgot to mention – this goes on the page that holds the iframe, not the page that loads into the iframe.

Walter

On Nov 22, 2014, at 3:50 PM, Walter Lee Davis email@hidden wrote:

Are both the iframe content and the outer page that contains the iframe served from the exact same server? (Everything – hostname, protocol, port EXACTLY the same?) If so, you can force an iframe to take on the size of its content page using some JavaScript. But if any part of this is different, the Same Origin Policy will fail, and a script from one host cannot affect content from another.

It’s best if the iframe URL does not have any hostname information in it, as though the code was like this:

rather than

If the first example looks like your code, then the iframe’s origin will always match that of the outer page, and you can use this trick.

In the Page / HTML Markup / Before section, paste the following code:

<script type="text/javascript">
 (function(){
   var iframe = document.querySelector('iframe');
   iframe.addEventListener('load', function(){
     var new_height = iframe.contentWindow.document.body.offsetHeight;
     iframe.style.height = new_height + 'px';
   });
 })();
</script>

This script requires that there only be one iframe on the page in order to work. If you have applied Twitter or Facebook Actions to your page, that may no longer be true. Let me know if this works for you, and if you need to adjust it to work around the multiple iframe problem, there is a way to do that.

Walter

On Nov 22, 2014, at 11:12 AM, rakeljuice email@hidden wrote:

Hello. Ive got an iFrame at a page that shows several pages content, if you pressone or the other button. These pages are web yep editable, and the content of the first one is too short and the content of the second one is too long, so I would like to make the iframe get the size of the content by itself, without scroling. Is it possible?
Thanks.


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

Hello Waltd. Sorry, but I didnt see your answer, and next day I had a look and didnt see at that date, so I thought I had not been answered…Sorry.

At your question, yes, the content of the iframe are pages at the same site, web yep created pages, a contact form, and so.

I have a question. With your code, you resize the iframe, but it doesnt push down the conten below it, is it?

Thanks a lot


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

With your code, you resize the iframe, but it doesnt push down the content below it, is it?

That will depend on your page construction - ie is it inline?

David


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

If your iframe is inline within a parent element, and other content appears beneath it in the regular content flow, like this:

+----------------
| some html box
|
|+--------------
|| iframe here
||
||
|+--------------
| More content
| Below that...
+-----------------

Then if the iframe is adjusted by this script, it will push the content below it down the page. But if you just drew the iframe in place on the page, then you won’t get that effect, because drawn (layered) elements always exist on their own unique plane, and cannot interact with any other elements on the page.

Walter

On Dec 3, 2014, at 2:56 PM, rakeljuice email@hidden wrote:

Hello Waltd. Sorry, but I didnt see your answer, and next day I had a look and didnt see at that date, so I thought I had not been answered…Sorry.

At your question, yes, the content of the iframe are pages at the same site, web yep created pages, a contact form, and so.

I have a question. With your code, you resize the iframe, but it doesnt push down the conten below it, is it?

Thanks a lot


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

Hello. Nothing… I have some content in my page, with the navigation buttons, a video, and a text. Below this I draw an html box with the iframe inside it (I click inside the html item, and the cursor flash, and then I paste my iframe). After that, I press return twice, and a I paste a graphic. And the iframe doesnt push down the graphic… The iframe is called iframe, as you put in your code before …

You can beleieve me, the inline items are my nightmare…


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

Nothing again. Ive just tried it in a new blank page, with noting else than the html item, and inside it, the buttons, the iframe and an image below, and nothing, doesnt push… And another thing is that the graphic doesnt catch the padding, because I want it 25px from left, I set 25px left padding, and it appears at 0 from left. The iframe accepts the padding correctly.

Well, I could put a scroll in the iframe content… Is it psible to make a scroll bar? The last time I asked in the forum, you advise me to make a scroll with an up button and a down button, but nobody likes this scroll, because it not an intuitive one…


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

The scroll I mean is similar to the scroll that appears with the iframe, but just with the vertical bar, not with the horizontal one.


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

After that, I press return twice, and a I paste a graphic. And the iframe doesnt push down the graphic… The iframe is called iframe, as you put in your code before …

Can we see this online somewhere?

David


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

ok, my simple trial is at juanp(dot)tv(/)index5(dot)php


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

Without seeing this online try this.

Select the iFrame item, use the Right arrow key once, insert an HTML item. Resize that HTML item to suit your image and set the background of the HTML item as your image as centre, centre, no tiling in either direction.

You may or may not have to set the Float on the HTML item to suit and you can set a margin on it too (25px).

But that is me working blind.

D


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

I have put the web as I want it at juanp(dot)tv(/)web(dot)jpg

So you can see tha elements over and below the expand text

Dave, Im trying what you say now.


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

ok, the right arrow is the TAB? I dont cath you at this point, but I have insert an html item, and inside it, an image (black line) with the margin, and this works por the position of the image. Thanks. Yo can see the web just uploaded.

Now, Im continuing with the iframe…


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

How are you adding your iframe - are you using the iframe action because it appears that the iframe on that page is wrapped in paragraph Tags. It really needs to be a standalone item to get it to do what you want.

And what finished effect are you trying to achieve - can you show us what it should look like.

D


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

Yes, with the iframe action. Perhaps the paragraph is because you told me to insert a tab before the iframe… I have deleted it now.

The finished I would like is the one you can see in the jpg image

Thanks


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

If you insert an Action item inline in an HTML box, Freeway will wrap it in a P tag because it treats any such as if it was a single character of text. I may dig into that Action at some point, and add the logic from my CrowBar Action to it so it can detect when it is improperly nested and deal with this issue. In the meantime, try this:

  1. In the Styles palette, click on the cog menu and choose New Style.
  2. In the resulting New Style dialog, click into the Tag field, enter the word iframe. In the Name field, delete whatever Freeway helpfully added there, then tab out of the field so it doesn’t sneak it back in when you move to another part of the interface.
  3. Click the Extended button, then New, then enter Name: display, Value: block. (If you’re viewing this in Mail, don’t include the back-ticks, they are just here for formatting in the Web view, where they will be invisible anyway.)
  4. Publish, and see what happens now.

I suspect that you may be seeing the effect of the iframe element being natively display: inline-block in many browsers. Unless your iframe is wide enough to force any text below it to not appear to its right, it may do that. Although, that doesn’t seem likely, since the P tag is natively display:block (unless you’ve done something to force that to no longer be true) and so it should push the remaining content in the parent block down when its child iframe resizes, too.

Walter

On Dec 6, 2014, at 7:43 AM, rakeljuice email@hidden wrote:

Yes, with the iframe action. Perhaps the paragraph is because you told me to insert a tab before the iframe… I have deleted it now.

The finished I would like is the one you can see in the jpg image

Thanks


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 told me to insert a tab before the iframe

No - I suggested you use the Right Arrow key (bottom right on your keyboard) when you had the iFrame selected. This moves the insertion point immediately after the item you have selected.

D


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

I don’t know if you have given up on this one or not but I was trying Walter’s script and couldn’t get it to work for me so I found another solution that I have managed to implement at http://deltadesign.co/FW7Test/iframes/iframes1.html

This uses the following Script in the Head of your page:

<script language="JavaScript"> 
  <!--
  function calcHeight()
  {
//find the height of the internal page
var the_height=
document.getElementById('resize').contentWindow.
document.body.scrollHeight;

//change the height of the iframe
document.getElementById('resize').height=
the_height;
}
//-->
</script>

And the iframe is called using:

<iframe src="yourpage.html" onLoad="calcHeight();" scrolling="NO" frameborder="0" width="100%" height="20" name="resize" id="resize"></iframe>

I haven’t tested it in any Browsers other than Safari, Chrome and FireFox on Mac

D


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