We Keep Coding

Simple Gantt Chart in Tabs

I'm trying to create a simple Gantt chart in a tab that is based from this tutorial - https://webdesign.tutsplus.com/tutorials/build-a-simple-gantt-chart-with-css-and-javascript--cms-33813.
I am able to create the timeline in the tabs but the offsetLeft and offsetWidth is not working properly - https://gyazo.com/2e43741d106ecd4eac21d72aa520368a.
I wanted to get the offsetLeft and offsetWidth of each li elements but sometimes it returns a value of zero.
Here is the javascript code:
<script type="text/javascript">
jQuery(function($){
//create chart function
function createChart_tab(e) {
const years_tab = document.querySelectorAll('.research-proj-tabs .chart-years li');
const tasks_tab = document.querySelectorAll('.research-proj-tabs .chart-bars li');
const yearsArray_tab = [...years_tab];
tasks_tab.forEach(el => {
//1
const duration = el.dataset.duration.split("-");
//2
const startYear = duration[0];
const endYear = duration[1];
let left = 0,
width = 0;
//3
if (startYear) {
const filteredArray = yearsArray_tab.filter(year => year.textContent == startYear);
left = filteredArray[0].offsetLeft;
}
// 4
if (endYear) {
const filteredArray = yearsArray_tab.filter(year => year.textContent == endYear);
width = filteredArray[0].offsetLeft + filteredArray[0].offsetWidth - left;
}
// 1
el.style.left = `${left}px`;
el.style.width = `${width}px`;
// 4
if (e.type == "load") {
// 2
el.style.backgroundColor = el.dataset.color;
// 3
el.style.opacity = 1;
}
});
}
//window.addEventListener("onload", createChart);
window.addEventListener("load", createChart_tab);
window.addEventListener("resize", createChart_tab);
});
</script>
While HTML and CSS is following the same layout here: https://webdesign.tutsplus.com/tutorials/build-a-simple-gantt-chart-with-css-and-javascript--cms-33813
I just want to figure out what am I missing here. Thanks!

How to assign color to Javascript variable and use it throughout the Javascript code

I want to assign the #FFCB03 to a javascript variable and use it.
Below is my code
let btn_all = document.getElementById("btn_all");
let btn_A = document.getElementById("btn_A");
let btn_B = document.getElementById("btn_B");
let btn_C = document.getElementById("btn_C");
btn_A.style.backgroundColor = "red";
let allButtons = [btn_all, btn_A, btn_B, btn_C];
function changeColor(e) {
let currentColor = e.target.style.backgroundColor;
if (currentColor != "red") {
e.target.style.backgroundColor = "red";
}
else {
e.target.style.backgroundColor = "";
}
if (btn_A.style.backgroundColor == "red" && btn_B.style.backgroundColor == "red" && btn_C.style.backgroundColor == "red") {
btn_all.style.backgroundColor = "red";
} else {
btn_all.style.backgroundColor = "";
}
if (btn_A.style.backgroundColor == "" && btn_B.style.backgroundColor == "" && btn_C.style.backgroundColor == "") {
btn_A.style.backgroundColor = "red"
}
}
Instead of use "red" color I want to use this "#FFCB03" color by assign it to a varible. Like this: let bgColor = "#FFCB03"; and replace it in my function, but this make my function not working as when I use "red". Even I replace "#FFCB03" directly to where "red" is, it make my function not working too.
UPDATE
This code is work just like what I want it to. One thing that I want to add to the code is I want to make "red" color to another color just like "#FFCB03". but when I replace the "red" color with this "#FFCB03", it make my code not working as before.

It is very simple to accomplish this. I will use this code as an example.
<div class = "example-container"></div>
<script>
const red = "#FFCB03"; //store desired color in the variable
const div = document.querySelector(".example-div");
div.style.backgroundColor = red; //assign it
tada :)

You could use the code like this:
let red = "#FFCB03";
e.target.style.backgroundColor = red;
and here is the code changed from your code
let btn_all = document.getElementById("btn_all");
let btn_A = document.getElementById("btn_A");
let btn_B = document.getElementById("btn_B");
let btn_C = document.getElementById("btn_C");
let red = "#FFCB03";
btn_A.style.backgroundColor = red;
let allButtons = [btn_all, btn_A, btn_B, btn_C];
function changeColor(e) {
let currentColor = e.target.style.backgroundColor;
if (currentColor != red) {
e.target.style.backgroundColor = red;
}
else {
e.target.style.backgroundColor = "";
}
if (btn_A.style.backgroundColor == red && btn_B.style.backgroundColor == red && btn_C.style.backgroundColor == red) {
btn_all.style.backgroundColor = red;
} else {
btn_all.style.backgroundColor = "";
}
if (btn_A.style.backgroundColor == "" && btn_B.style.backgroundColor == "" && btn_C.style.backgroundColor == "") {
btn_A.style.backgroundColor = red
}
}
Could this code solve your problem?

Create a new file as colors.js or something and store and export the values from there
Multiple modules
export const red = `#FFCB03`;
other files
import { red } from './colors'
btn_A.style.backgroundColor = red
Same Module or file
In case of same file, just declare the variable and use it
<script>
const red = `#FFCB03`;
btn_A.style.backgroundColor = red
</script>

Adding Captions to Bootstrap Responsive Modal Image Gallery

I have a responsive modal image gallery through bootstrap and I'm a beginner at coding. My images were successfully sliding forward and backwards until I tried adding captions.
I've added hover captions to every image using this in my javascript:
$(".popup").wrap('<div class="alt-wrap"/>')
$('.modal-body>caption').remove();
$(".popup").each(function() {
$(this).after('<p class="alt">' + $(this).attr('alt') + '</p>');
})
Now, whenever I click my modal image, the hover caption works fine but once I click next/prev, the old images still remain.
How do I remove the old images/captions when I click next/prev through my modals?
The rest of my js looks like this:
var imagesList = $("div#imagesList");
var imagesListLength = imagesList.children().length;
var showImageGallery = function(imageNumber){
$('.modal-body>img').remove();
$('#imageModal').modal('show');
var image = imagesList.children()[imageNumber];
$(image).clone().appendTo('.modal-body');
$("#currentImageNumber").text(imageNumber);
}
var nextImage = function(){
$('.modal-body>img').remove();
var nextNum = parseInt($("#currentImageNumber").text());
if(nextNum == imagesListLength-1){ nextNum = -1;}
$("#currentImageNumber").text(nextNum+1);
var image = imagesList.children()[nextNum+1];
$(image).clone().appendTo('.modal-body');
}
var previousImage = function(){
$('.modal-body>img').remove();
var previousNum = parseInt($("#currentImageNumber").text());
if(previousNum == 0){ previousNum = imagesListLength;}
$("#currentImageNumber").text(previousNum-1);
var image = imagesList.children()[previousNum-1];
$(image).clone().appendTo('.modal-body');
}
$(window).keydown(function(event) {
if (event.key === 'ArrowLeft') {
previousImage();
}
if (event.key === 'ArrowRight') {
nextImage();
}
if (event.key === 'Escape') {
$('#close-modal').trigger('click')
}
})

I just had to add:
$('.modal-body>.alt-wrap').remove();
under
var showImageGallery = function(imageNumber){
and
$('.modal-body>.alt-wrap').remove();
to my .popup, nextImage, and previousImage functions

How to make getElementsByClassName work instead of getElementById? [duplicate]

This question already has answers here:
What do querySelectorAll and getElementsBy* methods return?
(12 answers)
Closed 8 years ago.
I need to make it work for all elements: JSFiddle
First element
<p id="tweet1">First long text displayed fully on hover</p>
works through
var tweet = document.getElementById('tweet1');
The second and third element doesn't work:
<span class="tweet1">Second long text displayed fully on hover</span>
<span class="tweet1">Third long text displayed fully on hover</span>
JavaScript:
var tweet = document.getElementById('tweet1');
tweet.id = 'tweet1';
tweet.className = 'hiding';
var slide_timer,
max = tweet.scrollWidth,
slide = function () {
tweet.scrollLeft += 2;
if (tweet.scrollLeft < max) {
slide_timer = setTimeout(slide, 40);
}
};
tweet.onmouseover = tweet.onmouseout = function (e) {
e = e || window.event;
e = e.type === 'mouseover';
clearTimeout(slide_timer);
tweet.className = e ? '' : 'hiding';
if (e) {
slide();
} else {
tweet.scrollLeft = 0;
}
};
CSS
#tweet1 {
overflow:hidden;
white-space:nowrap;
width:120px;
}
.hiding {
text-overflow:ellipsis;
}
When i change in HTML <p id="tweet1"> to <p class="tweet1">,
in CSS #tweet1 to .tweet1 and in JS var tweet = document.getElementById('tweet1'); to var tweet = document.gelElementsByClassName('tweet1');
nothing happens, first element stops to work.

gelElementsByClassName gives you a list ..
You would need to iterate over the list and assign the same functionality to each of the elements in the HTML collection.
var tweets = document.getElementsByClassName('tweet1');
for (var i = 0; i < tweets.length; i++) {
var tweet = tweets[i];
tweet.className = 'hiding';
var slide_timer,
max = tweet.scrollWidth,
slide = function () {
tweet.scrollLeft += 2;
if (tweet.scrollLeft < max) {
slide_timer = setTimeout(slide, 40);
}
};
tweet.onmouseover = tweet.onmouseout = function (e) {
e = e || window.event;
e = e.type === 'mouseover';
clearTimeout(slide_timer);
tweet.className = e ? '' : 'hiding';
if (e) {
slide();
} else {
tweet.scrollLeft = 0;
}
}
}
It is a better idea to extract the contents of the for loop into a separate function.
Updated Fiddle

HTML
First long text displayed fully on hover
<p class="tweet1">Second long text displayed fully on hover</p>
<p class="tweet1">Third long text displayed fully on hover</p>
CSS
.tweet1 {
overflow:hidden;
white-space:nowrap;
width:120px;
}
.hiding {
text-overflow:ellipsis;
}
jQuery/Javascript
$('.tweet1').addClass('hiding');
var slide_timer,
slide = function (element) {
element.scrollLeft += 2;
if (element.scrollLeft < element.scrollWidth) {
slide_timer = setTimeout(function(){slide(element);}, 40);
}
};
$('.tweet1').mouseover(function () {
clearTimeout(slide_timer);
$(this).removeClass('hiding');
slide(this);
});
$('.tweet1').mouseout(function () {
clearTimeout(slide_timer);
$(this).addClass('hiding');
$(this)[0].scrollLeft = 0;
});
To see it in action check out this jsFiddle

javascript not working on button as expected

I'm trying to connect previous and fwd buttons to a gallery and I want the previous button to be hidden on first image of the gallery but javascript doesn't seem to be working at all.
Javascript
var imageGallery = new Array();
imageGallery[0] = '1.png';
imageGallery[1] = '2.png';
imageGallery[2] = '3.png';
imageGallery[3] = '4.png';
imageGallery[4] = '5.png';
var imgCount = 0;
function next() {
imgCount++ ;
document.getElementById("gallery").src = imageGallery[imgCount] ;
}
function previous() {
imgCount--;
document.getElementById("gallery").src = imageGallery[imgCount] ;
}
if(document.getElementById("gallery").getAttribute("src") == "1.png")
{
document.getElementById("previous").style.visibility = 'hidden';
}
else
{
document.getElementById("previous").style.visibility = 'visible';
}
HTML
<div id="img">
<img id="gallery" src="1.png" style="height:420px; width:744px" >
<div id="imgNav">
<a id="previous" href onclick="previous(); return false;">previous</a>
<span style="color:#666; font-size:0.9em"> | </Span>
<a id="next" href onclick="next(); return false;">next</a>
</div>
</div>
Actually the logic is if 'src' attribute of id 'gallery' is '1.png' then 'visibility' of element with id 'previous' is 'hidden' else not but doesn't seem to be working. Can anyone help figuring it out.

You're probably trying to check on an image that's not totally loaded yet. Did you remember to place your code to run just when the page is fully loaded (in case it's placed in the page headers - you didn't mention whether it is or not)?
UPDATED
var imageGallery = new Array();
imageGallery[0] = '1.png';
imageGallery[1] = '2.png';
imageGallery[2] = '3.png';
imageGallery[3] = '4.png';
imageGallery[4] = '5.png';
var imgCount = 0;
function checkNav() {
var previousLnk = document.getElementById("previous");
var nextLnk = document.getElementById("next");
previousLnk.style.visibility = imgCount == 0 ? 'hidden' : 'visible';
nextLnk.style.visibility = imgCount >= (imageGallery.length - 1) ? 'hidden' : 'visible';
}
function setImg() {
var gallery = document.getElementById("gallery");
gallery.src = imageGallery[imgCount];
}
function next() {
imgCount++;
setImg();
checkNav();
}
function previous() {
imgCount--;
setImg();
checkNav();
}
window.onload = function () {
checkNav();
}
Demo: http://jsfiddle.net/N7V9E/