Filter tree-like collapsible content - javascript

I have a listview with multiple collapsible content (tree-like). The filter automatically expand the last block from collapsible-sets, and not the true block/div (value from that collapsible div) searched.
DEMO
Here is the code:
<script>
$("#mineralslist").on("filterablefilter", function (event, ui) {
if ($("#mineralslist .ui-screen-hidden").length == 0) {
$('#mineralslist [data-role="collapsible"]').collapsible("collapse");
} else {
$('#mineralslist [data-role="collapsible"]').collapsible("expand");
}
});
</script>
<div data-role="content" id="iama">
<ul data-role="listview" id="mineralslist" data-inset='true' data-filter="true" data-filter-placeholder="Search mineral...">
<li>
<div data-role="collapsible" data-inset='false'>
<h3>Native elements</h3>
<div data-role="collapsible-set">
<div data-role="collapsible">
<h3>Gold group</h3>
<div data-role="collapsible-set">
<div data-role="collapsible">
<h4>Gold</h4>
<table data-role="table" id="mineral-table" class="ui-shadow table-stroke">
<thead>
<tr>
<th class="label">Formula</th>
<th class="label">System</th>
<th class="label">Colour</th>
</tr>
</thead>
<tbody>
<tr>
<td>Au</td>
<td>Isometric</td>
<td>Rich yellow</td>
</tr>
</tbody>
</table>
</div>
<div data-role="collapsible">
<h4>Silver</h4>
<table data-role="table" id="mineral-table" class="ui-shadow table-stroke">
<thead>
<tr>
<th class="label">Formula</th>
<th class="label">System</th>
<th class="label">Colour</th>
</tr>
</thead>
<tbody>
<tr>
<td>Ag</td>
<td>Isometric</td>
<td>Silver-white</td>
</tr>
</tbody>
</table>
</div>
<div data-role="collapsible">
<h4>Copper</h4>
<table data-role="table" id="mineral-table" class="ui-shadow table-stroke">
<thead>
<tr>
<th class="label">Formula</th>
<th class="label">System</th>
<th class="label">Colour</th>
</tr>
</thead>
<tbody>
<tr>
<td>Cu</td>
<td>Isometric</td>
<td>Brown, copper red, light pink, red</td>
</tr>
</tbody>
</table>
</div>
<div data-role="collapsible">
<h4>Lead</h4>
<table data-role="table" id="mineral-table" class="ui-shadow table-stroke">
<thead>
<tr>
<th class="label">Formula</th>
<th class="label">System</th>
<th class="label">Colour</th>
</tr>
</thead>
<tbody>
<tr>
<td>Pb</td>
<td>Isometric</td>
<td>Grey, but often coated</td>
</tr>
</tbody>
</table>
</div>
<div data-role="collapsible">
<h4>Aluminum</h4>
<table data-role="table" id="mineral-table" class="ui-shadow table-stroke">
<thead>
<tr>
<th class="label">Formula</th>
<th class="label">System</th>
<th class="label">Colour</th>
</tr>
</thead>
<tbody>
<tr>
<td>Al</td>
<td>Isometric</td>
<td>Grayish-White</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div data-role="collapsible">
<h3>Platinum group</h3>
<div data-role="collapsible-set">
<div data-role="collapsible">
<h4>Platinum</h4>
<table data-role="table" id="mineral-table" class="ui-shadow table-stroke">
<thead>
<tr>
<th class="label">Formula</th>
<th class="label">System</th>
<th class="label">Colour</th>
</tr>
</thead>
<tbody>
<tr>
<td>Pt</td>
<td>Isometric</td>
<td>Steel grey to dark grey</td>
</tr>
</tbody>
</table>
</div>
<div data-role="collapsible">
<h4>Iridium</h4>
<table data-role="table" id="mineral-table" class="ui-shadow table-stroke">
<thead>
<tr>
<th class="label">Formula</th>
<th class="label">System</th>
<th class="label">Colour</th>
</tr>
</thead>
<tbody>
<tr>
<td>(Ir,Os,Ru)</td>
<td>Isometric</td>
<td>White</td>
</tr>
</tbody>
</table>
</div>
<div data-role="collapsible">
<h4>Palladium</h4>
<table data-role="table" id="mineral-table" class="ui-shadow table-stroke">
<thead>
<tr>
<th class="label">Formula</th>
<th class="label">System</th>
<th class="label">Colour</th>
</tr>
</thead>
<tbody>
<tr>
<td>(Pd,Pt)</td>
<td>Isometric</td>
<td>White</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div data-role="collapsible">
<h3>Carbon Polymorph group</h3>
<div data-role="collapsible-set">
<div data-role="collapsible">
<h4>Diamond</h4>
<table data-role="table" id="mineral-table" class="ui-shadow table-stroke">
<thead>
<tr>
<th class="label">Formula</th>
<th class="label">System</th>
<th class="label">Colour</th>
</tr>
</thead>
<tbody>
<tr>
<td>C</td>
<td>Isometric</td>
<td>Colourless</td>
</tr>
</tbody>
</table>
</div>
<div data-role="collapsible">
<h4>Graphite</h4>
<table data-role="table" id="mineral-table" class="ui-shadow table-stroke">
<thead>
<tr>
<th class="label">Formula</th>
<th class="label">System</th>
<th class="label">Colour</th>
</tr>
</thead>
<tbody>
<tr>
<td>C</td>
<td>Hexagonal</td>
<td>Iron black to steel-grey</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</li>
<li>
<div data-role="collapsible" data-inset='false'>
<h3>Organic compounds</h3>
<p>Answer.</p>
</div>
</li>
</ul>
</div>
Example: I want to search for Iridium and I obtain these:
What I'm trying to obtain is to expand only the block filtered. Like in this image:


Try jQ :contains() selector`s prefix
var s = $('input').val() // itidium
var list = $('#mineralslist').find('h4:contains("'+s+'")').css({'display':'block','opacity':1})
And after you must show all parent elements of list

Related

How to hide head and column?

I need to hide head and column using jQuery. The below code doesn't work.
$('#MD116139889_ZIPCODE_InputField').find('.input-group-addon').click(function(){
$('.116141670_ZIPCODE_IDPopupHead').hide();
$('.116141670_ZIPCODE_IDPopupCol').hide();
});
Table Image
<div id="MD116139889_ZIPCODE_dialog" class="ui-dialog-content ui-widget-content" style="width: auto; min-height: 76px; max-height: none;">
<div id="popUpContentResult" class="table-responsive">
<table class="table table-hover">
<thead>
<tr>
<th width="30%" height="19" class="text-center 116141670_ZIPCODE_IDPopupHead">ZipId</th>
<th class="text-center 116141670_ZIPCODEPopupHead">Zip Code</th>
</tr>
</thead>
<tbody>
<tr>
<td align="center" class="text-center 116141670_ZIPCODE_IDPopupCol">00196</td>
</tr>
</tbody>

I took off the find() of the bind for a simple test case, but it seems to work fine.
$('#MD116139889_ZIPCODE_InputField').click(function() {
$('.116141670_ZIPCODE_IDPopupHead').hide();
$('.116141670_ZIPCODE_IDPopupCol').hide();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="MD116139889_ZIPCODE_dialog" class="ui-dialog-content ui-widget-content" style="width: auto; min-height: 76px; max-height: none;">
<div id="popUpContentResult" class="table-responsive">
<table class="table table-hover">
<thead>
<tr>
<th width="30%" height="19" class="text-center 116141670_ZIPCODE_IDPopupHead">ZipId</th>
<th class="text-center 116141670_ZIPCODEPopupHead">Zip Code</th>
</tr>
</thead>
<tbody>
<tr>
<td align="center" class="text-center 116141670_ZIPCODE_IDPopupCol">00196</td>
</tr>
</tbody>
</table>
</div>
</div>
<button id="MD116139889_ZIPCODE_InputField">Click Me</button>

Hide one bootstrap table header

My table header is looking like this:-
<div role="tabpanel" class="tab-pane" id="missed-entries">
<div class="container">
<div class="panel panel-info" style="margin-top:24px;">
<div class="panel-heading"> <h3 class="panel-title">Info</h3> </div>
<div class="panel-body">blahh</div>
</div>
<table id="scale_missed_entries" data-toggle="table" data-pagination="true" >
<thead>
<tr>
<th id="hidethis" data-field="product_id">ID</th>
<th data-field="product_weight">Weight</th>
<th data-field="product_added_date">Added date</th>
<th data-field="button">Image</th>
</tr>
</thead>
</table>
</div>
</div>
I want to full hide this entire ID column with the id="hidethis".
What I tried :
<th id="hidethis" data-field="product_id" style="display:none;">ID</th>
this didn't do anything, I think that css cannot be used like that in a th.
$('hidethis').hide();
No impact with that jquery also.
$('td:nth-child(2),th:nth-child(2)').hide();
The closest success I had with this, but that only hidden my Image th, but all my buttons remained there.
I will also put a picture:
I want to full hide all of the marked with red.

I've tried to make my code as easy as possible and also included some comments.
I would consider using a class instead of an id though. :)
// Save index (position) of th
const cellIndex = $('#hidethis').index();
// Hide th first
$('#hidethis').hide();
// Iterate over each table row
$('#scale_missed_entries tbody tr').each(function () {
// Select the cell with same index (position) as the table header
const cell = $(this).children('td').get(cellIndex);
// Hide 'em
$(cell).hide();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div role="tabpanel" class="tab-pane" id="missed-entries">
<div class="container">
<div class="panel panel-info" style="margin-top:24px;">
<div class="panel-heading">
<h3 class="panel-title">Info</h3>
</div>
<div class="panel-body">blahh</div>
</div>
<table id="scale_missed_entries" data-toggle="table" data-pagination="true">
<thead>
<tr>
<th id="hidethis" data-field="product_id">ID</th>
<th data-field="product_weight">Weight</th>
<th data-field="product_added_date">Added date</th>
<th data-field="button">Image</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
</tbody>
</table>
</div>
</div>

Simply using CSS
[data-field="product_id"] {
display: none;
}
tr td:nth-of-type(1) {
display: none;
}
<div role="tabpanel" class="tab-pane" id="missed-entries">
<div class="container">
<div class="panel panel-info" style="margin-top:24px;">
<div class="panel-heading">
<h3 class="panel-title">Info</h3>
</div>
<div class="panel-body">blahh</div>
</div>
<table id="scale_missed_entries" data-toggle="table" data-pagination="true">
<thead>
<tr>
<th id="hidethis" data-field="product_id">ID</th>
<th data-field="product_weight">Weight</th>
<th data-field="product_added_date">Added date</th>
<th data-field="button">Image</th>
</tr>
<tr>
<td>1
</td>
<td>10
</td>
<td>100
</td>
<td>1000
</td>
</tr>
</thead>
</table>
</div>
</div>

As i commented also apply a same class to th and there corresponding values <td> and hide them. it will work.
$('.hidethis').hide();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div role="tabpanel" class="tab-pane" id="missed-entries">
<div class="container">
<div class="panel panel-info" style="margin-top:24px;"><div class="panel-heading"> <h3 class="panel-title">Info</h3> </div><div class="panel-body">blahh</div></div>
<table id="scale_missed_entries" data-toggle="table" data-pagination="true" >
<thead>
<tr>
<th class="hidethis" data-field="product_id">ID</th>
<th data-field="product_weight">Weight</th>
<th data-field="product_added_date">Added date</th>
<th data-field="button">Image</th>
</tr>
</thead>
<tbody>
<tr>
<td class="hidethis" data-field="product_id">112</td>
<td data-field="product_weight">51</td>
<td data-field="product_added_date">2017-10-11</td>
<td data-field="button">hi1</td>
</tr>
<tr>
<td class="hidethis" data-field="product_id">111</td>
<td data-field="product_weight">50</td>
<td data-field="product_added_date">2017-10-10</td>
<td data-field="button">hi</td>
</tr>
</tbody>
</table>
</div>
</div>
Note:- without jquery also you can now hide then through css:-
.hidethis{
display:none; // or visibility:hidden;
}

Add:
#hidethis { display: none; }
to your css:
#hidethis {
display: none;
}
<div role="tabpanel" class="tab-pane" id="missed-entries">
<div class="container">
<div class="panel panel-info" style="margin-top:24px;">
<div class="panel-heading">
<h3 class="panel-title">Info</h3>
</div>
<div class="panel-body">blahh</div>
</div>
<table id="scale_missed_entries"
data-toggle="table"
data-pagination="true">
<thead>
<tr>
<th id="hidethis" data-field="product_id">ID</th> <th data-field="product_weight">Weight</th>
<th data-field="product_added_date">Added date</th>
<th data-field="button">Image</th>
</tr>
</thead>
</table>
</div>
</div>
Hope it helps.

Just use this
#scale_missed_entries th:nth-child(1) {
display: none;
}
edit based on the coment
To hide entire column use this--
#hidethis{
display:none;
}
#myTable th:nth-child(1) {
display: none;
}
#hidethis{
display:none;
}
<div role="tabpanel" class="tab-pane" id="missed-entries">
<div class="container">
<div class="panel panel-info" style="margin-top:24px;"><div class="panel-heading"> <h3 class="panel-title">Info</h3> </div><div class="panel-body">blahh</div></div>
<table id="scale_missed_entries" data-toggle="table" data-pagination="true">
<thead>
<tr>
<th id="hidethis" data-field="product_id">ID</th>
<th data-field="product_weight">Weight</th>
<th data-field="product_added_date">Added date</th>
<th data-field="button">Image</th>
</tr>
<tr>
<td id="hidethis">1
</td>
<td>10
</td>
<td>100
</td>
<td>1000
</td>
</tr>
</thead>
</table>
</div>
</div>

Links to show and hide tables

I am trying to have links that by clicking on it will show and hide the table below it, once I land on the page all I would like to see are links. I trying with this sample code, but not getting anywhere, any suggestions?
<html>
<title>hise show</title>
<head>
<script>jquery link here</script>
<script type="text/javascript">
$(document).ready(function() {
$('.act table').hide();
$('.see').click(function() {
$(this).parents('table').find('td').slideToggle("slow");
});
});
</script>
</head>
<body>
<br>
<p class="see" style="font-size:15px;">Table 1</p>
<table class="act" border="0" cellpadding="0" cellspacing="1">
<thead>
<tr>
<th class="1">AA</th>
<th class="1">AA</th>
</tr>
</thead>
<tr>
<td class="1">A</td>
<td class="1">A</td>
</tr>
</table>
<br>
<br>
<p class="see" style="font-size:15px;">Table 2</p>
<table class="act" border="0" cellpadding="0" cellspacing="1">
<thead>
<tr>
<th class="2">BB</th>
<th class="2">BB</th>
</tr>
</thead>
<tr>
<td class="2">BB</td>
<td class="2">BB</td>
</tr>
</table>
<br>
<br>
<p class="see" style="font-size:15px;">Table 3</p>
<table class="act" border="0" cellpadding="0" cellspacing="1">
<thead>
<tr>
<th class="3">CC</th>
<th class="3">CC</th>
</tr>
</thead>
<tr>
<td class="3">CC</td>
<td class="3">CC</td>
</tr>
</table>
<br>
</body>
</html>
Thank you!

You have just to change your selector to :
$(this).next('table').slideToggle("slow");
Using JQuery next() function your code will work.
$('.act table').hide();
$('.see').click(function() {
$(this).next('table').slideToggle("slow");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<br>
<p class="see" style="font-size:15px;">Table 1</p>
<table class="act" border="0" cellpadding="0" cellspacing="1">
<thead>
<tr>
<th class="1">AA</th>
<th class="1">AA</th>
</tr>
</thead>
<tr>
<td class="1">A</td>
<td class="1">A</td>
</tr>
</table>
<br>
<br>
<p class="see" style="font-size:15px;">Table 2</p>
<table class="act" border="0" cellpadding="0" cellspacing="1">
<thead>
<tr>
<th class="2">BB</th>
<th class="2">BB</th>
</tr>
</thead>
<tr>
<td class="2">BB</td>
<td class="2">BB</td>
</tr>
</table>
<br>
<br>
<p class="see" style="font-size:15px;">Table 3</p>
<table class="act" border="0" cellpadding="0" cellspacing="1">
<thead>
<tr>
<th class="3">CC</th>
<th class="3">CC</th>
</tr>
</thead>
<tr>
<td class="3">CC</td>
<td class="3">CC</td>
</tr>
</table>
<br>

$('#showTable').click(function(){
$('#mytable').toggleClass('hidden');
if($('#showTable').text()=='Show Table') $('#showTable').text('Hide Table');
else $('#showTable').text('Show Table');
});
table tr td{ border: 1px solid #383838; }
table { border: 1px solid #383838; }
.hidden{display:none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
Show Table
<table class="hidden" id="mytable">
<tr>
<td>
Sample Table
</td>
<td>
Sample Table
</td>
</tr>
<tr>
<td>
Sample Table
</td>
<td>
Sample Table
</td>
</tr>
</table>
Another quick solution for your approach: Check this code: http://jsfiddle.net/vxt5h9o7/

Try this, run the snippet
<!DOCTYPE html>
<html>
<head>
<title>The code</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<body>
<br>
<p class="see" style="font-size:15px;">Table 1</p>
<table class="act" border="0" cellpadding="0" cellspacing="1">
<thead>
<tr>
<th class="1">AA</th>
<th class="1">AA</th>
</tr>
</thead>
<tr>
<td class="1">A</td>
<td class="1">A</td>
</tr>
</table>
<br>
<br>
<p class="see" style="font-size:15px;">Table 2</p>
<table class="act" border="0" cellpadding="0" cellspacing="1">
<thead>
<tr>
<th class="2">BB</th>
<th class="2">BB</th>
</tr>
</thead>
<tr>
<td class="2">BB</td>
<td class="2">BB</td>
</tr>
</table>
<br>
<br>
<p class="see" style="font-size:15px;">Table 3</p>
<table class="act" border="0" cellpadding="0" cellspacing="1">
<thead>
<tr>
<th class="3">CC</th>
<th class="3">CC</th>
</tr>
</thead>
<tr>
<td class="3">CC</td>
<td class="3">CC</td>
</tr>
</table>
<br>
<script>
$(document).ready(function(){
$(".act").hide();
$(".see").click(function(){
$(this).next().toggle();
});
});
</script>
</body>
</html>

self scrolling page as elements apear

I have the following code jQuery
$(".col-md-12").hide();
$(".button-div").hide();
$(".featurette-divider").hide();
$(".footer").hide();
$(".first").fadeIn(1000);
$(".second").delay(900).fadeIn(1000);
$(".third").delay(1800).fadeIn(1000);
$(".fourth").delay(2700).fadeIn(1000);
$(".button-div").delay(3600).fadeIn(1000);
$(".featurette-divider").delay(4000).fadeIn(1000);
$(".footer").delay(5000).fadeIn(1000);
I want to make the page scroll by itself to the bottom as the elements appear on it.
EDIT 1
<div class="container">
<div class="col-md-12 first">
<div class="thumbnail">
<div class="caption">
<h3>hero name</h3>
<img src="..." alt="...">
<p></p>
<div class="table-responsive">
<table class="table table-bordered table-striped">
<colgroup>
<col class="col-xs-1">
<col class="col-xs-7">
</colgroup>
<thead>
<tr>
<th colspan="2" style="text-align:center">Abilities</th>
</tr>
<tr>
<th>Name</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">
<code>.active</code>
</th>
<td>Applies the hover color to a particular row or cell</td>
</tr>
<tr>
<th scope="row">
<code>.success</code>
</th>
<td>Indicates a successful or positive action</td>
</tr>
<tr>
<th scope="row">
<code>.info</code>
</th>
<td>Indicates a neutral informative change or action</td>
</tr>
<tr>
<th scope="row">
<code>.warning</code>
</th>
<td>Indicates a warning that might need attention</td>
</tr>
<tr>
<th scope="row">
<code>.danger</code>
</th>
<td>Indicates a dangerous or potentially negative action</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div><!-- end col-lg-6 -->
<div class="col-md-12 second">
<div class="thumbnail">
<div class="caption">
<h3>hero name</h3>
<img src="..." alt="...">
<p></p>
<div class="table-responsive">
<table class="table table-bordered table-striped">
<colgroup>
<col class="col-xs-1">
<col class="col-xs-7">
</colgroup>
<thead>
<tr>
<th colspan="2" style="text-align:center">Abilities</th>
</tr>
<tr>
<th>Name</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">
<code>.active</code>
</th>
<td>Applies the hover color to a particular row or cell</td>
</tr>
<tr>
<th scope="row">
<code>.success</code>
</th>
<td>Indicates a successful or positive action</td>
</tr>
<tr>
<th scope="row">
<code>.info</code>
</th>
<td>Indicates a neutral informative change or action</td>
</tr>
<tr>
<th scope="row">
<code>.warning</code>
</th>
<td>Indicates a warning that might need attention</td>
</tr>
<tr>
<th scope="row">
<code>.danger</code>
</th>
<td>Indicates a dangerous or potentially negative action</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div><!-- end col-lg-6 -->
<div class="col-md-12 third">
<div class="thumbnail">
<div class="caption">
<h3>hero name</h3>
<img src="..." alt="...">
<p></p>
<div class="table-responsive">
<table class="table table-bordered table-striped">
<colgroup>
<col class="col-xs-1">
<col class="col-xs-7">
</colgroup>
<thead>
<tr>
<th colspan="2" style="text-align:center">Abilities</th>
</tr>
<tr>
<th>Name</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">
<code>.active</code>
</th>
<td>Applies the hover color to a particular row or cell</td>
</tr>
<tr>
<th scope="row">
<code>.success</code>
</th>
<td>Indicates a successful or positive action</td>
</tr>
<tr>
<th scope="row">
<code>.info</code>
</th>
<td>Indicates a neutral informative change or action</td>
</tr>
<tr>
<th scope="row">
<code>.warning</code>
</th>
<td>Indicates a warning that might need attention</td>
</tr>
<tr>
<th scope="row">
<code>.danger</code>
</th>
<td>Indicates a dangerous or potentially negative action</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div><!-- end col-lg-6 -->
<div class="col-md-12 fourth">
<div class="thumbnail">
<div class="caption">
<h3>hero name</h3>
<img src="..." alt="...">
<p></p>
<div class="table-responsive">
<table class="table table-bordered table-striped">
<colgroup>
<col class="col-xs-1">
<col class="col-xs-7">
</colgroup>
<thead>
<tr>
<th colspan="2" style="text-align:center">Abilities</th>
</tr>
<tr>
<th>Name</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">
<code>.active</code>
</th>
<td>Applies the hover color to a particular row or cell</td>
</tr>
<tr>
<th scope="row">
<code>.success</code>
</th>
<td>Indicates a successful or positive action</td>
</tr>
<tr>
<th scope="row">
<code>.info</code>
</th>
<td>Indicates a neutral informative change or action</td>
</tr>
<tr>
<th scope="row">
<code>.warning</code>
</th>
<td>Indicates a warning that might need attention</td>
</tr>
<tr>
<th scope="row">
<code>.danger</code>
</th>
<td>Indicates a dangerous or potentially negative action</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div><!-- end col-lg-6 -->
<div class="centered button-div">
<!-- Indicates a dangerous or potentially negative action -->
<button type="button" class="btn btn-danger btn-lg">Next <span class="glyphicon glyphicon-arrow-right"></span></button>
</div>
<hr class="featurette-divider">
<!-- FOOTER -->
<footer class="footer">
<p>© 2015 · About · Contact</p>
</footer>
</div>
My HTML layout (Bootrstrap based). I've pasted the wrapper where all the content goes (.container)

If you use JQuery's scrolltop function, you can scroll your page to a given height in pixels:
$(document).scrollTop(heightInPixels);
This would scroll your whole document to the end:
var documentHeight = $(document).height();
$(document).scrollTop(documentHeight);
If you want this to happen as each element appears, you will have to call this everytime after the effect, or put a callback when the effects are over:
function scrollDocument(){
var documentHeight = $(document).height();
$(document).scrollTop(documentHeight);
}
// Element "appearings"
$(".first").fadeIn(1000, scrollDocument );
....
$( ".footer" ).delay(5000).fadeIn(1000, scrollDocument );
I hope this helps. To help more, I should have more info about your layout...
EDIT
$(".col-md-12").hide();
$(".button-div").hide();
$(".featurette-divider").hide();
$(".footer").hide();
function scrollDocument(){
var contentHeight = $(document).height();
$(document).scrollTop(contentHeight);
}
// Element "appearings"
$(".first").fadeIn(1000, scrollDocument);
$(".second").delay(900).fadeIn(1000, scrollDocument);
$(".third").delay(1800).fadeIn(1000, scrollDocument);
$(".fourth").delay(2700).fadeIn(1000, scrollDocument);
$(".button-div").delay(3600).fadeIn(1000, scrollDocument);
$(".featurette-divider").delay(4000).fadeIn(1000, scrollDocument);
$(".footer").delay(5000).fadeIn(1000, scrollDocument);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="col-md-12 first">
<div class="thumbnail">
<div class="caption">
<h3>hero name</h3>
<img src="..." alt="...">
<p></p>
<div class="table-responsive">
<table class="table table-bordered table-striped">
<colgroup>
<col class="col-xs-1">
<col class="col-xs-7">
</colgroup>
<thead>
<tr>
<th colspan="2" style="text-align:center">Abilities</th>
</tr>
<tr>
<th>Name</th>
<th>Description1</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">
<code>.active</code>
</th>
<td>Applies the hover color to a particular row or cell</td>
</tr>
<tr>
<th scope="row">
<code>.success</code>
</th>
<td>Indicates a successful or positive action</td>
</tr>
<tr>
<th scope="row">
<code>.info</code>
</th>
<td>Indicates a neutral informative change or action</td>
</tr>
<tr>
<th scope="row">
<code>.warning</code>
</th>
<td>Indicates a warning that might need attention</td>
</tr>
<tr>
<th scope="row">
<code>.danger</code>
</th>
<td>Indicates a dangerous or potentially negative action</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div><!-- end col-lg-6 -->
<div class="col-md-12 second">
<div class="thumbnail">
<div class="caption">
<h3>hero name</h3>
<img src="..." alt="...">
<p></p>
<div class="table-responsive">
<table class="table table-bordered table-striped">
<colgroup>
<col class="col-xs-1">
<col class="col-xs-7">
</colgroup>
<thead>
<tr>
<th colspan="2" style="text-align:center">Abilities</th>
</tr>
<tr>
<th>Name</th>
<th>Description2</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">
<code>.active</code>
</th>
<td>Applies the hover color to a particular row or cell</td>
</tr>
<tr>
<th scope="row">
<code>.success</code>
</th>
<td>Indicates a successful or positive action</td>
</tr>
<tr>
<th scope="row">
<code>.info</code>
</th>
<td>Indicates a neutral informative change or action</td>
</tr>
<tr>
<th scope="row">
<code>.warning</code>
</th>
<td>Indicates a warning that might need attention</td>
</tr>
<tr>
<th scope="row">
<code>.danger</code>
</th>
<td>Indicates a dangerous or potentially negative action</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div><!-- end col-lg-6 -->
<div class="col-md-12 third">
<div class="thumbnail">
<div class="caption">
<h3>hero name</h3>
<img src="..." alt="...">
<p></p>
<div class="table-responsive">
<table class="table table-bordered table-striped">
<colgroup>
<col class="col-xs-1">
<col class="col-xs-7">
</colgroup>
<thead>
<tr>
<th colspan="2" style="text-align:center">Abilities</th>
</tr>
<tr>
<th>Name</th>
<th>Description3</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">
<code>.active</code>
</th>
<td>Applies the hover color to a particular row or cell</td>
</tr>
<tr>
<th scope="row">
<code>.success</code>
</th>
<td>Indicates a successful or positive action</td>
</tr>
<tr>
<th scope="row">
<code>.info</code>
</th>
<td>Indicates a neutral informative change or action</td>
</tr>
<tr>
<th scope="row">
<code>.warning</code>
</th>
<td>Indicates a warning that might need attention</td>
</tr>
<tr>
<th scope="row">
<code>.danger</code>
</th>
<td>Indicates a dangerous or potentially negative action</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div><!-- end col-lg-6 -->
<div class="col-md-12 fourth">
<div class="thumbnail">
<div class="caption">
<h3>hero name</h3>
<img src="..." alt="...">
<p></p>
<div class="table-responsive">
<table class="table table-bordered table-striped">
<colgroup>
<col class="col-xs-1">
<col class="col-xs-7">
</colgroup>
<thead>
<tr>
<th colspan="2" style="text-align:center">Abilities</th>
</tr>
<tr>
<th>Name</th>
<th>Description4</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">
<code>.active</code>
</th>
<td>Applies the hover color to a particular row or cell</td>
</tr>
<tr>
<th scope="row">
<code>.success</code>
</th>
<td>Indicates a successful or positive action</td>
</tr>
<tr>
<th scope="row">
<code>.info</code>
</th>
<td>Indicates a neutral informative change or action</td>
</tr>
<tr>
<th scope="row">
<code>.warning</code>
</th>
<td>Indicates a warning that might need attention</td>
</tr>
<tr>
<th scope="row">
<code>.danger</code>
</th>
<td>Indicates a dangerous or potentially negative action</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div><!-- end col-lg-6 -->
<div class="centered button-div">
<!-- Indicates a dangerous or potentially negative action -->
<button type="button" class="btn btn-danger btn-lg">Next <span class="glyphicon glyphicon-arrow-right"></span></button>
</div>
<hr class="featurette-divider">
<!-- FOOTER -->
<footer class="footer">
<p>© 2015 · About · Contact</p>
</footer>
</div>
Just chage the $(document) selector by your $('div.container') on the code above and that should work.

jQuery Pass td onclick value to other table

I tried finding solution to this problem but I couldnt find the right article
<div class="panel ui-widget-content" id="invoiceList">
<h2 class="ui-widget-header ui-corner-top" style="cursor: pointer; "><span>Invoices</span></h2>
<table cellspacing='0' id='header' class="ui-widget">
<tr>
<th>Invoice Number</th>
<th>Invoice Total</th>
</tr>
<tr>
<td><a href="#" >INV-Error_Test1</a></td>
<td>22.000000 USD</td>
</tr>
<tr>
td><a href="#" >INV-Error_Test2</a></td>
<td>22.000000 USD</td>
</tr>
</table>
</div>
<div class='panel ui-widget-content' id="invoiceErrors">
<h2>Select a Invoice from the left to view Error Details</h2>
<div class='panel ui-widget-content' id="invoiceHeaders">
<h2 class="ui-widget-header ui-corner-top" style="cursor: pointer; "><span>Invoice Headers</span></h2>
<table class="ui-widget">
<tr>
<th>Invoice Number</th>
<th>Matter Number</th>
<th>Invoice Total</th>
<th>Invoice Tax Total</th>
<th>Invoice Net Total</th>
</tr>
<tr>
<td><%= invoiceNumber%></td>
<td>CC_MAT_1221</td>
<td>22.000000 USD</td>
<td>22.000000 USD</td>
<td>22.000000 USD</td>
</tr>
<td class = 'error'>File Error : The file does not contain any record delimiters or is in an unsupported format</td>
</table>
</div>
<div class='panel ui-widget-content' id="invoiceLines">
<h2 class="ui-widget-header ui-corner-top" style="cursor: pointer; "><span>Invoice Line Items</span></h2>
<table class="ui-widget">
<tr>
<th>Line Item Number</th>
<th>Line Item Date</th>
<th>Unit Cost</th>
<th>Number of Units</th>
<th>Line Item Total</th>
<th>Task Code</th>
<th>Expense Code</th>
<th>Timekeeper ID</th>
<th>Line Item Description</th>
</tr>
<tr>
<td>2</td>
<td>20150304</td>
<td>2</td>
<td>2</td>
<td>6</td>
<td></td>
<td>E2</td>
<td></td>
<td></td>
</tr>
<td class='error'><%= invoiceNumber%> Line : 2 Invoice does not foot Reported = (22.0)Calculated (18.0)</td>
<tr>
<td>3</td>
<td>20150306</td>
<td>3</td>
<td>3</td>
<td>12</td>
<td>T3</td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</div>
</div>
Here is the jsfiddle link http://jsfiddle.net/5n62md3m/
I was able to get the invoice number from invoiceList div as below
$("#invoiceList a").click(function (e) {
console.log('invoice --->'+$(this).text());
});
But am not sure how to send this to invoiceNumber in invoiceErrors div
Could anyone please help me out?

UPDATED ANSWER
Better yet, thanks to one of the comments, give the cell an ID, ex '#invoice-number-error' then target that directly with jQuery, no need for .find(), makes everything faster.
aka:
$("#invoiceList").find('a').click(function (e) {
var invoiceNumber = $(this).text();
$('#invoice-number-error').text(invoiceNumber);
});
OLD ANSWER
I would suggest giving the table cells classes, I updated your filddle to reflect the one change:
I added the class 'invoice-number' to that cell under #invoiceErrors. Then I updated your function to look like this:
$("#invoiceList").find('a').click(function (e) {
var invoiceNumber = $(this).text();
$('#invoiceErrors').find('.invoice-number').text(invoiceNumber);
});

Give your table an id like mytable then do:
$("#mytable td").eq(0).html( $(this).text() );
Working jsFiddle

Categories

Resources