CODEWITHSUNDEEP
javascripthtmlcss
vkosyj
vkosyj

Reputation: 777

Place elements on(not append) the dynamically created div

I use JavaScript to dynamically create a line. Then I do not know how to place two balls on the 1/3 of length to the beginning and 1/3 of length to the end. Please see the picture below. I want two balls showing up when I press enter in the input box. I tried to use append but clearly this did not work. The code below is the html, css, js code. Hope someone could help me out. Thank you in advance.

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>

    <div id = "user">
        <input type="text" id="input"><br><br>
    </div>

</body>
</html>

css:

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


#output {
    width: 300px;
    height: 200px;
    position:absolute;
    float:left;
}

.line {
    width: 125px;
    height: 80px;
    float:left;
    margin-right: 20px;
}

#user {
    position:relative;
    z-index:99;
    top:50px;
}

#ball{
    width: 10px;
    height: 10px;
    background: #000000;
    border: 2px solid #ccc;
    border-radius: 50%;
}

js:

$(document).ready(function() {
    make();
    $("#input").keyup(function(event){
        if(event.keyCode == 13){
            //$('#hr1').css("border-bottom-color", "red");
            /*how to put the ball on the line*/
        }
    });
});

function make() {
    var one = document.createElement('div');
    one.className = "line";
    var hr = document.createElement('hr');
    hr.className = "deco";
    hr.id = "hr" + 1;
    one.append(hr);
    $('#output').append(one);
}

Upvotes: 0

Views: 75

Answers (1)

Suresh Gogu
Suresh Gogu

Reputation: 379

Just modified your code as per requirement.

No need of div with class line.
If you want balls to be appended from js, you can include them in js.

I Hope this helps you.

$(document).ready(function() {
    make();
    $("#input").keyup(function(event){
        if(event.keyCode == 13){
            $('#hr1').css("border-bottom-color", "red");
            $('.ball').css("display", "inline-block");
        }
    });
});

function make() {
    var hr = document.createElement('hr');
    hr.className = "deco";
    hr.id = "hr" + 1;
    $('#output').prepend(hr);
}
.deco {
    border-bottom: 1px solid black;
    width: 100%;
    margin-left:0px;
    margin-bottom:10px;
    z-index: 2;
    position: relative;
    display: block;
    margin-right: 20px;
}


#output {
    position: relative;
    width: 125px;
}


#user {
    position:relative;
    z-index:99;
    top:50px;
}

.ball{
    display: none;
    width: 10px;
    height: 10px;
    background: #000000;
    border: 2px solid #ccc;
    border-radius: 50%;
    position: absolute;
    top: -5px;
    z-index: 100;
}
.first-ball {
    left: calc(33.3% - 10px);
}
.second-ball {
    right: calc(33.3% - 10px);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

<div id = "output">
        <div class="ball first-ball"></div>
        <div class="ball second-ball"></div>
</div>

<div id = "user">
  <input type="text" id="input"><br><br>
</div>

Upvotes: 1

Related Questions