We Keep Coding

How to change data content color of a vis js time line

In my vueJS application I'm using vis.js time line to show some data,
I have integrated the vis timeline with some randomly generated data.
Following is my code for that,
created() {
var now = moment().minutes(0).seconds(0).milliseconds(0);
var groupCount = 3;
var itemCount = 20;
// create a data set with groups
var names = ['John', 'Alston', 'Lee', 'Grant'];
for (var g = 0; g < groupCount; g++) {
this.groups.push({
id: g,
content: names[g]
});
}
// create a dataset with items
for (var i = 0; i < itemCount; i++) {
var start = now.clone().add(Math.random() * 200, 'hours');
var group = Math.floor(Math.random() * groupCount);
this.items.push({
id: i,
group: group,
content: 'item ' + i +
' <span class="" style="color:green;">(' + names[group] + ')</span>',
start: start,
type: 'box',
className: 'green', //green or yellow
title:'Testing tool tip index' + i
});
}
},
Then I used
<timeline ref="timeline"
:items="items"
:groups="groups"
:options="options"
>
</timeline>
to display the time line in my vue component.
This outputs me something like follows,
Please kindly note I have added some custom css changes to change the initial look and feel of the time line.
Since this is my first experience working with vis, I want to know, how can I change the colors of those bars...
How can I assign random color to those bars instead of all green....

I found the best way to do this was through the item's className property. So as an example, you might assign 'colour_1', 'colour_2' 'colour_3' randomly inside your 'create a dataset with items' loop.
Then provide a matching stylesheet that looks like
.colour_1 {background-color:#7fc97f; border-color:#7fc97f}
.colour_2 {background-color:#beaed4; border-color:#beaed4}
.colour_3 {background-color:#fdc086; border-color:#fdc086}
This mechanism can be extended further with additional classes applied to the container to 'switch in or out' different groups of colours depending on what you want to see.
Here's a screenshot of my (non-random) colourised timeline using this technique.
You /could/ alternatively use the 'template' function override to achieve a similar goal, but I found that the call to 'redraw' was a lot slower than just switching between colour palettes in CSS.

jQuery mouse drag event to add color?

I'm new to coding and just created a Pixel Art Maker!
I am experimenting with jQuery and am wanting to know if:
• there is a proper event method that I can call to create an effect for:
"If I click and drag my mouse over certain cells, the colors of the cells will change."
Currently I have my table set up to where you click it once, it adds color, if you click it a second time, it removes the color.
I would like a user to just drag their mouse to give it the effect like they are drawing.
I tried implementing using mouseDown() and select() but that didnt work.
Any help on how I can implement this would be appreciated. Even better if you don't give me the exact answer right off the bat, but give me hints on what jQuery event methods and listeners I should be using and where I would put it in the code so that way I can learn.
Thanks all!
Codepen Demo: https://codepen.io/chaycesol/full/Qmmyjq
var height, width, color;
// When size is submitted by the user, call makeGrid()
$('#sizePicker').submit(function (event) {
event.preventDefault();
height = $('#inputHeight').val();
width = $('#inputWeight').val();
makeGrid(height, width);
});
function makeGrid(h,w) {
//Removes grid if one is already present before pressing submit
$('tr').remove();
// Creating each table row
for (var i= 1; i <= h; i++) {
$('#pixelCanvas').append('<tr id=table' + i + '></tr>');
for (var j = 1; j <=w; j++) {
$('#table' + i).append('<td></td>');
}
}
//Draw with color in table cells
$('td').click(function addColor() {
color = $('#colorPicker').val();
if ($(this).attr('style')) {
$(this).removeAttr('style')
} else {
$(this).attr('style', 'background-color:' + color);
}
});

Animating a swap of cells in a table on click using JQuery

I'm trying to make a simple flash-card game in JavaScript using JQuery. In one part of the game, you should click on a row in a "table" (tablica) made out of divs (tablica[i][j]) to swap the cells in that row (to put the content in the cell in the correct column). Here is the relevant piece of code:
for (var j=0; j<odgovor1.length; j++)
for (var i=1; i<3; i++)
{
tablica[i][j]=document.createElement("div");
tablica[i][j].setAttribute("class","rijecUDrugomDijelu");
if (i===1) tablica[i][j].appendChild(document.createTextNode(odgovor1[j]));
else if (i===2) tablica[i][j].appendChild(document.createTextNode(odgovor2[j]));
tablica[i][j].style.top=228+27*j;
tablica[i][j].style.left=-153+110+153*i;
tablica[i][j].onclick=eval(
"(function()"+
"{"+
"var tmp=tablica[1]["+j+"].style.left;"+
"tablica[1]["+j+"].style.left=tablica[2]["+j+"].style.left;"+
"tablica[2]["+j+"].style.left=tmp;"+
"tmp=odgovor1["+j+"];"+
"odgovor1["+j+"]=odgovor2["+j+"];"+
"odgovor2["+j+"]=tmp;"+
"})"
);
pozadina.appendChild(tablica[i][j]);
}
When the user clicks on a row in that table, the cells in that row are swapped, and the content of the table is correctly tracked in the string arrays odgovor1 and odgovor2. However, they are swapped without any animation, they are swapped immediately. When I try to apply JQuery animations to the cells (divs) tablica[1][j] and tablica[2][j], the program crashes. Do you know how to do that properly?Again, I assure you, the code above works well now, but when I try to use JQuery animations instead of simply swapping the properties style.left, it crashes.

Using object properties instead of eval appears to work:
for (var j=0; j<odgovor1.length; j++)
for (var i=1; i<3; i++)
{
tablica[i][j]=document.createElement("div");
tablica[i][j].setAttribute("class","rijecUDrugomDijelu");
if (i===1) tablica[i][j].appendChild(document.createTextNode(odgovor1[j]));
else if (i===2) tablica[i][j].appendChild(document.createTextNode(odgovor2[j]));
tablica[i][j].style.top=228+27*j;
tablica[i][j].style.left=-153+110+153*i;
tablica[i][j].redak=j;
tablica[i][j].onclick=
function()
{
var tmp=tablica[1][this.redak].style.left;
$(tablica[1][this.redak]).animate({left:(tablica[2][this.redak].style.left)},500);
$(tablica[2][this.redak]).animate({left:(tmp)},500);
tmp=odgovor1[this.redak];
odgovor1[this.redak]=odgovor2[this.redak];
odgovor2[this.redak]=tmp;
}
pozadina.appendChild(tablica[i][j]);
}

How to access rows in table generated in javascript

I've generated a table in my html by using this code:
var board=document.getElementById("tab");
for(var i=0; i<lvl1.rows; i++ )
{
var row=board.insertRow();
for(var j=0; j<lvl1.cols; j++)
{
var cell = row.insertCell();
}
}
The point is to keep the design of the page almost totally separated from the game engine (creating a Minesweeper game).
Imagine I want to change the colour of the cell in position [2][3]. How can I change the background colour of this cell if I don't have the "td's" and "tr's" in the HTML code?
Thanks

To access the ith cell of row j, use:
board.rows[j].cells[i]

You can set the background color style of a cell like this.
board.rows[j].cells[i].style.backgroundColor = "red";

make one element visible and 49 others invisible

I am absolutely new to javascript, so please bear with me.
I have 50 elements on my page with ids. All are set to visibility:hidden and position:fixed. I have a button that corresponds to each element. When a button is clicked, a javascript function is initiated which makes the corresponding element visibile and position:relative. Code looks something like this:
document.getElementById("id1").style.position='relative';
document.getElementById("id1").style.visibility='visible';
To ensure that only one element is ever visible and relative, I also need to make the other 49 elements hidden and fixed. How can I accomplish this without having to resort to the following sort of code:
function makeid1visibile()
{
document.getElementById("id1").style.position='relative';
document.getElementById("id1").style.visibility='visible';
document.getElementById("id2").style.position='fixed';
document.getElementById("id2").style.visibility='hidden';
document.getElementById("id3").style.position='fixed';
document.getElementById("id3").style.visibility='hidden';
document.getElementById("id4").style.position='fixed';
document.getElementById("id4").style.visibility='hidden';
// etc...
}
Any help would be appreciated, because with 50 elements, the number of lines of coding would be outrageous.

Should be able to handle it with a single loop, just pass in the number of the item you wish to show:
function makeIdVisible(id) {
document.getElementById("id" + id).style.position='relative';
document.getElementById("id" + id).style.visibility='visible';
for (var i = 1; i <= 50; i++) {
if (i !== id) {
document.getElementById("id" + i).style.position='fixed';
document.getElementById("id" + i).style.visibility='hidden';
}
}
}

give yours checkboxes classname "someclass" and select all elements by function documet.getElementsByClassName

You can write a function like this:
function makeVisible( id ){
var idList = ['id1','id2','id3','id4'];
for( var i = 0, l = idList.length; i<l ; i++ ){
document.getElementById(idList[i]).style.position='fixed';
document.getElementById(idList[i]).style.visibility='hidden';
}
document.getElementById(id).style.position='relative';
document.getElementById(id).style.visibility='visible';
}
Then you can use
makeVisible('#id1');
to make the id1 element visible