CODEWITHSUNDEEP
javascripthtmljquerycss
Derek
Derek

Reputation: 5037

Make editable element overflow to new element

I have an editable element contentarea-block where I'd like to set the max-width and height to 8.5in x 11 in which I have been able to do just fine of course. What I'm struggling with is once the height for the container contentarea-page exceeds 1056 pixels (11in) then I want to create another editable page right after and have the overflow content on that page.

For context: (updated) For context, we're creating a proposal builder and as content is added, edited, removed from a page, if the page exceeds the set height it creates a new page. If someone removes content from a "page" it removes the empty "page". Think Microsoft Word as @Roko pointed out in the comments.

I created a fiddle here https://jsfiddle.net/8qzwm9kL/ to show where my issues are. Currently, it's not working 100%, for example, if I keep hitting enter or typing random stuff on new lines, sometimes it creates several empty pages instead of just one immediately following the overflowed element. Secondly, it doesn't automatically move my cursor onto the new page for a fluid transition of editing between pages.

Any help would be appreciated. I'm not even sure what to search for on SO or Google :)

jQuery(document).ready(function($) {
  var docHeight = 1056; //11in
  var docWidth = 816; //8.5in

  //$('.contentarea-block').width(docWidth).height(docHeight);

  $('.contentarea-block').each(function() {
    console.log($(this).innerHeight());
    $(this).bind("change keyup input", function() {
      if ($(this).innerHeight() >= docHeight) {
        $(this).after('<div class="contentarea-page"><div class="contentarea-block container is-container"><div class="row clearfix"><div class="column full"><div class="display"><p class="size-18 " style="text-transform: uppercase;">Drag and Drop Proposal Builder</p> <h1 class="size-50">Add or Remove Blocks to Get Started</h1></div></div></div></div></div>');
      }
    });
  });
});
.contentarea-page {
  height: 1056px;
  max-height: 1056px;
  width: 816px;
  background: #ccc;
  margin: 0 auto;
}

.contentarea-block {
  background: #efefef;
}
<div class="contentarea-page">
  <div id="contentarea" class="contentarea-block container is-container" contenteditable="true">
    <div class="row clearfix">
      <div class="column full">
        <div class="display">
          <p class="size-18 " style="text-transform: uppercase;">Drag and Drop Proposal Builder</p>
          <h1 class="size-50">Add or Remove Blocks to Get Started</h1>
        </div>
      </div>
    </div>
  </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

Upvotes: 0

Views: 45

Answers (1)

Heretic Monkey
Heretic Monkey

Reputation: 12113

The key is to ensure the new element is editable, and to set the focus on the newly added element. Right now, the code just adds the element (without contenteditable="true") every time the currently focused editable element is equal to or greater in height than your maximum.

In this code, it adds the new element, finds the editable element, and sets the focus.

The $(document).on("change keyup input", '.contentarea-block', function() bit makes sure the event handler runs for any element with the class contentarea-block that exists, or will exist in the DOM.

jQuery(document).ready(function($) {
  var docHeight = 1056; //11in
  var docWidth = 816; //8.5in

  //$('.contentarea-block').width(docWidth).height(docHeight);

  $(document).on("change keyup input", '.contentarea-block', function() {
    if ($(this).innerHeight() >= docHeight) {
      $(this).after('<div class="contentarea-page"><div class="contentarea-block container is-container" contenteditable="true"><div class="row clearfix"><div class="column full"><div class="display"><p class="size-18 " style="text-transform: uppercase;">Drag and Drop Proposal Builder</p> <h1 class="size-50">Add or Remove Blocks to Get Started</h1></div></div></div></div></div>');
      $(this).next(".contentarea-page").find(".contentarea-block").focus();
    }
  });
});
.contentarea-page {
  height: 1056px;
  max-height: 1056px;
  width: 816px;
  background: #ccc;
  margin: 0 auto;
}

.contentarea-block {
  background: #efefef;
}
<div class="contentarea-page">
  <div id="contentarea" class="contentarea-block container is-container" contenteditable="true">
    <div class="row clearfix">
      <div class="column full">
        <div class="display">
          <p class="size-18 " style="text-transform: uppercase;">Drag and Drop Proposal Builder</p>
          <h1 class="size-50">Add or Remove Blocks to Get Started</h1>
        </div>
      </div>
    </div>
  </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

Upvotes: 1

Related Questions