Dynamic height of editor block

198
March 20, 2018, at 4:26 PM

I use InnovaEditor to create edit block.

I try to find way in order to set dynamic height of edit block.

Ie block height should correspond block content.

HTML:

<iframe id="idContenteditor_field_1" name="idContenteditor_field_1" style="width:100%;height:100%;border:none;">
<html>
<head></head>
<body>12345</body>
</html>
</iframe>

What I did:

1) set keyup event in iframe body

2) wrap to content to get real height

3) set calculated height to the iframe

Javascript:

var $iframe = $("iframe#idContenteditor_field_1");
var $iframeBody = $iframe.contents().find("body");
$iframeBody.keyup(function(e) {
  if ($(this).find('.content').length === 0) {
    // add wrap
    var bodyContent = $(this).html();
    $(this).html('<div class="content">' + bodyContent + '</div>');
 } 
 var $contentBlock = $(this).find('.content');
 var bodyHeight = $contentBlock.outerHeight(); 
 $('#idContenteditor_field_1').height(bodyHeight); // set real height
});

It works fine.

The issue:

I have 10 edit blocks on the page and they are same except id.

But I have problems when I try to apply this code to all iframes.

// return all iframes
var $iframes = $('iframe[id^="idContenteditor_field_"]');
// return only single body of first iframe. 
var $iframesBody = $iframes .contents().find("body"); 

So I can't set keyup event for all iframes.

Could you help me?

Maybe there is easier way to set dynamic height?

Rent Charter Buses Company
READ ALSO
PDF embedded in html

PDF embedded in html

I want to display the different pdf view on button click (small,large,medium etc)I used object to display the pdf file

240
Unable to change svg colour using jQuery

Unable to change svg colour using jQuery

I'm having trouble changing the colour of an svg image with jquery or vanila javascriptI've tried a couple of things but nothing seems to work, the original colour is black and i can change it if i open the svg image in my IDE and add/change the fill attribute

198
dragging a dropped element back to its original container

dragging a dropped element back to its original container

so this is what I have till now (I am working with third party example)

153
How to display multiple contents as marquee one after another? Second content should take some time to display

How to display multiple contents as marquee one after another? Second content should take some time to display

I have two different contents, I want to show the contents as marquee in single line and the contents should display one after another with some delay time duration

178