Make content height change based on height of top and bottom

Question

I can change the height of the content area of CKEditor easily enough using

config.height = 400;
config.autoGrow_minHeight = 200;

and similar.

However, I am having trouble making the design respond to the change in height of the top bar as the window is resized. All the documentation I have seen so far seems to affect the height of the content area alone rather than the whole CKEditor (i.e.: the top bar, the content area and the bottom bar).

I tried to access the height of the top span with the ID cke_1_top with both jQuery and plain JS and then set the content area as the total height wanted minus the height of the top and the height of the bottom. However I can't seem to select it with either.

Is there a way to set the height of the whole area or get the height from the top and bottom so that I can use those to calculate what the content height should be?

EDIT 0:

Hopefully this makes more sense than what I had originally wrote.

Here is a basic outline of what I think the relevant section of my code is:

<div id="cke_rawText">
    <span id="cke_rawText-arialbl"></span>
    <div class="cke_inner cke_reset">
        <span id="cke_1_top"></span>
        <div id="cke_1_contents"></div>
        <span id="cke_1_bottom"></span>
    </div>
</div>

I can change the height of cke_1_contents with something like: config.height = 400. I would like for the whole area to remain a constant height and as the window narrows, the top bar gets taller since the icons get pushed into new rows. The text area remains unchanged, meaning that the whole editor takes up more vertical space on the page.

My idea was to get the height of cke_1_top and cke_1_bottom and subtract them from the height of cke_inner, which should in turn fill up all of cke_rawText. I have not been able to select these elements however. I have tried using pure JS, jQuery and CKEditor's getById method (http://docs.ckeditor.com/#!/api/CKEDITOR.dom.document). I get null, which means that it is not finding my element.

Looking at Louys Patrice Bessette's example, I can't do something like: $("#CKform").css({"top":"30%"}); since I can't select html elements.

I can change the height in my css file, but I can't seem to do so dynamically with JS as I can't select elements of CKEditor. Maybe my problem is more of a JS problem than CKEditor then.

EDIT 1:

I think I have this figured out. Since the CKEditor html is dynamically generated, I need to use event delegation in jQuery. In case someone else has the same issue, I found this post useful.

EDIT 2:

This seems to work:

$(window).resize (function(event) {
    event.preventDefault();
    var i = parseInt($('.cke_inner').css("height"));
    var t = parseInt($('#cke_1_top').css("height")) + 9;
    var b = parseInt($('#cke_1_bottom').css("height")) + 9;
    var m = i - t - b;
    $('#cke_1_contents').css({"height" : m});
});

I'm not 100% sure why the 9s are necessary, but the value that .css returns is off by exactly that amount compared to the height I find by inspecting the elements.

Answer 1

I completely wiped out my previous answer again.

You want to expand the editable zone proportionally to a negative width window resize.
.oO(I hope I clearly understood the question this time !!!)

Okay.

Try this code (wich is in this new Fiddle):

// Replace the <textarea id="editor1"> with a CKEditor
// instance, using default configuration.
CKEDITOR.replace( 'editor1', {
    height : 200,
    autoGrow_minHeight : 200,
    on:{
        resize: function(){
            $("#msg").html("CKEditor resized!");
            $("#2nd").html("This is a different event!");
        }
    }
});

var cke_1_top_Width_memory;

window.onresize = function(e) {

    $("#msg").html("Window resized!");
    cke_1_top_Width = $(document).find("#cke_1_top").css("width");

    console.log("");
    console.log("onresize fct begin, cke_1_top_Width_memory: "+cke_1_top_Width_memory);     // undefined on the first pass.

    // If previous value is different, change the CKE editable zone height
    if(cke_1_top_Width!=cke_1_top_Width_memory){

        console.log("CKE Height is changing!");

        // Calculate difference between the 2 values
        diff=parseInt(cke_1_top_Width_memory)-parseInt(cke_1_top_Width);

        cke_1_contents = parseInt($(document).find("#cke_1_contents").css("height"));
        console.log("cke_1_contents height: "+cke_1_contents+"px");

        New_cke_1_contents = cke_1_contents+((diff*16)/4)+"px";     // assuming 16 px is something like on line... For each 4 px lost on width.
        // To ensure a minimal height
        if(New_cke_1_contents<"200px"){
            New_cke_1_contents="200px";
        }

        $(document).find("#cke_1_contents").css({"height":New_cke_1_contents});

        after = $(document).find("#cke_1_contents").css("height");
        console.log("cke_1_contents height - after: : "+after);
    }

    // update mem
    cke_1_top_Width_memory = cke_1_top_Width;

    console.log("onresize fct end, cke_1_top_Width_memory: "+cke_1_top_Width);

    //$("#CKform").css({"top":"30%"});
    $("#2nd").html("Also try to resize CKEditor by dragging it's bottom-right corner");
};

NOW, with this code, I think you should be on the right track to do what you want.
This is not perfect...

For historical review:
My first jsFiddle

Answer 2

Here is what I did to make the whole CKEditor remain a constant height:

$(window).resize (function(event) {
    event.preventDefault();
    var i = parseInt($('.cke_inner').css("height"));
    var t = parseInt($('#cke_1_top').css("height")) + 9;
    var b = parseInt($('#cke_1_bottom').css("height")) + 9;
    var m = i - t - b;
    $('#cke_1_contents').css({"height" : m});
});

Since the HTML for CKEditor is generated dynamically, use of event delegation in jQuery is required to access the DOM elements it generates.

I'm not 100% sure why the 9s are necessary, but the value that .css returns is off by exactly that amount compared to the height I find by inspecting the elements.