Fancybox jumps to top of the page when the anchor contains anchor tag

[PandaWood]

Hi,

In my case, Fancybox jumps/jerks to top of the page when the URL
contains an anchor tag, I have an example of this happening.

Just to be clear. The problems are:
1) the dialog repositions to the top of the page instead of the centre
(jerkily/suddenly)
2) the close button usually (not always) scrolls out of view

http://www.jlptstudy.com/N4/N4_grammar_1992.html

To reproduce:
- ignore the language on the URL above, if you can, and click on any
of the links (eg in the table column Lesson that appear as '>>')
- start with the very top (1st link) on the page, in the "Lesson" -
this has an anchor tag and exhibits the issue
- the 2nd link (ie 2nd row of the table, "Lesson" column, does not
have an anchor tag (a plain URL) and shows no issues

Would you consider this a bug or something that could/should be worked
around?

[PandaWood]

Hi,
I think I relied on my example a little too much in my description.

I should have mentioned that I'm using a fanycbox 'iframe' style.
The URL that is pointed to contains an anchor tag or id (eg http://www.bla#someid)

Now, normally when you navigate to such a URL it automatically scrolls
the position on the page that contains that ID (or anchor tag)
When the fancybox iframe pops up using such a URL -seemingly prompted
by this auto-scrolling - it suddenly repositions the box from centre
to the top of the page (from where it should be in the centre). It
repositions suddenly, jerkily, and such that the 'close button' is
usually not visible - depending on page position at the time.

It seems like a bug to me.

[JFK]

in that case you shouldn't use iframe but inline

On Sep 6, 6:15 pm, PandaWood <spurrymo...@gmail.com> wrote:
> Hi,

> I think I relied on my example a little too much in my description.
>
> I should have mentioned that I'm using a fanycbox 'iframe' style.

> The URL that is pointed to contains an anchor tag or id (eghttp://www.bla#someid)

[PandaWood]

I cannot use inline, as I understand it, because the URL I need to
open, is on another site:
eg my site is: www.mysite.com
and my url is: www.someothersite.com/bla/bla.html#someid

Inline is to populate fancybox with content from another DOM element
(eg div) within the same HTML document, is it not?
In that case, this will not work for me.

I tried my URL with another box plugin http://nyromodal.nyrodev.com/
and it works without repositioning the box. It scrolls to the right
position without sacrificing the 'center' position of the box. Does
this not mean it is feasible and just an issue with fancybox?

[Anthony]

Did you ever find an answer to this? I am in the same boat...........

[jlgrall]

I tested his page with the anchor, and it seems to work well, the
iframe even scrolls to the anchor. (I have Firefox 3.6.13 Mac)

But with Safari 5.0.3 on Mac, the page scrolls a bit at the same time
as the iframe scrolls.

Unfortunately, his javascript is minified, I cannot read it. Anthony,
you will have to provide us more infos :)

[CynepMEH]

Hi, I have the same exact problem. When the user clicks on an <a> link, fancybox opens and the whole page scrolls untill the fancybox upper border is at the top of the viewport. :(

[CynepMEH]

I use inline type

<a id="fmtm2012participantsLink" href="#fmtm2012participants">LINK</a>

<div class="hide">

<div id="fmtm2012participants">

some text

</div>

</div>

<script type="text/javascript">

jQuery(document).ready(function() {

jQuery("a#fmtm2012participantsLink").fancybox({

'autoDimensions': true,

'autoScale': true,

'centerOnScroll': true,

'scrolling' : 'no'

})

});

</script>