31rhcp 31rhcp - 5 months ago 18
Javascript Question

Make content height change based on height of top and bottom

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

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.