Hi all, i trying to use fancybox but my page is loaded inside an iframe, so when i open fancybox, it show under bottom of scree ( i need to scroll down to see it). Iframe have scrolling="no" and height="1600".
> Hi all, > i trying to use fancybox but my page is loaded inside an iframe, so > when i open fancybox, it show under bottom of scree ( i need to scroll > down to see it). Iframe have scrolling="no" and height="1600".
I have the same problem: a page includes an iframe that is pretty long and scrollable and inside that iframe I open a fancybox (which also includes yet another iframe, but this is irrelevant here). Fancybox calculates the center of the iframe inside which it has to display itself and positions quite low on the screen because the iframe is long. I'd like it to be positioned in the center of the browser viewport instead. What I found to (somewhat) work is to use this callback when defining the attributes of fancybox (using version 1.3.1): 'onComplete': function() { $("#fancybox-wrap").css({ 'top':'10px', 'left':'10px' })} It works - moves the fancybox where I want it inside the iframe, but one problem is that it first shows it in the original position and then repositions it which is mildly annoying. I haven't found a good way to show it in the position I want it when it first gets drawn. Replacing 'onComplete' with 'onStart' doesn't do anything. I guess one way would be to have somehow make it invisible on onStart and then make it visible on onComplete when it has been repositioned.
> I have the same problem: a page includes an iframe that is pretty long > and scrollable and inside that iframe I open a fancybox (which also > includes yet another iframe, but this is irrelevant here). > Fancybox calculates the center of the iframe inside which it has to > display itself and positions quite low on the screen because the > iframe is long. > I'd like it to be positioned in the center of the browser viewport > instead. > What I found to (somewhat) work is to use this callback when defining > the attributes of fancybox (using version 1.3.1): > 'onComplete': function() { > $("#fancybox-wrap").css({ > 'top':'10px', > 'left':'10px' > })} > It works - moves the fancybox where I want it inside the iframe, but > one problem is that it first shows it in the original position and > then repositions it which is mildly annoying. > I haven't found a good way to show it in the position I want it when > it first gets drawn. Replacing 'onComplete' with 'onStart' doesn't do > anything. > I guess one way would be to have somehow make it invisible on onStart > and then make it visible on onComplete when it has been repositioned.
I understand that it can not be displayed outside of the iframe - this is obvious, but at least we should be able to easily position it explicitly where we want it (towards the top in my case). To turn the question around - forget about the iframe: Basically it would be great if we had another two public attributes (X & Y positions) that allow us to explicitly position the box when it's first drawn - right now it gets always drawn in the center and while it may work for most cases, it's not desirable in others (as we see in the case of iframes). And, of course, a third option one similar to centerOnScroll which keeps the box in this position on scrolling. Actually, centerOnScroll can be renamed to something like keepPositionOnScroll and it can easily accommodate both cases - when it's centered and when it's explicitly positioned. So, for example, if we have: XPos=10px, YPos=10px, keepPositionOnScroll=true, the box would stay in that position (10px from the top and left) when the vertical or the horizontal scrollbars of the viewport are moved.
On Mar 25, 8:07 pm, JFK <jfk.d...@gmail.com> wrote:
> On Mar 25, 8:39 am, ikalatch <ikalatc...@neosaej.com> wrote:
> > I have the same problem: a page includes aniframethat is pretty long > > and scrollable and inside thatiframeI open a fancybox (which also > > includes yet anotheriframe, but this is irrelevant here). > > Fancybox calculates the center of theiframeinside which it has to > > display itself and positions quite low on the screen because the > >iframeis long. > > I'd like it to be positioned in the center of the browser viewport > > instead. > > What I found to (somewhat) work is to use this callback when defining > > the attributes of fancybox (using version 1.3.1): > > 'onComplete': function() { > > $("#fancybox-wrap").css({ > > 'top':'10px', > > 'left':'10px' > > })} > > It works - moves the fancybox where I want it inside theiframe, but > > one problem is that it first shows it in the original position and > > then repositions it which is mildly annoying. > > I haven't found a good way to show it in the position I want it when > > it first gets drawn. Replacing 'onComplete' with 'onStart' doesn't do > > anything. > > I guess one way would be to have somehow make it invisible on onStart > > and then make it visible on onComplete when it has been repositioned.
>I understand that it can not be displayed >outside of the iframe - >this is obvious,
Not that obvious. http://fancybox.net/faq No. 3 also says : "....... You can modify FancyBox source to suit your needs" And a fellow fancybox fan did try modifying it to his needs ... see below copy of the email (that I haven't tried it yet but it makes sense to me)
>forget about the iframe: Basically it >would be great if we had another >two public attributes ...etc
let's the developer answer what he thinks of your suggestions
***copy of email ************** hi JFK it work, ive tried it using just a simple tweak, using the on load example $("a.sample").trigger("click");
here what ive done;
in my iframe page i called the parent window with the href e.g. onClick="callMe('www.google.com')" or if pics "/images/pics.png"
and call this script in my parent page
<script type="text/javascript"> function callMe(site){ $(".sample").fancybox({ 'width' : '97%', 'height' : '97%', 'href' : ''+site+'' //force href to change its site from the call function in the iframe page }); readyFancy() call to trigger the decoy link page } function readyFancy(){ $("a.sample").trigger("click"); } </script>
in my parent html we right a decoy link (this one is from the example on load fancybox)
<body> <a href="#" class="sample"></a> </body>
******
On Mar 30, 10:40 am, ikalatch <ikalatc...@neosaej.com> wrote:
> I understand that it can not be displayed outside of the iframe - this > is obvious, but at least we should be able to easily position it > explicitly where we want it (towards the top in my case). > To turn the question around - forget about the iframe: Basically it > would be great if we had another two public attributes (X & Y > positions) that allow us to explicitly position the box when it's > first drawn - right now it gets always drawn in the center and while > it may work for most cases, it's not desirable in others (as we see in > the case of iframes). And, of course, a third option one similar to > centerOnScroll which keeps the box in this position on scrolling. > Actually, centerOnScroll can be renamed to something like > keepPositionOnScroll and it can easily accommodate both cases - when > it's centered and when it's explicitly positioned. So, for example, if > we have: XPos=10px, YPos=10px, keepPositionOnScroll=true, the box > would stay in that position (10px from the top and left) when the > vertical or the horizontal scrollbars of the viewport are moved.
> On Mar 25, 8:07 pm, JFK <jfk.d...@gmail.com> wrote:
> > On Mar 25, 8:39 am, ikalatch <ikalatc...@neosaej.com> wrote:
> > > I have the same problem: a page includes aniframethat is pretty long > > > and scrollable and inside thatiframeI open a fancybox (which also > > > includes yet anotheriframe, but this is irrelevant here). > > > Fancybox calculates the center of theiframeinside which it has to > > > display itself and positions quite low on the screen because the > > >iframeis long. > > > I'd like it to be positioned in the center of the browser viewport > > > instead. > > > What I found to (somewhat) work is to use this callback when defining > > > the attributes of fancybox (using version 1.3.1): > > > 'onComplete': function() { > > > $("#fancybox-wrap").css({ > > > 'top':'10px', > > > 'left':'10px' > > > })} > > > It works - moves the fancybox where I want it inside theiframe, but > > > one problem is that it first shows it in the original position and > > > then repositions it which is mildly annoying. > > > I haven't found a good way to show it in the position I want it when > > > it first gets drawn. Replacing 'onComplete' with 'onStart' doesn't do > > > anything. > > > I guess one way would be to have somehow make it invisible on onStart > > > and then make it visible on onComplete when it has been repositioned.
> >I understand that it can not be displayed > >outside of the iframe - > >this is obvious,
> Not that obvious.http://fancybox.net/faq No. 3 also says : "....... You can modify > FancyBox source to suit your needs" > And a fellow fancybox fan did try modifying it to his needs ... see > below copy of the email (that I haven't tried it yet but it makes > sense to me)
> >forget about the iframe: Basically it > >would be great if we had another > >two public attributes ...etc
> let's the developer answer what he thinks of your suggestions
> ***copy of email ************** > hi JFK it work, ive tried it using just a simple tweak, using the on > load > example $("a.sample").trigger("click");
> here what ive done;
> in my iframe page i called the parent window with the href e.g. > onClick="callMe('www.google.com')" or if pics "/images/pics.png"
> and call this script in my parent page
> <script type="text/javascript"> > function callMe(site){ > $(".sample").fancybox({ > 'width' : '97%', > 'height' : '97%', > 'href' : ''+site+'' //force href to change its site from the > call function in the iframe page > }); > readyFancy() call to trigger the decoy link page > } > function readyFancy(){ > $("a.sample").trigger("click"); > } > </script>
> in my parent html we right a decoy link (this one is from the example > on load fancybox)
> On Mar 30, 10:40 am, ikalatch <ikalatc...@neosaej.com> wrote:
> > I understand that it can not be displayed outside of the iframe - this > > is obvious, but at least we should be able to easily position it > > explicitly where we want it (towards the top in my case). > > To turn the question around - forget about the iframe: Basically it > > would be great if we had another two public attributes (X & Y > > positions) that allow us to explicitly position the box when it's > > first drawn - right now it gets always drawn in the center and while > > it may work for most cases, it's not desirable in others (as we see in > > the case of iframes). And, of course, a third option one similar to > > centerOnScroll which keeps the box in this position on scrolling. > > Actually, centerOnScroll can be renamed to something like > > keepPositionOnScroll and it can easily accommodate both cases - when > > it's centered and when it's explicitly positioned. So, for example, if > > we have: XPos=10px, YPos=10px, keepPositionOnScroll=true, the box > > would stay in that position (10px from the top and left) when the > > vertical or the horizontal scrollbars of the viewport are moved.
> > On Mar 25, 8:07 pm, JFK <jfk.d...@gmail.com> wrote:
> > > On Mar 25, 8:39 am, ikalatch <ikalatc...@neosaej.com> wrote:
> > > > I have the same problem: a page includes aniframethat is pretty long > > > > and scrollable and inside thatiframeI open a fancybox (which also > > > > includes yet anotheriframe, but this is irrelevant here). > > > > Fancybox calculates the center of theiframeinside which it has to > > > > display itself and positions quite low on the screen because the > > > >iframeis long. > > > > I'd like it to be positioned in the center of the browser viewport > > > > instead. > > > > What I found to (somewhat) work is to use this callback when defining > > > > the attributes of fancybox (using version 1.3.1): > > > > 'onComplete': function() { > > > > $("#fancybox-wrap").css({ > > > > 'top':'10px', > > > > 'left':'10px' > > > > })} > > > > It works - moves the fancybox where I want it inside theiframe, but > > > > one problem is that it first shows it in the original position and > > > > then repositions it which is mildly annoying. > > > > I haven't found a good way to show it in the position I want it when > > > > it first gets drawn. Replacing 'onComplete' with 'onStart' doesn't do > > > > anything. > > > > I guess one way would be to have somehow make it invisible on onStart > > > > and then make it visible on onComplete when it has been repositioned.
> Yep, this makes sense - the iframe calling a script on the parent page > which in turn renders the box in the parent's document.
> On Mar 30, 5:26 pm, JFK <jfk.d...@gmail.com> wrote:
> > >I understand that it can not be displayed > > >outside of the iframe - > > >this is obvious,
> > Not that obvious.http://fancybox.net/faq No. 3 also says : "....... You can modify > > FancyBox source to suit your needs" > > And a fellow fancybox fan did try modifying it to his needs ... see > > below copy of the email (that I haven't tried it yet but it makes > > sense to me)
> > >forget about the iframe: Basically it > > >would be great if we had another > > >two public attributes ...etc
> > let's the developer answer what he thinks of your suggestions
> > ***copy of email ************** > > hi JFK it work, ive tried it using just a simple tweak, using the on > > load > > example $("a.sample").trigger("click");
> > here what ive done;
> > in my iframe page i called the parent window with the href e.g. > > onClick="callMe('www.google.com')" or if pics "/images/pics.png"
> > and call this script in my parent page
> > <script type="text/javascript"> > > function callMe(site){ > > $(".sample").fancybox({ > > 'width' : '97%', > > 'height' : '97%', > > 'href' : ''+site+'' //force href to change its site from the > > call function in the iframe page > > }); > > readyFancy() call to trigger the decoy link page > > } > > function readyFancy(){ > > $("a.sample").trigger("click"); > > } > > </script>
> > in my parent html we right a decoy link (this one is from the example > > on load fancybox)
> > On Mar 30, 10:40 am, ikalatch <ikalatc...@neosaej.com> wrote:
> > > I understand that it can not be displayed outside of the iframe - this > > > is obvious, but at least we should be able to easily position it > > > explicitly where we want it (towards the top in my case). > > > To turn the question around - forget about the iframe: Basically it > > > would be great if we had another two public attributes (X & Y > > > positions) that allow us to explicitly position the box when it's > > > first drawn - right now it gets always drawn in the center and while > > > it may work for most cases, it's not desirable in others (as we see in > > > the case of iframes). And, of course, a third option one similar to > > > centerOnScroll which keeps the box in this position on scrolling. > > > Actually, centerOnScroll can be renamed to something like > > > keepPositionOnScroll and it can easily accommodate both cases - when > > > it's centered and when it's explicitly positioned. So, for example, if > > > we have: XPos=10px, YPos=10px, keepPositionOnScroll=true, the box > > > would stay in that position (10px from the top and left) when the > > > vertical or the horizontal scrollbars of the viewport are moved.
> > > On Mar 25, 8:07 pm, JFK <jfk.d...@gmail.com> wrote:
> > > > On Mar 25, 8:39 am, ikalatch <ikalatc...@neosaej.com> wrote:
> > > > > I have the same problem: a page includes aniframethat is pretty long > > > > > and scrollable and inside thatiframeI open a fancybox (which also > > > > > includes yet anotheriframe, but this is irrelevant here). > > > > > Fancybox calculates the center of theiframeinside which it has to > > > > > display itself and positions quite low on the screen because the > > > > >iframeis long. > > > > > I'd like it to be positioned in the center of the browser viewport > > > > > instead. > > > > > What I found to (somewhat) work is to use this callback when defining > > > > > the attributes of fancybox (using version 1.3.1): > > > > > 'onComplete': function() { > > > > > $("#fancybox-wrap").css({ > > > > > 'top':'10px', > > > > > 'left':'10px' > > > > > })} > > > > > It works - moves the fancybox where I want it inside theiframe, but > > > > > one problem is that it first shows it in the original position and > > > > > then repositions it which is mildly annoying. > > > > > I haven't found a good way to show it in the position I want it when > > > > > it first gets drawn. Replacing 'onComplete' with 'onStart' doesn't do > > > > > anything. > > > > > I guess one way would be to have somehow make it invisible on onStart > > > > > and then make it visible on onComplete when it has been repositioned.
Does anyone have a working example of this - to avoid me randomly experimenting for hours on end
Was just about to reluctantly give up on fancybox as everything was going great until i realised the limitation of opening fancybox from within a iframe
> Does anyone have a working example of this - to avoid me randomly
> experimenting for hours on end
> Was just about to reluctantly give up on fancybox as everything was going
> great until i realised the limitation of opening fancybox from within a
> iframe
> you may want to write drex (two comments above yours)
> On Dec 28, 5:00 am, IGrahamL <grahamlov...@gmail.com> wrote:
> > Does anyone have a working example of this - to avoid me randomly
> > experimenting for hours on end
> > Was just about to reluctantly give up on fancybox as everything was going
> > great until i realised the limitation of opening fancybox from within a
> > iframe
> On Dec 29 2010, 1:55 pm, JFK <jfk.d...@gmail.com> wrote:
> > you may want to write drex (two comments above yours)
> > On Dec 28, 5:00 am, IGrahamL <grahamlov...@gmail.com> wrote:
> > > Does anyone have a working example of this - to avoid me randomly
> > > experimenting for hours on end
> > > Was just about to reluctantly give up on fancybox as everything was going
> > > great until i realised the limitation of opening fancybox from within a
> > > iframe
