Is there a way to autofit the iFrame in an htm file? For example, I have a Form on the top section for parameters set at:
left: 0px; top: 0px; width: 99%; height: 200px;
Then I have an iFrame below that set at:
left: 0px; top: 201px;
I want the width and height to auto fit the bottom with no white space no matter the size of the user screen.
I tried iFrame width: 99%; height: 99%; but does not give desired result.

This message has been edited. Last edited by: <Kathryn Henning>,

Mikey,

IFrames are static content and once the size has been set, they will not automatically resize. If you want to have your IFrame auto resize according to the size of the window, you will have to write a javascript function that updates the height and width property of the IFrame on the window change. I've done this before but I forget exactly what I did. It would be worthwhile googling it and searching the Java Script forums for how to do this.

I have been google searching and havent found anything that makes sense to me that I can plug into the Embedded JavaScript and get it to auto fit window size yet. Ill keep searching

Mikey,

I did a quick search on "js resize iframe to window" and found this question from stack overflow http://stackoverflow.com/quest...arent-window-resizes , and this JQuery documentation http://api.jquery.com/resize/ . Between these two pages you should be able to create what you need.

Thanks, Im going to mess with it and see what I come up with. Where does the HTML code with div go?

HTML composer in Dev Studio doesn't understand the concept of a DIV. Unfortunately it puts everything in SPAN tags.... I drop to code when I do things like that. App studio might have some better way to do it. IBI has been talking a lot about their push for "Responsive Design" So, maybe there is something there. I do know that the CSS is much better in HTML Composer from App Studio rather than from Dev Studio.

I haven't explored App Studio to heavily in 8.0.08 because it constantly crashes for the things I do. I hear that a number of improvements have been made in 8.0.09 and more in 8.1.03, but I'm not sure what those are. I know there are some people in the forum here that have explored the capabilities more then I have.

I did take a quick look through the 8.1.03 relp files, and it shows that in app studio there is an Auto Size Option under the properties of the IFrame, maybe that would be what you are looking for?

Well...

How about adding this to "function window_onload()"

document.getElementById('iframe1').style.height = window.innerHeight - 210 + 'px';

Greets,
Dave

Oooh.. found even a better solution. ( for not so old browsers...)

just type ( in the height property )

calc(100% - 200px)

Eric, Im going to talk to my WebFocus admins to see when we will next upgrade WebFocus.

Dave, neither of those seemed to work.

Mikey,

the first solution should work. No matter what WF or Browser version.

Did you replace the name 'iframe1' with whatever your iframe's name is?

Did you put the code in the right place?

Perhaps add:
alert ( 'hello world');
...to make sure the code is executed?

what should the Size Height in iFrame Properties be set to?

Here is the iFrame Styling Advanced:

left: 0px; top: 171px; width: 99%; height: 80%; overflow: visible; position: absolute; z-index: 1;

Here is the code for function window_onload:

//Begin function window_onload
function window_onload() {
var width = 1400;
var height = 1000;
window.resizeTo(width, height);
document.getElementById('fraReport').style.height = window.innerHeight - 210 + 'px';

UpdateData();

// TODO: Add your event handler code here
//add onInitialUpdate() function to make changes before initial run of the reports
}
//End function window_onload

quote:

Originally posted by eric.woerle:
HTML composer in Dev Studio doesn't understand the concept of a DIV. Unfortunately it puts everything in SPAN tags.... I drop to code when I do things like that.

Are you saying to edit the htm file in text editor? Whenever I do that, I get this message next time I open the htm file:

This file has been manually modified. There is no guarantee that the tool will be able to open this file in a usable state. Do you want to continue?

This size height doesn't matter...
...it'll get replaced by the javascript anyway.

this -should- work...
...unless.

I think innerHeight might not be supported by 'old' browsers...

....googlin'

@!$@#$ indeed IE9+

could that be the problem?



__________________________________
funny though...

var width = 1400;
var height = 1000;
window.resizeTo(width, height);

e.g. your window is always 1000px high?

in that case just set the iframe height to 800px I guess...

i am currently running IE9.

We originally set that so we could set the iFrame height, but we were then told it needs to auto resize. So I searched and this is what I think we should be using once we find a way to auto resize the iFrame.


var width = screen.width;
var height = screen.height;
window.resizeTo(width, height);

Dave

quote:

document.getElementById('iframe1').style.height = window.innerHeight - 210 + 'px';

The window.innerHeight property does not work the same for all browsers. I can't remember exactly what is different, but I think at the very least the innerHeight is calculated differently dependent on the browesr. The other thing is that your window_onload command will only work when the page is loaded. It will fire off once and be done. What you would need to do is to bind it to the resize event of the window. This can be done using the JQuery .resize function from the link I provided earlier. If it were me doing this coding, this is the way I would do it. I am comfortable with writing my own javascript and using JQuery. But from the responses that Mikey was providing, I got the feeling that he might not be so comfortable with doing these things (I appologize if I assumed wrong or if I am coming of as judgemental. that is not my intent ), so maybe there might be a more out of the box way of doing this. Thats why I suggested App Studio. Since App Studio has JQuery already integrated into the page, I thought maybe there might be an out of the box way to handle this. From what I saw in the documentation, it seems that maybe there is. Although since I don't use App Studio, someone with more experience with the tool should be able to weigh in better then I can.

Mikey

quote:

Are you saying to edit the htm file in text editor? Whenever I do that, I get this message next time I open the htm file:

This file has been manually modified. There is no guarantee that the tool will be able to open this file in a usable state. Do you want to continue?

Yes, that is exactly what I am saying. And yes you will get that message. There are certain pitfalls that can happen when doing this. The most common that I seem to hear about (and I watch out for myself), is that the HTML composer, for whatever reason, likes to put ALL of its HTML onto one line ... (smh). When that one line of code gets to long, and you open it in the text editor, the editor will break it into 2 lines. It will do so in the middle of a tag and it will appear like the whole thing is broken. This is an easy fix... You just go and format the text properly. Breaking lines at the end of elements so that they don't wrap. I would also suggest to not touch the xml unless you understand what you are doing. I've been able to figure out how certain tags in the XML work, but not most of them. Changing these will affect how a lot of the communication works. So I say again, unless you ABSOLUTELY know what you are doing in the XML... Leave it alone.

I did another quick search against W3Schools and I found this event

http://www.w3schools.com/jsref/event_onresize.asp

Try something like this:

  window.onresize=function(){myScript};

where your function calculates the size you want your iframe to be, using the innerHeight / innerWidth properties.

Eric, I agree.

I gave this solution especially because it could be done within the GUI without much coding.

Assuming the browser usually opens maximized, it's not really a problem. ( assumption ;-) )

on the resize event...
...I can remember vaguely that this only fires on actuall resize. Not on initial load. So you should do both. ( onload and onresize ).

Let's see what Mikey has to say ;-)



...the floor is yours.

I am hesitant to edit the htm file in text as I do not have much experience with html or javascript yet. I am told we do not have a planned date to upgrade WebFocus to a more stable version for App Studio. I did submit my fex and htm to IBI in a case and they said they would get back to me. I will post their recommendation as well when I get it.

Using the suggestion from Dave, you could achieve this by adding the following code to the "Embedded JavaScript" tab contents within HTML Composer -

function onInitialUpdate() {
  document.getElementById("report1").style.height = "calc(100% - 202px)";
}

T

Mikey,

If this works for you, could you add the suggestion to your case and also add the url for the post?


T

I am facing this problem.

I build an HTML page with multiples reports, I added iframes to be auto sized. It seems to work fine but now I wish to have their position relative to the previous iframe. Is it possible?

Ricardo, I was told AppStudio will autosize, we are currently testing v8105, but still using DevStudio.

quote:

Originally posted by Mikey:
Is there a way to autofit the iFrame in an htm file?

I was able to get an iFrame to autofit with some CSS code. The trick was putting the iFrame inside a div tag. I remember spending a lot of time pulling my hair out before I finally figured it out.

I repeat: Put the iFrame in a div tag! You will encounter nothing but frustration if you don't do that! This has to be one of the most obscure things about HTML I have ever had to deal with.

HTML:

<div id="panel4" class="display_cell">
  <iframe id="chart" src="" frameBorder="0" scrolling="no"></iframe>
</div>

CSS:

#chart {
  height:85%;
  width:100%;
  margin-top:8px;
}

I set the src property of the iFrame to a hyperlink that triggers a WebFOCUS chart to run. The chart is set to autofit and the iFrame also autofits within the div because of the percentages given in the CSS code.

(Question: Did Apple invent the iFrame?)

This message has been edited. Last edited by: Squatch,

quote:

Originally posted by eric.woerle:
HTML composer in Dev Studio doesn't understand the concept of a DIV...

...App studio might have some better way to do it...

I haven't explored App Studio to heavily in 8.0.08 because it constantly crashes for the things I do.

In App Studio, a DIV is a panel. Charts and reports seem to be IFRAMEs.

IFRAMEs can be given width and height percentages, but only if they are inside DIVs (You apparently have to spend lots of hours on the Internet and also be very lucky to find this out -- like I did -- or have to be a member of some secret society to discover this little bit of HTML knowledge). IFRAMEs will then conform to whatever shape the DIV is taking.

App Studio became stable for me with release 8.1.05 (But still quirky once in a while).

Here is proof-of-concept code:

<!-- Remove this line
<!DOCTYPE html>
<html>
<head>
<title>iFrame Demo</title>
</head>
<body style="width:97%;height:80%">
<div style="width:100%;height=50%;background-color:lightblue">
This is DIV #1
<br><br><br><br><br><br>
</div>
<div style="width:100%;height=50%;background-color:lightgreen">
This is DIV #2
<br>
<center>iFrame is black area</center>
<iframe style="width:75%;height:50%;color:white;background-color:black;margin:10%;frameBorder:0;scrolling:no"></iframe>
</div>
</body>
</html>
Remove this line -->

Remove the first and last lines, save to an HTML file, then open in a browser. The iFrame will resize based on percentages.

Mikey/Squatch/Ricardo,

Since originally looking at this ticket, I've looked at App Studio a bit more. I still hate it... but that conversation has been done to death, and IBI doesn't care about the people who actually have to use the tool...

Anyways App Studio does have the concept of Responsive Design (it seems to be based on IE8 and doesn't really conform to current day web standards, but hey when everyone else is dropping support for browsers without HTML 5, why would IBI want to). I found it absolutely infuriating, but maybe someone with less preconceived notions of how they want things to work would have more luck. My suggestion would be to take a course from IBI on the HTML Composer for App Studio. For me this stuff isn't very intuitive, but maybe it will be for someone else.

quote:

Originally posted by eric.woerle:
Anyways App Studio does have the concept of Responsive Design (it seems to be based on IE8 and doesn't really conform to current day web standards, but hey when everyone else is dropping support for browsers without HTML 5, why would IBI want to). I found it absolutely infuriating...

I just posted an example of responsive design the non-IBI way here:

[SHARING] Responsive design example code