Home/ Questions/Q 9084939
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-16T21:07:27+00:00

I’m trying to use Fancybox to expand an inline element on a page to

  • 0

I’m trying to use Fancybox to “expand” an inline element on a page to make it easier to read. In it’s original position the element is visible, but styled to show in a small scrolling box. Under that is an Expand link. Clicking the link invokes Fancybox to put the element into a Fancybox.

That all works fine.

But when you click close, it puts the original element back where it was, but it adds style=”display:none” to the element as an attribute, causing the text to disappear.

Here’s a minimum case example that shows what happens.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>Fancy Box data test</title>
    <meta name="generator" content="BBEdit 10.5" />
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
    <script type="text/javascript" src="fancybox/source/jquery.fancybox.js"></script>
    <script type="text/javascript" src="fancybox/source/jquery.fancybox.pack.js"></script>
    <link rel="stylesheet" href="/fancybox/source/jquery.fancybox.css" type="text/css" media="screen" />
    <script type="text/javascript" >
        jQuery.noConflict();
        jQuery(document).ready( function() {
            jQuery("a#inline").fancybox(
                {
                'hideOnContentClick': true
                })
            }
        );
    </script>
    <style type="text/css">
        .agreement-content { 
            overflow:auto; 
            height:12em; 
            padding:10px; 
            background-color:#fbfaf6; 
            border:1px solid #bbb6a5; 
            width: 300px;
            margin: 30px;
            }
    </style>
</head>
<body>
<p>
This is testing having FancyBox "expand" a custom field.
<p>

<div class="agreement-content">
    <div id="lightCoH">
<p>
    Supported neglected met she therefore unwilling discovery remainder. Way sentiments two indulgence uncommonly own. Diminution to frequently sentiments he connection continuing indulgence. An my exquisite conveying up defective. Shameless see the tolerably how continued. She enable men twenty elinor points appear. Whose merry ten yet was men seven ought balls. 
</p>

<p>
Blind would equal while oh mr do style. Lain led and fact none. One preferred sportsmen resolving the happiness continued. High at of in loud rich true. Oh conveying do immediate acuteness in he. Equally welcome her set nothing has gravity whether parties. Fertile suppose shyness mr up pointed in staying on respect. 
</p>

    </div>
</div>
<a id="inline" href="#lightCoH">Expand</a>
</body>
</html>

Looking at the source in Chrome’s developer tools elements view you can watch it change the <div id="lightCoH">.

When the page loads it like the source above.

When you click the expand link, it becomes <div class="fancybox-placeholder" style="display: none;"></div>

When you close the fancy box it becomes <div id="lightCoH" style="display: none;">

I’ve tried putting an empty style attribute in, thinking it would pick that up and reset it to its original setting, but no luck.

Maybe this is how Fancybox is stuppose to work – only with invisible inline elements. If so is there a work around, perhaps using the afterClose call back?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Just add a callback to restore the inline content like : 

    afterClose: function() {
    $("#lightCoH").show();
}

    See JSFIDDLE

    BTW, hideOnContentClick is an option for Fancybox v1.3.x … you have to use closeClick instead. Check https://stackoverflow.com/a/8404587/1055987 for more

    • 0