Develop Reference

Why the scrollbar doesn't reach the end when it is link with other scrollbar by javascript formula?

I actually work on a code with mutliple scrollbars and they are all linked so if you move one the 2 others will move proportionally, I said proportionally because they don't have the same width. It's pretty interesting but it doesn't work very well because sometimes(always for now) the scroller doesn't reach the end of the scrollbar...
So my question is: How can I modify my code to reach the end of the scrollbar with the scroller ?
PS: you have to hover the green div to display the third scrollbar.
Clues: I think the source of the problem is directly linked with the functions that link the scrollbars between them, but I can't figure out what's wrong with them...
Here's the code:
let w_mob_len = getComputedStyle(document.getElementById('w_mob_child'), null).width.replace("px", "") - getComputedStyle(document.getElementById('w_mob'), null).width.replace("px", "");
let w_top_len = getComputedStyle(document.getElementById('w_top_child'), null).width.replace("px", "") - getComputedStyle(document.getElementById('w_top'), null).width.replace("px", "");
let w_tab_len = getComputedStyle(document.getElementById('w_tab_child'), null).width.replace("px", "") - getComputedStyle(document.getElementById('w_tab'), null).width.replace("px", "");
function move_scrollbar_mobile() {
let wrap_mob = document.getElementById("w_mob");
let wrap_top = document.getElementById("w_top");
let wrap_tab = document.getElementById("w_tab");
wrap_top.scrollLeft = wrap_mob.scrollLeft * w_top_len / w_mob_len;
wrap_tab.scrollLeft = wrap_mob.scrollLeft * w_tab_len / w_mob_len;
}
function move_scrollbar_top() {
let wrap_mob = document.getElementById("w_mob");
let wrap_top = document.getElementById("w_top");
let wrap_tab = document.getElementById("w_tab");
wrap_mob.scrollLeft = wrap_top.scrollLeft * w_mob_len / w_top_len;
wrap_tab.scrollLeft = wrap_top.scrollLeft * w_tab_len / w_top_len;
}
function move_scrollbar_table() {
let wrap_mob = document.getElementById("w_mob");
let wrap_top = document.getElementById("w_top");
let wrap_tab = document.getElementById("w_tab");
wrap_mob.scrollLeft = wrap_tab.scrollLeft * w_mob_len / w_tab_len;
wrap_top.scrollLeft = wrap_tab.scrollLeft * w_top_len / w_tab_len;
}
function disp_scroll_mob() {
document.getElementById("w_mob").style.display = "inline-block";
}
function hide_scroll_mob() {
let w_flo = document.getElementById("w_flo");
w_flo.addEventListener("mouseleave", function() {
document.getElementById("w_mob").style.display = "none";
});
}
function disp_scroll_mob_alt() {
let w_mob = document.getElementById("w_mob");
w_mob.addEventListener("mouseenter", function() {
document.getElementById("w_mob").style.display = "inline-block";
})
}
.wrapper_top,
.wrapper_table {
width: 300px;
overflow-x: scroll;
overflow-y: hidden;
}
.wrapper_mobile {
position: fixed;
width: 100px;
height: 50px;
top: 10%;
overflow-x: scroll;
overflow-y: hidden;
display: none;
padding: 10px;
background-color: red;
z-index: 2;
padding-bottom: 10px;
}
.wrapper_float {
width: 100%;
height: 60%;
top: 20%;
position: relative;
background-color: #88FF88;
z-index: 1;
}
.wrapper_top {
height: 20px;
}
.wrapper_table {
height: 200px;
}
.child_top {
width: 1000px;
height: 20px;
}
.child_mobile {
width: 300px;
height: 20px;
}
.search_table {
table-layout: fixed;
}
th {
font-size: 15px;
background: #66C2E0;
}
th {
min-width: 200px;
}
<div class="wrapper_mobile" id="w_mob" onscroll="move_scrollbar_mobile()" onmouseover="">
<div class="child_mobile" id="w_mob_child">
</div>
</div>
<div class="wrapper_top" id="w_top" onscroll="move_scrollbar_top()">
<div class="child_top" id="w_top_child">
</div>
</div>
<div class="wrapper_table" id="w_tab" onscroll="move_scrollbar_table()" onmouseout="hide_scroll_mob()">
<div class="wrapper_float" id="w_flo" onmouseover="disp_scroll_mob()" onmouseout="disp_scroll_mob_alt()">
</div>
<table class="search_table" id="w_tab_child">
<tbody>
<tr>
<th>Col1</th>
<th>Col2</th>
<th>Col3</th>
<th>Col4</th>
<th>Col5</th>
<th>Col6</th>
<th>Col7</th>
</tr>
</tbody>
</table>
</div>

I think the main problem is, your triggering the scroll events across all three divs and depending on which is called last, this will effect the end position of all divs.
I've tried adding a small delay below, it's not production code but should give you an idea of how to reduce the jankiness.
const wrap_mob = document.getElementById("w_mob");
const wrap_top = document.getElementById("w_top");
const wrap_tab = document.getElementById("w_tab");
let lastScrollMob, lastScrollTop, lastScrollTable = 0;
let scrolling = false;
wrap_mob.addEventListener('scroll', function(e) {
lastScrollMob = wrap_mob.scrollLeft;
if (!scrolling) {
window.requestAnimationFrame(function() {
scrollMobile(lastScrollMob);
scrolling = false;
});
scrolling = true;
}
});
wrap_top.addEventListener('scroll', function(e) {
lastScrollTop = wrap_top.scrollLeft;
if (!scrolling) {
window.requestAnimationFrame(function() {
scrollTop(lastScrollTop);
scrolling = false;
});
scrolling = true;
}
});
wrap_tab.addEventListener('scroll', function(e) {
lastScrollTable = wrap_tab.scrollLeft;
if (!scrolling) {
window.requestAnimationFrame(function() {
scrollTable(lastScrollTable);
scrolling = false;
});
scrolling = true;
}
});
function scrollMobile (amount) {
let percent = (amount / w_mob_len) * 100;
wrap_top.scrollLeft = (w_top_len / 100) * percent;
wrap_tab.scrollLeft = (w_tab_len / 100) * percent;
}
function scrollTop (amount) {
let percent = (amount / w_top_len) * 100;
wrap_mob.scrollLeft = (w_mob_len / 100) * percent;
wrap_tab.scrollLeft = (w_tab_len / 100) * percent;
}
function scrollTable (amount) {
let percent = (amount / w_tab_len) * 100;
wrap_mob.scrollLeft = (w_mob_len / 100) * percent;
wrap_top.scrollLeft = (w_top_len / 100) * percent;
}
let w_mob_len = getComputedStyle(document.getElementById('w_mob_child'), null).width.replace("px", "") - getComputedStyle(wrap_mob, null).width.replace("px", "");
let w_top_len = getComputedStyle(document.getElementById('w_top_child'), null).width.replace("px", "") - getComputedStyle(wrap_top, null).width.replace("px", "");
let w_tab_len = getComputedStyle(document.getElementById('w_tab_child'), null).width.replace("px", "") - getComputedStyle(wrap_tab, null).width.replace("px", "");
function disp_scroll_mob() {
document.getElementById("w_mob").style.display = "inline-block";
}
function hide_scroll_mob() {
let w_flo = document.getElementById("w_flo");
w_flo.addEventListener("mouseleave", function() {
console.log("hide");
document.getElementById("w_mob").style.display = "none";
});
}
function disp_scroll_mob_alt() {
let w_mob = document.getElementById("w_mob");
w_mob.addEventListener("mouseenter", function() {
document.getElementById("w_mob").style.display = "inline-block";
})
}
.wrapper_top,
.wrapper_table {
width: 300px;
overflow-x: scroll;
overflow-y: hidden;
}
.wrapper_mobile {
position: fixed;
width: 100px;
height: 50px;
top: 10%;
overflow-x: scroll;
overflow-y: hidden;
display: none;
background-color: red;
z-index: 2;
padding-bottom: 10px;
}
.wrapper_float {
width: 100%;
height: 60%;
top: 20%;
position: relative;
background-color: #88FF88;
z-index: 1;
}
.wrapper_top {
height: 20px;
}
.wrapper_table {
height: 200px;
}
.child_top {
width: 1000px;
height: 20px;
}
.child_mobile {
width: 300px;
height: 20px;
}
.search_table {
table-layout: fixed;
}
th {
font-size: 15px;
background: #66C2E0;
}
th {
min-width: 200px;
}
<div class="wrapper_mobile" id="w_mob">
<div class="child_mobile" id="w_mob_child"></div>
</div>
<div class="wrapper_top" id="w_top">
<div class="child_top" id="w_top_child"></div>
</div>
<div class="wrapper_table" id="w_tab" onmouseout="hide_scroll_mob()">
<div class="wrapper_float" id="w_flo" onmouseover="disp_scroll_mob()" onmouseout="disp_scroll_mob_alt()">
</div>
<table class="search_table" id="w_tab_child">
<tbody>
<tr>
<th>Col1</th>
<th>Col2</th>
<th>Col3</th>
<th>Col4</th>
<th>Col5</th>
<th>Col6</th>
<th>Col7</th>
</tr>
</tbody>
</table>
</div>

Drag and drop whole table columns in plain Javascript (VanillaJS)?

I have this fiddle:
https://jsfiddle.net/n9epsy5x/2/
I've got drag and drop working for the column headers, but I'd like a header's whole column to move when dragging and dropping the header. How can I pull this off in plain Javascript (VanillaJS)?
I tried adding classes to the table headers and accompanying column elements to be able to target the column elements to get them to move, but I couldn't get that to work.
Any help would be greatly appreciated. Thanks!
var source;
function isbefore(a, b) {
if (a.parentNode == b.parentNode) {
for (var cur = a; cur; cur = cur.previousSibling) {
if (cur === b) {
return true;
}
}
}
return false;
}
function dragenter(e) {
var targetelem = e.target;
if (targetelem.nodeName == "TD") {
targetelem = targetelem.parentNode;
}
if (isbefore(source, targetelem)) {
targetelem.parentNode.insertBefore(source, targetelem);
} else {
targetelem.parentNode.insertBefore(source, targetelem.nextSibling);
}
}
function dragstart(e) {
source = e.target;
e.dataTransfer.effectAllowed = 'move';
}
[draggable] {
user-select: none;
}
body {
background-color: #fff;
color: #303;
font-family: sans-serif;
text-align: center;
}
li {
border: 2px solid #000;
list-style-type: none;
margin: 2px;
padding: 5px;
}
ul {
margin: auto;
text-align: center;
width: 25%;
}
<table>
<thead>
<tr>
<th ondragstart="dragstart(event)" ondragenter="dragenter(event)" draggable="true">
Column 1
</th>
<th ondragstart="dragstart(event)" ondragenter="dragenter(event)" draggable="true">
Column 2
</th>
<th ondragstart="dragstart(event)" ondragenter="dragenter(event)" draggable="true">
Column 3
</th>
</tr>
</thead>
<tbody>
<tr>
<td>hhgr</td>
<td>ffrr</td>
<td>qedf</td>
</tr>
<tr>
<td>wdfe</td>
<td>cjnb</td>
<td>cdke</td>
</tr>
<tr>
<td>awjb</td>
<td>cdjk</td>
<td>ijfe</td>
</tr>
</tbody>
</table>

jQuery: get td elements, that are under absolute div [duplicate]

This question already has answers here:
jQuery/JavaScript collision detection
(7 answers)
Closed 5 years ago.
jQuery: get td elements (or other elements), that are under absolute div (match position)
Let's say i have such html:
<table>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>5</td>
<td>6</td>
</tr>
</table>
<div class="abs-hover">
*
</div>
css:
td {
padding: 8px 20px;
border: 1px solid #cecece;
}
.abs-hover {
position: absolute;
top: 20px;
left: 30px;
width: 40px;
height: 40px;
background: rgba(140,200,120,0.2);
border: 2px solid #1cabda;
}
https://jsfiddle.net/L63u02n6/
this absolute container can change it's position on page, but how can i get td, which are under this absolute box?
in first example it's td with text: 1,2,3,4
how can i achieve this? any ideas

I wrote a little script that checks if each td is inside the box.
var objTop = $('.abs-hover').offset().top,
objLeft = $('.abs-hover').offset().left,
objWidth = $('.abs-hover').width(),
objHeight = $('.abs-hover').height();
$('table tr td').each(function(e) {
var self = $(this),
selfLeft = self.offset().left,
selfTop = self.offset().top,
selfWidth = self.width(),
selfHeight = self.height();
if ((objLeft + objWidth) > selfLeft && (objLeft < (selfLeft + selfWidth) || objLeft > (selfLeft + selfWidth)) && (objTop + objHeight) > selfTop && objTop < (selfTop + selfHeight)) {
console.log(self.text() +" is inside")
}
});
td {
padding: 8px 20px;
border: 1px solid #cecece;
}
.abs-hover {
position: absolute;
top: 20px;
left: 30px;
width: 40px;
height: 40px;
background: rgba(140, 200, 120, 0.2);
border: 2px solid #1cabda;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>5</td>
<td>6</td>
</tr>
</table>
<div class="abs-hover">
*
</div>

You can use Document.elementFromPoint()
The elementFromPoint() method of the Document interface returns the
topmost element at the specified coordinates.
var j = $('.abs-hover').position();
elemtopLeft = document.elementFromPoint(j.top, j.left);
elemtopRIght = document.elementFromPoint(j.left + 44, j.top);
elembtmLeft = document.elementFromPoint(j.left, j.top + 44);
elembtmRight = document.elementFromPoint(j.left + 44, j.top + 44);
console.log(elemtopLeft, elemtopRIght, elembtmLeft, elembtmRight)
td {
padding: 8px 20px;
border: 1px solid #cecece;
}
.abs-hover {
position: absolute;
top: 20px;
left: 30px;
width: 40px;
height: 40px;
background: rgba(140, 200, 120, 0.2);
border: 2px solid #1cabda;
}
<script src=https://code.jquery.com/jquery-2.2.4.min.js></script>
<table>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>5</td>
<td>6</td>
</tr>
</table>
<div class="abs-hover">
*
</div>

You need a collision detection for this, either on ready or after some event.
A good short function for this is given here in this SO-post: https://stackoverflow.com/a/7301852/6248169
Width, height and position on screen to can get with jQuery functions.
Then you can run this jquery function here for every TD to compare with your absolute box. If it collides, you set a class on the TD and then afterwards you can select over this class so you have all TDs which are under the DIV.
Hope these words are enough for an idea how to do this and no complete code is needed here.

You could also make use of Element.getBoundingClientRect(); function call to get a the positional coordinates of any element. Then go on to compare them with that of the absolute div to find an overlap. It returns an object with attributes - top, right, bottom, left, width. Link to the API

Native JS:
function getBounds(el) {
return {
left: el.offsetLeft,
top: el.offsetTop,
right: el.offsetLeft + el.offsetWidth,
bottom: el.offsetTop + el.offsetHeight
};
}
let hoverBounds = getBounds(document.querySelector(".abs-hover"));
document.querySelectorAll("td").forEach((el) => {
let elBounds = getBounds(el);
if (
(
hoverBounds.left >= elBounds.left && hoverBounds.left <= elBounds.right ||
hoverBounds.right >= elBounds.left && hoverBounds.right <= elBounds.right
) &&
(
hoverBounds.top >= elBounds.top && hoverBounds.top <= elBounds.bottom ||
hoverBounds.bottom >= elBounds.top && hoverBounds.bottom <= elBounds.bottom
)
) {
console.log(el.innerText, "Yes");
} else {
console.log(el.innerText, "No");
}
});
I suggest use "id" for the hover element. "class" use for several elements.

one js function call in multiple elements, jsp

I have a table with many rows. In each row I have to show a countdown timer with given value.
This is my js function in jsp.
<script>
function start(initial_time) {
var initialTime = initial_time.value;
tick();
setInterval(function () {
tick();
if (initialTime < -1) reset();
if (initialTime < 6) paint("red")
}, 1000)
function tick() {
document.getElementById("time").innerHTML = initialTime.toString();
--initialTime;
}
function reset() {
initialTime = 30;
tick();
paint("black");
}
function paint(color) {
document.getElementById("time").style.color = color;
}
}
This is my table row in the same jsp page
<table style="width: 100%; height: 100%; table-layout: fixed;" align="center">
<tbody >
<c:forEach items="${data.getCards()}" var="card">
<tr>
<td style="table-layout: fixed; vertical-align: middle; font-size: 30px; text-align: left; width: 100%; background-color: #78909C;"
colspan="4">${card.getLocationName()}</td>
</tr>
<tr>
<td style="vertical-align: middle; font-size: 24px; text-align: left; width: 70%; background-color: #b0bec5;"
colspan="3">Time left for next density check
</td>
<td style="vertical-align: middle; font-size: 22px; text-align: left; width: 30%; background-color: #b0bec5;" colspan="1">
<div id="time" onload="start(${card.getDefaultServerDensityValue()})"></div> <input hidden="hidden" id="density" value="${card.getDefaultServerDensityValue()}"/>
</td>
</tr>
Seems ok but timers in rows does'n shown up, does anybody knows why?

Your HTML structure Should be in JSP.
<table id="mytable" style="width: 100%; height: 100%; table-layout: fixed;" align="center">
<tbody >
<c:forEach items="${data.getCards()}" var="card">
<tr>
<td style="table-layout: fixed; vertical-align: middle; font-size: 30px; text-align: left; width: 100%; background-color: #78909C;"
colspan="4">${card.getLocationName()}</td>
</tr>
<tr>
<td style="vertical-align: middle; font-size: 24px; text-align: left; width: 70%; background-color: #b0bec5;"
colspan="3">Time left for next density check
</td>
<td style="vertical-align: middle; font-size: 22px; text-align: left; width: 30%; background-color: #b0bec5;" colspan="1">
<div data-timer="${card.getDefaultServerDensityValue()}"></div> <input hidden="hidden" id="density" value="${card.getDefaultServerDensityValue()}"/>
</td>
</tr>
</tbody>
</table>
You Jquery code Should be
<script>
function start(initial_time, ele) {
var initialTime = parseInt(initial_time);
tick();
setInterval(function () {
tick();
if (initialTime < -1) reset();
if (initialTime < 6) paint("red")
}, 1000)
function tick() {
ele.innerHTML = initialTime.toString();
--initialTime;
}
function reset() {
initialTime = 30;
tick();
paint("black");
}
function paint(color) {
ele.style.color = color;
}
}
$(document).ready(function(){
$("#my_table tbody td[data-timer]").each(function(){
start($(this).data("timer"),$(this)[0]);
});
})

This is how finally it was got done.
JQuery part
<script>
function start(initial_time, ele) {
var initialTime = parseInt(initial_time);
tick();
setInterval(function () {
tick();
if (initialTime < -1) reset();
if (initialTime < 6) paint("red")
}, 1000)
function tick() {
ele.innerHTML = initialTime.toString();
--initialTime;
}
function reset() {
initialTime = initial_time;
tick();
paint("red");
}
function paint(color) {
ele.style.color = color;
}
}
(function() {
$("#mytable").find("div[data-timer]").each(function(){
start($(this).data("timer"),$(this)[0]);
});
})();
For those who is as new to JQuery as I am, you need to incl;ude in your JSP page Jquery libs this way
<script src="http://code.jquery.com/jquery-1.10.2.js"
type="text/javascript"></script>`
Include after <head> tag
In JSP your timer element will look like
<div data-timer="${card.getDefaultServerDensityValue()}"></div>
You can use any other element instead of <div> .
Also make sure to give an id to your table
<table id="mytable" style="width: 100%; height: 100%; table-layout: fixed;" align="center">
And make sure that id of table matches with $("#mytable") in javascript.
Result is
Where red numbers are counting down.

How to connect rows from different tables

I have two tables and I need to allow the user to connect rows from one table with rows from another, such as:
and later when the user clicks on submit button, I need the information about those connections in such a way:
[
{left: "Pera Lozac", right: "Eve Jakson"},
{left: "Mika Mikic", right: "Jill Smmith"},
{left: "Zika Zivac", right: "Joh Doe"},
{left: "Dezurni Krivac", right: "Joh Doe"},
]
How should I go about this using HTML/Javascript ?

Check my snippet below
Usage : select(click) any number of rows from the left table and select one row from the right table, then click Add Connection, the connection is then added and displayed below on the page in the form of a javascript object.
Note : Selected rows are highlighted in grey and the highlighting is removed when that row is unselected.
Snippet
$(document).ready(function() {
var temp_color = '#dddddd';
$('tr').on('click', function() {
current_background = $(this).css('background-color');
$(this).toggleClass('selected');
if ($(this).hasClass('selected')) {
$(this).css('background-color', temp_color);
} else {
$(this).css('background-color', '#fff');
}
});
$('#add_conn').on('click', function() {
var left = [];
var right = [];
$('tr').filter(function() {
var match = 'rgb(255,255,255)';
var this_element = $(this).css('background-color');
if (hexc(this_element) != hexc(match)) {
$(this).css('background-color', '#ffffff');
$(this).toggleClass('selected');
var count = 0;
var string_test = "";
$(this).find('td').each(function() {
if (count < 2) {
string_test += " " + $(this).text();
}
count++;
});
if ($(this).closest('div').attr('id') == "one") {
left.push(string_test.trim());
} else if ($(this).closest('div').attr('id') == "two") {
right.push(string_test.trim());
}
}
});
var temp = $('#message').html();
var arr = [];
for (l = 0; l < left.length; l++) {
arr.push({
left: left[l],
right: right[0]
});
}
temp = temp + JSON.stringify(arr);
$('#message').html(temp);
});
});
function hexc(colorval) {
var parts = colorval.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
delete(parts[0]);
for (var i = 1; i <= 3; ++i) {
parts[i] = parseInt(parts[i]).toString(16);
if (parts[i].length == 1) parts[i] = '0' + parts[i];
}
color = '#' + parts.join('');
return color;
}
#one {
position: absolute;
top: 10%;
left: 1%;
}
#two {
position: absolute;
top: 10%;
right: 35%;
}
table {
overflow: hidden;
}
tr {
background-color: #ffffff;
}
td {
padding: 10px;
position: relative;
outline: 0;
}
body:not(.nohover) tbody tr:hover {
background-color: #ffa;
}
.selected-bg-red {
background-color: red;
}
.selected-bg-green {
background-color: green;
}
#message {
position: absolute;
bottom: 10%;
left: 70%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="submit" id="add_conn" value="Add This Connection" />
<div id="one">
<table border="1">
<tr>
<td>Pera</td>
<td>Lozac</td>
<td>11</td>
</tr>
<tr>
<td>Mika</td>
<td>Mikic</td>
<td>22</td>
</tr>
<tr>
<td>Zika</td>
<td>Zivac</td>
<td>33</td>
</tr>
<tr>
<td>Dezurni</td>
<td>Krivac</td>
<td>44</td>
</tr>
</table>
</div>
<div id="two">
<table border="1">
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>
</div>
<div id="message">
</div>
Check this working sample here : fiddle
Hope this helps!