Hidden textarea at load time

[Alberto Montero]

Hi,

I'm trying to use codepress to replace a textarea inside a div element which is hidden at load time (display:none).

If the div element is visible at load codepress can be shown and hide without no problem, but if it initially hidden it never gets displayed.

Has anyone tried this before? Any clue about how to achieve that?

Regards
Alberto

[Jasen Jacobsen]

Same issue here.  I saw an older thread where someone discussed trying to fix and then discovering it didn't need to be fixed.  But I can't figure out how to make it work.

- Jasen.

[Jasen Jacobsen]

I got around this issue by using "visibility:hidden" rather than "display:none".  With "hidden" the object exists and is rendered, but just not shown, so it has the dimensions CodePress needs.  I had to modify CodePress to not show itself upon initialization, and then manually change the visibility of the CodePress object when I unhide the enclosing div.

- Jasen.

[matt-editme]

I had this same problem, combined with the need to share the textarea with other editors, namely TinyMCE.

I did this by having a textarea hidden with display:none. I commented out the last two lines of codepress.js that load the editor:

// don't load codepress when the page loads
//if(window.attachEvent) window.attachEvent('onload',CodePress.run);
//else window.addEventListener('DOMContentLoaded',CodePress.run,false);

Then when I want to load the editor, I just call CodePress.run();  There are two caveats to this method:

First, I am usually calling CodePress.run() based on a user-generated event, well after the page is fully loaded. If you wanted to do this up-front (which I have to in some circumstances) you must make sure it happens after the whole page is loaded. I use jQuery's $(document).ready trick for this. The lines commented out above show how to do it without jQuery.

Second, even using the document ready function I had to wrap the .run() call in a 10 ms delay. I can't explain that, but it's the only way CP would load. The delay isn't noticeable. So it looks something like this:

var autoLoadCodePress = true; // this variable is set based on other conditions
var codePressInited = false; // flag to know whether CP has ever been loaded
var codePressLoaded = false; // flag to know whether CP is currently loaded

// can be called any time to replace the text area with codepress
function loadCodePress() {
    if (codePressLoaded) return;
        // set the class attr on the textarea we want to load
    $("#myTextArea").attr('class','codepress html');
    if (!codePressInited) {
        setTimeout('CodePress.run();',10); // unsure why delay is req'd
        codePressInited = true;
    } else {
        myTextArea.toggleEditor();
    }
    codePressLoaded = true;
}
// unloads codepress
function unloadCodePress() {
    if (!codePressLoaded) return;
    pagecontent.toggleEditor();
    codePressLoaded = false;               
}

// optionally load codepress when the page loads
$(document).ready(function(){
  if (autoLoadCodePress) {
    loadCodePress();
  }
});

Hope that helps.

Matt

[Sony Santos]

Hello!

I'm using hidden textarea at load time in a div with {display: none}.

The problem occurs because in codepress.js the iframe tries to get the client area of the textarea, which is hidden, hence zeroed at that time.

My approach is: when trying to show the codepress iframe, test if its dimensions are zero. If yes, get the dimensions from its (visible) parent.

Example: let "texto" be that iframe. (The codepress iframe object has the same name as the textarea original id.) After his parent be made visible (display inline or block), you can try:

if (texto.style.width == '0px') {
  texto.style.width = texto.parentNode.clientWidth + 'px';
  texto.style.height = texto.parentNode.clientHeight + 'px';
}

It works for me for now (not tested in IE yet, however).
Sony

[brad laney]

Comment out the width and height settings. Add a .className to the editor object and the text area. Make them match.

<style>
.yourClassName {
height: 100px;
width: 100%;
border: 1px solid grey;
overflow: auto;
padding: 0px;
margin: 0px;
white-space: normal;
}

/*Position flashing fix in IE*/
iframe.yourClassName {
    margin-top: 1px;
    margin-bottom: 1px;
}