This issue is very similar to jQuery: Fancybox produces a loop of errors in chrome using ajax, although in the other issue ajax is being used. I'm using inline to present a div.

I can open the fancybox containing the div once, and close it again. But if I open it again, I see the following error in the console, and the page changes to a random portion of text from the page from a pletely different section:

Uncaught TypeError: Cannot call method 'width' of undefined

I have Fancybox set up on this page with the following:

<script type="text/javascript" src=".js"></script>
<script type="text/javascript" src=".min.js"></script>
<script type="text/javascript" src="./includes/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<script type="text/javascript" src="./includes/fancybox/jquery.mousewheel-3.0.4.pack.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $("#admin_link").fancybox({
            'titlePosition'     : 'inside',
            'transitionIn'      : 'slide',
            'transitionOut'     : 'fade',
            'type'              : 'inline'
        });
    });
</script>
<link rel="stylesheet" type="text/css" href="./includes/fancybox/jquery.fancybox-1.3.4.css" media="screen" />

The div is:

<div style="display: none;">
                <div id="admin_why_text" style="width:400px;height:300px;overflow:auto;">
                    Some text about why this is needed.
                </div>
            </div>

And this div is opened via this link:

      <ul><li>example point <br />=> <a id="admin_link" href="#admin_why_text" title="Why is.....?">why is...?</a></li></ul>

As you can see, based on the previous issue that the other user saw with ajax (not my issue, see link above), I have tried defining the type manually in my code. This unfortunately made no difference.

Would anybody have any other suggestions? Or has anyone seen this before when using the inline type?

Edit: Minor addition, other types are working fine. I'm using the iframe type to display youtube videos, and they can be closed and reopen without any issues.

Edit2: I've found that when the inline box loads, my div is replaced with the following:

<div style="display: none;">
    <div class="fancybox-inline-tmp" style="display: none;"></div>
</div>

When the box is closed, my div isn't put back. I need to find where this has gone, I can probably use the onCleanup callback to set it back.

This issue is very similar to jQuery: Fancybox produces a loop of errors in chrome using ajax, although in the other issue ajax is being used. I'm using inline to present a div.

I can open the fancybox containing the div once, and close it again. But if I open it again, I see the following error in the console, and the page changes to a random portion of text from the page from a pletely different section:

Uncaught TypeError: Cannot call method 'width' of undefined

I have Fancybox set up on this page with the following:

<script type="text/javascript" src="http://code.jquery./jquery-latest.js"></script>
<script type="text/javascript" src="http://code.jquery./jquery-latest.min.js"></script>
<script type="text/javascript" src="./includes/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<script type="text/javascript" src="./includes/fancybox/jquery.mousewheel-3.0.4.pack.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $("#admin_link").fancybox({
            'titlePosition'     : 'inside',
            'transitionIn'      : 'slide',
            'transitionOut'     : 'fade',
            'type'              : 'inline'
        });
    });
</script>
<link rel="stylesheet" type="text/css" href="./includes/fancybox/jquery.fancybox-1.3.4.css" media="screen" />

The div is:

<div style="display: none;">
                <div id="admin_why_text" style="width:400px;height:300px;overflow:auto;">
                    Some text about why this is needed.
                </div>
            </div>

And this div is opened via this link:

      <ul><li>example point <br />=> <a id="admin_link" href="#admin_why_text" title="Why is.....?">why is...?</a></li></ul>

As you can see, based on the previous issue that the other user saw with ajax (not my issue, see link above), I have tried defining the type manually in my code. This unfortunately made no difference.

Would anybody have any other suggestions? Or has anyone seen this before when using the inline type?

Edit: Minor addition, other types are working fine. I'm using the iframe type to display youtube videos, and they can be closed and reopen without any issues.

Edit2: I've found that when the inline box loads, my div is replaced with the following:

<div style="display: none;">
    <div class="fancybox-inline-tmp" style="display: none;"></div>
</div>

When the box is closed, my div isn't put back. I need to find where this has gone, I can probably use the onCleanup callback to set it back.

• javascript
• jquery
• html
• css
• fancybox

• 1 you only need a single instance of jQuery so either this code.jquery./jquery-latest.js or this code.jquery./jquery-latest.min.js but not both – JFK Commented Dec 31, 2013 at 5:33
• Thanks, I wasn't sure on that. I've taken out the min instance, but the issue persists. Would you have any other ideas? – Tiago Commented Dec 31, 2013 at 9:45
• On more investigation, my div seems to be replaced with this when the box loads, but isn't set back when the box closes: <div style="display: none;"> <div class="fancybox-inline-tmp" style="display: none;"></div> </div> – Tiago Commented Dec 31, 2013 at 11:55
• possible duplicate of Fancybox doesn't work with jQuery v1.9.0 [ f.browser is undefined / Cannot read property 'msie' ] – JFK Commented Dec 31, 2013 at 20:38
• I didn't notice but you are using fancybox v1.3.4 and that version doesn't work with jQuery 1.9+ see stackoverflow./a/14344290/1055987 for a workaround – JFK Commented Dec 31, 2013 at 20:39

4 Answers 4

I've found the answer to this problem. I'm using the latest jQuery, in which global events are deprecated. There are two key issues I have found in using the v1 FancyBox with the latest jQuery:

1. The issue described in https://github./fancyapps/fancyBox/issues/485
2. This issue.

Further to the edits suggested from issue 1, the following changes fixed this for me:

In the affected page, find:

<script type="text/javascript" src="./includes/fancybox/jquery.fancybox-1.3.4.pack.js"></script>

Change to the following to use the non packed version:

<script type="text/javascript" src="./includes/fancybox/jquery.fancybox-1.3.4.js"></script>

In the "jquery.fancybox-1.3.4.js" file, make the following changes.

Find: $.event.trigger('fancybox-cancel');

Replace with: $('.fancybox-inline-tmp').trigger('fancybox-cancel');

Find: $.event.trigger('fancybox-change');

Replace with: $('.fancybox-inline-tmp').trigger('fancybox-change');

Find: $.event.trigger('fancybox-cancel');

Replace with: $('.fancybox-inline-tmp').trigger('fancybox-cancel');

Find: $.event.trigger('fancybox-cleanup');

Replace with: $('.fancybox-inline-tmp, select:not(#fancybox-tmp select)').trigger('fancybox-cleanup');

Hopefully this will help others who get stuck on the same issue.

The following may work for you without needing to hack the fancybox.js file.

$(document).ready(function() {
    $("#admin_link").on("click", function (e) {
        $.fancybox($(#admin_why_text).text(), {
            'title'             : $(this).attr('title'),
            'titlePosition'     : 'inside',
            'transitionIn'      : 'slide',
            'transitionOut'     : 'fade',
            'type'              : 'inline'
        });
    });
});

This effectivly changes your code to operate with the 'ajax method' rather than the 'inline method' but still sources your information from the same place & will not replace your id="admin_why_text" element with the class="fancybox-inline-tmp" element.

A more generic version, which will target the text element based on the href of the trigger element would work as follows :

$(document).ready(function() {
    $("#admin_link").on("click", function (e) {
        $.fancybox($("#" + $(this).attr('href').substring(1)).text(), {
            'title' : $(this).attr('title'),
            'titlePosition'     : 'inside',
            'transitionIn'      : 'slide',
            'transitionOut'     : 'fade',
            'type'              : 'inline'
        });
    });
});

Just use one Jquery Library file.you can use either

<script type="text/javascript" src="http://code.jquery./jquery-latest.js"></script>

or

<script type="text/javascript" src="http://code.jquery./jquery-latest.min.js"></script>

but not both!

I have added following into function that loads fancybox,

var txt1 = "<div id='inline1' style='width:400px;overflow:auto;font-size:12px;'></div>";

                if ($("#inline1").length) {
                }
                else {
                    $("#ix01").append(txt1);
                }

so if div inline1 not exists add it to parent div "ix01" , works fine for me.