We Keep Coding

How to move the scrollbar by touching on it and draging it on touch screens using javascript/jquery?

I want to move the scrollbar by touching on it and draging it on touch screens (in nest hub). Here is part my code: I have a table and the table container has got a scroll bar-
<div id="table-container" style="overflow-y: auto;">
<table style="width:100%" id="myTable">
</table>
</div>
Javascript:
if ( isTouchDevice() ) {
document.querySelector("#table-container::-webkit-scrollbar").ontouchmove = function() {
// some code
}
}
This is my website https://product.thob.studio/. I inspect the website and select nest hub and then I click see more under shirt and then a modal appears and the scrollbar appears on the right side of the modal. But I am not able to drag the scroll bar vertically. This is my problem.

Quickly scrolling away from hover-triggered popover does not hide popover

I am using hover-triggered popovers for certain highlighted rows in a table and when you scroll away from the element relatively quickly using the mouse scroll wheel, the popover continues to show for an extra second even though you are no longer hovering the target element. It creates a strange effect where the popover scrolls away from the direction you are scrolling to, moving outside the border of the table.
Here is some example code:
$('.popover_class').popover({
trigger: 'hover',
placement: 'right'
})
<tr class="bg-warning popover_class" data-toggle="popover" data-content="example"></tr>
I've tried a variety of solutions including hiding the popover on scroll event after initializing it with the code above:
$('.popover_class').on('scroll', function() {
this.popover('hide');
});
Using bootstrap 4, popper.js 1.15, jquery 3.4, DataTables.
Thanks

Set your popover animation to false (its true by default), which will stop applying a CSS fade transition to the popover.
$('.popover_class').popover({
trigger: 'hover',
placement: 'right',
animation: false
});
Triggering popover hide on mouse scroll as you've tried will not work, because the same animation effect will get triggered just the same.

I faced similar issue while displaying bootstrap popover in JQuery DataTable control.
As seen in the above snapshot, the popover message is displayed when the user clicks on the clipboard icon. The popover was hiding when user clicked anywhere else except the DataTable scrollbar. When the user scrolls the DataTable, the popover did not hide and was showing outside of the table.
In order to handle this scenario, I used the mouseleave event on the clipboard icon as shown below,
$(tableId).off('mouseleave', '.btn-clipboard').on('mouseleave', '.btn-clipboard', function (event: JQueryEventObject) {
if (event.currentTarget) {
let controlId = event.currentTarget.id;
$('#'+controlId).popover("hide");
}
});
So, when the mouse leaves the clipboard icon image, the popover will hide. I hope it helps / gives some idea.

"Modal hide fade" preventing inner chart div from showing

In need of some help, I'm rather stuck. what I want achieve is, at the click of a button, a pop-up appears and has a bar chart showing based on the data sent. So far what I know is that the chart plots without a problem, however when I put it into the pop-up modal, it doesn't show.
<div class="modal hide fade" id=" PopUpModal" aria-hidden="true" style="float: initial; width :80%" role="dialog">
<h3 data-bind="text: title"></h3>
<hr />
<div id="ChartModal" class="chart" style="width: 780px; height: 300px;"> </div>
</div>
As you can see, the chart modal is inside the pop-up div. When the pop-up button is clicked, the pop-up modal shows empty except for the title and hr line. However you can see the space that is occupied by the chart modal, but its blank. When I take the chart modal outside the pop-up, it shows fine. When I remove 'class="modal hide fade" ', the chart shows inside the pop-up, however the pop-up is no longer a pop-up, but a div on the page.
Anyone see what I might be doing wrong? I'm not sure which bootstrap div "class" attributes I could use that would enable me to have the pop up hidden until clicked (I use $('#Pop-Up').modal('show'); in the js to change from hide to visible) and also allow the chart to show inside it.

It's probably because of chart plugin. Since chart is inside a hidden object plugin doesn't work. You must trigger chart plugin inside the modal callback function. I mean after modal window is displayed then run chart plugin not on page load.

Sticky td-column without external div

This is again one of these old issues: I would like to make the four first columns of my HTML-Table sticky (only horizontally).
There are several solutions out there which work properly if it's a smaller table. Unfortunately mine has a big size and I would like it to spread it over the whole screen. Therefore most solutions which pack the table in a scrollable div are no use because they put the scrollbar at the very end of the div - which is quite a distance to go down.
Also there is some small content over the table so it's yet not 100% of the screen...
There were some ideas around the Internet to give the frozen tds the position: absolute; attribute which didn't work for me.
http://www.fixedheadertable.com/ seems kinda fine - unfortunately till now it just messes up my table...
EDIT 1:
It's a pretty huge table which displays a database and does some calculation with its values.
That's one of my problems: It always has the same amount of columns (about 50) but the number of rows vary.
But in general the table is kinda straight-forward with no surprises:
<table id="calctbl">
<thead class="fixed">
<tr id="table-head">
<th class="several classes">Number<br>
<br>Pos. Nr.</th>
<th class="several classes">Info 1</th>
<th class="several classes"><div>More infos</div></th>
<th class="several classes">Here<br>are some more<br>infos</th>
<th>... and it goes on ...</th>
</tr>
</thead><tbody>
<tr>
<td class="several other classes">vals...</td>
<td class="several other classes">more vals</td>
<td class="several classes"><div>and some more</div></td>
<td class="several other classes">...</td>
<td>... and it goes on ...</td>
</tr>
<tr>
<!-- No big surprises, it just goes on -->
</tr>
</tbody>
</table>
Also I use this for the first header line: HTML table with fixed headers?
EDIT 2:
http://www.fixedheadertable.com/ - there is not really an explanation and for some reason it just messes everything up
http://tympanus.net/codrops/2014/01/09/sticky-table-headers-columns/
Has the mentioned problem: It requires a limiting div around it
how do I create an HTML table with fixed/frozen left column and scrollable body?
Answer #1: Same problem with the div
position: fixed - doesn't work at all for me
How can I make the first and second column of a table sticky Answer #1 - dosen't work either
http://massless.org/_tests/grid1/ - seems to be quite old and requires a div
http://learndevelopingmyway.blogspot.co.at/2012/03/sticky-columnsheaders-freeze-pane-in.html is this even a table?

According to my experience, fixedheadertable works just fine. Try to play with your css, especially container div's max-height and other height-related properties to limit it's size for big tables. It would be easier if you could show your table, but if I understood correctly, this css could help:
.fht-tbody{
max-height: 300px;
}
You can test this easily if using some inspector in your browser (i.e. firebug) on the original page (http://www.fixedheadertable.com/) by targeting the .fht-tbody and setting the above value.

Investgate the effect of insertAfter in jQuery

To understand the effect of .insertAfter, I designed a small table test that has 2 rows and 2 columns.
<table id="myTable" width="560" border="1" cellspacing="2" cellpadding="2">
<tr>
<td title="row 1*1" class="styletest">1*1</td>
<td title="row 1*2" class="styletest">1*2</td>
</tr>
<tr>
<td title="row 2*1" class="styletest">2*1</td>
<td title="row 2*2" class="styletest">2*2</td>
</tr>
</table>
The jquery code is:
var $tooltip = $('<div id="tooltip"></div>');
$tooltip.insertAfter('#myTable').hide();//I want to know the code after inserting this element.
function showTooltip(cell) {
$tooltip.show().text(cell.attr("title"));
}
$('.styletest').hover(function() {
showTooltip($(this));
}, function() {
$tooltip.hide();
});
The test includes hovering different cells and display tooltips.
The demo is at jsfiddle.
I want to know the source code when I hover different cells.
For example, when I hover row 1, column 1, the snapshot likes:
When I hover row 2, column 2, the snapshot likes:
Questions:
When mouse hovers row 1 column1 and row 2 column 2;
Do they have the same rendered source code?(Using F12 can't get the rendered code when hovering)
Why the tooltips are displayed in the same position that seems in the middle?

It's the same element, you are just changing it's content and visibilty. It's not going to move, and other than the content you are setting with text() the markup is not going to change either.
You don't need to inspect anything, the source code is right there in your script, and what you insert is what you get, so to speak!

You can inspect styles on elements that only apply on hover in firebug:
Inspect the element that has a hover style, click on the DOM node so it's selected and highlighted in blue. Then go to the style tab on the right and click the little arrow, and choose :hover now Firefox will hold the hover styles and you can insect the div at the bottom.
In your case, either you have CSS for #tooltip or styles for divs to have text centered.