Position items within the dynamically generated div without appending them

Utilizing JavaScript, I dynamically generate a line but struggle to position two balls at both the 1/3 mark from the beginning and end. For reference, please view the image below. I aim to have two balls appear upon pressing enter in the input box. Despite my attempts with append, the solution has eluded me thus far. Below is the HTML, CSS, and JS code for this task. Any assistance would be greatly appreciated. Thank you in advance.

https://i.sstatic.net/sgp33.png

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);
}

Answer №1

I have made adjustments to your code based on the requirements.

There is no necessity for a div with the class line.
If you wish to add balls from JavaScript, you can include them in your JavaScript code.

I trust this solution will be beneficial for 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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the reason for the checkboxes in vuejs not being rendered with the checked attribute set

When working on an edit form, I encountered a situation where I had multiple options to choose from. These options were fetched via ajax using axios and assigned to the variable permisos in the component. Later, these options are rendered through a v-for l ...

Make sure to align images and comments seamlessly on your website just like in the comment section of YouTube

Looking for help aligning an image and two spans in one row <img src="../images/profile/profile.png" class="img" /> <span class="name">First Name</span> <span class="comment"> This is simply dumm ...

What could be causing the HTML <DATALIST> dropdown to display next to its input rather than below it?

I have an input linked to a datalist, and it's functioning correctly. However, when I initially open the dropdown, the option list appears next to (right of) the input. After entering a few characters to narrow down the list, it then shifts below the ...

Using Javascript to retrieve information from a json file

I am currently working on incorporating JSON data into my script. I have noticed that when I manually declare a variable and check the console output, everything seems to work fine. <script> data = '[{"id": 1,"name": "Germany"},{"id": 2,"name": ...

modify the appearance of HTML controls in real time with C#

Is there a way to dynamically add an additional navigation item to my website's menu list when the admin logs in through admin.aspx? The menu list is created using HTML controls such as <ul>...<li>, and I would like the new navigation item ...

I'm looking to center the column content vertically - any tips on how to do this using Bootstrap?

Hello! I am looking to vertically align the content of this column in the center. Here is an image of my form: https://i.stack.imgur.com/nzmdh.png Below is the corresponding code: <div class="row"> <div class="form-group col-lg-2"> ...

Toggle the visibility of table rows using checkboxes

I'm working with checkboxes to toggle the visibility of specific rows in a table based on their content matching the selected checkbox values. Checkboxes: <input type='checkbox' name='foo1' value='foo1' v-model="sele ...

Excess space appearing to the right of the text box in Internet Explorer 9 standards mode and Google Chrome

Looking for help on how to eliminate the space between the right side of an input textbox and a red border? Check out these examples: IE: http://jsfiddle.net/fQHGA/ <div style="float:left;border:1px solid red"> <label style="float:left">a ...

When I utilize the redux connect function, the class information in my IDE (PhpStorm/WebStorm) seems to disappear

When I use the connect function from redux, it seems to hinder my IDE (PhpStorm) from "Find Usages" on my classes. This is likely because connect returns any, causing the type information from the imported SomeClass file to be lost. export default connect ...

How come I am unable to squeeze in 4 columns with cards on a compact screen while utilizing Bootstrap 4?

After several attempts, the 4 columns still refuse to conform to a smaller screen size. The final column ends up being displayed horizontally at the bottom of the cards. @media (max-width: 575px) { .crd-group { flex-wrap: wrap; } .cr ...

I need assistance in validating and processing an HTML form that takes input from a UI login interface while utilizing the Fiber framework in the Go programming language

Can you assist me in capturing input data using the Fiber Golang framework? <form action="/" method="POST" novalidate> <div> <p><label>Email Address:</label></p> <p><inp ...

The Server-Sent Event feature seems to be malfunctioning as it appears that browsers are unable to detect any events sent through Server-Sent

I have successfully implemented server-sent events (HTML5) in my project without using node.js. It is a simple webpage (another JSP page) that makes a call and receives a response. However, when I receive the response, none of the methods/functions (onopen ...

Navigating through a website that loads content dynamically with AJAX can be easily done by

Having an issue with scraping data from a website using jQuery AJAX. There are 300 links to scrape, but the site only shows 50 at a time, requiring scrolling to load more. Can someone assist me with this? var baseURL = "https://hr.myu.umn.edu/psc/hrp ...

A guide on showcasing items on an html webpage through the use of javascript

Currently, I have a series of hardcoded HTML elements in my code snippet. <!-- Reciever Message--> <div class="media w-50 ml-auto mb-3"> <div class="media-body"> ...

Achieving the perfect button using a combination of material-ui and styled-components

Utilizing the ToggleButton and ToggleButtonGroup components from material-ui, starting with material-ui's gatsby template. To prevent common material-ui errors with production builds, I am attempting to incorporate styled-components as well. The foll ...

Events triggered when the mouse hovers over an element and then moves

After spending hours reading articles and watching YouTube videos, I am completely lost. No matter what code I try, it seems like I can never get it right. It's frustrating how such a simple task can be so confusing. I just can't seem to wrap my ...

Guide to obtaining specific top elements from an array using JavaScript

I'm seeking assistance with sorting arrays in JavaScript. Here is an example of a sorted array: mainArray : [25 20 20 20 18 17 17 15 12 12 10 5 5 ] The mainArray may contain duplicate values. A. Dealing with duplicates Based on user input, I need ...

Setting character limits when defining string variables in TypeScript

Upon reviewing the documentation, it appears that there is no straightforward method to perform type checking for the minimum and maximum length of a string data type. However, is there a possible way to define a string data type using custom types in ord ...

What is the most effective method for transferring resolved promise values to a subsequent "then" chain?

Currently, I am grappling with understanding promises by utilizing the Q module in node.js. However, I have encountered a minor setback. Consider this scenario: ModelA.create(/* params */) .then(function(modelA){ return ModelB.create(/* params */); } ...

The issue persists with the event listener not responding to input key

Can the Keycode that is pressed during the firing of addEventListener input be retrieved? <p contentEditable="true" id="newTask">New task</p> document.getElementById("newTask").addEventListener("input" ...