How to hide wmd editor initially?

Question

<div style="display:none;">
    <div id="wmd-editor" class="wmd-panel">
        <div id="wmd-button-bar"></div>
        <textarea id="wmd-input"></textarea>
    </div>
    <div id="wmd-preview" class="wmd-panel"></div>
    <div id="wmd-output" class="wmd-panel"></div>   
</div>  

See,I'm following wmd-test.html of derobins-wmd,except put that stuff inside a hidden div.

uncaught exception: [Exception... "Component returned failure code: 0x80004005 (NS_ERROR_FAILURE) [nsIDOMNSHTMLTextAreaElement.selectionStart]" nsresult: "0x80004005 (NS_ERROR_FAILURE)" location: "JS frame :: http://localhost/derobins-wmd-980f687/wmd.js :: anonymous :: line 490" data: no]
uncaught exception: [Exception... "Component returned failure code: 0x80004005 (NS_ERROR_FAILURE) [nsIDOMNSHTMLTextAreaElement.selectionStart]" nsresult: "0x80004005 (NS_ERROR_FAILURE)" location: "JS frame :: http://localhost/derobins-wmd-980f687/wmd.js :: anonymous :: line 490" data: no]

Schoenberg

Answer 1

You might use the off-left technique, if the plugin doesn't like the elements not having height/width.

<div style="position: absolute; left: -1000px; width: 100px">

Unscientific

Answer 2

In addition to hiding the whole panel with textarea inside of it, you need to make sure that textarea itself has display:none and problems will disapear then. Otherwise wmd will not detect that textarea is not displaying and will try to do calculations on it and you will get exceptions like you said.

Simply putting elements off screen is not possible or at least very troublesome with some layouts. Furthermore, screenreaders will still detect those elements and accessibility will suffer.

I guess you solved the issue by now, but I hope it will help someone.

Jackfruit

Thanks, I had this same problem, googled it and found this. Adding display:none to the textarea as well as the wrapper div worked. – Charming

Worth noting that if you're using jquery tabs (that's how we discovered this issue) you can just add the css .ui-tabs-hide textarea { display: none; } and this will have a similar effect. – Aeronautics