vkosyj vkosyj - 12 days ago 5
HTML Question

Issues about grouping and appending div

[EDIT] I tried to dynamically create 6 horizontal lines every 1 second using setTimeout method. So it should shows every 6 horizontal lines as a group for every 1 second. Here, I call 6 horizontal lines as group. However, I want to append each group horizontally rather than vertically. When trying to append a group and the width of the border is not long enough to hold a new group, append the new group to next lines. And also I want a "pilar" between each grounp of 6 horizontal lines, and I only want to create 8 group of horizontal lines. The first picture below is what I get after running my code. The second one is what I need. The code below is my html, css, and js code. Hope someone could help me out. Thank you in advance.

enter image description here

enter image description here

html:

<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="code.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script type="text/javascript" src="code_js.js"></script>
</head>
<body>
<div id = "output">

</div>

</body>
</html>


css:

.deco {
border-bottom: 1px solid black;
width: 120px;
margin-left:0px;
margin-bottom:10px;
z-index: 2;
position: relative;
/*display: inline-block;*/
margin-right: 20px;
}


#output {
background: #ffe6e6;
width: 600px;
height: 800px;
position:absolute;
}


js:

$(document).ready(function() {

makeItHappen(0);
});

function makeItHappen(order) {
for (var i = 0; i < 7; i++) {
var hr = document.createElement('hr');
hr.className = "deco"
hr.id = "hr" + i;
$('#output').append(hr);
}
makeTable(function() {
if(++order < 7) {
makeItHappen(order);
}
});
}

function makeTable(callback) {
setTimeout(function() {
callback();
}, 1000);
}

Answer

You can use display:flex to get the output you are expecting

$(document).ready(function() {

  makeItHappen(0);
});

function makeItHappen(order) {
  var output = $("#output");
  var div = $("<div></div>");
  div.attr('id', order);
  for (var i = 0; i < 7; i++) {
    var hr = document.createElement('hr');
    hr.className = "deco"
    hr.id = "hr" + i;
    $(div).append(hr);
  }
  output.append(div);

  makeTable(function() {
    if (++order < 7) {
      makeItHappen(order);
    }
  });
}

function makeTable(callback) {
  setTimeout(function() {
    //  alert("hell")
    callback();
  }, 1000);
}
.deco {
  border-bottom: 1px solid black;
  width: 120px;
  margin-left: 0px;
  margin-bottom: 10px;
  z-index: 2;
  position: relative;
  /*display: inline-block;*/
  margin-left: 10px;
}
#output div:nth-child(2n+1) {
  border-right: 5px solid green;
  margin-top: 5px;
}
#output div:nth-child(2n) {
  border-right: 5px solid green;
  margin-top: 5px;
  height: auto;
}
#output {
  display: flex;
  flex-wrap: wrap;
}
#output {
  background: #ffe6e6;
  width: 500px;
  position: absolute;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="output">

</div>

Hope it helps

Comments