I’m moving blue boxes from left to right (on the grid) after clicking Move Text Content!
button. Here are the steps I follow:
-
Select one option from
Select options
dropdown. -
Select a color from the dropdown.
-
Click
Show Options
button -
Enter a row and column (For example A and 1) and then click calculate
-
Hit the
Move Text Content!
button to move blue boxes on the grid.
Here’s an example with blue color move:
As can be seen, it’s very hard to read the text when it comes to blue color. Also, I have Black
color in the dropdown list (which doesn’t work for some reason) but if it would have worked, it would have disappeared the text as background and text color are both black. Hence, I am wondering how can I handle the text color using CSS such that whatever color I select for the move, is readable by the user easily. Here’s my code:
/*
Requires jquery + UI
https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js
https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js
*/
$('[name="optionSelection"]').change(function () {
//clean up the divs inside div with id phrase
$("#phrase").empty();
});
let selectedColor;
function showOptions() {
console.log("hii");
console.log($("#optionSelection").val());
selectedColor = $('#lineupColors').val();
var html;
if ($("#optionSelection").val() == 1) {
for (i = 0; i < 3; i++) {
html = "<div data-id="+i+"><span class='words' data-id="+i+">OptionOne#"+i+"</span></div>";
$("#phrase").append(html);
}
}
else {
for (j = 0; j < 5; j++) {
html = "<div data-id="+j+"><span class='words' data-id="+j+">OptionTwo#"+j+"</span></div>";
$("#phrase").append(html);
}
// $("#phrase").append(html);
}
}
$(".words").draggable({
revert: function (event, ui) {
var bRevertingPhrase = this.closest("#drop-em");
if (!bRevertingPhrase.length) {
var phraseID = $(this).data("id");
var phraseHomeID = $(this).parent().data("id");
//If the child and parent ids don't match, we move the child to the correct parent
if (phraseID !== phraseHomeID) {
var correctCell = $("#phrase").find(
"div[data-id='" + phraseID + "']"
);
correctCell.prepend(this);
}
}
return !event;
},
});
$("#drop-em > div").droppable({
drop: function (ev, ui) {
$(ui.draggable)
.detach()
.css({ top: 0, left: 0 })
.appendTo($(this).find(".content:empty"));
//$("#move-text").addClass("disabled");
},
});
$("#phrase > div").droppable({
drop: function (ev, ui) {
$(ui.draggable).detach().css({ top: 0, left: 0 }).prependTo(this);
},
});
const myButton = document.querySelector("#move-text");
myButton.addEventListener(
"click",
() => {
fill();
},
/* {
once: true,
}*/
);
var reOrder = [];
function fill() {
const cells = document.querySelectorAll("#phrase > div > span");
var newLoc = "";
//myButton.classList.add("disabled");
cells.forEach((cell, index) => {
newLoc = document.querySelector(
".item:nth-child(" + reOrder[index + startPos - 1] + ") .content "
);
newLoc.append(cell);
newLoc.classList.add("moved");
newLoc.classList.add("color-"+selectedColor);
$('.color-'+selectedColor).css('background-color',selectedColor);
});
}
function reArrange() {
var limit1 = 85;
var limit2 = 91;
for (let loop = 0; loop < 8; loop++) {
for (let i = 0; i < 6; i++) {
reOrder.push(limit1 + i);
}
limit1 = limit1 - 12;
}
for (let loop = 0; loop < 8; loop++) {
for (let j = 0; j < 6; j++) {
reOrder.push(limit2 + j);
}
limit2 = limit2 - 12;
}
}
reArrange();
/* get cell number */
const myRow = document.querySelector("#inp1");
const myCol = document.querySelector("#inp2");
var startPos = 0;
const myCalculateButton = document.querySelector("#calculate");
const myAnswer = document.querySelector("#cellnum");
myCalculateButton.addEventListener("click", () => {
var rowNumber = myRow.value.toUpperCase();
var colNumber = myCol.value;
var result = 0;
switch (rowNumber) {
case "A":
rowNumber = 42;
break;
case "B":
rowNumber = 36;
break;
case "C":
rowNumber = 30;
break;
case "D":
rowNumber = 24;
break;
case "E":
rowNumber = 18;
break;
case "F":
rowNumber = 12;
break;
case "G":
rowNumber = 6;
break;
case "H":
rowNumber = 0;
break;
}
if (colNumber < 7) {
result = rowNumber + parseInt(colNumber);
} else {
result = rowNumber + 42 + parseInt(colNumber);
}
myAnswer.innerHTML = result;
startPos = result;
});
html {
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
body {
counter-reset: columnCount 1 alphaCount cellCount;
}
h1 {
text-align: center;
}
.wrap {
display: flex;
gap: 2rem;
position: relative;
padding-left: 220px;
}
.grid {
margin: auto;
display: grid;
flex: 1 0 0;
grid-template-columns: repeat(12, 1fr);
padding-top: 1.5rem;
}
.item {
position: relative;
background-color: #f9f9f9;
border: 1px solid grey;
aspect-ratio: 1/1;
counter-increment: columnCount;
min-width: 0;
transition: background 1s ease;
}
.item:nth-of-type(12n + 1) {
counter-increment: alphaCount;
}
.item:nth-of-type(12n + 1)::before {
content: counter(alphaCount, upper-alpha);
position: absolute;
display: flex;
align-items: center;
top: 0;
bottom: 0;
left: -1.75rem;
color: red;
pointer-events: none;
}
.item:nth-of-type(n + 13)::after {
display: none;
}
.item::after {
content: counter(columnCount);
position: absolute;
left: 0;
right: 0;
text-align: center;
top: -1.75rem;
color: red;
pointer-events: none;
}
.content {
display: flex;
flex-direction: column;
justify-content: center;
width: 100%;
height: 100%;
overflow: auto;
color: #000;
padding: 1rem;
word-wrap: break-word;
counter-increment: cellCount;
}
.words {
cursor: move;
transition: padding 0.5s ease;
}
.content:has(.ui-draggable-dragging) {
overflow: visible;
}
.ui-droppable-active .content {
overflow: visible;
}
.words.ui-draggable-dragging {
background: blue;
padding: 5px 10px;
border-radius: 6px;
z-index: 999;
color: #fff;
display: block;
width: 50px;
height: 50px;
overflow: hidden;
}
#phrase {
position: absolute;
left: 0;
top: 0;
bottom: 0;
color: #fff;
width: 150px;
overflow: auto;
z-index: 2;
display: flex;
flex-direction: column;
margin: 1rem 0 0.5rem;
}
#phrase > div {
margin: 0 0 10px;
width: 150px;
padding: 5px 10px;
background: #007bff;
border: 2px solid #007bff;
border-radius: 6px;
color: #fff;
}
#phrase > div:empty {
background: #fff;
border-style: dashed;
padding: 0px 25px;
min-height: 30px;
}
.moved {
animation: fade 3s ease;
}
@keyframes fade {
0% {
opacity: 0;
}
50% {
opacity: 1;
background: red;
}
}
.item .content::before {
content: counter(cellCount);
position: absolute;
top: 2px;
left: 2px;
font-size: smaller;
color: #666;
border-radius: 50%;
border: 1px solid red;
background: white;
width: 1.2rem;
height: 1, 2rem;
display: grid;
place-items: center;
}
#move-text.disabled {
cursor: none;
pointer-events: none;
opacity: 0.5;
}
#phrase:has(.ui-droppable-active) {
overflow: visible;
}
input,
button,
label,
p.target {
display: block;
margin: 0 0 0.4rem;
color: #000;
}
p.target {
margin: 0 0 1rem;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<!-- You'd need to set up something different for touch devices though -->
<h1>Move testings</h1>
<div class="wrap">
<div>
<label for="optionSelection">Select options</label>
<select name="optionSelection" id="optionSelection">
<option value="1">OptionOne</option>
<option value="2">OptionTwo</option>
</select>
</div>
<div>
<label for="lineupColors">Colors:<br /></label>
<select id="lineupColors">
<option value="-">select</option>
<option value="blue">Blue</option>
<option value="orange">Orange</option>
<option value="red">Red</option>
<option value="green">Green</option>
<option value="purple">Purple</option>
<option value="brown">Brown</option>
<option value="black">Black</option>
<option value="magenta">Magenta</option>
</select>
</div>
<div>
<button id="showOptions" onclick="showOptions()" type="button">
Show Options
</button>
</div>
<div>
<label for="inp1">Enter a row A - H</label>
<input id="inp1" placeholder="Enter Row" />
<label for="inp2">Enter a column 1 - 12</label>
<input id="inp2" placeholder="Enter Column" />
<button id="calculate">Calculate</button>
<p class="target">The cell number is <b id="cellnum">?</b></p>
<button id="move-text" type="button">Move Text Content!</button>
</div>
<div id="phrase">
<!-- remove whitespace from inside div html and then we can use :empty in css to change background -->
<!-- <div data-id="1"><span class="words" data-id="1">H1 text</span></div>
<div data-id="2"><span class="words" data-id="2">H2 text</span></div>
<div data-id="3"><span class="words" data-id="3">H3 text</span></div>
<div data-id="4"><span class="words" data-id="4">H4 text</span></div>
<div data-id="5"><span class="words" data-id="5">H5 text</span></div>
<div data-id="6"><span class="words" data-id="6">H6 text</span></div>
<div data-id="7"><span class="words" data-id="7">G1 text</span></div>
<div data-id="8"><span class="words" data-id="8">G2 text</span></div>
<div data-id="9"><span class="words" data-id="9">G3 text</span></div>
<div data-id="10"><span class="words" data-id="10">G4 text</span></div> -->
</div>
<div id="drop-em" class="grid">
<div class="item">
<div class="content"></div>
<!-- must have no spaces inside .content -->
</div>
<div class="item">
<div class="content"></div>
</div>
<div class="item">
<div class="content"></div>
</div>
<div class="item">
<div class="content"></div>
</div>
<div class="item">
<div class="content"></div>
</div>
<div class="item">
<div class="content"></div>
</div>
<div class="item">
<div class="content"></div>
</div>
<div class="item">
<div class="content"></div>
</div>
<div class="item">
<div class="content"></div>
</div>
<div class="item">
<div class="content"></div>
</div>
<div class="item">
<div class="content"></div>
</div>
<div class="item">
<div class="content"></div>
</div>
<div class="item">
<div class="content"></div>
</div>
<div class="item">
<div class="content"></div>
</div>
<div class="item">
<div class="content"></div>
</div>
<div class="item">
<div class="content"></div>
</div>
<div class="item">
<div class="content"></div>
</div>
<div class="item">
<div class="content"></div>
</div>
<div class="item">
<div class="content"></div>
</div>
<div class="item">
<div class="content"></div>
</div>
<div class="item">
<div class="content"></div>
</div>
<div class="item">
<div class="content"></div>
</div>
<div class="item">
<div class="content"></div>
</div>
<div class="item">
<div class="content"></div>
</div>
<div class="item">
<div class="content"></div>
</div>
<div class="item">
<div class="content"></div>
</div>
<div class="item">
<div class="content"></div>
</div>
<div class="item">
<div class="content"></div>
</div>
<div class="item">
<div class="content"></div>
</div>
<div class="item">
<div class="content"></div>
</div>
<div class="item">
<div class="content"></div>
</div>
<div class="item">
<div class="content"></div>
</div>
<div class="item">
<div class="content"></div>
</div>
<div class="item">
<div class="content"></div>
</div>
<div class="item">
<div class="content"></div>
</div>
<div class="item">
<div class="content"></div>
</div>
<div class="item">
<div class="content"></div>
</div>
<div class="item">
<div class="content"></div>
</div>
<div class="item">
<div class="content"></div>
</div>
<div class="item">
<div class="content"></div>
</div>
<div class="item">
<div class="content"></div>
</div>
<div class="item">
<div class="content"></div>
</div>
<div class="item">
<div class="content"></div>
</div>
<div class="item">
<div class="content"></div>
</div>
<div class="item">
<div class="content"></div>
</div>
<div class="item">
<div class="content"></div>
</div>
<div class="item">
<div class="content"></div>
</div>
<div class="item">
<div class="content"></div>
</div>
<div class="item">
<div class="content"></div>
</div>
<div class="item">
<div class="content"></div>
</div>
<div class="item">
<div class="content"></div>
</div>
<div class="item">
<div class="content"></div>
</div>
<div class="item">
<div class="content"></div>
</div>
<div class="item">
<div class="content"></div>
</div>
<div class="item">
<div class="content"></div>
</div>
<div class="item">
<div class="content"></div>
</div>
<div class="item">
<div class="content"></div>
</div>
<div class="item">
<div class="content"></div>
</div>
<div class="item">
<div class="content"></div>
</div>
<div class="item">
<div class="content"></div>
</div>
<div class="item">
<div class="content"></div>
</div>
<div class="item">
<div class="content"></div>
</div>
<div class="item">
<div class="content"></div>
</div>
<div class="item">
<div class="content"></div>
</div>
<div class="item">
<div class="content"></div>
</div>
<div class="item">
<div class="content"></div>
</div>
<div class="item">
<div class="content"></div>
</div>
<div class="item">
<div class="content"></div>
</div>
<div class="item">
<div class="content"></div>
</div>
<div class="item">
<div class="content"></div>
</div>
<div class="item">
<div class="content"></div>
</div>
<div class="item">
<div class="content"></div>
</div>
<div class="item">
<div class="content"></div>
</div>
<div class="item">
<div class="content"></div>
</div>
<div class="item">
<div class="content"></div>
</div>
<div class="item">
<div class="content"></div>
</div>
<div class="item">
<div class="content"></div>
</div>
<div class="item">
<div class="content"></div>
</div>
<div class="item">
<div class="content"></div>
</div>
<div class="item">
<div class="content"></div>
</div>
<div class="item">
<div class="content"></div>
</div>
<div class="item">
<div class="content"></div>
</div>
<div class="item">
<div class="content"></div>
</div>
<div class="item">
<div class="content"></div>
</div>
<div class="item">
<div class="content"></div>
</div>
<div class="item">
<div class="content"></div>
</div>
<div class="item">
<div class="content"></div>
</div>
<div class="item">
<div class="content"></div>
</div>
<div class="item">
<div class="content"></div>
</div>
<div class="item">
<div class="content"></div>
</div>
<div class="item">
<div class="content"></div>
</div>
<div class="item">
<div class="content"></div>
</div>
<div class="item">
<div class="content"></div>
</div>
<div class="item">
<div class="content"></div>
</div>
<div class="item">
<div class="content"></div>
</div>
<div class="item">
<div class="content"></div>
</div>
</div>
</div>