How can I add line numbers to a div to make it looks like an IDE editor if that div not containing text, instead it contains floating HTML elements?

Question

I am trying to add a line number for each line in a div. But my div body is just a floating combination of other HTML elements that are generated using js and injected to that div. I know that if I want to add line numbers to a div that contains a text or fixed with elements I can do this. but How to do that for floating elements.

var field = document.getElementById('field');

function randomIntFromInterval(min, max) { // min and max included 
  return Math.floor(Math.random() * (max - min + 1) + min);
}

for (var i = 0; i < 100; i++) {
    var element = document.createElement('div');
    if(randomIntFromInterval(1, 3) == 1)
            element.classList.add("child_1_div");
    else if(randomIntFromInterval(1, 3) == 2)
        element.classList.add("child_2_div");
    else if(randomIntFromInterval(1, 3) == 3)
        element.classList.add("child_3_div");

    field.appendChild(element);
}

.parent_div {
    width: 500px;
    height: 500px;
    font-size: 0;
    border: 1px solid #FF0000;

}

.child_1_div {
    font-size: 1rem;
    display: inline-block;
    width: 30%;
    height:20px;
    box-sizing: border-box;
    border: 1px solid #000;
}


.child_2_div {
    font-size: 1rem;
    display: inline-block;
    width: 10%;
    height: 10px;
    box-sizing: border-box;
    border: 1px solid #000;
}


.child_3_div {
    font-size: 1rem;
    display: inline-block;
    width: 5%;
    height: 5px;
    box-sizing: border-box;
    border: 1px solid #000;
}

<div id ="field" class="parent_div"></div>

you could check each element left position inside the container , if it is eqaul to 0, then add a class to generate a pseudo elemnt. CSS counter can be used and incremented on that class. — G-Cyrillus, Nov 27 '19 at 17:18

MistaPrime · Answer 1 · 2019-11-27T16:59:45.000

I think it's a little difficult to give an answer not knowing how you want it to look. A screenshot would have helped. However I assume you just want any text beside each of the divs even if they are floated, to do that you would simply add this CSS:

#field {
  /* Set "my-sec-counter" to 0 */
  counter-reset: my-sec-counter;
}

#field div::before {
  /* Increment "my-sec-counter" by 1 */
  counter-increment: my-sec-counter;
  content: "Section " counter(my-sec-counter) ". ";
  float:left;
}
#field div {
    font-size: 1rem;
}

var field = document.getElementById('field');

function randomIntFromInterval(min, max) { // min and max included 
  return Math.floor(Math.random() * (max - min + 1) + min);
}

for (var i = 0; i < 100; i++) {
    var element = document.createElement('div');
    if(randomIntFromInterval(1, 3) == 1)
      element.classList.add("child_1_div");
    else if(randomIntFromInterval(1, 3) == 2)
        element.classList.add("child_2_div");
    else if(randomIntFromInterval(1, 3) == 3)
        element.classList.add("child_3_div");

    field.appendChild(element);
}

.parent_div
{
    width: 500px;
    height: 500px;
    font-size: 0;
    border: 1px solid #FF0000;

}

.child_1_div
{
    font-size: 1rem;
    display: inline-block;
    width: 30%;
    height:20px;
    box-sizing: border-box;
    border: 1px solid #000;
}


.child_2_div
{
    font-size: 1rem;
    display: inline-block;
    width: 10%;
    height: 10px;
    box-sizing: border-box;
    border: 1px solid #000;
}


.child_3_div
{
    font-size: 1rem;
    display: inline-block;
    width: 5%;
    height: 5px;
    box-sizing: border-box;
    border: 1px solid #000;
}


#field {
  /* Set "my-sec-counter" to 0 */
  counter-reset: my-sec-counter;
}

#field div::before {
  /* Increment "my-sec-counter" by 1 */
  counter-increment: my-sec-counter;
  content: "Section " counter(my-sec-counter) ". ";
  float:left;
}
#field div {
    font-size: 1rem;
}

<div id ="field" class="parent_div"></div>

Upon reading the comments it seems you need line numbers as in when you open a code editor. To do that you would need to create a new div. Float that div to the left so that it is always beside your #field div. Then in the new div add numbers which are floated left and clear float left so that each number is on the next line. Something like this:

<div id="lineNumbers">
  <span>1</span>
  <span>2</span>
  <span>3</span>
</div>
#lineNumbers {
  width: 20px;
  float:left;
  border:1px solid green;
}
#lineNumbers span {
  display:inline-block;
  float:left;
  clear:both;
}

This doesn't answer the question at all. OP is looking add line numbers to each line of elements - like an IDE. Look at the example link OP provided. — disinfor, Nov 27 '19 at 16:16
@disinfor Each line of numbers has a line of elements. You can provide a screenshot or ask OP to provide screenshot of the desired result. — MistaPrime, Nov 27 '19 at 16:19
Why would I provide a screen shot for OP? Also, instead of answering, you could have asked OP to provide one. Like I said, look at the link OP provided, you'll see exactly what they are trying to do. Run the code in the accepted answer: https://stackoverflow.com/questions/43110136/add-line-number-to-existing-html/43110630 — disinfor, Nov 27 '19 at 16:23
Because I don't make sense? Read the question again. OP is looking for line numbers, not a number next to each div. So if a line has 4 divs, 6 divs or 1 div - just the line gets the number, not each div. — disinfor, Nov 27 '19 at 16:32

score 0 · Answer 2 · answered Nov 27 '19 at 18:22

example with jQuery from my comment

you could check each element left position inside the container , if it is eqaul to 0, then add a class to generate a pseudo elemnt. CSS counter can be used and incremented on that class.

example trying with jquery.

function testme() {
  $('#field.parent_div').children().each(function() {
    var $currentElement = $(this);
    if ($currentElement.position().left === 0) {
      $currentElement.addClass(" lines")
    }
  });
}

var field = document.getElementById("field");

function randomIntFromInterval(min, max) {
  // min and max included
  return Math.floor(Math.random() * (max - min + 1) + min);
}

for (var i = 0; i < 100; i++) {

  var element = document.createElement("div");
  element.classList.add("child_div");// you mist a few 

  if (randomIntFromInterval(1, 3) == 1)
    element.classList.add("child_1_div");
  else if (randomIntFromInterval(1, 3) == 2)
    element.classList.add("child_2_div");
  else if (randomIntFromInterval(1, 3) == 3)
    element.classList.add("child_3_div");

  field.appendChild(element);
}

.parent_div {
  counter-reset: line;
}

.parent_div div.lines {
  counter-increment: line;
  /* see me */
  background: lightblue;
}

.parent_div .lines::before {
  content: counter(line);
  position: absolute;
  right: 100%;
  margin-right: 0.5em;
  background: yellow;
}

.parent_div {
  width: 500px;
  height: 500px;
  font-size: 0;
  border: 1px solid #ff0000;
  position: relative;
  margin-left: 2rem;
}

.child_div {
  display: inline-block;
  width: 2rem;
  height: 1rem;
  font-size: 1rem;
  border: solid 1px;
}

.child_1_div {
  font-size: 1rem;
  display: inline-block;
  width: 30%;
  height: 20px;
  box-sizing: border-box;
  border: 1px solid #000;
}

.child_2_div {
  font-size: 1rem;
  display: inline-block;
  width: 10%;
  height: 15px;
  box-sizing: border-box;
  border: 1px solid #000;
}

.child_3_div {
  font-size: 1rem;
  display: inline-block;
  width: 5%;
  height: 25px;
  box-sizing: border-box;
  border: 1px solid #000;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button onclick="testme();">show line numbers</button>
<div id="field" class="parent_div"></div>

How can I add line numbers to a div to make it looks like an IDE editor if that div not containing text, instead it contains floating HTML elements?

2 Answers2