overlay 2 divs and a textarea

Question

The code snippet and the related issue can be found here on github
is the text area the root cause of the problem?
I have also tried using <div contenteditable> </div> instead of <textarea></textarea>

EDIT: copying question here

<div id="caret"></div>

at line 25 in index.html needs to be put on z-index: 2 in order to come between the background div and the front textarea
instead the caret comes after the front textarea at the bottom, even explicitly positioning the caret div doesn't make it move to the right place

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-sanitize.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js" integrity="sha512-K1qjQ+NcF2TYO/eI3M6v8EiNYZfA95pQumfvcVrTHtwQVDG+aHRqLi/ETn2uB+1JqwYqVG3LIvdm9lj6imS/pQ==" crossorigin="anonymous"></script>

<link rel="stylesheet" href="http://raw.github.com/ishankhare07/syntax-highlighter/blob/gh-pages/static/css/index.css">
<script type="text/javascript" src="http://raw.github.com/ishankhare07/syntax-highlighter/blob/gh-pages/static/js/app.js"></script>

<div class="container top-offset" ng-controller="EntryController as highlighter">
  <div class="row top-buffer">
    <input placeholder="Enter filename with extension" ng-model="highlighter.filename" class="rounded-border col-md-6">
    <div class="col-md-6 text-center">{{ highlighter.filename }}</div>
  </div>
  <div class="row top-buffer panel panel-default" id="code">
    <div class="code highlight" id="background">
    </div>
    <textarea spellcheck="false" class="code panel-default" id="front" ng-change="highlighter.change()" ng-model="highlighter.code"></textarea>
    <div id="caret">

    </div>
  </div>
</div>

This is a poor quality question. Just think how many will do the work to set up a test case were the problem is showing? I won't do it. Please put some more effort into your question. Make a test case on jsfiddle.net or codepen,io or the like. Just the bounty is not a big enough lure. — yunzen, Nov 20 '15 at 08:58
thanks for the feedback, i totally agree that i failed to explain my problem correctly and took your suggestion to try it out on [jsfiddle](http://jsfiddle.net/ishankhare07/uo6q5v5y/7/). I managed to get everything working, so it turns out that there was some css mess-up that i was doing. — Ishan Khare, Nov 20 '15 at 20:20
Please update your question's snippet with the fiddle. Also, did you check this question? I think it doing exactly what do you want. http://stackoverflow.com/questions/7339333/styling-text-input-caret — Mosh Feu, Nov 24 '15 at 07:47

score 1 · Answer 1 · answered Nov 20 '15 at 11:11

I don't quite understand your question. As far as I can tell you just want your caret div to be on z-index:2.

So in the CSS

#caret {
    z-index:2;
}

If this was not what you are looking for, Then please update your question to a proper question with a jsfiddle link.

score 1 · Answer 2 · answered Nov 26 '15 at 12:48

I'm kinda confused about your topic but here's a div text editor made in java with local storage

<html>
</head>
<body>
<link rel="stylesheet" type="text/css" href="opensheet.css" />
<h1>SCRAPS.txt</h1>
<div class="notepad" contentEditable="true"></div>
<script src="http://cdnjs.cloudflare.com/ajax/libs/zepto/1.0rc1/zepto.min.js "></script>
<script>
$( function() {
var ls = window.localStorage


if (ls.getItem('data')) {
$('.notepad').text(ls.getItem('data'));
}


$('.notepad').blur( function() {
ls.setItem('data', $('.notepad').text() );
});
});
</script>
</body>
</html>

score 0 · Accepted Answer · answered Nov 26 '15 at 20:07

thanks for the feedback, i totally agree that i failed to explain my problem correctly and took your suggestion to try it out on jsfiddle. I managed to get everything working, so it turns out that there was some css mess-up that i was doing.

html

<body ng-app="highlighter">
    <div class="container borders" ng-controller="ColorController as color">
        <div id="background" class="borders expand overlay text-padding">
            {{ color.code }} voila!
        </div>
        <div id="caret" class="borders expand overlay text-padding">
            {{ color.caretText }}
        </div>
        <textarea id="text" class="borders expand overlay text-padding" ng-model="color.code" ng-change="color.change()">
        </textarea>
    </div>
</body>

js

var app = angular.module("highlighter",[]);

app.controller('ColorController', function () {
    this.code = "";
    this.caretText = "";
    this.caret = "&#x2588;";

    var whitespaces = [" ", "\t", "\n", "\v", "\r"];

    this.change = function() {
        this.caretText = "";
        angular.element(document.querySelector('#caret')).html(this.caretText)
        for(var i=0; i < this.code.length; i++) {
            if(whitespaces.indexOf(this.code[i]) != -1) {
                // is a whitespace
                this.caretText += this.code[i];
            } else {
                this.caretText += " ";
            }
        }

        this.caretText += this.caret;

angular.element(document.querySelector('#caret')).html(this.caretText)
        console.log(this.caretText);
    };
});

css

.borders {
    border-style: solid;
    border-width: 1px;
    border-color: aqua;
    border-radius: 3px;
}

.expand {
    padding: 10%;
    height: 80vh;
    width: 90vw;
}

.overlay {
    position: absolute;
    top: 20vh;
}

#background {
    z-index: 1;
}

#caret {
    z-index: 2;
    color: rgba(250,80,150, 0.5);
    white-space: pre;
}

#text {
    z-index: 3;
    color: rgba(0,0,0,0);
    background-color: rgba(0,0,0,0);
}

.text-padding {
    padding: 10px;
    font-size: 1em;
    font-family: monospace;
}

overlay 2 divs and a textarea

3 Answers3