Hi Kevin, I really appreciate your help with all this. Unfortunately,
I added what you had suggested ...
<script type="text/javascript">
$(document).ready(function() {
$("body").layout({
closable: false
, resizable: false
, spacing_open: 0
, center_paneSelector: "#fileTreeIframe"
});
});
</script>
<iframe id="fileTreeIframe" class="ui-layout-center" style="border:0px
none #ffffff;" src="file_tree.php" border="0" width="100%"
scroll="auto"></iframe>
and even included the normal script instaed of the .min.js file ...
<script type="text/javascript" src="../scripts/jquery.layout.js"></
script>
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 <kevin.dal...@gmail.com> 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...
>
> <iframe id="fileTreeIframe" class="ui-layout-center" ...>
>
> OR, since the iframe has an ID, you can tell the widget to use that...
>
> <script type="text/javascript">
> $(document).ready(function() {
> $("body").layout({
> closable: false
> , resizable: false
> , spacing_open: 0
> , center_paneSelector: "#fileTreeIframe"
> });});
>
> </script>
>
> /Kevin
>
> On Jan 27, 8:35 am, "laredotorn...@zipmail.com"
>
>
>
> <laredotorn...@zipmail.com> wrote:
> > Hi Kevin,
>
> > How do I apply this expansion to the iframe specifically? I included
> > this on my page ...
>
> > <script type="text/javascript" src="../scriptsjquery.layout.min.js"></
> > script>
> > <script type="text/javascript">
> > $(document).ready(function() {
> > $("body").layout({
> > closable: false
> > , resizable: false
> > , spacing_open: 0
> > });
> > });
> > </script>
> > <iframe id="fileTreeIframe" style="border:0px none #ffffff;"
> > src="file_tree.php" border="0" width="100%" scroll="auto"></iframe>
>
> > but still no love! ...http://screencast.com/t/aJxegNZmv
>
> > - Dave
>
> > On Jan 26, 12:27 pm, Kevin Dalman <kevin.dal...@gmail.com> wrote:
>
> > > Hi Dave,
>
> > > This plugin may be more than you need, but...
>
> > > The UI/Layout widget will automatically position and size an iframe
> > > (or other element) to fill the entire page, OR allow for a header,
> > > footer, or sidebars. The code and markup are dead-simple. Here is an
> > > example with a page-banner and an iframe. Everything is done for you,
> > > including eliminating the 'body scrollbar'...
>
> > > $(document).ready(function(){
> > > $("body").layout({
> > > closable: false
> > > , resizable: false
> > > , spacing_open: 0
> > > });
>
> > > });
>
> > > <DIV class="ui-layout-north"> [Banner here] </DIV>
> > > <IFRAME class="ui-layout-center" src="myIframe.html" ... >
>
> > > That's it! I recommend setting an iframe width & height for non-
> > > Javascript browsers, but it's not necessary for Layout. Plus you must
> > > set your preferred iframe options, like scrolling, border, padding,
> > > etc.
>
> > > Plug-in website:http://layout.jquery-dev.net
>
> > > Simple iframe demo:http://layout.jquery-dev.net/demos/frames.html
>
> > > The Layout website itself used iframe pages with a 'banner', like:
>
> > >http://layout.jquery-dev.net/discuss.html
>
> > > Hope this helps.
>
> > > /Kevin
>
> > > On Jan 26, 6:55 am, "laredotorn...@zipmail.com"
>
> > > <laredotorn...@zipmail.com> wrote:
> > > > My iframe is also hard-coded. But here is what I get when I do
> > > > console.log statements ...
>
> > > > $('#fileTreeIframe').load( function() {
> > > > var $ifbody = $(this).contents().find
> > > > ( 'body' );
> > > > console.log($ifbody); // Outputs
> > > > Object length=1 0=body prevObject=Object jquery=1.2.6
> > > > $ifbody.css( 'height','auto' );
> > > > console.log($ifbody.height()); //
> > > > Outputs 0
> > > > $(this).height( $ifbody.height() );
> > > > });
>
> > > > Obviously the troubling thing here is that height is outputting zero.
> > > > Can you provide the HTML that surrounds your hard-coded iframe? There
> > > > must be something else I'm not setting in the CSS or HTML.
>
> > > > Thanks, - Dave
>
> > > > On Jan 25, 1:53 pm, dbzz <j...@briskey.net> wrote:
>
> > > > > i have the iframe hardcoded in the html. if you are adding it to the
> > > > > dom with js, it won't get the load event binding. you might try
> > > > > livequery or something like it.
>
> > > > > On Jan 25, 10:21 am, "laredotorn...@zipmail.com"
>
> > > > > <laredotorn...@zipmail.com> wrote:
> > > > > > Hi dbzz,
>
> > > > > > I tried the code you provided, but went from this ...
>
> > > > > >http://screencast.com/t/W8lOtgKO
>
> > > > > > to the iframe disappearing entirely ...
>
> > > > > >http://screencast.com/t/jCTjOLhpeX
>
> > > > > > I put your code in a $(document).ready() block (below). Are there
> > > > > > any
> > > > > > other modifications I should make to get it to display at 100%?
>
> > > > > > $(document).ready(function() {
> > > > > > $('#fileTreeIframe').load( function() {
> > > > > > var $ifbody = $(this).contents().find
> > > > > > ( 'body' );
> > > > > > $ifbody.css( 'height','auto' );
> > > > > > $(this).height( $ifbody.height() );
> > > > > > });
> > > > > > });
>
> > > > > > Thanks, - Dave- Hide quoted text -
>
> > > > > - Show quoted text -- Hide quoted text -
>
> > > > - Show quoted text -- Hide quoted text -
>
> > > - Show quoted text -- Hide quoted text -
>
> > - Show quoted text -- Hide quoted text -
>
> - Show quoted text -
