andre.brandtzaeg
New Coder
Hi all.
i have this script.
When i scroll if days is to large, the 'orange-box' is in same place. it dosn't move when scrolling.
Anyone please help me...
i have this script.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Gantt</title>
<!-- jQuery (for any previous jQuery UI components; Bootstrap 5 doesn't require jQuery) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<!-- Bootstrap 5 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<!-- Font and Icons -->
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap" rel="stylesheet">
<link href='https://unpkg.com/[email protected]/css/boxicons.min.css' rel='stylesheet'>
</head>
<body>
<div class="Parent">
<div class="topMenu">
<div class="btnLeft" id="btnleft"><i class='bx bx-menu-alt-left'></i></div>
<div class="btnMiddle" id="btnmiddle"><i class='bx bx-menu'></i></div>
<div class="" id=""><i class='bx bx-calendar'></i>10.01.2025</div>
<div class="" id=""><i class='bx bx-calendar'></i>17.02.2025</div>
</div>
<div class="Gant-Container">
<!-- Activities -->
<div class="Gantt-Main">
<!-- Gantt activity header -->
<div class="ProjectDetail_Header medium-text">
<div class="Pos">#</div>
<div class="Task">Activity</div>
<div class="Duration">Dur</div>
<div class="Start">Start</div>
<div class="End">End</div>
<div class="Team">Team</div>
<div class="Add"><a href="#" onclick="alert('Ny task');">+</a></div>
</div>
<div class="ProjectDetail_Task 0 small-text" id="0">
<div class="Pos" onclick="getTaskId('18557f81-b4c4-4b5a-aa7f-bd13db252362', 0)">1</div>
<div class="Task" onclick="getTaskId('18557f81-b4c4-4b5a-aa7f-bd13db252362', 0)" style="text-align: left;">First integration</div>
<div class="Duration" onclick="getTaskId('18557f81-b4c4-4b5a-aa7f-bd13db252362', 0)">7</div>
<div class="Start" onclick="getTaskId('18557f81-b4c4-4b5a-aa7f-bd13db252362', 0)">2024-10-23</div>
<div class="End" onclick="getTaskId('18557f81-b4c4-4b5a-aa7f-bd13db252362', 0)">2024-10-31</div>
<div class="Team" onclick="getTaskId('18557f81-b4c4-4b5a-aa7f-bd13db252362', 0)">
<div class="x-small-text user-circle" title="André Brandtzæg">
AB
</div>
</div>
<div class="Add"><a href="#" onclick="event.preventDefault(); alert('Ny task under forrige');">+</a></div>
</div>
<div class="ProjectDetail_Task 1 small-text" id="1">
<div class="Pos" onclick="getTaskId('8be67e7b-92c2-493c-91b8-da93d66fbb42', 1)">2</div>
<div class="Task" onclick="getTaskId('8be67e7b-92c2-493c-91b8-da93d66fbb42', 1)" style="text-align: left;">Avluttende test</div>
<div class="Duration" onclick="getTaskId('8be67e7b-92c2-493c-91b8-da93d66fbb42', 1)">4</div>
<div class="Start" onclick="getTaskId('8be67e7b-92c2-493c-91b8-da93d66fbb42', 1)">2024-11-02</div>
<div class="End" onclick="getTaskId('8be67e7b-92c2-493c-91b8-da93d66fbb42', 1)">2024-11-07</div>
<div class="Team" onclick="getTaskId('8be67e7b-92c2-493c-91b8-da93d66fbb42', 1)">
<div class="x-small-text user-circle" title="André Brandtzæg">
AB
</div>
</div>
<div class="Add"><a href="#" onclick="event.preventDefault(); alert('Ny task under forrige');">+</a></div>
</div>
<div class="ProjectDetail_Task 2 small-text" id="2">
<div class="Pos" onclick="getTaskId('93c7d096-ff02-49ba-aea3-bbf10f0430ca', 2)">3</div>
<div class="Task" onclick="getTaskId('93c7d096-ff02-49ba-aea3-bbf10f0430ca', 2)" style="text-align: left;">Svalbard</div>
<div class="Duration" onclick="getTaskId('93c7d096-ff02-49ba-aea3-bbf10f0430ca', 2)">2</div>
<div class="Start" onclick="getTaskId('93c7d096-ff02-49ba-aea3-bbf10f0430ca', 2)">2024-10-11</div>
<div class="End" onclick="getTaskId('93c7d096-ff02-49ba-aea3-bbf10f0430ca', 2)">2024-10-12</div>
<div class="Team" onclick="getTaskId('93c7d096-ff02-49ba-aea3-bbf10f0430ca', 2)">
<div class="x-small-text user-circle" title="André Brandtzæg">
AB
</div>
</div>
<div class="Add"><a href="#" onclick="event.preventDefault(); alert('Ny task under forrige');">+</a></div>
</div>
</div>
<div class="Gantt-Body">
<div class="GanttDate_Header medium-text" style="min-height:61px;">
<div class="dateContainer" style="width:550px; height:100%">
<div class="div1">
<div class="MonthHeader" style="height:100%; font-weight: bold; text-align: center; margin: 0px; border-left: 1px solid lightgray; border-right: 1px solid lightgray; min-width: 550px;">
Januar 2025
</div>
</div>
<div class="div2">
<div class="GanttDates_Header " style="min-width: 25px; max-width:25px; border-right: 0.5px solid lightgray; text-align: center;" title="2025-01-10">10</div>
<div class="GanttDates_Header " style="min-width: 25px; max-width:25px; border-right: 0.5px solid lightgray; text-align: center;" title="2025-01-11">11</div>
<div class="GanttDates_Header " style="min-width: 25px; max-width:25px; border-right: 0.5px solid lightgray; text-align: center;" title="2025-01-12">12</div>
<div class="GanttDates_Header " style="min-width: 25px; max-width:25px; border-right: 0.5px solid lightgray; text-align: center;" title="2025-01-13">13</div>
<div class="GanttDates_Header " style="min-width: 25px; max-width:25px; border-right: 0.5px solid lightgray; text-align: center;" title="2025-01-14">14</div>
<div class="GanttDates_Header " style="min-width: 25px; max-width:25px; border-right: 0.5px solid lightgray; text-align: center;" title="2025-01-15">15</div>
<div class="GanttDates_Header " style="min-width: 25px; max-width:25px; border-right: 0.5px solid lightgray; text-align: center;" title="2025-01-16">16</div>
<div class="GanttDates_Header " style="min-width: 25px; max-width:25px; border-right: 0.5px solid lightgray; text-align: center;" title="2025-01-17">17</div>
<div class="GanttDates_Header " style="min-width: 25px; max-width:25px; border-right: 0.5px solid lightgray; text-align: center;" title="2025-01-18">18</div>
<div class="GanttDates_Header" style="min-width: 25px; max-width:25px; border-right: 0.5px solid lightgray; text-align: center;" title="2025-01-19">19</div>
<div class="GanttDates_Header " style="min-width: 25px; max-width:25px; border-right: 0.5px solid lightgray; text-align: center;" title="2025-01-20">20</div>
<div class="GanttDates_Header " style="min-width: 25px; max-width:25px; border-right: 0.5px solid lightgray; text-align: center;" title="2025-01-21">21</div>
<div class="GanttDates_Header " style="min-width: 25px; max-width:25px; border-right: 0.5px solid lightgray; text-align: center;" title="2025-01-22">22</div>
<div class="GanttDates_Header " style="min-width: 25px; max-width:25px; border-right: 0.5px solid lightgray; text-align: center;" title="2025-01-23">23</div>
<div class="GanttDates_Header " style="min-width: 25px; max-width:25px; border-right: 0.5px solid lightgray; text-align: center;" title="2025-01-24">24</div>
<div class="GanttDates_Header " style="min-width: 25px; max-width:25px; border-right: 0.5px solid lightgray; text-align: center;" title="2025-01-25">25</div>
<div class="GanttDates_Header " style="min-width: 25px; max-width:25px; border-right: 0.5px solid lightgray; text-align: center;" title="2025-01-26">26</div>
<div class="GanttDates_Header " style="min-width: 25px; max-width:25px; border-right: 0.5px solid lightgray; text-align: center;" title="2025-01-27">27</div>
<div class="GanttDates_Header " style="min-width: 25px; max-width:25px; border-right: 0.5px solid lightgray; text-align: center;" title="2025-01-28">28</div>
<div class="GanttDates_Header " style="min-width: 25px; max-width:25px; border-right: 0.5px solid lightgray; text-align: center;" title="2025-01-29">29</div>
<div class="GanttDates_Header " style="min-width: 25px; max-width:25px; border-right: 0.5px solid lightgray; text-align: center;" title="2025-01-30">30</div>
<div class="GanttDates_Header " style="min-width: 25px; max-width:25px; border-right: 0.5px solid lightgray; text-align: center;" title="2025-01-31">31</div>
</div>
</div>
</div>
<div class="DaysContainer" id="0">
<div class="myDay" id="0" title="2025-01-10"></div>
<div class="WeekendDays myDay" id="0" title="2025-01-11"></div>
<div class="WeekendDays myDay" id="0" title="2025-01-12"></div>
<div class="myDay" id="0" title="2025-01-13"></div>
<div class="myDay" id="0" title="2025-01-14"></div>
<div class="myDay" id="0" title="2025-01-15"></div>
<div class="myDay" id="0" title="2025-01-16"></div>
<div class="myDay" id="0" title="2025-01-17"></div>
<div class="WeekendDays myDay" id="0" title="2025-01-18"></div>
<div class="WeekendDays myDay" id="0" title="2025-01-19"></div>
<div class="myDay" id="0" title="2025-01-20"></div>
<div class="myDay" id="0" title="2025-01-21"></div>
<div class="myDay" id="0" title="2025-01-22"></div>
<div class="myDay" id="0" title="2025-01-23"></div>
<div class="myDay" id="0" title="2025-01-24"></div>
<div class="WeekendDays myDay" id="0" title="2025-01-25"></div>
<div class="WeekendDays myDay" id="0" title="2025-01-26"></div>
<div class="myDay" id="0" title="2025-01-27"></div>
<div class="myDay" id="0" title="2025-01-28"></div>
<div class="myDay" id="0" title="2025-01-29"></div>
<div class="myDay" id="0" title="2025-01-30"></div>
<div class="myDay" id="0" title="2025-01-31"></div>
</div>
<div class="DaysContainer" id="1">
<div class="myDay" id="1" title="2025-01-10"></div>
<div class="WeekendDays myDay" id="1" title="2025-01-11"></div>
<div class="WeekendDays myDay" id="1" title="2025-01-12"></div>
<div class="myDay" id="1" title="2025-01-13"></div>
<div class="myDay" id="1" title="2025-01-14"></div>
<div class="myDay" id="1" title="2025-01-15"></div>
<div class="myDay" id="1" title="2025-01-16"></div>
<div class="myDay" id="1" title="2025-01-17"></div>
<div class="WeekendDays myDay" id="1" title="2025-01-18"></div>
<div class="WeekendDays myDay" id="1" title="2025-01-19"></div>
<div class="myDay" id="1" title="2025-01-20"></div>
<div class="myDay" id="1" title="2025-01-21"></div>
<div class="myDay" id="1" title="2025-01-22"></div>
<div class="myDay" id="1" title="2025-01-23"></div>
<div class="myDay" id="1" title="2025-01-24"></div>
<div class="WeekendDays myDay" id="1" title="2025-01-25"></div>
<div class="WeekendDays myDay" id="1" title="2025-01-26"></div>
<div class="myDay" id="1" title="2025-01-27"></div>
<div class="myDay" id="1" title="2025-01-28"></div>
<div class="myDay" id="1" title="2025-01-29"></div>
<div class="myDay" id="1" title="2025-01-30"></div>
<div class="myDay" id="1" title="2025-01-31"></div>
</div>
<div class="DaysContainer" id="2">
<div class="myDay" id="2" title="2025-01-10"></div>
<div class="WeekendDays myDay" id="2" title="2025-01-11"></div>
<div class="WeekendDays myDay" id="2" title="2025-01-12"></div>
<div class="myDay" id="2" title="2025-01-13"></div>
<div class="myDay" id="2" title="2025-01-14"></div>
<div class="myDay" id="2" title="2025-01-15"></div>
<div class="myDay" id="2" title="2025-01-16"></div>
<div class="myDay" id="2" title="2025-01-17"></div>
<div class="WeekendDays myDay" id="2" title="2025-01-18"></div>
<div class="WeekendDays myDay" id="2" title="2025-01-19"></div>
<div class="myDay" id="2" title="2025-01-20"></div>
<div class="myDay" id="2" title="2025-01-21"></div>
<div class="myDay" id="2" title="2025-01-22"></div>
<div class="myDay" id="2" title="2025-01-23"></div>
<div class="myDay" id="2" title="2025-01-24"></div>
<div class="WeekendDays myDay" id="2" title="2025-01-25"></div>
<div class="WeekendDays myDay" id="2" title="2025-01-26"></div>
<div class="myDay" id="2" title="2025-01-27"></div>
<div class="myDay" id="2" title="2025-01-28"></div>
<div class="myDay" id="2" title="2025-01-29"></div>
<div class="myDay" id="2" title="2025-01-30"></div>
<div class="myDay" id="2" title="2025-01-31"></div>
</div>
</div>
</div>
</div>
<style>
html, body {
height: 100vh;
width: 100vw;
margin: 0;
display: flex;
flex-direction: column;
background-color: #fff;
}
.Gant-Header {
height: 30px;
width: 100vw;
}
.Parent { /* The parent that contains both .topMeny and .Gant-Container */
display: flex; /* Set to flex */
flex-direction: column; /* Stack children vertically */
height: 100vh; /* Full viewport height */
}
.topMenu {
display: flex;
align-items: center;
height: 20px;
padding: 0 10px;
background-color: #fff;
/* background-color: #f8f9fa; */
border-bottom: 1px solid lightgray;
}
.Gant-Container {
flex: 1;
display: flex;
width: 100vw;
height: calc(100% - 20px);
margin: 0;
padding: 0;
overflow-x: hidden;
overflow-y: auto;
}
.Gantt-Main {
height: calc(100% - 20px);
width: 500px;
background-color: #f8f9fa;
border-top: 1px solid #ddd;
border-right: 1px solid #ddd;
display: flex;
flex-direction: column;
}
.Gantt-Main .ProjectDetail_Header {
display: flex;
align-items: center;
height: 60px;
width: 100%;
border-bottom: 1px solid gray;
align-items: flex-end;
}
.Gantt-Main .Pos {
width: 30px;
height: 100%;
display: flex;
align-items: flex-end;
justify-content: center;
border-left: 1px solid lightgray;
border-right: 0.5px solid lightgray;
}
.Gantt-Main .Task {
height: 100%;
flex-shrink: 0;
flex-grow: 1;
display: flex;
align-items: flex-end;
justify-content: left;
border-right: 1px solid lightgray;
overflow: hidden;
white-space: nowrap;
}
.Gantt-Main .Duration {
height: 100%;
width: 40px;
display: flex;
align-items: flex-end;
justify-content: center;
border-right: 1px solid lightgray;
}
.Gantt-Main .Start {
height: 100%;
min-width: 80px;
display: flex;
align-items: flex-end;
justify-content: center;
border-right: 1px solid lightgray;
}
.Gantt-Main .End {
height: 100%;
min-width: 80px;
display: flex;
align-items: flex-end;
justify-content: center;
border-right: 1px solid lightgray;
}
.Gantt-Main .Team {
height: 100%;
width: 50px;
display: flex;
align-items: flex-end;
justify-content: center;
border-right: 1px solid lightgray;
}
.Gantt-Main .ProjectDetail_Task .Team {
align-items: center;
vertical-align: middle;
}
.Gantt-Main .Add {
height: 100%;
width: 20px;
display: flex;
align-items: flex-end;
justify-content: center;
margin-left: auto;
}
.Gantt-Main .Add a {
text-decoration: none;
}
.Gantt-Main .ProjectDetail_Task {
display: flex;
height: 25px;
width: 100%;
border-bottom: 1px solid gray;
align-items: flex-end;
font-size: 10px;
}
.Gantt-Main .Pos {
width: 30px;
}
.Gantt-Main .Duration {
width: 40px;
}
.Gantt-Main .Start,
.Gantt-Main .End {
width: 80px;
}
.Gantt-Main .Add {
width: 20px;
}
.Gantt-Body {
height: calc(100% - 20px);
width: 100%;
background-color: #f8f9fa;
border-top: 0px solid #ddd;
border-right: 1px solid #ddd;
display: flex;
flex-direction: column;
overflow-x: auto;
box-sizing: border-box;
}
.Gantt-Body .GanttDate_Header {
display: flex;
white-space: nowrap;
height: 40px;
}
.Gantt-Body .dateContainer {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
}
.Gantt-Body .div1 {
width:100%;
flex-grow: 1; /* Takes up the remaining space in dateContainer */
display: flex; /* This makes div1 a flexbox container */
justify-content: flex-start;
border-bottom: 1px solid lightgray;
}
.Gantt-Body .div2 {
width: 100%;
height:31px;
display: flex; /* This makes div1 a flexbox container */
justify-content: flex-start; /* Aligns items to the start (left) */
}
.Gantt-Body .GanttDates_Header {
height: 100%;
width: 100px;
display: flex;
align-items: flex-end;
justify-content: center;
border-left: 1px solid lightgray;
border-bottom: 1px solid gray;
box-sizing: border-box;
}
.Gantt-Body .GanttChart_Header {
height: 60px;
width: 100%;
display: flex;
align-items: flex-start;
}
.Gantt-Body .Day {
border-top: 1px solid #ccc;
border-left: .5px solid #ccc;
width: 20px;
text-align: center;
position: relative;
z-index: 1;
}
.Gantt-Body .today {
background-color: green;
border: 0px;
}
.Gantt-Body .DaysContainer {
display: flex;
align-items: center;
}
.Gantt-Body .DaysContainer .TaskCell {
background-color: #FFFFFF;
border-left: .5px solid #E0E0E0;
width: 20px;
text-align: center;
position: relative;
z-index: 1;
}
.today {
background-color: green;
border: 0px;
color: white;
position: relative;
z-index: 1000;
}
.WeekendDays {
background-color: #EEEFF0;
border-left: .5px solid #E0E0E0;
width: 20px;
text-align: center;
position: relative;
z-index: 1;
}
.Gantt-Body .myDay{
min-width: 25px;
min-height: 25px;
border-bottom: 1px solid gray;
border-left: .5px solid #ccc;
text-align: center;
position: relative;
z-index: 0;
}
.Gantt-Body .DaysContainer .today {
background-color: green;
border: 0px;
color: white;
position: relative;
z-index: 1000;
}
.Gantt-Body .today {
background-color: green;
border: 0px;
color: white;
position: relative;
z-index: 1000;
}
.highlight {
background-color: lightblue;
position: relative;
z-index: 2000;
}
.Gantt-Body .DaysContainer .TaskCell .today {
background-color: green;
border: 0px;
position: relative;
z-index: 1000;
}
.user-circle {
display: flex;
justify-content: center;
align-items: center;
vertical-align: middle;
width: 20px;
height: 20px;
border-radius: 50%;
background-color: green;
color: white;
text-align: center;
}
.Hide {
display: block; /* Or inline-block, depending on your layout */
}
.btnLeft, .btnMiddle {
margin: 0 5px; /* Add some space between icons */
cursor: pointer; /* Change cursor to pointer on hover */
}
.date-cell {
min-width: 5px;
}
</style>
<script>
function addThreeDayActivity(containerId, startDateTitle, duration, taskId, taskTitle) {
// Calculate the width based on the duration
const dayWidth = 25; // Define width of a day
const taskWidth = dayWidth * duration;
// Find the starting myDay div based on the provided start date
const container = document.getElementById(containerId);
if (!container) {
console.error("Container not found:", containerId);
return; // Exit if container does not exist
}
const startDay = Array.from(document.querySelectorAll('.myDay')).find(day => day.getAttribute('title') === startDateTitle);
//console.log('startDay:', startDay);
if (startDay) {
// Create a new div for the activity
const activity = document.createElement('div');
activity.className = 'orange-box';
activity.id = taskId;
activity.title = taskTitle;
activity.draggable = true;
// Set positioning and dimensions
activity.style.position = 'absolute'; // Position relative to the parent container
activity.style.left = startDay.offsetLeft + 'px'; // Align with the corresponding myDay
activity.style.width = taskWidth + 'px';
activity.style.height = '22px'; // Set height to fit within a day cell
activity.style.backgroundColor = 'orange'; // Style of the task bar
activity.style.zIndex = '999';
// Append the activity to the specified DaysContainer
container.appendChild(activity);
console.log("Activity added:", activity);
} else {
console.log("No matching startDay found for the title:", startDateTitle);
}
}
document.addEventListener("DOMContentLoaded", function() {
// Add multiple activities, specifying which row's DaysContainer to add to
addThreeDayActivity('0', '2025-01-15', 2, 'task1', 'Task 1: New Task');
addThreeDayActivity('1', '2025-01-20', 2, 'task2', 'Task 2: Another Task');
addThreeDayActivity('2', '2025-01-27', 4, 'task3', 'Task 3: Final Task');
});
</script>
</body>
</html>When i scroll if days is to large, the 'orange-box' is in same place. it dosn't move when scrolling.
Anyone please help me...
