[Pro] iFrame into a responsive web? works?

About the targets: All links are by default target=“_self”. That means, open the link in the same context as the current page. If your page containing the link is within an iframe, then the default is to open the result of any link also within the iframe. If you want to “bust out” of the iframe, and load the link within the parent page (which holds the iframe), then you need to set the target to _parent, or if you are concerned that the parent page might also be framed, _top.

Walter


freewaytalk mailing list
email@hidden
Update your subscriptions at:

ok, Walt. I think that the mess is in the story we are making, the logic process, and the inner or the outer page. Wich is one? I have test.html, with some buttons that should show diferent pieces of text… and these text are other pages, like ficha1.php or ficha2.php. So test.html is the outer page? And the ficha1.php, ficha2.php, are the inner pages? Buttons and markup item (fichaContainer or menu) are in outer page. Content are in several inner pages. Is this the correct way to understand it?

And Im going back to your code, not to change anything, and then…

In the outer page, test.html, the scrips says that we are creating a iframe with the html mark up item, getting the element byID, as it called menu. So, when I press a button to charged the ficha1.php into the markupitem/iframe/menu, I need to put menu as the target.

In the inner page, we have another variable that creates a thing (im not sure what we are creating…) called menu (why, other menu again?) and for that uses the element called item1, that is the html item where I wrote the text inside. I didnt change the name now, its item1.

And from this content page, ficha1.php, we say that if item1 is openned at menu (which menu the one we create at inner or at outer page?) is bigger than the html markup item menu, It sholud be resized.

Is the story more or less like that?

Well, Ive put back all the code as in your example. The inner page code at ficha1.php and the outer code at test.html, and called the mark up item as menu in outer page, and the html text in inner page as item1.

And the link set to _top

And its not working at all… I think there is something in the story i dont understand why we are writin…


freewaytalk mailing list
email@hidden
Update your subscriptions at:

Okay. The problem I was trying to solve was: “I want to load a navigation bar of unknown height into an iframe, and set the iframe to match the height of its content”. Implicit within that was the thought that someone clicking on the navigation would want their clicks to apply to the outer page, not the inner iframe area (since that would be shrunk to fit around just the navigation).

It sounds to me as though you want to do this: “I want to click a link on a page and load another page into an iframe on that page, and then have the iframe adjust to suit the height of its content”.

Is that correct? And if that is correct, what do you want to have happen when someone clicks one or another navigation links within the new page loaded into the iframe? Do they need to bust out of the iframe, or do they need to remain contained within the iframe, so that the navigation action only applies to the inner space of the iframe, and the surrounding page stays put?

Walter

On Aug 2, 2015, at 1:02 PM, rakeljuice email@hidden wrote:

ok, Walt. I think that the mess is in the story we are making,


freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

at the console (first time I opened it) it says that there is an error at test.html line 18, where it says iframe.style.height = height + ‘px’;

TypeError: null is not an object (evaluating ‘iframe.style’)
resize_iframetest.html:18
(función anónima)

funcion anonima is like anonymus function


freewaytalk mailing list
email@hidden
Update your subscriptions at:

ohhhh, great misunderstanding… Im really sorry…

Well, what I want to do is this: http://www.elviajedeshila.com/fichaartistica.html that is resposive page, and when you press a button, the text is shown has different lenght, and the semi-transparent box adjust to it.

And I sugested to make the box with the button in my test.html page, and then, under them, an iframe to charge the text content. I thought of an iframe because I tried with layers, and you told me is quite hard… And as the text is going to be weyyep items, I thougt the iframe is the easiest solution to reach it.

Thanks. Thanks.


freewaytalk mailing list
email@hidden
Update your subscriptions at:

I think your sentence is completely correct “I want to click a link on a page and load another page into an iframe on that page, and then have the iframe adjust to suit the height of its content”.


freewaytalk mailing list
email@hidden
Update your subscriptions at:

About this…

Is that correct? And if that is correct, what do you want to have happen when someone clicks one or another navigation links within the new page loaded into the iframe? Do they need to bust out of the iframe, or do they need to remain contained within the iframe, so that the navigation action only applies to the inner space of the iframe, and the surrounding page stays put?

Im understanding that you are talking about buttons inside the iframe… and I thinks is easy to have them outside… as in my test.html. I dont know what satys put or bust out means… The example link I gave, I think its the easiest one…


freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

I have updated the example to show what I believe your desired behavior is:

http://scripty.walterdavisstudio.com/iframe/outer.html

Gist: inner2.html · GitHub

I made the iframe initially empty, and gave it a height of zero. (I also gave it a red border, so you can see what’s going on here.) Clicking on one of the buttons above it will load a page into that iframe. Each of these buttons has their Target attribute set to the name of the iframe, which has changed here to be “portfolio” so it’s clearer what the intent is (at least to me).

Each of the pages loading into the iframe is a little different, and each one has the JavaScript in its head to call the resize function. I discovered that I needed to cheat a little, to add 40 to the height reported, otherwise I was seeing the bottom of the loaded page cropped off, and internal scrollbars appear in the iframe. You may want to adjust that to suit your pages.

Walter

On Aug 2, 2015, at 1:24 PM, rakeljuice email@hidden wrote:

About this…

Is that correct? And if that is correct, what do you want to have happen when someone clicks one or another navigation links within the new page loaded into the iframe? Do they need to bust out of the iframe, or do they need to remain contained within the iframe, so that the navigation action only applies to the inner space of the iframe, and the surrounding page stays put?

Im understanding that you are talking about buttons inside the iframe… and I thinks is easy to have them outside… as in my test.html. I dont know what satys put or bust out means… The example link I gave, I think its the easiest one…


freewaytalk mailing list
email@hidden
Update your subscriptions at:
Information for existing FreewayTalk / Groups.io users - Site Feedback - Softpress Talk


freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

expectating… Im trying right now. If it works properly, I have thouht of other uses for that in the other sections Im working on…


freewaytalk mailing list
email@hidden
Update your subscriptions at:

please, are you talking about a formal iframe, or about the html markup created as an iframe?


freewaytalk mailing list
email@hidden
Update your subscriptions at:

I’m not sure what you mean by formal here. The Action (if that’s what you mean by formal) creates the same code as the markup item. The Markup item just lets you do anything you want (set the ID or Name attribute to the iframe to alternate values, in the case of these examples).

Walter

On Aug 2, 2015, at 2:20 PM, rakeljuice email@hidden wrote:

please, are you talking about a formal iframe, or about the html markup created as an iframe?


freewaytalk mailing list
email@hidden
Update your subscriptions at:
Information for existing FreewayTalk / Groups.io users - Site Feedback - Softpress Talk


freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

Here’s a tiny improvement to the code you would paste into the head of your example pages (the pages that load into the iframe):

What’s special about this is that you could paste this into the head of a live production site, not a special page made just for your portfolio, and it would work without error in either case. What it does to make that possible is check to see if “top” (a special JavaScript keyword in a Web page that means “the very outermost Web page loaded into this browser”) has a function defined named “resize_iframe”. If it does, then it calls that method (which resizes the iframe). If it doesn’t, then it doesn’t do anything and therefore doesn’t throw an error. You could see the error by visiting any of the “inner” pages in my example directly. Open your Error Console in your browser’s Developer Tools, and then visit this link. You should see an error in red in the console:

http://scripty.walterdavisstudio.com/iframe/inner1.html

Walter

On Aug 2, 2015, at 2:11 PM, Walter Lee Davis email@hidden wrote:

I have updated the example to show what I believe your desired behavior is:

Outer Page

Gist: inner2.html · GitHub

I made the iframe initially empty, and gave it a height of zero. (I also gave it a red border, so you can see what’s going on here.) Clicking on one of the buttons above it will load a page into that iframe. Each of these buttons has their Target attribute set to the name of the iframe, which has changed here to be “portfolio” so it’s clearer what the intent is (at least to me).

Each of the pages loading into the iframe is a little different, and each one has the JavaScript in its head to call the resize function. I discovered that I needed to cheat a little, to add 40 to the height reported, otherwise I was seeing the bottom of the loaded page cropped off, and internal scrollbars appear in the iframe. You may want to adjust that to suit your pages.

Walter

On Aug 2, 2015, at 1:24 PM, rakeljuice email@hidden wrote:

About this…

Is that correct? And if that is correct, what do you want to have happen when someone clicks one or another navigation links within the new page loaded into the iframe? Do they need to bust out of the iframe, or do they need to remain contained within the iframe, so that the navigation action only applies to the inner space of the iframe, and the surrounding page stays put?

Im understanding that you are talking about buttons inside the iframe… and I thinks is easy to have them outside… as in my test.html. I dont know what satys put or bust out means… The example link I gave, I think its the easiest one…


freewaytalk mailing list
email@hidden
Update your subscriptions at:
Information for existing FreewayTalk / Groups.io users - Site Feedback - Softpress Talk


freewaytalk mailing list
email@hidden
Update your subscriptions at:
Information for existing FreewayTalk / Groups.io users - Site Feedback - Softpress Talk


freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

Hello, Walter. I menat an action iframe, but Ive let the one markup maden. For me, it doesnt load the page… Ive check the target as you have in your page, and its the same, portfolio, without _ but it doesnt load anything…


freewaytalk mailing list
email@hidden
Update your subscriptions at:

and at the error console, its still the same error…

TypeError: null is not an object (evaluating ‘iframe.style’)

resize_iframetest.html:18

(función anónima)


freewaytalk mailing list
email@hidden
Update your subscriptions at:

ok, didnt properly saved the code at outer page… silly me…


freewaytalk mailing list
email@hidden
Update your subscriptions at:

And it appears to work as expected. Now you can get rid of the red border, and add links to your other pages, and maybe update them to match the newer Gist I posted, so they can run without error in their ordinary (not framed) context.

Walter

On Aug 2, 2015, at 2:45 PM, rakeljuice email@hidden wrote:

ok, didnt properly saved the code at outer page… silly me…


freewaytalk mailing list
email@hidden
Update your subscriptions at:
Information for existing FreewayTalk / Groups.io users - Site Feedback - Softpress Talk


freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

Yes, thanks a lot, Ive sawn your last post.

Thanks again. Im testing it now with the webyep items, I think they should be inline inside the item1 html in the inner pages.


freewaytalk mailing list
email@hidden
Update your subscriptions at:

When you said that you changed the code, its not betwee the , isnt it? You mean the css… like body, html {
height: 100%;
margin: 0;
}
#PageDiv {
width: 80%;
margin: auto;
min-height: 100%;
position: relative;
}

and so, isnt it? Because the script is the same… And how do you add this code to the page, directly coping in after head? Im not good with css… yet


freewaytalk mailing list
email@hidden
Update your subscriptions at:

I posted a newer Gist with a more generic means of getting the page height (reading the PageDiv, which is guaranteed to exist on any Freeway page). You can see it here:

As far as the red border goes, that was added in the markup item itself, inline in the iframe tag’s style attribute.

Walter

On Aug 2, 2015, at 2:59 PM, rakeljuice email@hidden wrote:

When you said that you changed the code, its not betwee the , isnt it? You mean the css… like body, html {
height: 100%;
margin: 0;
}
#PageDiv {
width: 80%;
margin: auto;
min-height: 100%;
position: relative;
}

and so, isnt it? Because the script is the same… And how do you add this code to the page, directly coping in after head? Im not good with css… yet


freewaytalk mailing list
email@hidden
Update your subscriptions at:
Information for existing FreewayTalk / Groups.io users - Site Feedback - Softpress Talk


freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

Ive tried, but as it reads the page height, in my example it reads more than the item1 has content. For this I really like more the first one, because its a web yep editable page, and for statics pages, I think the second one is better, because you can change the page as you want withou thinking on a concrete element… but its just my point of view.

Its working properly with web yep. ANd all this has give me more ideas to other sections of this site…

Thanks a lot… again and again… :slight_smile:


freewaytalk mailing list
email@hidden
Update your subscriptions at: