Question

I’m trying to append a textarea to a div. Once the textarea is appended I can’t select it to start typing until I resize the browser window. How can I make it selectable on the first time?

<script>
$("#distraction-mode").click(function(e){ // Entering the distraction mode
        e.preventDefault();
    $("#wysiwyg").appendTo("#wysiwyg-fullscreen");
});
</script>

<div id="wysiwyg-fullscreen-container">
    <div id="wysiwyg-fullscreen"></div> <!-- div where textarea will be -->
</div>

<div id="wysiwyg">
    <textarea id="editor" name="editor" rows="" cols=""></textarea>
    <a href="#" id="distraction-mode">Distraction Mode</a>
</div>

Answer 1

A guess but you could call .refresh() on your textarea, and then .focus().

This is based on the documentation here

EDIT
You will need to have the editor set to a variable so that you have access to it and to be able to call functions on it specifically. Using refresh() and focus() after you append it to another element will hopefully allow it to resize and reset itself.

It might look something like this:

<script>
var editor = $("#editor").cleditor()[0];

$("#distraction-mode").click(function(e){
  // Entering the distraction mode
  e.preventDefault();
  $("#wysiwyg").appendTo("#wysiwyg-fullscreen");
  editor.refresh();
  editor.focus();
});
</script>