jQuery show div with child iframe (wysiwyg text editor)

Question

I have a "display: none" div with a child wysiwyg editor. I have had this problem with both jHtmlArea and CKEditor, so i believe this to be an iframe issue. For this example, I am using jHtmlArea. Without the "display: none;", everything works fine. When hidden however, I "show" the div with the child editor, and then it doesn't fully load. I had researched this issue some time ago, but couldn't find a solution. I believe I remember finding something that said that hidden iframes had some kind of reloading problem, but can't find the post. Anyone have any suggestions? Thank you ahead of time for your time and expertise!

<script type="text/javascript">
    $(document).ready(function () {
        $("textarea").htmlarea();
    });
</script>

<div id="container" style="display: none;">
    <textarea></textarea>
</div>

<a href="javascript:void(0);" onclick="$('#container').show()">Show me!</a>

I have already tried this solution to no avail.

Answer 1

Thanks to both @Humberto and @Siwei-Kang for their suggestions. Their work helped me come up with this solution.

I instantiate the htmlarea on button click, rather than on page load. I added some additional features as well:

• instantiate htmlarea in show() callback function
• textarea begins as "visibility: hidden" to reserve real estate on show(), but also to reduce flicker when htmlarea appears.
• Set textarea back to visible after htmlarea instantiation, so that "html" button still functions

See this jsFiddle

<script type="text/javascript">
    function toggle() {
        $('#container').toggle('blind', function() {
            $('#container textarea').htmlarea().css("visibility", "visible");
        });
    }
</script>

<div id="container" style="display: none;">
    <textarea style="visibility: hidden; width: 300px;"></textarea>
</div>

<a href="javascript:void(0);" onclick="toggle();">Toggle me!</a>

Answer 2

One workaround is to set the display to block and hide() it through javascript. so iframe would take up the full width that is available when it loads. see this jsFiddle

Answer 3

If you can afford it, use the visibility:hidden style instead of display:none. The drawback is that the hidden element will fully occupy its document area even though none of its contents are shown until visibility:visible is set.

Have a try at this jsFiddle, based on the answer by @Siwei.

EDIT: updated the jsFiddle to make the editor container have 0 vertical pixels until the user clicks Show me.