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]

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">

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.

Answer 3

Thanks "spirytus", your solutions really worked to me! Thanks again Bro.. enjoy..