How to block a content editable at specific position if a div with style absolute position is overlapped on it

Question

I am creating an application where I have created a MS-word type application in Jquery. Now I have a problem where I have an editor and I want to place a div 'footer' on it at some position which I can do the actual problem is that when I am placing it,the place occupied by the footer div from content-editable should be disabled. Check this fiddle Demo

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="padding:40px 40px 40px 40px; background-color:#eaedf1">
<div id="wrapper" style="border:1px solid #eaedf1; width:602px; background-color:white;">

<div id="header" style="height:96px; width:600px;">
<h2 style="text-align:center;">This is header
</h2>
</div>
<div contenteditable="true" style="height:1400px; width:600px; border:1px solid #eaedf1; padding:2px 2px 2px 2px;"> 
</div>
<br>
<div style="position:absolute; top:750px; width:600px; height:200px; border:1px solid #eaedf1;">

<div id="footer" style="height:50px; width:600px;">
<h2 style="text-align:center;">This is footer
</h2>
</div>
<div style="background-color:#eaedf1;height:10px; width:600px;">

</div>
<div id="header" style="height:96px; width:600px;">
<h2 style="text-align:center;">This is header
</h2>
</div>
</div>

<div id="footer" style="height:50px; width:600px;">
<h2 style="text-align:center;">This is footer
</h2>
</div>
</div>
  <div>

i think even if u disable it, it wont ve a word like exp of the lines going to next page. I think you should use js and check if its the last line and user presses enter or goes to next line, you automatically add `\n` to your editable div so the user just jumps to next page. — Harry Bomrah, Sep 16 '16 at 05:35
but what about if i delete some content from first page and want to settle second page content on first — Nikhil Ghuse, Sep 16 '16 at 06:24
Are you trying to achieve functionality like Microsoft word where after a limit you move to next page? — Akshay, Sep 16 '16 at 07:17
Please edit your question and mention that, it took me a while to figure it out. — Akshay, Sep 16 '16 at 07:27
If you refer my original question I have already mention here MS-Word like application — Nikhil Ghuse, Sep 16 '16 at 07:30
and why to use absolute position? Use relative and set max-width to contents (a div for header, a div for content and another one for footer) then check with JS the height of the page and set min-height and max-height for each one (or directly set it on css if no cares about displaying screen). (example: div.header{min-height:200px; max-height:200px;} div.content{min-height:1000px; max-height:1000px;}div.footer{min-height:200px; max-height:200px;} — JoelBonetR, Sep 20 '16 at 08:46

d.h. · Accepted Answer · 2016-09-20T10:31:15.133

I'm not sure this is easily possible with one contenteditable element. I setup a basic example using multiple contenteditable elements, one for each page.

Example: https://fiddle.jshell.net/d68ew9qc/

The following snippet adds a new page if the maximum rows per page is reached and the key used was an "enter":

$(".pageEdit").on('keypress', function(e) {
  var length = $(this).children().length + 1;
  /* only add a new page if the next sibling is not available */
  // enter
  if (e.which == 13 && length >= this.getAttribute("max_rows")) {
    if ($(this).parent('.page').next().length === 0) {
      var newPage = $('.page').clone(true);
      $('.pageEdit', newPage).html('');
      newPage.appendTo('#editor');
      $('.pageEdit', newPage).focus();
    }
    e.preventDefault();
    return false;
  }
});

The keypress duplicates an element with the class=".page" and emptys the contenteditable element on the newly created one.

The keyup handles the backspace deletion of empty pages.

$(".pageEdit").on('keyup', function(e) {
    var length = $(this).children().length;
  var total_pages = $(this).parent('.page').parent().children().length;
  // backspace is not working with keypress, this portion needs some work!!!
  if (e.which == 8 && $(this).parent('.page').prev().length > 0) {
    if (length === 0 && total_pages > 1) {
        // found via: http://stackoverflow.com/a/4238971/3298029
        placeCaretAtEnd($('.pageEdit>div:last', $(this).parent('.page').prev())[0]);
        $(this).closest('.page').remove();
    }
  }
});

The basic html for that looks like the following:

<style>
.editor {
  background-color: transparent;
  border: 1px solid #eaedf1;
}

.page {
  width: 600px;
  position: relative;
  margin-top: 15px;
  background-color: #fff;
}

.header {
  height: 100px;
  width: 100%;
  margin: 0;
}

.footer {
  height: 100px;
  bottom: 0;
  width: 100%;
  margin: 0;
}

.pageEdit {
  min-height: 1400px;
  border: 1px solid #eaedf1;
  overflow: hidden;
  padding: 0;
}


/* found: http://stackoverflow.com/a/4407335/3298029 */

.noselect {
  -webkit-touch-callout: none;
  /* iOS Safari */
  -webkit-user-select: none;
  /* Chrome/Safari/Opera */
  -khtml-user-select: none;
  /* Konqueror */
  -moz-user-select: none;
  /* Firefox */
  -ms-user-select: none;
  /* Internet Explorer/Edge */
  user-select: none;
  /* Non-prefixed version, currently
                                  not supported by any browser */
  pointer-events: none;
}

</style>    
<div style="padding:40px 40px 40px 40px; background-color:#eaedf1">
      <div id="editor">
        <div class="page">
          <div class="header noselect">
            <h2 style="text-align:center;">This is header</h2>
          </div>
          <div contenteditable="true" class="pageEdit" max_rows="77">
          </div>
          <div class="footer noselect">
            <h2 style="text-align:center;">This is footer
        </h2>
          </div>
        </div>
      </div>
    </div>

This is a fairly simple demo and many things won't work. If a line breaks to a new one, this should be handled as well.

This was only tested in Chrome which adds <div><br /></div> for a new line. Firefox only adds <br /><br />. So with that in mind the total number of rows should be calculated dynamically and not set to a fixed value because it defers from one browser to another.

Hope this gets you started.

code provided by you is already implemented by me....but issue is in on delete and backspace — Nikhil Ghuse, Sep 20 '16 at 09:39
I already mentioned backspace. Delete would do the same as backspace if on the first line and the page is empty. I didn't implemented this to the final state. This is just a start for you. — d.h., Sep 20 '16 at 09:39
Just to be sure... In that case you want to delete the empty page and focus on the last line of the previous page? Right? — d.h., Sep 20 '16 at 09:43
yes that would be needed and if some content is delete from first page then some content fro first line should replace in first page — Nikhil Ghuse, Sep 20 '16 at 09:46
Same is true if you backspace from the next Page to the previous and the Page is not empty. Those two scenarios are not that Easy. — d.h., Sep 20 '16 at 09:55
I updated the answer and backspace should now delete empty pages and jump to the last line on the previous page. I am not sure if I got the time to work on the other problems. — d.h., Sep 20 '16 at 10:25
yes but major issue is when some content is delete from first page then some content fro first line should replace in first page — Nikhil Ghuse, Sep 20 '16 at 10:34
I am sorry this is nothing that is easy done. I better might stop here and leave it to you. — d.h., Sep 20 '16 at 10:58
Hey just wanted to let you know that I tried to use :after pseudo elements to fake the header and footer. https://fiddle.jshell.net/55c85w2h/ Not really working because with that other problems arrive. I'm really asking myself if a simple textarea would be better suited. — d.h., Sep 21 '16 at 06:43
nope but you have really helped me a lot and you need to be rewarded thanks I got a better solution. — Nikhil Ghuse, Sep 21 '16 at 06:56
Actually It is privacy related that's why I cant but u should find a jQuery library named collumizer which i have used it might not get header footer on writing time but got page breaks and on preview got accepted output — Nikhil Ghuse, Sep 21 '16 at 07:01

score 0 · Answer 2 · answered Sep 16 '16 at 23:38

0

Try css pointer-events: none; or select: none; or jQuery

$("#div").click(function(e){e.preventDefault();});

or maybe

$("#div").click(function(e){e.stopPropagation();});

(not 100% clear on your intent).

answered Sep 16 '16 at 23:38

xorneyToad 'satchel

96
1
3

AleJuliet · Answer 3 · 2016-09-12T14:28:00.260

Is there any particular reason why would you want to use 'position:absolute'? I think if I change the code to work with 'relative' position, it display the results you want. For example:

<div id="wrapper" style="border:1px solid #eaedf1; width:602px;background-color:white;">
  <div id="header" style="height:96px; width:600px;">
<h2 style="text-align:center;">This is header
</h2>
  </div>
  <div contenteditable="true" style="overflow:hidden;height:1400px; width:600px; border:1px solid #eaedf1;"> 
  </div>
  <div id="footer" style="height:50px; width:600px;">
<h2 style="text-align:center;">This is footer
</h2>
  </div>
  <div style="background-color:#eaedf1;height:10px; width:600px;">
  </div>

  <div id="header" style="height:96px; width:600px;">
<h2 style="text-align:center;">This is header
</h2>
  </div>
  <div contenteditable="true" style="height:1400px; width:600px; border:1px solid #eaedf1;"> 
  </div>
  <div id="footer" style="height:50px; width:600px;">
<h2 style="text-align:center;">This is footer
</h2>
  </div>
</div>

See: https://jsfiddle.net/alejuliet/qn4k7csu/

I understand. To keep the height of the div fixed use 'overflow:hidden' on the contenteditable div, see my edited answer. — AleJuliet, Sep 12 '16 at 14:30
And you have two different content-editable div I want only one — Nikhil Ghuse, Sep 13 '16 at 05:55

How to block a content editable at specific position if a div with style absolute position is overlapped on it

3 Answers3