SB3b and resizing iframe

classic Classic list List threaded Threaded
9 messages Options
Reply | Threaded
Open this post in threaded view
|

SB3b and resizing iframe

snoopaloop
I'm trying to resize the content of the shadowbox (sb-content div) to fit content loaded using the iframe player. I've managed to resize it after shadowbox has loaded, but it's ugly.

So, I'd like to know if someone has a good solution for resizing the shadowbox content div to fit a dynamically sized html page being loaded in the iframe player.

Any ideas?
Reply | Threaded
Open this post in threaded view
|

Re: SB3b and resizing iframe

mrbinky3000
I would also like to know how to manually shadowbox to resize.

- The code should be located within the HTML of the document loaded into the iframe
somthing like window.parent.Shadowbox.doResize(w,h) would be nice

There are examples that are PRE Shadowbox 3.0b

Can we make this a feature request?  

Thanks,

Mrb3k
Reply | Threaded
Open this post in threaded view
|

Re: SB3b and resizing iframe

mrbinky3000
In reply to this post by snoopaloop
Guess what, solved my own problem.  This works as of June 23, 2009.

Download source version 3.0b of Shadowbox.

Skip to line 2192 of the code.
Insert the following new method to the Shadowbox.skin class:

dynamicResize: function(w,h) {
  var c = S.content;
  if(!c) return;
 
  c.width = w;
  c.height = h;

  // set new dimensions
  var d = setDimensions(c.height, c.width, c.resizable);
  resizeContent(function(){;}); //needs callback function to animate
}

Now, edit the file that is contained in the iframe.  Use the following javascript to resize the window at will
window.parent.Shadowbox.skin.dynamicResize(400,500);

That's it!  This should be added to the final source, if you ask me.
Reply | Threaded
Open this post in threaded view
|

Re: SB3b and resizing iframe

eTard
could not get your suggestion to work..

here are the final lines (2167 - end of code) with your code added to the "shadowbox.js" file starting after line 2192 as you said in the "source" version of 3.0b. (I included the function above just to make sure I added code correctly.)

        /**
         * Called when the window is resized.
         *
         * @return  void
         * @public
         */
        onWindowResize: function(){
            var c = S.content;
            if(!c) return;

            // set new dimensions
            var d = setDimensions(c.height, c.width, c.resizable);

            adjustWidth(d.width, d.left, false);
            adjustHeight(d.inner_h, d.top, false);

            var el = U.get(S.contentId());
            if(el){
                // resize resizable content when in resize mode
                if(c.resizable && S.options.handleOversize == 'resize'){
                    el.height = d.resize_h;
                    el.width = d.resize_w;
                }
            }
        }

dynamicResize: function(w,h) {
  var c = S.content;
  if(!c) return;
 
  c.width = w;
  c.height = h;

  // set new dimensions
  var d = setDimensions(c.height, c.width, c.resizable);
  resizeContent(function(){;}); //needs callback function to animate
}


    };

}();

then, I have SB open a page with an iframe in it. then, that iframe calls a page into said iframe of course. then, in THAT page that gets called into the iframe is your code snippet

<script type="text/javascript"> window.parent.Shadowbox.skin.dynamicResize(900,100); </script>
my page with the iframe and the above little code snippet uses this code to call the iframe, notice no size parameters in my iframe code

<iframe id="iframe" name="iframe" src="test2.html" scrolling="no" frameborder="0">
</iframe>

assuming your code is placed correctly above in "shadowbox.js", it break the SB from working. I remove your code from "shadowbox.js" and the SB works - but of course, no resize.

Reply | Threaded
Open this post in threaded view
|

Re: SB3b and resizing iframe

mattmatt
This works...
        /**
         * Called when the window is resized.
         *
         * @return  void
         * @public
         */
        onWindowResize: function(){
            var c = S.content;
            if(!c) return;

            // set new dimensions
            var d = setDimensions(c.height, c.width, c.resizable);

            adjustWidth(d.width, d.left, false);
            adjustHeight(d.inner_h, d.top, false);

            var el = U.get(S.contentId());
            if(el){
                // resize resizable content when in resize mode
                if(c.resizable && S.options.handleOversize == 'resize'){
                    el.height = d.resize_h;
                    el.width = d.resize_w;
                }
            }
        }
        // customization
        ,dynamicResize: function(w,h) {
                          var c = S.content;
                          if(!c) return;
                         
                          c.width = w;
                          c.height = h;
                       
                          // set new dimensions
                          var d = setDimensions(c.height, c.width, c.resizable);
                          resizeContent(function(){;}); //needs callback function to animate
        }

    };

}();
Reply | Threaded
Open this post in threaded view
|

Re: SB3b and resizing iframe

eTard
that works... I see the issue you missed in my write up that was the confusion from your write up. I had the SB call a page with an iframe in it when in fact SB should just call the iframe content itself.  
Reply | Threaded
Open this post in threaded view
|

Re: SB3b and resizing iframe

eTard
could this be made to work under version 3.0? I have 3.0 running on a different site and would like to integrate this, but see you say it must be in 3.0b...true?
Reply | Threaded
Open this post in threaded view
|

Re: SB3b and resizing iframe

Chris
In reply to this post by mrbinky3000
AWESOME!  This is what I was looking for for my registration form resizing!

Thanks!!!
Reply | Threaded
Open this post in threaded view
|

Re: SB3b and resizing iframe

eTard
lets see it in action.

the issue I see here is that it is not a "dynamic" resize

since your using something like this ti tell it exactly what size to be

<script type="text/javascript"> window.parent.Shadowbox.skin.dynamicResize(500,500); </script>
your telling it exactly to resize to that size.... SO, as I have seen in some browsers, if you make it just perfect size SB to fit the content, by setting sizes, if the browsers renders the content a bit different you get scroll bars. then, when it rolls to the next page and you tell it to resize with the above code, same issue... isn't the goal to have SB determine the contents size and grow to it? not to tell each page to resize to a set dimension as browsers than can fudge the content and thus.. you might get scroll bars.