Re: shadowbox resize iframe after content loads

[Gordon-35]

Can nobody help out with this?

On Sep 3, 12:06 pm, Gordon <gordon.mc...@...> wrote:

> On our website I am using a shadowbox to view videos hosted on another
> site in the product page window.  The problem is that recently the
> company hosting the videos have started providing several different
> size of videos.
>
> All the different video pages, however, have an element with an ID of
> container as the only child of the body element (in 2 cases it's a
> table, in a third a div, but all have an id of container).  I found
> that if I can manually resize the shadowbox by getting the clientwidth
> and clientheight of the #container element and setting the width and
> height of the shadowbox to these values I can get the shadowbox to
> perfectly contain the video without excess space.
>
> The problem is that I can't find a way of grabbign the width and
> height from within a script and applying the new size.  I tried typing
> $('#shadowbox_content').content().find ('#container') into the firebug
> console and got a permission denied error.
>
> Additionally, the iFrame doesn't exist until the shadowbox opens, so I
> need to find a way to get the iframt content when the iframe loads but
> to do it wit han iframe that doesn't exist until the containing
> shadowbox opens.
>
> Can anyone help?
>
> The only other solution I have it to just make the shadowbox big
> enough to hold any video size, but then there's a lot of white space
> in the shadowbox when the video is smaller than this.  Here are a few
> pages that use the shadowbox that show the problem:
>
> http://www.pcwb.com/catalogue/item/A0234261<- Biggest sizehttp://www.pcwb.com/catalogue/item/3DCONX01<- Most 3D Connexion
> videoshttp://www.pcwb.com/catalogue/item/WAC123<- Most videos on the site
> are this size

[BB-22]

Maybe you can use the onFinish callback:
http://mjijackson.com/shadowbox/doc/api.html

$(window).load(function(){

    var options = {
            onFinish:function() {
 // do what you want here
            // resize the shadowbox etc...
       }
    };

    Shadowbox.init(options);

});


On 5 Sep., 10:15, Gordon <gordon.mc...@...> wrote:

> Can nobody help out with this?
>
> On Sep 3, 12:06 pm, Gordon <gordon.mc...@...> wrote:
>
> > On our website I am using a shadowbox to view videos hosted on another
> > site in the product page window.  The problem is that recently the
> > company hosting the videos have started providing several different
> > size of videos.
>
> > All the different video pages, however, have an element with an ID of
> > container as the only child of the body element (in 2 cases it's a
> > table, in a third a div, but all have an id of container).  I found
> > that if I can manually resize the shadowbox by getting the clientwidth
> > and clientheight of the #container element and setting the width and
> > height of the shadowbox to these values I can get the shadowbox to
> > perfectly contain the video without excess space.
>
> > The problem is that I can't find a way of grabbign the width and
> > height from within a script and applying the new size.  I tried typing
> > $('#shadowbox_content').content().find ('#container') into the firebug
> > console and got a permission denied error.
>
> > Additionally, the iFrame doesn't exist until the shadowbox opens, so I
> > need to find a way to get the iframt content when the iframe loads but
> > to do it wit han iframe that doesn't exist until the containing
> > shadowbox opens.
>
> > Can anyone help?
>
> > The only other solution I have it to just make the shadowbox big
> > enough to hold any video size, but then there's a lot of white space
> > in the shadowbox when the video is smaller than this.  Here are a few
> > pages that use the shadowbox that show the problem:
>
> >http://www.pcwb.com/catalogue/item/A0234261<- Biggest sizehttp://www.pcwb.com/catalogue/item/3DCONX01<- Most 3D Connexion
> > videoshttp://www.pcwb.com/catalogue/item/WAC123<- Most videos on the site
> > are this size

[Gordon-35]

Thanks for the help, this is a good start as it lets me hook into
shadowbox load, but I'm still stuck with the other side of the
problem.  What I need to do is grab the width and height of an element
contained within the iFrame and resize the elements that contain the
iFrame based on those sizes.  As the iFrame is displaying content from
off-site it's causing a permission denied error (or at least I think
that's what's causing it).

On Sep 5, 9:52 am, "buchholz.bast...@..."
<buchholz.bast...@...> wrote:

> Maybe you can use the onFinish callback:http://mjijackson.com/shadowbox/doc/api.html
>
> $(window).load(function(){
>
>     var options = {
>             onFinish:function() {
>  // do what you want here
>             // resize the shadowbox etc...
>        }
>     };
>
>     Shadowbox.init(options);
>
> });
>
> On 5 Sep., 10:15, Gordon <gordon.mc...@...> wrote:
>
> > Can nobody help out with this?
>
> > On Sep 3, 12:06 pm, Gordon <gordon.mc...@...> wrote:
>
> > > On our website I am using a shadowbox to view videos hosted on another
> > > site in the product page window.  The problem is that recently the
> > > company hosting the videos have started providing several different
> > > size of videos.
>
> > > All the different video pages, however, have an element with an ID of
> > > container as the only child of the body element (in 2 cases it's a
> > > table, in a third a div, but all have an id of container).  I found
> > > that if I can manually resize the shadowbox by getting the clientwidth
> > > and clientheight of the #container element and setting the width and
> > > height of the shadowbox to these values I can get the shadowbox to
> > > perfectly contain the video without excess space.
>
> > > The problem is that I can't find a way of grabbign the width and
> > > height from within a script and applying the new size.  I tried typing
> > > $('#shadowbox_content').content().find ('#container') into the firebug
> > > console and got a permission denied error.
>
> > > Additionally, the iFrame doesn't exist until the shadowbox opens, so I
> > > need to find a way to get the iframt content when the iframe loads but
> > > to do it wit han iframe that doesn't exist until the containing
> > > shadowbox opens.
>
> > > Can anyone help?
>
> > > The only other solution I have it to just make the shadowbox big
> > > enough to hold any video size, but then there's a lot of white space
> > > in the shadowbox when the video is smaller than this.  Here are a few
> > > pages that use the shadowbox that show the problem:
>
> > >http://www.pcwb.com/catalogue/item/A0234261<- Biggest sizehttp://www.pcwb.com/catalogue/item/3DCONX01<- Most 3D Connexion
> > > videoshttp://www.pcwb.com/catalogue/item/WAC123<- Most videos on the site
> > > are this size

[BB-22]

Hi,
I have just googled around for some time and found this in the jquery
docs:
http://docs.jquery.com/Traversing/contents -> click example
so
var w = $
("#shadowbox_content").contents().find("#getsizefromthis").width()
var h = $
("#shadowbox_content").contents().find("#getsizefromthis").height()
// do something else with them

I tested this in firebug and it thrown an error that read the
information of this element...
Just try it yourself maybe it works!


On 5 Sep., 13:48, Gordon <gordon.mc...@...> wrote:

> Thanks for the help, this is a good start as it lets me hook into
> shadowbox load, but I'm still stuck with the other side of the
> problem.  What I need to do is grab the width and height of an element
> contained within the iFrame and resize the elements that contain the
> iFrame based on those sizes.  As the iFrame is displaying content from
> off-site it's causing a permission denied error (or at least I think
> that's what's causing it).
>
> On Sep 5, 9:52 am, "buchholz.bast...@..."
>
> <buchholz.bast...@...> wrote:
> > Maybe you can use the onFinish callback:http://mjijackson.com/shadowbox/doc/api.html
>
> > $(window).load(function(){
>
> >     var options = {
> >             onFinish:function() {
> >  // do what you want here
> >             // resize the shadowbox etc...
> >        }
> >     };
>
> >     Shadowbox.init(options);
>
> > });
>
> > On 5 Sep., 10:15, Gordon <gordon.mc...@...> wrote:
>
> > > Can nobody help out with this?
>
> > > On Sep 3, 12:06 pm, Gordon <gordon.mc...@...> wrote:
>
> > > > On our website I am using a shadowbox to view videos hosted on another
> > > > site in the product page window.  The problem is that recently the
> > > > company hosting the videos have started providing several different
> > > > size of videos.
>
> > > > All the different video pages, however, have an element with an ID of
> > > > container as the only child of the body element (in 2 cases it's a
> > > > table, in a third a div, but all have an id of container).  I found
> > > > that if I can manually resize the shadowbox by getting the clientwidth
> > > > and clientheight of the #container element and setting the width and
> > > > height of the shadowbox to these values I can get the shadowbox to
> > > > perfectly contain the video without excess space.
>
> > > > The problem is that I can't find a way of grabbign the width and
> > > > height from within a script and applying the new size.  I tried typing
> > > > $('#shadowbox_content').content().find ('#container') into the firebug
> > > > console and got a permission denied error.
>
> > > > Additionally, the iFrame doesn't exist until the shadowbox opens, so I
> > > > need to find a way to get the iframt content when the iframe loads but
> > > > to do it wit han iframe that doesn't exist until the containing
> > > > shadowbox opens.
>
> > > > Can anyone help?
>
> > > > The only other solution I have it to just make the shadowbox big
> > > > enough to hold any video size, but then there's a lot of white space
> > > > in the shadowbox when the video is smaller than this.  Here are a few
> > > > pages that use the shadowbox that show the problem:
>
> > > >http://www.pcwb.com/catalogue/item/A0234261<- Biggest sizehttp://www.pcwb.com/catalogue/item/3DCONX01<- Most 3D Connexion
> > > > videoshttp://www.pcwb.com/catalogue/item/WAC123<- Most videos on the site
> > > > are this size

[Gordon-35]

That's basically what I've been experimenting with in the FireBug
console, it results in a permission denied error being logged to the
console.

On Sep 5, 1:15 pm, "buchholz.bast...@..."
<buchholz.bast...@...> wrote:

> Hi,
> I have just googled around for some time and found this in the jquery
> docs:http://docs.jquery.com/Traversing/contents-> click example
> so
> var w = $
> ("#shadowbox_content").contents().find("#getsizefromthis").width()
> var h = $
> ("#shadowbox_content").contents().find("#getsizefromthis").height()
> // do something else with them
>
> I tested this in firebug and it thrown an error that read the
> information of this element...
> Just try it yourself maybe it works!
>
> On 5 Sep., 13:48, Gordon <gordon.mc...@...> wrote:
>
> > Thanks for the help, this is a good start as it lets me hook into
> > shadowbox load, but I'm still stuck with the other side of the
> > problem.  What I need to do is grab the width and height of an element
> > contained within the iFrame and resize the elements that contain the
> > iFrame based on those sizes.  As the iFrame is displaying content from
> > off-site it's causing a permission denied error (or at least I think
> > that's what's causing it).
>
> > On Sep 5, 9:52 am, "buchholz.bast...@..."
>
> > <buchholz.bast...@...> wrote:
> > > Maybe you can use the onFinish callback:http://mjijackson.com/shadowbox/doc/api.html
>
> > > $(window).load(function(){
>
> > >     var options = {
> > >             onFinish:function() {
> > >  // do what you want here
> > >             // resize the shadowbox etc...
> > >        }
> > >     };
>
> > >     Shadowbox.init(options);
>
> > > });
>
> > > On 5 Sep., 10:15, Gordon <gordon.mc...@...> wrote:
>
> > > > Can nobody help out with this?
>
> > > > On Sep 3, 12:06 pm, Gordon <gordon.mc...@...> wrote:
>
> > > > > On our website I am using a shadowbox to view videos hosted on another
> > > > > site in the product page window.  The problem is that recently the
> > > > > company hosting the videos have started providing several different
> > > > > size of videos.
>
> > > > > All the different video pages, however, have an element with an ID of
> > > > > container as the only child of the body element (in 2 cases it's a
> > > > > table, in a third a div, but all have an id of container).  I found
> > > > > that if I can manually resize the shadowbox by getting the clientwidth
> > > > > and clientheight of the #container element and setting the width and
> > > > > height of the shadowbox to these values I can get the shadowbox to
> > > > > perfectly contain the video without excess space.
>
> > > > > The problem is that I can't find a way of grabbign the width and
> > > > > height from within a script and applying the new size.  I tried typing
> > > > > $('#shadowbox_content').content().find ('#container') into the firebug
> > > > > console and got a permission denied error.
>
> > > > > Additionally, the iFrame doesn't exist until the shadowbox opens, so I
> > > > > need to find a way to get the iframt content when the iframe loads but
> > > > > to do it wit han iframe that doesn't exist until the containing
> > > > > shadowbox opens.
>
> > > > > Can anyone help?
>
> > > > > The only other solution I have it to just make the shadowbox big
> > > > > enough to hold any video size, but then there's a lot of white space
> > > > > in the shadowbox when the video is smaller than this.  Here are a few
> > > > > pages that use the shadowbox that show the problem:
>
> > > > >http://www.pcwb.com/catalogue/item/A0234261<- Biggest sizehttp://www.pcwb.com/catalogue/item/3DCONX01<- Most 3D Connexion
> > > > > videoshttp://www.pcwb.com/catalogue/item/WAC123<- Most videos on the site
> > > > > are this size

[Karl Swedberg-2]

Hi Gordon,

Someone else can correct me if I'm wrong (please), but as I understand it, if the content within the iframe comes from a different domain, you won't be able to manipulate it via JavaScript. This is a cross-site security "feature" of JavaScript / browsers.

--Karl

____________

Karl Swedberg

www.englishrules.com

www.learningjquery.com

On Sep 8, 2008, at 8:20 AM, Gordon wrote:

That's basically what I've been experimenting with in the FireBug
console, it results in a permission denied error being logged to the
console.

On Sep 5, 1:15 pm, "buchholz.bast...@..."
<buchholz.bast...@...> wrote:

Hi,

I have just googled around for some time and found this in the jquery

docs:http://docs.jquery.com/Traversing/contents-> click example

so

var w = $

("#shadowbox_content").contents().find("#getsizefromthis").width()

var h = $

("#shadowbox_content").contents().find("#getsizefromthis").height()

// do something else with them

I tested this in firebug and it thrown an error that read the

information of this element...

Just try it yourself maybe it works!

On 5 Sep., 13:48, Gordon <gordon.mc...@...> wrote:

Thanks for the help, this is a good start as it lets me hook into

shadowbox load, but I'm still stuck with the other side of the

problem.  What I need to do is grab the width and height of an element

contained within the iFrame and resize the elements that contain the

iFrame based on those sizes.  As the iFrame is displaying content from

off-site it's causing a permission denied error (or at least I think

that's what's causing it).

On Sep 5, 9:52 am, "buchholz.bast...@..."

<buchholz.bast...@...> wrote:

Maybe you can use the onFinish callback:http://mjijackson.com/shadowbox/doc/api.html

$(window).load(function(){

    var options = {

            onFinish:function() {

 // do what you want here

            // resize the shadowbox etc...

       }

    };

    Shadowbox.init(options);

});

On 5 Sep., 10:15, Gordon <gordon.mc...@...> wrote:

Can nobody help out with this?

On Sep 3, 12:06 pm, Gordon <gordon.mc...@...> wrote:

On our website I am using a shadowbox to view videos hosted on another

site in the product page window.  The problem is that recently the

company hosting the videos have started providing several different

size of videos.

All the different video pages, however, have an element with an ID of

container as the only child of the body element (in 2 cases it's a

table, in a third a div, but all have an id of container).  I found

that if I can manually resize the shadowbox by getting the clientwidth

and clientheight of the #container element and setting the width and

height of the shadowbox to these values I can get the shadowbox to

perfectly contain the video without excess space.

The problem is that I can't find a way of grabbign the width and

height from within a script and applying the new size.  I tried typing

$('#shadowbox_content').content().find ('#container') into the firebug

console and got a permission denied error.

Additionally, the iFrame doesn't exist until the shadowbox opens, so I

need to find a way to get the iframt content when the iframe loads but

to do it wit han iframe that doesn't exist until the containing

shadowbox opens.

Can anyone help?

The only other solution I have it to just make the shadowbox big

enough to hold any video size, but then there's a lot of white space

in the shadowbox when the video is smaller than this.  Here are a few

pages that use the shadowbox that show the problem:

http://www.pcwb.com/catalogue/item/A0234261<- Biggest sizehttp://www.pcwb.com/catalogue/item/3DCONX01<- Most 3D Connexion

videoshttp://www.pcwb.com/catalogue/item/WAC123<- Most videos on the site

are this size

[Gordon-35]

That's what I feared, but I was hoping there was a way around it.

On Sep 8, 2:18 pm, Karl Swedberg <k...@...> wrote:

> Hi Gordon,
>
> Someone else can correct me if I'm wrong (please), but as I understand  
> it, if the content within the iframe comes from a different domain,  
> you won't be able to manipulate it via JavaScript. This is a cross-
> site security "feature" of JavaScript / browsers.
>
> --Karl
>
> ____________
> Karl Swedbergwww.englishrules.comwww.learningjquery.com
>
> On Sep 8, 2008, at 8:20 AM, Gordon wrote:
>
>
>
> > That's basically what I've been experimenting with in the FireBug
> > console, it results in a permission denied error being logged to the
> > console.
>
> > On Sep 5, 1:15 pm, "buchholz.bast...@..."
> > <buchholz.bast...@...> wrote:
> >> Hi,
> >> I have just googled around for some time and found this in the jquery
> >> docs:http://docs.jquery.com/Traversing/contents-> click example
> >> so
> >> var w = $
> >> ("#shadowbox_content").contents().find("#getsizefromthis").width()
> >> var h = $
> >> ("#shadowbox_content").contents().find("#getsizefromthis").height()
> >> // do something else with them
>
> >> I tested this in firebug and it thrown an error that read the
> >> information of this element...
> >> Just try it yourself maybe it works!
>
> >> On 5 Sep., 13:48, Gordon <gordon.mc...@...> wrote:
>
> >>> Thanks for the help, this is a good start as it lets me hook into
> >>> shadowbox load, but I'm still stuck with the other side of the
> >>> problem.  What I need to do is grab the width and height of an  
> >>> element
> >>> contained within the iFrame and resize the elements that contain the
> >>> iFrame based on those sizes.  As the iFrame is displaying content  
> >>> from
> >>> off-site it's causing a permission denied error (or at least I think
> >>> that's what's causing it).
>
> >>> On Sep 5, 9:52 am, "buchholz.bast...@..."
>
> >>> <buchholz.bast...@...> wrote:
> >>>> Maybe you can use the onFinish callback:http://mjijackson.com/shadowbox/doc/api.html
>
> >>>> $(window).load(function(){
>
> >>>>     var options = {
> >>>>             onFinish:function() {
> >>>>  // do what you want here
> >>>>             // resize the shadowbox etc...
> >>>>        }
> >>>>     };
>
> >>>>     Shadowbox.init(options);
>
> >>>> });
>
> >>>> On 5 Sep., 10:15, Gordon <gordon.mc...@...> wrote:
>
> >>>>> Can nobody help out with this?
>
> >>>>> On Sep 3, 12:06 pm, Gordon <gordon.mc...@...> wrote:
>
> >>>>>> On our website I am using a shadowbox to view videos hosted on  
> >>>>>> another
> >>>>>> site in the product page window.  The problem is that recently  
> >>>>>> the
> >>>>>> company hosting the videos have started providing several  
> >>>>>> different
> >>>>>> size of videos.
>
> >>>>>> All the different video pages, however, have an element with an  
> >>>>>> ID of
> >>>>>> container as the only child of the body element (in 2 cases  
> >>>>>> it's a
> >>>>>> table, in a third a div, but all have an id of container).  I  
> >>>>>> found
> >>>>>> that if I can manually resize the shadowbox by getting the  
> >>>>>> clientwidth
> >>>>>> and clientheight of the #container element and setting the  
> >>>>>> width and
> >>>>>> height of the shadowbox to these values I can get the shadowbox  
> >>>>>> to
> >>>>>> perfectly contain the video without excess space.
>
> >>>>>> The problem is that I can't find a way of grabbign the width and
> >>>>>> height from within a script and applying the new size.  I tried  
> >>>>>> typing
> >>>>>> $('#shadowbox_content').content().find ('#container') into the  
> >>>>>> firebug
> >>>>>> console and got a permission denied error.
>
> >>>>>> Additionally, the iFrame doesn't exist until the shadowbox  
> >>>>>> opens, so I
> >>>>>> need to find a way to get the iframt content when the iframe  
> >>>>>> loads but
> >>>>>> to do it wit han iframe that doesn't exist until the containing
> >>>>>> shadowbox opens.
>
> >>>>>> Can anyone help?
>
> >>>>>> The only other solution I have it to just make the shadowbox big
> >>>>>> enough to hold any video size, but then there's a lot of white  
> >>>>>> space
> >>>>>> in the shadowbox when the video is smaller than this.  Here are  
> >>>>>> a few
> >>>>>> pages that use the shadowbox that show the problem:
>
> >>>>>>http://www.pcwb.com/catalogue/item/A0234261<- Biggest sizehttp://www.pcwb.com/catalogue/item/3DCONX01
> >>>>>> <- Most 3D Connexion
> >>>>>> videoshttp://www.pcwb.com/catalogue/item/WAC123<- Most videos  
> >>>>>> on the site
> >>>>>> are this size