Tips for adjusting the CSS left property of a class based on the ID of a tag

I am currently working on setting the left property of a class based on the id of a li tag. The li tags are being dynamically generated as shown below:

.js

var months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
$.each(months, function (i, v) {
    var li = $('<li id="sp_month_' + v + '">' + v + '</li>');
    $('#servicePlanMonths').append(li);
});

The ids of the LI tags are like sp_month_jan and so on....

Now I want to use these ids to set the .css left property of another div (also dynamically generated as shown below) to match each li id. Here is the code for generating the other div:

.js

function DrawSPPriorityTimeLine(curelement, priorityObj) 
{
var priorityMonth = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
var timeFrame = priorityObj.TimeFrames();
var activityTotalMonth = [];

if (timeFrame.trim().length > 0 && timeFrame.trim() != "On-going") {
    var startMonth = jQuery.inArray(timeFrame.split('-')[0].trim(), priorityMonth);
    var endMonth = (timeFrame.split('-').length > 1) ? jQuery.inArray(timeFrame.split('-')[1].trim(), priorityMonth) : startMonth;
} else {
    var startMonth = 0;
    var endMonth = 11;
}

var activityMonth = (endMonth - startMonth + 1) * 3 - 2;

for (var j = 0; j <= activityMonth; j++)
    activityTotalMonth.push(j);

$.each(activityTotalMonth, function (i, v) {
    var div = $('<div>').addClass('counts');        
    $(curelement).find('.bar-steps').append(div);
});

}

.css

.bar-steps .counts {
    width: 3px;
    height: 3px;
    float: left;
    background: #999;
    margin-right: 22px;
    border-radius: 50px;
}

The div is dynamically generated and the class "counts" is appended to render the style.

The issue arises when these divs (with the counts class) are generated, they do not align with the li tags.

Using the Li tags, I have successfully displayed the month names horizontally. Now I am attempting to align the left property of the other divs (using the counts class) to start rendering from the same position as where the li text (e.g., month name Feb) is displayed.

Answer №1

Here are some suggestions you can experiment with:

  1. document.querySelector("#myButton").style.right = "100px";
  2. document.getElementById("contentDiv").style.paddingLeft = "50px";

Answer №2

After some thorough analysis, I have successfully found the solution. Here is the expected result that I was aiming for:

// Assigning the left position value of the starting month in the priority timeline to a variable
var monthLeftPosition = $('#servicePlanMonths').find('#sp_month_' + startingMonth).position().left;

$(curelement).find('.bar-steps').offset({ left: monthLeftPosition });

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

How can I validate multiple fields with the same name using jQuery?

On my webpage, I dynamically create multiple select inputs with the same name. This is a snippet of my code: <select name="area[]" id="area[]" class="area"> <option value="">Select Area</option> <? $cities = $this-> ...

The jQuery slider's next button is not functioning as intended

jQuery('#slider-container').bjqs({ 'animation' : 'slide', 'width' : 1060, 'height' : 500, 'showControls' : false, 'centerMarkers' : false, animationDuration: 500, rotationS ...

Having trouble adding a custom font with override to MuiCssBaseline in react-admin, the @global @font-face seems

I am attempting to integrate the NotoSansSC-Regular.otf font from Google into my react-admin application as the default font for simplified Chinese text. I have managed to make it work by including the fonts in the root HTML file using CSS, like this: ty ...

Configuring controller for sending ajax post request

Upon uncovering a bug in my previous code, I realized that my controller page is preventing the call to it. I have limited knowledge about coding in vb, but this project is dependent on it. My current focus is ensuring that my controller page is properly c ...

Is there a way to create rectangles with a designated percentage of blue color using CSS or Bootstrap 3?

There's an image on my laptop that perfectly illustrates what I mean, but unfortunately, I'm not sure how to share it with you. In essence, I am looking to create a rectangle filled with a specific percentage of the color blue. Could you assist m ...

Changing the name of a tab within a p-tabview

Setting up a p-tabview with tabs containing specific content involves the following code: <p-tabView class="tabmain" > <ng-container *ngFor="let tab of tabs"> <p-tabPanel [header]="tab.header" > ...

Activate jQuery function upon clicking a bootstrap tab

When I click on a Bootstrap tab, I want to trigger an AJAX function. Here is the HTML code: <li><a href="#upotrebljeni" data-toggle="tab">Upotrebljeni resursi</a></li> The jQuery AJAX function looks like this: $('a #upotreb ...

Loading pages asynchronously using Ajax with added interactivity through custom JavaScript scripts

Using jQuery Masonry in conjunction with another JavaScript for voting, here is the code: <div id="contain"> <?php $result = $mysqli->query("SELECT * FROM posts ORDER BY id DESC LIMIT 0, 20"); while($row = mysqli_fetch_array($result ...

Callback function not being triggered in Jquery's getJson method

I am currently faced with a javascript conundrum. Below is the snippet of code that I have been working on: $.get("categories/json_get_cities/" + stateId, function(result) { //code here }, 'json' ); ...

The process of running npx create-react-app with a specific name suddenly halts at a particular stage

Throughout my experience, I have never encountered this particular issue with the reliable old create-react-app However, on this occasion, I decided to use npx create-react-app to initiate a new react app. Below is a screenshot depicting the progress o ...

jQuery UI Accordion - Adjusting Panel Height to Content Size

Currently, I am utilizing jQuery UI's Accordion feature from http://jqueryui.com/demos/accordion/, and my goal is to adjust it so that it resizes based on the contents of each panel rather than just fitting the largest one. In addition, I am seeking ...

JavaScript - Hover function not functioning properly

Having some difficulty with the .hover() function I am fetching dribbble shots that are displayed on page load. However, I am experiencing issues when trying to add a class via hover on these shots. Interestingly, the hover functionality works perfectly ...

Using Selenium to interact with a Modal Dialog window

When trying to navigate to a page in IE9 using Selenium, a certificate error message appears on the page. By using AutoIT, I am able to click within the browser, TAB twice, and hit enter without any issues. However, after this step, an error for a "Modal d ...

Learn the steps to successfully select a drop-down option by clicking on a button

Below is the HTML code for my select options: <select id="font"> <option value="School">School</option> <option value="'Ubuntu Mono'">SansitaOne</option> <option value="Tangerine">Tange ...

Getting elements in order with bootstrap

Can you help me align the "Format Example" string with the textual labels of the input fields without using static width in AngularJS with Bootstrap? The current alignment is right-justified but I would like it to be more dynamic as shown in the screenshot ...

What is the best way to make a div stick to the inside of another div with Bootstrap?

As a newcomer to Bootstrap 4, I am curious if there is a way to affix a div to the bottom of its parent div. My structure involves using the classes .container within a .row, along with several child divs: <div class='container'> <d ...

The property 'apply' is trying to be accessed but is undefined and cannot be read

Not being an expert in frontend development, I've hit a roadblock on what seems like a simple issue. I'm attempting to load one set of nodes from a JSON file successfully, but when trying to add new nodes from another JSON file, I encounter this ...

How to utilize a Jquery loop, implement a condition, and store the results in

After using dd() in PHP, the array displayed is as follows: 1 [▼0 => "1,18,187,188,189,190,191,192,193,194,195,196,197,198,199,200,201,202,203,204,205,206,207,208,209,210,211,212,19,20,21,22,23,24"] I need to iterate through the array and o ...

Using Jquery UI dialog to ensure validation

function DisplayDialog() { $("#dialogid").dialog({ width: 300, modal: true, show: 'drop', hide: 'drop', buttons: { "Ok": function () { return true; $(this).dialog('close'); }, "Cancel": func ...

Printing incorrect value in $.ajax call

I came across this code that I have been working on: var marcas = { nome: '', fipeId: '' }; var marcasVet = []; var select; $.ajax({ dataType: "json", url: 'http://fipeapi.wipsites.co ...