We Keep Coding

Count Table Rows Hidden In Overflow with Javascript

I have a bootstrap 3 dashboard where I am hiding the overflow in a particular div. I need to be able to identify the number of table rows hidden in the overflow that are not visible in the div. jQuery method preferred but vanilla JS also fine.
have been trying to sort this out and have not been able to find any ways so far to count the number of rows that are hidden in overflow.
NB: There is no markup difference between the rows that are visible and those that are not visible as CSS is used to hide the excess rows using overflow: hidden; on the parent DIV.
Thanks.
Additional #1
Here is the HTML I am working with. The height is set by javscript at runtime.
<div id="jobs-list" class="box-body no-padding job-list" style="overflow: hidden;">
<table class="table">
<tbody>
<tr>
<th>Account</th>
<th class="text-center">Due</th>
</tr>
<tr>
<td>
Customer 1 (MCB#123456789)<br />
<small>Job name</small>
</td>
<td class="text-center text-green">-- TODAY --</td>
</tr>
<tr>
<td>
Customer 2 (MCB#123456789)<br />
<small>Job name</small>
</td>
<td class="text-center text-green">-- TODAY --</td>
</tr>
<tr>
<td>
Customer 3 (MCB#123456789)<br />
<small>Job name</small>
</td>
<td class="text-center text-green">-- TODAY --</td>
</tr>
<tr>
<td>
Customer 4 (MCB#123456789)<br />
<small>Job name</small>
</td>
<td class="text-center">-- TOMORROW --</td>
</tr>
</tbody>
</table>
</div>
<div class="box-footer text-center">
152 More Jobs
</div>
As you can see in the example above I am using a bootstrap 3 box to contain the data. The height of .box-body is set using javascript (which works fine already and is based on the window height). By using the overflow: hidden; CSS rule instead of showing scroll bars on .box-body the overflow is hidden and not visible. I need to be able to adjust the text in .box-footer using javascript to identify the number of rows that are not visible.

Now there is a mathematical approach to this problem, suppose that all the children have the same height (or width, depends on your aligning) :
console.log($('#main div').length - $('#main').height()/$('#main div').height());
#main {
height:200px; /*Suppose 200px*/
overflow:hidden;
}
#main div {
height:100px;
border:1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main">
<div>
Hello 1
</div>
<div>
Hello 2
</div>
<div>
Hello 3
</div>
<div>
Hello 4
</div>
<div>
Hello 5
</div>
</div>

Thanks for all the answers...
I was able to find a way to do this using jQuery and a jQuery extension by Kevin Marx.
Firstly you need to add the jquery.overflowing.js plugin to the page...
/* Overflowing.js
*
* A plugin based on Elving Rodriguez's Overflowed
* http://elvingrodriguez.com/overflowed
*
*/
(function($){
$.fn.overflowing = function(options, callback){
var self = this
var overflowed = []
var hasCallback = callback && typeof callback === 'function' ? true : false;
var status = false
this.options = options || window
this.each(function(){
var $this = $(this)
elPosition = $this.position()
elWidth = $this.width()
elHeight = $this.height()
var parents = $this.parentsUntil(self.options)
var $parentsTo = $(self.options)
parents.push($parentsTo)
for(var i=0; i<parents.length; i++){
var parentPosition = $(parents[i]).position()
var parentWidth = $(parents[i]).width()
var parentHeight = $(parents[i]).height()
if ( elPosition.top<0
|| elPosition.left<0
|| elPosition.top>(parentHeight+parentPosition.top)
|| elPosition.left>(parentWidth+parentPosition.left)
|| (elPosition.top + elHeight) > (parentHeight+parentPosition.top)
|| (elPosition.left+elWidth) > (parentWidth+parentPosition.left)){
status = true
$(parents[i]).addClass('overflowed')
overflowed.push(parents[i])
if (hasCallback) callback(parents[i])
}
}
if($this.parents(self.options).hasClass('overflowed')) $this.addClass('overflowing')
})
if (!hasCallback) return overflowed.length > 1 ? overflowed : status
}
})(jQuery)
Then you run...
$("tr").overflowing("#jobs-list");
Which through the overflowing plugin adds the class overflowing to each overflowing row (first selector) within the target parent (second selector).
At this point it is a simple case of using jQuery's .length property and a selector to target only the .overflowing classes within the target object you are wanting to calculate for, ie...
var hiddenRows = $("#jobs-list .overflowing").length;

I'm unsure by what you mean by 'hidden by overflow'. Does that mean include stuff that's partially hidden, or things that are fully hidden only? My solution includes partially hidden as 'not hidden'.
Regardless, offset is your best solution.
let jobs = $("#jobs-list");
let offset = jobs.offset().top;
let height = jobs.height();
let tr = $("tr", $("#jobs-list")).toArray();
let stopped = 0;
for (let i in tr)
{
let total_offset = $(tr[i]).offset().top - offset;
if (total_offset >= height)
{
stopped = i;
break;
}
}
console.log("hidden:", tr.length - stopped);
#jobs-list {
height: 80px;
overflow: auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="jobs-list" class="box-body no-padding job-list" style="overflow: hidden;">
<table class="table">
<tbody>
<tr>
<th>Account</th>
<th class="text-center">Due</th>
</tr>
<tr>
<td>
Customer 1 (MCB#123456789)<br />
<small>Job name</small>
</td>
<td class="text-center text-green">-- TODAY --</td>
</tr>
<tr>
<td>
Customer 2 (MCB#123456789)<br />
<small>Job name</small>
</td>
<td class="text-center text-green">-- TODAY --</td>
</tr>
<tr>
<td>
Customer 3 (MCB#123456789)<br />
<small>Job name</small>
</td>
<td class="text-center text-green">-- TODAY --</td>
</tr>
<tr>
<td>
Customer 4 (MCB#123456789)<br />
<small>Job name</small>
</td>
<td class="text-center">-- TOMORROW --</td>
</tr>
</tbody>
</table>
</div>
<div class="box-footer text-center">
152 More Jobs
</div>

Found this: Count List Items shown on screen and not overflow
Working jQuery example: https://jsfiddle.net/Twisty/jzmqfeyj/
JavaScript
$(function() {
//Add random count of jobs
var i = 0;
for (i = 0; i < Math.floor(Math.random() * 100); i++) {
$("#jobs-list tbody").append($("#jobs-list table tbody tr:last").clone());
}
console.log("Created", i, "Jobs");
console.log("Total", $("#jobs-list table tbody tr:not('.header')").length, "Jobs");
var mh = $("#jobs-list").height();
var overflowed = $("#jobs-list table tbody tr:not('.header')").filter(function() {
return $(this).position().top + $(this).height() > mh;
});
console.log("Invisible", overflowed.length, "Jobs");
$(".job-number").html(overflowed.length);
});
Since :visible counts only items that are hidden, you can't really use it. We can .filter() on items that are in our "viewport" or not in overflow. We know the height of each element and the div. Anything greater than the height of the div, we count.

Fitting content horizontally [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 6 years ago.
Improve this question
I am rewriting a web application that visually represents data and would like to make the result fill the available width automatically (the previous version had a few user selectable scaling factors). I have simplified the layout to this:
.bar {
height: 25px;
background: green;
color: white;
}
<table>
<thead>
<tr>
<th></th>
<th>column #1</th>
<th>column #2</th>
</tr>
</thead>
<tbody>
<tr>
<td>row #1</td>
<td>
<div class="bar" style="width:50px">
cell #1
</div>
</td>
<td>
<div class="bar" style="width:150px">
cell #2
</div>
</td>
</tr>
<tr>
<td>row #2</td>
<td>
<div class="bar" style="width:100px">
cell #3
</div>
</td>
<td>
<div class="bar" style="width:75px">
cell #4
</div>
</td>
</tr>
</tbody>
</table>
The width of the bars should be adjusted so that the table as a whole fills the horizontally available space (the left column should keep its width and ideally the height of the table should not be altered). The amount of columns as well as the amount of rows will vary.
I have full control over the generated html, so the solution may use a different markup (just note that the calculated bar widths are not limited to a few values).
It is important that the relative lengths of the bars are not changed. In this example, the bar in cell #4 should always be 50% longer than the one in cell #1. It should be possible to have text inside the bars and it should not be stretched (therefore, I could not solve my problem with CSS transformations).
The solution may use JavaScript. I think that I could make it work using only JavaScript by measuring the left over space and then scaling each bar manually, but this seems fragile and difficult to maintain to me (the given example is simplified).
Is there an elegant solution? I found it quite hard to search for this problem, so I might have overlooked something (usually I never need to ask questions as others have had similar problems before).
Edit: It seems that I wrote too much text and the actual question became unclear. I am looking for a solution that scales the bars inside the table from the given code snippet so that the table takes up all the available vertical horizontal (too hasty edit) space. The caveat is, that the contained bars should keep their relative lengths.

You can accomplish what you want with just a little bit of JavaScript and a slightly modified CSS file. This will calculate the number of columns (minus the initial column) and will distribute their width evenly.
<style>
.bar {
height: 25px;
background: green;
color: white;
}
table{
width: 100%;
}
table tbody tr td:first-child{
width: 20%;
}
table tbody tr td{
width: 40%;
}
</style>
Then your HTML
<table>
<thead>
<tr>
<th></th>
<th>column #1</th>
<th>column #2</th>
</tr>
</thead>
<tbody>
<tr>
<td>row #1</td>
<td>
<div class="bar" data-value="50">
cell #1
</div>
</td>
<td>
<div class="bar" data-value="100">
cell #2
</div>
</td>
</tr>
<tr>
<td>row #2</td>
<td>
<div class="bar" data-value="80">
cell #3
</div>
</td>
<td>
<div class="bar" data-value="75">
cell #4
</div>
</td>
</tr>
</tbody>
</table>
Then some simple JavaScript:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
var v, b, n, max = 0;
var t = $('table');
var w = t.width();
// Set equal width for all columns
var c = (80/(t.find('thead tr th').length-1));
// Set widths of internal bars relative to the max value
$('.bar')
.parent()
.css({width: c + "%"})
.end()
.each(function(){
// Determines max value
v = parseFloat($(this).attr('data-value'));
if(v>max){
max = v;
}
})
.each(function(){
// Sets each bar to be a percent width based on max value
b = $(this);
n = (((parseFloat(b.attr('data-value')) / max) * 100));
b.css({width: n + "%"})
});
});
</script>

Create a class on the first column you require to be "fixed",also 2nd and 3rd columns.Add id'sto the 4 div bars so we can manipulate them with respect to their widths:
HTML
<table>
<thead>
<tr>
<th class="fixed"></th>
<th class="col">column #1</th>
<th class="col">column #2</th>
</tr>
</thead>
<tbody>
<tr>
<td class="fixed">row #1</td>
<td class="col">
<div class="bar" id="cell1" style="width:50px">
cell #1
</div>
</td>
<td class="col">
<div class="bar" id="cell2" style="width:150px">
cell #2
</div>
</td>
</tr>
<tr>
<td class="fixed">row #2</td>
<td class="col">
<div class="bar" id="cell3" style="width:100px">
cell #3
</div>
</td>
<td class="col">
<div class="bar" id="cell4" style="width:75px">
cell #4
</div>
</td>
</tr>
</tbody>
</table>
Next apply 100% width on the table, then apply the desired widths to your three columns respectively so that they sum up to 100%.
CSS
table{
width: 100%;
}
.bar {
height: 25px;
background: green;
color: white;
}
.fixed{
width: 200px;
text-align: center;
}
.col{
text-align: left;
width: auto;
}
Finally,get each div by its id and set its width as follows,taking in account that 150px is your base here:
JS
document.getElementById("cell1").style.width = ((50/150)*100)+"%";
document.getElementById("cell2").style.width = ((150/150)*100)+"%";
document.getElementById("cell3").style.width = ((100/150)*100)+"%";
document.getElementById("cell4").style.width = ((75/150)*100)+"%";
I hope that was helpful!

Change background-color of dynamically generated elements using jQuery [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
I have the following use case, which generates <li> and <tr> dynamically (varying number):
If I hover <li> Point 1 on the timeline, I want to change the background-color of <tr> containing the text "Point 1 $2.90"
in the table on the right:
Timeline
<!-- start timeline -->
<ol class="timeline">
<li class="timeline dot">
Point 1
</li>
<li class="timeline dot">
Point 2
</li>
<li class="timeline dot">
Point 3
</li>
</ol>
<!-- end timeline -->
Table:
<!-- start table -->
<table class="mdl-data-table services" width="100%">
<thead>
<tr>
<th class="mdl-data-table__cell">Beschreibung</th>
<th>Preis</th>
</tr>
</thead>
<tbody>
<tr>
<td class="mdl-data-table__cell">Point 1</td>
<td>$2.90</td>
</tr>
<tr>
<td class="mdl-data-table__cell">Point 2</td>
<td>$1.25</td>
</tr>
<tr>
<td class="mdl-data-table__cell">Point 3</td>
<td>$2.35</td>
</tr>
</tbody>
</table>
<!-- end table -->
How can I implement this using jQuery? It should be a generic approach, because the <li> and <tr> elements must be generated dynamically.
Is it useful to append a data-attribute in order to differentiate the elements?

something like this could get you started.
$(this) refers to the hovered element
.index() is used to find the index of the hovered element
the selectors are general and are aware of dynamically added elements to the DOM, and mouseenter and mouseleave tend to be less finicky than .hover() (sometimes in chrome if you hover in and out of an element really fast, it'll "spazz out" is as best as i can describe it)
$(document).ready(function() {
$('ol.timeline').on('mouseenter', 'li.timeline.dot', function() {
var index = $(this).index() + 1;
$('table.mdl-data-table.services tbody tr:nth-child(' + index + ')').css('background-color', 'gray');
}).on('mouseleave', 'li.timeline.dot', function() {
var index = $(this).index() + 1;
$('table.mdl-data-table.services tbody tr:nth-child(' + index + ')').css('background-color', '');
});
});
ol {
display: inline-block;
width: 200px;
}
table {
display: inline-block;
width: 300px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ol class="timeline">
<li class="timeline dot">
Point 1
</li>
<li class="timeline dot">
Point 2
</li>
<li class="timeline dot">
Point 3
</li>
</ol>
<table class="mdl-data-table services">
<thead>
<tr>
<th class="mdl-data-table__cell">Beschreibung</th>
<th>Preis</th>
</tr>
</thead>
<tbody>
<tr>
<td class="mdl-data-table__cell">Point 1</td>
<td>$2.90</td>
</tr>
<tr>
<td class="mdl-data-table__cell">Point 2</td>
<td>$1.25</td>
</tr>
<tr>
<td class="mdl-data-table__cell">Point 3</td>
<td>$2.35</td>
</tr>
</tbody>
</table>

I guess you looking for something like this:
This would only work if you have only one class named timeline and services. If there are more than one, there would be conflicts and will not work.
So in that case give unique class or id to both of these and try then.
Working : Demo
CSS
.addBackground
{
background:#333;
color:#ccc;
}
JQuery
$("ol.timeline li").hover(
function(event){
var curHover = $(this).index();
curHover = curHover + 1;
$(".services tbody tr:nth-child(" + curHover + ")").addClass("addBg");
},function() {
$(".services tbody tr").removeClass("addBackground");
}
);

Haven't tried the code below, but something along these lines should work.
$('li.timeline').on("hover", function () {
var index = $('ol.timeline li').index($(this)),
correspondingTr = $('.mdl-data-table td.mdl-data-table__cell')[index];
correspondingTr.css('background-color', 'black');
});
What we're doing here is getting the position of the list item and using it to get the corresponding tr. The tr is then set to black.
I would also suggest adding some classes to make the selection easier.

Based on your need, this should most likely work
$(li.timeline.dot).hover(function(index){
$(tbody .mdl-data-table__cell)[index].css({"backgroundColor":"#cc00cc"});
});

$(".timeline li").each(function(){
$this = $(this);
$this.mouseover(function(){
$("table.services tr:eq("+($(this).index() + 1)+")").css('background','red');
});
$this.mouseout(function(){
$("table.services tr:eq("+($(this).index() + 1)+")").css('background','transparent');
});
});

how do you create a scroll bar menu that scrolls only on the content and not on the header

I have a list of names : first and last. The list is long, so I need to have a scroll bar menu. When I scroll, I should only scroll on the names and not on the column header.
I managed to do so but the problem is that the second column elements are not displayed right under the column name as you can see here http://jsfiddle.net/MmLQL/44/.
<table border=1 width=200px >
<tr>
<th>First Name</th>
<th>looong column name </th>
</tr>
</table>
<div class="div_scroll">
<table border=1 width=200px >
<tr>
<td>John</td>
<td>Smith</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
</tr>
</table>
</div>
And even if I put the header and the content in the same table, and create a div to wrap the table content and add a class to that div to enable scrolling, it doesn't work http://jsfiddle.net/MmLQL/43/
What am I doing wrong?

You probably don't need javascript for this. Just set the widths of the columns to be equal. Here's a quick example:
th, td {
width: 50%;
}
View it on JSFiddle

You need to set the width of the columns to be the same for each table. Maybe create a css class for each column and apply them to the columns in the tables.
Example CSS classes:
.ColumnOne { width: 40%; }
.ColumnTwo { width: 60%; }
Then apply to the columns:
<table border=1 width=200px >
<tr>
<th class="ColumnOne">First Name</th>
<th class="ColumnTwo">looong column name </th>
</tr>
</table>
<div class="div_scroll">
<table border=1 width=200px >
<tr>
<td class="ColumnOne">John</td>
<td class="ColumnTwo">Smith</td>
</tr>
...

HTML column width changes when table row is hidden

I am a relative newcomer to web programming, so probably I am making some obvious mistake here.
When I am trying to hide a row in a table from javascript like rows[i].style.display = 'none', the table layout is getting completely broken. Originally, the cell content was getting wrapped, and the table width was getting shrunk. I then added style="table-layout: fixed" in the table tag and style="white-space:nowrap" in each td. This stopped the line wrapping, but still the content was not aligned on a line. Cells started moving left if there is space and column width varied from one row to another. I then added a fixed width to each of the th and td element and also to the div containing the table. Still the problem remained.
My current HTML is something like the following.
<div style="width: 300px">
<table id="errorTable" width="100%" cellpadding="5" cellspacing="2" style="table-layout: fixed">
<tr id="HeaderRow">
<th style="width: 100px;">Header 1</th>
<th style="width: 50px;">Header 2</th>
<th style="width: 150px;">Header 3</th>
</tr>
<tr id="DetailRow1">
<td style="white-space:nowrap; width: 100px;">Data 1_1 in Row 1</td>
<td style="white-space:nowrap; width: 50px;">Data 1_2 in Row 1</td>
<td style="white-space:nowrap; width: 150px;">Data 1_3 in Row 1</td>
</tr>
<tr id="DetailRow2">
<td style="white-space:nowrap; width: 100px;">Data 2</td>
<td style="white-space:nowrap; width: 50px;">Data 2</td>
<td style="white-space:nowrap; width: 150px;">Data 2</td>
</tr>
<tr id="DetailRow3">
<td style="white-space:nowrap; width: 100px;">Data 3_1</td>
<td style="white-space:nowrap; width: 50px;">Data 3_2</td>
<td style="white-space:nowrap; width: 150px;">Data 3_3</td>
</tr>
</table>
</div>
When the table is displayed first time, the columns are aligned properly, with width 100, 50 and 150 px respectively. But if a row, say the second one is hidden, the cell width of the remaining two displayed rows are no longer fixed at 100, 50 and 150 and data is no longer aligned vertically. Please note that the overall table width remains 300 px. Data in each cell moves left if there is available space and the additional space is used by the last, in this case, third column.
The following post was helpful but did not solve my problem fully, as you can see.
Hiding table rows without resizing overall width
Any help will be most welcome.

The problem is the display type that you use to make the table-row visible.
To hide a table-row use display="none"
To show a table-row use display="table-row"
I did a sample so you can see these in action.
function show(){
document.getElementById('trB').style.display='table-row';
}
function hide(){
document.getElementById('trB').style.display='none';
}
#import url("https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css");
table{
border: 1px solid #ccc;
}
<table id="myTable" class="table table-striped table-hover">
<thead>
<tr>
<td>#</td>
<td>Letter</td>
</tr>
</thead>
<tbody>
<tr id="trA">
<td>1</td>
<td>A</td>
</tr>
<tr id="trB">
<td>2</td>
<td>B</td>
</tr>
<tr id="trC">
<td>3</td>
<td>C</td>
</tr>
</tbody>
</table>
<button id="showB" onclick="show()">show B</button>
<button id="hideB" onclick="hide()">hide B</button>

Hope this could help who are struggling with the same problem.
Instead of using display: none; I used visibility: collapse; for the hidden rows. This still keeps the width of the columns and the whole layout.

I had the same problem: I tried to hide a column by elem.style.display="none" but when showing again the layout was broken. This display-style worked for me:
columns.item(i).style.display = "table-cell";

Always fix the width of your columns. Would that sole your problem?
.myTable td{ width:33% !important; }
Ideally, you should also enclose header and body sections using thead and tbody
<table>
<thead>
<tr> ... </tr>
</thead>
<tbody>
.
.
.
</tbody>
</table>

I'm having the same problem. I threw a span inside of each table to see if I could force the width and it seems to work. It's ugly though.