[jQuery] Re: Can JQuery solve the iframe height=100% problem?
If you are going to apply a specific iframe height via script...
$('#myIframe').css({height:$(this).parent('td').height()});
...You MUST bind an event to window.resize to *re-size* the iframe
whenever the browser window is resized.
/Kevin
On Jan 30, 10:58 am, jquertil wrote:
> I think you're going down the wrong path - you shouldnt need to script
> anything to get a CSS attribute to work.
>
> usually when I run into this problem it is because somewhere in my
> document tree there is a parent lement that has no height attribute
> set.
>
> So if you have html > someDiv > anotherDiv > table > tr >td > iframe
>
> every one of the elements should have a parent with height set
>
> At least this is how I usually end up solving the dreaded height 100%
> problem whenever I come to it.
>
> Alternatively, you can try
>
> $('#myIframe').css({height:$(this).parent('td').height()});
[jQuery] Re: Can JQuery solve the iframe height=100% problem?
Hi Dave,
You've probably long-since moved on from this, but I stumbled across
this topic again, so thought I'd answer anyway...
There are lots of examples on the Layout website for creating a
'layout' around an iframe - use one of these as a starting point...
http://layout.jquery-dev.net/demos/frames.html
http://layout.jquery-dev.net/samples/iframe_south.html
Or use ANY demos as a starting point and just drop in your iframe:
http://layout.jquery-dev.net/demos.html
The UI/Layout website itself uses iframes for some pages so it can
wrap content from other sites, like:
http://layout.jquery-dev.net/discuss.html
Rather than use the iframe itself as a layout 'pane', you could also
put the iframe 'inside' a regular pane-div. Since the pane-div has a
width and height set, all you need is:
This will auto-size the iframe to fit within the inner-dimensions of
the pane - ie, inside the padding. The Layout widget provides
virtually unlimited options for auto-sizing iframes and wrapping other
content around it - like headers, footers, sidebars, etc. If you want
to use Layout, then first check out the website documentation. If you
need more assistance, use the dedicated discussion group...
http://layout.jquery-dev.net/discuss.html
HOWEVER, a page-layout may not be suitable to your needs because it a
'Javascript' solution, so users MUST have JS enabled or else your page
will not look as you want. So depending on your need, you may find a
pure CSS solutions preferable, even if it is does require some ugly
nesting.
Hope that helps.
/Kevin
On Jan 28, 11:39 am, "laredotorn...@zipmail.com"
wrote:
> Hi Kevin, I really appreciate your help with all this. Unfortunately,
> I added what you had suggested ...
>
>
> $(document).ready(function() {
> $("body").layout({
> closable: false
> , resizable: false
> , spacing_open: 0
> , center_paneSelector: "#fileTreeIframe"
> });
> });
>
> scroll="auto">
>
> and even included the normal script instaed of the .min.js file ...
>
>
[jQuery] Re: Can JQuery solve the iframe height=100% problem?
I think you're going down the wrong path - you shouldnt need to script
anything to get a CSS attribute to work.
usually when I run into this problem it is because somewhere in my
document tree there is a parent lement that has no height attribute
set.
So if you have html > someDiv > anotherDiv > table > tr >td > iframe
every one of the elements should have a parent with height set
At least this is how I usually end up solving the dreaded height 100%
problem whenever I come to it.
Alternatively, you can try
$('#myIframe').css({height:$(this).parent('td').height()});
[jQuery] Re: Can JQuery solve the iframe height=100% problem?
Hi Kevin, I really appreciate your help with all this. Unfortunately,
I added what you had suggested ...
$(document).ready(function() {
$("body").layout({
closable: false
, resizable: false
, spacing_open: 0
, center_paneSelector: "#fileTreeIframe"
});
});
and even included the normal script instaed of the .min.js file ...
but sadly still now luck (screen shot is as before). There are no JS
errors on the page. Do I have to give every element on my page a
class name like you mention above, or should it be enough to only name
the iframe?
Thanks, - Dave
On Jan 28, 10:11 am, Kevin Dalman wrote:
> HI Dave,
>
> You can find all the info in the Layout documentation and examples,
> but here is a quick answer...
>
> The widget needs to 'find' the iframe. The default method is to give
> the element a ui-layout class, like this...
>
>
>
> OR, since the iframe has an ID, you can tell the widget to use that...
>
>
> $(document).ready(function() {
> $("body").layout({
> closable: false
> , resizable: false
> , spacing_open: 0
> , center_paneSelector: "#fileTreeIframe"
> });});
>
>
>
> /Kevin
>
> On Jan 27, 8:35 am, "laredotorn...@zipmail.com"
>
>
>
> wrote:
> > Hi Kevin,
>
> > How do I apply this expansion to the iframe specifically? I included
> > this on my page ...
>
> > > script>
> >