[Pro] iFrame into a responsive web? works?

Hi all. Im on the point of making something like at the link above (when you see the little window at the center with buttons and text), and as far as I know, I could do it with webyep menu, but cant, because I dont know how to sylize it (4 years on webyep and cant manage the menu at all…) so Im thinking of using an iframe, to show like this little website inside the window, with its own responsive menu, and so, but something inside is telling me using iframe is not a good idea… Is it? Before asking I have search and try with the target, and layer actions… but it seems dont work on inline items…

Is any other way, on a responsive website?

Thanks

http://elviajedeshila.com/fichatecnica4.html


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

oh, oh…! but If you set the webYep Init Code to the page, it doesnt work at all… is not compatible? I let the webyep items tot he end, but, it seems that cant work together…!!!


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

sorry, tired… it works with webYep… uffff
(i was focused on inserting InitCode SiteLok, why…??)

My first question is still on… because althought webYep works, I finally can’t stylize the menu to get it like at the example…

Thanks


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

I have been trying with http://actionsforge.com/actions/target-show-hide-layer-extras but it doesnt work because of the layers, in a responsive page, you cant use layers, isnt it?

I dont mine to be exactly the same as example, I can manage with vertical menu, as well, but without the bullets of the webyep menu…

Any idea? Thanks.


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

You can use layers in a responsive site, as long as you leave room (or move the other page elements at each break-point) for everything else to be out of their way when they resize. It’s tedious as all get-out, because you will have to re-size each layer in the stack at each @media size you wish to support, but it is totally possible.

Using an in-flow layout rather than absolutely positioned layers gives you some natural benefits. For example, when elements resize naturally (because you have set their width to Flexible), other things will scoot out of their way as they change proportion. But if you’re up for death-by-a-thousand-mouse-clicks, you can totally make a responsive multi-layered absolute positioned site.

Walter

On Aug 1, 2015, at 9:11 AM, rakeljuice email@hidden wrote:

I have been trying with http://actionsforge.com/actions/target-show-hide-layer-extras but it doesnt work because of the layers, in a responsive page, you cant use layers, isnt it?

I dont mine to be exactly the same as example, I can manage with vertical menu, as well, but without the bullets of the webyep menu…

Any idea? Thanks.


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


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

Walter, does in-flow layout means layers, and does in-line layout means no layers…?

I think I dont reach my death hour yet… Im trying this with the iframe, making buttons as graphics, ans smoll pages with the thext content to make them web yep editable. My first choice was the web yeo menu, but, appart from the layer problem you say (and Im not ready for…) my own problem is than I never could edit the MyMeny item as it says in the manual… for example, I cant take the bullets of, and it doesn take the font, colour, and anything… my css own problem…

I dont know whoy, but always think that an iframe is not a good idea, soy try another thing, but Iin this case, I will go on with it…

But now, my webyep system show the editable icons in grey colour (is not working on Saturday… :wink: ), and cant edit any thing, so Im looking why happened this…? before continuing with the iframe.


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

In-line, in-flow, and “box-model” (a spoonerism that appears only in FreewayTalk, and is a mis-use of a very specific term in CSS that means something unrelated) all mean the same thing. The idea is that you insert an HTML element into another HTML element as if it was a single character of text. So instead of seeing this:

<div>asdfg</div>

you might see:

<div>
    <div style="position:relative">a</div>
    <div style="position:relative">s</div>
    <div style="position:relative">d</div>
    <div style="position:relative">f</div>
</div>

each of those divs would respect the others, just as individual letters of a headline keep out of each other’s way.

(Just so my example doesn’t send you down too literal a path, mentally, the fact that I put letters in them has nothing to do with this. They could have images, paragraphs of text, headers, forms, whatever – inside them. Also, I have used inline CSS to make my example clearer, and I have specified position: relative even though I don’t need to exactly. The default is position static, which is near as makes no difference identical to position:relative. Also, modern Freeway writes this into the head or the stylesheet, but the style is the important thing to understand. The elements are positioned relative to one another.)

In contrast, when you use Freeway in its usual “draw things where you want them” mode, you are using position:absolute to place the elements at a specific x/y offset from their nearest positioned parent, and a specific set of dimensions. Again, eschewing the way Freeway would write this nowadays, here’s another example:

<div style="position:relative">
    <div style="position: absolute; top: 0, left: 0; width: 200px; height: 40px;">a</div>
    <div style="position: absolute; top: 0, left: 300px; width: 200px; height: 40px;">s</div>
    <div style="position: absolute; top: 50px, left: 0; width: 200px; height: 40px;">d</div>
    <div style="position: absolute; top: 50px, left: 300px; width: 200px; height: 40px;">f</div>
</div>

Now that will give you four boxes, spaced like this:

a                                      s
d                                      f

They won’t move, or even know if the other is there. If you crank up your font size, the top row will overlap the bottom row, because they are each on a separate virtual “sheet of glass”, entirely unaware of each other. It makes for pixel-perfect layout, but it does not allow for responsive effects.

Freeway 7 lets you set a separate set of geometry for each element on the page, at each breakpoint you define (for a different browser width). This means that you double or triple or quadruple the amount of CSS you generate, but you end up with a layout that appears to be different at each browser width, all without having to write any other HTML. In-between the defined breakpoints, nothing changes, so you see a set of steps in the layout as you resize the browser, with the elements snapping into their new dimensions and positions as you cross each threshold.

Inline layout allows you to specify these elements in percentage widths, so that they will flex to fill a defined space, which is a different kind of response to browser width changes.

Combine the two techniques, and you get something that not only looks great at the defined widths, but also at any points in between. This is important if you want your layout to really fit the small screen, and you don’t want to go nuts making a breakpoint for every Android phone ever made.

Walter

On Aug 1, 2015, at 10:30 AM, rakeljuice email@hidden wrote:

Walter, does in-flow layout means layers, and does in-line layout means no layers…?

I think I dont reach my death hour yet… Im trying this with the iframe, making buttons as graphics, ans smoll pages with the thext content to make them web yep editable. My first choice was the web yeo menu, but, appart from the layer problem you say (and Im not ready for…) my own problem is than I never could edit the MyMeny item as it says in the manual… for example, I cant take the bullets of, and it doesn take the font, colour, and anything… my css own problem…

I dont know whoy, but always think that an iframe is not a good idea, soy try another thing, but Iin this case, I will go on with it…

But now, my webyep system show the editable icons in grey colour (is not working on Saturday… :wink: ), and cant edit any thing, so Im looking why happened this…? before continuing with the iframe.


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


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

Thanks a lot for your explanations. Its a pleasure asking in this forum with all of you…

Im walking around my iframe. Cant sort it out as a flexible one. I went bak to a post 2 years ago where you and Dave helped me with another iframe, but I cant apply that to the present case.

I am working with the backdraft wrappers 2 columns, and trying to make one column for the image ant the other for the iframe, with buttons as pass thorught graphic items, but I cant:

  • make the iframe to be flexible, depending on the text in contents
  • make this column to put above the other when you stretch the window.

Could you have a look, pease…?

http://www.i-tek.es/demoweb/ryd/test.php


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

Looking through the forum I foun what I mean: Gallant - A Responsive RapidWeaver Theme al this web, you have items in several columns, and when you strecht the screen, items go one above the other, with the full width of the screen.

How can you make this, besides the iframe flexible?

Thanks


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

You may need to hand-code the iframe in a Markup Item, because I don’t think that the Action lets you specify dimensions in percentages. The HTML would look like this:

<iframe id="menu" src="path/to/your/page.php" style="width: 100%; height: 100%; border: none" frameborder="0"></iframe>

Then the iframe would stretch to fill whatever container it found itself within. But that won’t solve your other issue of the contents of the iframe driving its height. For that, you need two JavaScripts. One goes in the outer page (the page that holds the iframe) and looks like this:

<script type="text/javascript">
window.resize_iframe = function(height){
  var iframe = document.getElementById('menu'); // note, this relies on your iframe having the ID set to menu, as I did above
  iframe.style.height = height + 'px';
};
</script>

The other script goes in the page which will load into the iframe, and looks like this:

<script type="text/javascript">
window.addEventListener('load', function(evt){
  var menu = document.getElementById('your_menu_item');
  if ('outerHeight' in menu){ // old IE
    top.resize_iframe( parseInt(menu.outerHeight, 10) );
  }else{
    var style = document.defaultView.getComputedStyle(menu, '');
    top.resize_iframe( parseInt(style.getPropertyValue("height"), 10) );
  }
});
</script>

That’s all coded off the top of my head, untested, but it ought to work. It does not rely on a framework, and so you don’t need to worry about jQuery being awful.

Walter

On Aug 1, 2015, at 11:39 AM, rakeljuice email@hidden wrote:

Looking through the forum I foun what I mean: Gallant - A Responsive RapidWeaver Theme al this web, you have items in several columns, and when you strecht the screen, items go one above the other, with the full width of the screen.

How can you make this, besides the iframe flexible?

Thanks


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


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

Thanks again. Im trying it now. My html markup item (iframe) is inside the 2 columns backdraft wrapper. I hope its not a problem…

With backdraft must be somethig hidden I cant see, because if a make a master page from zero, like the one at backdraft project (Main Master) with the same config at the pallete, and the extend at the body, and the actions… the two columns wrapper doenst work properly, the dont go one below the other as in backdraft project. mmm…


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

Open the page in outline view by clicking on the header above the left column (normally titled Site) so it changes to Page. You should see a list of all items in the page, in an outline format with indenting showing the parentage of each item. Locate the two columns you are having difficulty with, and drag the lower one in he list above the higher one. Then preview in a browser and see if the problem is solved. If not, then revert (or drag back) and ask Caleb. My best guess is that the item floated right is not before the item floated left in source order.

Walter

On Aug 1, 2015, at 12:17 PM, rakeljuice email@hidden wrote:

Thanks again. Im trying it now. My html markup item (iframe) is inside the 2 columns backdraft wrapper. I hope its not a problem…

With backdraft must be somethig hidden I cant see, because if a make a master page from zero, like the one at backdraft project (Main Master) with the same config at the pallete, and the extend at the body, and the actions… the two columns wrapper doenst work properly, the dont go one below the other as in backdraft project. mmm…


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


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

Hello. Walter. Im sorry, but iframe is not working… you can see the test at http://www.i-tek.es/demoweb/ryd/test.html
The html markup set the width but not the height…

Ive put the code before /head in both pages

Another thing is the links doesnt work as if a iframe were… With a iFrame, I open the link button above on the left, and set the name of the iframe as the target. With the Markup item, is the same way? because it doesnt work… it open the page in _blank

Gracias

PS: (Dont matter about this, but just to let you know) The other issue about the backdraft, elements are in ok order. I dont know whats the problem, but last night, my prject stopped to be openned, I restart computer, wait for this morming, and the project doesn want to open… I started to make the project again from the bakup, but ths backup was so old…


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

Grrr. That’s the second time this week I have made that same mistake. Add a name attribute to the iframe, so it reads name=“menu” id=“menu” and that should solve this problem.

I’ll dig into the other part and see if I can figure out what’s wrong. I did warn you that I hadn’t tested the code.

Walter

On Aug 2, 2015, at 9:10 AM, rakeljuice email@hidden wrote:

With the Markup item, is the same way? because it doesnt work… it open the page in _blank


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

Okay, the issue with the script on the inner page was that it was testing for a string property using an object accessor. The change was in the line where I test for old IE, which becomes:

    if (menu.hasOwnProperty(outerHeight)){ // old IE

I have a working example here: Outer Page and the code here: Set an iframe to the height of its contents. · GitHub

Note that the inner page has a requirement that you set the script in the head to match the ID of the menu’s parent item (item1 in this example). Unless you do that, there’s nothing for it to measure, and it probably won’t even get to the point of asking the outer page to change the iframe’s height.

If you have your developer console open, you should see any error messages when you load the page in the browser. If you don’t have that option enabled, then look in your Safari Preferences, Advanced pane, and check the “Show Develop menu” option on. Then choose Develop / Show Error Console.

Walter


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

ok, thanks. I think is a bit difficult but just after I could set my project again, more or less than when it crashed, I will came back here to try this way. Now Im fighting with google font. Cant imagine why thy are not ok, its quite simple, I did all the steps… Im at circus.php
The good new is that here the two elements wrapper works ok.


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

ok, forgot to apply to body. How much lost time…


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

Helo Walter. Sorry, but I cant get it solved.

Im working on test.html, where I set a Markup item with the first code to make it working as an iframe. I have set the name to fichaContainer because I made a mess between item1 and menu, and as its not a menu, its a container for text, so I put this name everywhere you put menu and item1. I dont know if its ok.

In the page holds the iframe I put the code you have in what you call outer page, before /head. And in the page its suposed to be open in the iframe, I pasted the code you have in what you call inner page, after /head as well. In both cases, Ive changed every menu or item1 to fichaContainer.

Well, my fichaContainer doesnt adjust the size of the content at ficha1.php…

On the other hand, I cant open the content inside the fichaContainer iframe, because when I link the button it opens at _blank… Ive set as fichaContainer and_fichaContainer, but its still opening at _blank…

Sorry, but there is something I cant see at all…


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

Probably the quid is that for you, menu and item1 are two different things, but for me, as I only have a mark up item, I dont realized which two things are you speaking about…

I copied the code from your gist, changing both words to fichaContainer. And abput the working example. in my computer it doens make anything. There is no item that grows. I press all the links and make nothing… and these links appears with an scroll that is what we are trying to aboid, isnt it?


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

The error is reported in the console. Did you open that up and look at what it is telling you? In the “inner page”, you have your script set to look for fichaContainer, but the item you actually want to get (the wrapper around the list) has the id item1. You can either click once on that wrapper element and change the Name/ID to fichaContainer, or you can edit the script to look for item1.

As far as the target goes, you need to set the target of each of your links on the inner page to _top if you want them to open in the iframe’s parent page context, or remove all targets if you want them to open within the iframe itself. Note that when these items open inside the iframe, they will not adjust the iframe to show without an inner scrollbar unless each of the pages you are loading also include a (properly-edited) version of the inner page script.

Walter


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