absolute positioning fancybox

2,532 views
Skip to first unread message

Michael Kansky

unread,
Oct 15, 2011, 10:40:36 PM10/15/11
to fancybox
No matter what i do, i cannot absolute position fancybox onComplete
Seems like left position is completely ingored and fabcybox wants to
be in center of the screen.
Top position is accepted by fancybox but left position is ignored.
Here's what i have:

$.fancybox({
'zoomSpeedIn': 300,
'zoomSpeedOut': 300,
'modal': modal,
'href':url,
'padding': 0,
'width': 800,
'height': 400,
'type':type,
'onComplete': function(){
$('#fancybox-wrap').css('top',top +'px');
$('#fancybox-wrap').css('left','109' +'px');
}
}
});


Is there anything i can do to instruct Fancybox not to position it in
center?

JFK

unread,
Oct 16, 2011, 12:49:07 AM10/16/11
to fancybox
$('#fancybox-wrap').css({
'position':'absolute',
'top':'10px',
'left':'109px'
});

On Oct 15, 7:40 pm, Michael Kansky <michael.kansky

Michael Kansky

unread,
Oct 16, 2011, 10:01:50 AM10/16/11
to fancybox
It ignores it.
The Fancybox script adds STYLE attribute to the fancybox-wrap that
completely overrides top and left positioning i am trying to force it
to onComplete
I am searching through the script to find where it does it and i
cannot find it.
> > center?- Hide quoted text -
>
> - Show quoted text -

Michael Kansky

unread,
Oct 16, 2011, 3:06:06 PM10/16/11
to fancybox
Version 1.3.1 works fine but 1.3.2 + forces the fancybox to center
even instructed not to...


On Oct 16, 10:01 am, Michael Kansky <michael.kansky
> > - Show quoted text -- Hide quoted text -

JFK

unread,
Oct 16, 2011, 6:44:26 PM10/16/11
to fancybox
what about v1.3.4?

On Oct 16, 12:06 pm, Michael Kansky <michael.kansky

Michael Kansky

unread,
Oct 17, 2011, 9:21:26 AM10/17/11
to fancybox
Nope, stops working with 1.3.2
I would be happy with 1.3.1 but it has some weird error in IE9 only
which is solved in 1.3.2 - 1.3.4 but this new issue is introduced.





On Oct 16, 6:44 pm, JFK <jfk.d...@gmail.com> wrote:
> what about v1.3.4?
>
> On Oct 16, 12:06 pm, Michael Kansky <michael.kansky
>
>
>
> %livehelpnow....@gtempaccount.com> wrote:
> > Version 1.3.1 works fine but 1.3.2 + forces the fancybox to center
> > even instructed not to...
>
> > On Oct 16, 10:01 am, Michael Kansky <michael.kansky
>
> > %livehelpnow....@gtempaccount.com> wrote:
> > > It ignores it.
> > > The Fancybox script adds STYLE attribute to the fancybox-wrap that
> > > completely overrides top and left positioning i am trying to force it
> > > to onComplete
> > > I am searching through the script to find where it does it and i
> > > cannot find it.
>
> > > On Oct 16, 12:49 am, JFK <jfk.d...@gmail.com> wrote:
>
> > > > $('#fancybox-wrap').css({
> > > > 'position':'absolute',
> > > > 'top':'10px',
> > > > 'left':'109px'
>
> > > > });
>
> > > > On Oct 15, 7:40 pm, Michael Kansky <michael.kansky
>
> > > > %livehelpnow....@gtempaccount.com> wrote:
> > > > > No matter what i do, i cannotabsolutepositionfancybox onComplete
> > > > > Seems like leftpositionis completely ingored and fabcybox wants to
> > > > > be in center of the screen.
> > > > > Toppositionis accepted by fancybox but leftpositionis ignored.
> > > > > Here's what i have:
>
> > > > > $.fancybox({
> > > > >         'zoomSpeedIn':  300,
> > > > >         'zoomSpeedOut': 300,
> > > > >         'modal': modal,
> > > > >         'href':url,
> > > > >                 'padding': 0,
> > > > >                 'width': 800,
> > > > >                 'height': 400,
> > > > >         'type':type,
> > > > >                 'onComplete': function(){
> > > > >                 $('#fancybox-wrap').css('top',top +'px');
> > > > >                 $('#fancybox-wrap').css('left','109' +'px');
> > > > >                         }
> > > > >         }
>
> > > > > });
>
> > > > > Is there anything i can do to instruct Fancybox not topositionit in

JFK

unread,
Oct 17, 2011, 1:05:23 PM10/17/11
to fancybox
try using external css declarations
wonder why it has to be onComplete

On Oct 17, 6:21 am, Michael Kansky <michael.kansky

Michael Kansky

unread,
Oct 17, 2011, 1:34:17 PM10/17/11
to fancybox
External works.
But my page opens several FancyBoxes and some positioned in center and
some to be positioned absolutely on the page.
So external CSS will position it globally and will not work for me.

I wonder what changed since 1.3.1, i would then fix it in code.


On Oct 17, 1:05 pm, JFK <jfk.d...@gmail.com> wrote:
> try using external css declarations
> wonder why it has to be onComplete
>
> On Oct 17, 6:21 am, Michael Kansky <michael.kansky
>
>
>
> %livehelpnow....@gtempaccount.com> wrote:
> > Nope, stops working with 1.3.2
> > I would be happy with 1.3.1 but it has some weird error in IE9 only
> > which is solved in 1.3.2 - 1.3.4 but this new issue is introduced.
>
> > On Oct 16, 6:44 pm, JFK <jfk.d...@gmail.com> wrote:
>
> > > what about v1.3.4?
>
> > > On Oct 16, 12:06 pm, Michael Kansky <michael.kansky
>
> > > %livehelpnow....@gtempaccount.com> wrote:
> > > > Version 1.3.1 works fine but 1.3.2 + forces the fancybox to center
> > > > even instructed not to...
>
> > > > On Oct 16, 10:01 am, Michael Kansky <michael.kansky
>
> > > > %livehelpnow....@gtempaccount.com> wrote:
> > > > > It ignores it.
> > > > > The Fancybox script adds STYLE attribute to the fancybox-wrap that
> > > > > completely overrides top and leftpositioningi am trying to force it

ss

unread,
Nov 7, 2011, 7:40:07 PM11/7/11
to fancybox
Here is the solution that worked for me.  Hope it helps someone.  In
the onComplete function, do the one of following:


// 1st way
// Stop the fancy box animation and do our own animation
$("#fancybox-wrap").stop().animate({
    'top': top + 'px',
    'left': left+ 'px'
}, 0);


// 2nd way
// Stop the fancy box animation and set the css directly
$("#fancybox-wrap").stop().css({
    'top': top + 'px',
    'left': left+ 'px'

If you are setting your own position, you may want to clear out the
default center function as well:

jQuery.fancybox.center = function() {};

Do this before calling $("myIfram").fancybox(...);

On Oct 17, 11:34 am, Michael Kansky <michael.kansky
Reply all
Reply to author
Forward
0 new messages