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.

score 1 · Answer 1 · answered Aug 21 '12 at 19:42

1

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

answered Aug 21 '12 at 19:42

Siwei Kang

186
2

Thanks @Siwei-Kang for your help. Your solution does work, but unfortunately I can't set the display property on doc ready because of workflow limitations. Your work did help me think of a solution, which I will post as the answer. – Soturi Aug 22 '12 at 12:42

score 1 · Answer 2 · answered Aug 21 '12 at 19:57

1

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.

answered Aug 21 '12 at 19:57

Humberto

7,117
4
31
46

Thanks @Humberto for your help. Your solution does work, but I don't have the real estate to leave it visibility:hidden. Your visiblity work did inspire part of my solution however, which I will post as the answer. – Soturi Aug 22 '12 at 12:44

score 1 · Accepted Answer · answered Aug 22 '12 at 12:52

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>

Nice solution, congratulations! – Humberto Aug 22 '12 at 14:58 — Humberto, Aug 22 '12 at 14:58

jQuery show div with child iframe (wysiwyg text editor)

3 Answers3