We Keep Coding

CSS Animation underlaps bootstrap striped table rows

For some reason it seems that the darker rows are overlapping the white ones, so the animation (glow) can't 'pass-through' them.
See gif: https://i.imgur.com/YnAS3F4.gifv
I've recreated the same on snippet, however there it does not overlap. In this case the snippet would be what I want..
$(document).ready(function () {
$(".lblRetry").hover(function () {
var grId = this.attributes.value.value;
var grRow = document.getElementById(grId);
grRow.classList.add("testAnimation");
}, function () {
removeClass(this);
});
});
function removeClass(e) {
var grId = e.attributes.value.value;
var grRow = document.getElementById(grId);
setTimeout(function () {
grRow.classList.remove("testAnimation");
}, 4000);
};
.testAnimation {
-webkit-animation: frames linear 1s infinite alternate;
animation: frames linear 1s infinite alternate;
animation-iteration-count: 4;
}
#-webkit-keyframes frames {
0% {
outline: none;
border-color: #9ecaed;
box-shadow: 0px 0px 0px dodgerblue;
}
25% {
outline: none;
border-color: #9ecaed;
box-shadow: 0px 0px 10px dodgerblue;
}
50% {
outline: none;
border-color: #9ecaed;
box-shadow: 0px 0px 20px dodgerblue;
}
75% {
outline: none;
border-color: #9ecaed;
box-shadow: 0px 0px 25px dodgerblue;
}
100% {
outline: none;
border-color: #9ecaed;
box-shadow: 0px 0px 30px dodgerblue;
}
}
<div class="container-fluid">
<table class="table table-striped">
<thead>
<tr class="header">
<th class="sortableTableHeader" style="white-space:nowrap; width:8em;" data-fieldname="ExecutionDate"><span class="link">Executed</span></th>
<th class="sortableTableHeader" data-fieldname="Shippers" style="width:10em;white-space:nowrap;"><span class="link">Shipper</span></th>
<th class="sortableTableHeader" data-fieldname="Retry" style="width:2em;white-space:nowrap;"></th>
<th style="width:7em;">
Orders
<span class="glyphicon glyphicon-info-sign info" aria-hidden="true" data-html="true" data-toggle="tooltip" title="First number shows the amount of labels generated at first attempt. <br/> <br/> Numbers adding up to it in green means the amount of labels that have been created when a retry has been attempted. <br/><br/> Numbers in red mean the amount of un-created labels (still in error state). <br/><br/> Last number means the total amount of orders selected."></span>
</th>
<th style="width:14em;">Status</th>
</tr>
</thead>
<tbody>
<tr id="1">
<td>
Date
</td>
<td>
DHL
</td>
<td >
<span class="glyphicon glyphicon-repeat lblRetry" value="2" aria-hidden="true" data-html="true" data-toggle="tooltip" title="This label is a retry label. Originated from another group currently being highlighted."></span>
</td>
<td>
16
</td>
<td>
All good!
</td>
</tr>
<tr id="2">
<td>
Date
</td>
<td>
DHL
</td>
<td >
<span class="glyphicon glyphicon-repeat lblRetry" value="1" aria-hidden="true" data-html="true" data-toggle="tooltip" title="This label is a retry label. Originated from another group currently being highlighted."></span>
</td>
<td>
16
</td>
<td>
All good!
</td>
</tr>
</tbody>
</table>
</div>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Be more specific, like this:
.container-fluid table.table.table-striped.AdemTable .testAnimation {
-webkit-animation: frames linear 1s infinite alternate;
animation: frames linear 1s infinite alternate;
animation-iteration-count: 4;
}

Animated toggle columns

I have an HTML page containing a table, in which i have three columns with display:none and visibility:hidden. When clicking a cell in the adjacent column, the attributes change to table-cell and visible respectively, showing the three columns. Another click at the cell of said adjacent column resets the values to none and hidden.
The only problem is that, of course, it's not pleasant to see. I would like to include an animation so that i can see the other columns shrink in order to let the hidden columns slide in the middle and an animation when i can do the opposite thing.
What should I use? I'm asking for help because I'm relatively new to web designing and I have no idea about where to look for guidance.

The tables themselves are not animated. Perhaps this option may suit you. (Google translate.)
$('.show').on('click', function(){
$('.table').find('.td').each(function(){
if($(this).css('display') === 'none'){
$(this).show().addClass('animate');
}
});
});
.table{
display: flex;
flex-direction: column;
}
.td{
border: 1px solid #999;
border-collapse: collapse;
}
.tr{
display: flex;
}
.td{
padding: 10px;
}
.td:nth-of-type(2){
display: none;
}
*{
transition: all 0.3s ease;
}
button{
margin-top: 20px;
}
.animate{
animation: show 1s ease forwards;
}
#keyframes show{
from{
transform: translateX(-100%);
display: block;
}
to{
transform: translateX(0%);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="table">
<div class="tr">
<div class="td">1</div>
<div class="td">2</div>
<div class="td">3</div>
</div>
<div class="tr">
<div class="td">1</div>
<div class="td">2</div>
<div class="td">3</div>
</div>
<div class="tr">
<div class="td">1</div>
<div class="td">2</div>
<div class="td">3</div>
</div>
</div>
<button class="show">Show</button>

Just as I finished posting the question, a friend of mine introduced me to the fadeToggle function available using JQuery. This is precisely what I was looking for.

CSS Expand / Contract Animation to Show/Hide Content

I am trying to create a box that can expand and collapse with a simple slide out animation. If you run the example below, the idea is that it starts with one red line and when you click the button it separates into two read lines and gently expands to reveal the content like pulling a draw out of a table.
I've tried both transform, animation, relative: positioning with top, and i'm unable to get the desired effect.
The containing box should expand in size
function expandContract() {
const el = document.getElementById("expand-contract")
el.classList.toggle('expanded')
el.classList.toggle('collapsed')
}
#container {
border: 1px solid black;
padding: 15px;
}
#top-section {
border-bottom: 1px solid red;
}
#expand-contract {
border-bottom: 1px solid red;
}
.expand-contract {
transform: translateY(-100%)
overflow: hidden;
}
#keyframes slide-in {
100% {
transform: translateY(0%)
}
}
.expanded {
background-color: green;
animation-name: slide-in;
animation-duration: 1s;
}
.collapsed {
background-color: red;
transform: translateY(-100%)
}
<div id="container">
<div id="top-section">
This is always displayed
</div>
<div id="expand-contract" class="expanded">
This section expands and contracts
<table>
<tr><td>test1</td></tr>
<tr><td>test2</td></tr>
<tr><td>test3</td></tr>
<tr><td>test4</td></tr>
</table>
</div>
<div id="bottom-section">
This section is always displayed
</div>
</div>
<button onclick="expandContract()">Expand/Contract</button>

You can achieve this using the CSS transition along with toggled styles. Initially you may think to transition the height (from 0 to initial so that it expands dynamically based on height) but unfortunately CSS transition doesn't properly handle this.
Instead, you can wrap it in a container of its own with overflow: hidden and then use a margin-top: -100% to hide it, and 0 to show it.
Here is your code with this modification:
function expandContract() {
const el = document.getElementById("expand-contract")
el.classList.toggle('expanded')
el.classList.toggle('collapsed')
}
#container {
border: 1px solid black;
padding: 15px;
}
#top-section {
border-bottom: 1px solid red;
}
#expand-container {
overflow: hidden;
}
#expand-contract {
border-bottom: 1px solid red;
margin-top: -100%;
transition: all 1s;
}
#expand-contract.expanded {
background-color: green;
margin-top: 0;
}
<div id="container">
<div id="top-section">
This is always displayed
</div>
<div id="expand-container">
<div id="expand-contract" class="expanded">
This section expands and contracts
<table>
<tr><td>test1</td></tr>
<tr><td>test2</td></tr>
<tr><td>test3</td></tr>
<tr><td>test4</td></tr>
</table>
</div>
</div>
<div id="bottom-section">
This section is always displayed
</div>
</div>
<button onclick="expandContract()">Expand/Contract</button>

hope to help you
HTML
<div class="container">
<div id="top-section">
This is always displayed
</div>
<div id="expand-container">
<div class="expanded" id="expand-contract">
<table>
<tr><td>test1</td></tr>
<tr><td>test2</td></tr>
<tr><td>test3</td></tr>
<tr><td>test4</td></tr>
</table>
</div>
</div>
</div>
<button class="header" onclick="expandContract()">Expand/Contract</button>
css
.container {
width:100%;
border:1px solid #d3d3d3;
}
.container div {
width:100%;
}
.header {
background-color:#d3d3d3;
padding: 2px;
cursor: pointer;
font-weight: bold;
}
.container .expanded {
display: none;
padding : 5px;
}
js
function expandContract() {
$header = $(".header");
$content = $("#expand-contract")
$content.slideToggle(500, function () {
$header.text(function () {
return $content.is(":visible") ? "Collapse" : "Expand";
});
});
};
see here enter code here

Angularjs collapsable table with php mysql

Using php to write a query to mysql which produces a json rest return that I am manipulating with angularjs.
My data appears as 2 columns: Parent, Child.
PARENT | CHILD
parent1 | child1
parent1 | child2
parent2 | child1
parent3 | child1
parent3 | child2
I am attempting to make an html table of Parents. After expanding the row, all children will be listed underneath.
I would like only 1 row per parent.
However (using the fake data from above)my current html table is displaying..essentially repeating parents
Parent1
|-Child 1
|-Child 2
Parent1
|-Child 1
|-Child 2
...
Is there something I can do with angular, or perhaps a way of modifying my json object in a way to make the desired result possible?
<tr ng-repeat-start="parent in parents | filter:search_query track by $index">
<td>
<button class="btn btn-warning" ng-if="parent.expanded" ng-click="parent.expanded = false">-</button>
<button class="btn btn-info" ng-if="!parent.expanded" ng-click="parent.expanded = true">+</button>
</td>
<td>{{parent.name}}</td>
</tr>
<tr ng-if="parent.expanded" ng-repeat-end="">
<td ng-repeat="parent in parent" colspan="3">{{parent.child}}</td>
</tr>
</tr>

Html
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="style.css">
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular-animate.min.js"></script>
<script src="script.js"></script>
</head>
<body ng-app="expandCollapseApp">
<div ng-controller="expandCollapseCtrl">
<div class="container">
<div class="expandcollapse-item">
<div ng-click="active = !active" ng-class="{'expandcollapse-heading-collapsed': active, 'expandcollapse-heading-expanded': !active}">
<p>Parent 1</p></p>
</div>
<div class="slideDown" ng-hide="active">
<div class="expand-collapse-content">
<table>
<tr>
<td>
child1
</td>
<td>
child2
</td>
</tr>
</table>
</div>
</div>
</div>
<div class="expandcollapse-item">
<div ng-click="active1 = !active1" ng-class="{'expandcollapse-heading-collapsed': active1, 'expandcollapse-heading-expanded': !active1}">
<p>Parent 2</p>
</div>
<div class="slideDown" ng-hide="active1">
<div class="expand-collapse-content">
<table>
<tr>
<td>
child1
</td>
<td>
child2
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Controller
var expandCollapseApp = angular.module('expandCollapseApp', ['ngAnimate']);
expandCollapseApp.controller('expandCollapseCtrl', function ($scope) {
$scope.active = true;
$scope.active1 = true;
});
CSS
.container {
margin-top:100px;
border: 1px solid blue;
border-right: 1px solid blue;
}
.expandcollapse-item {
overflow: hidden;
border-top:1px solid blue;
}
.expandcollapse-heading-collapsed {
cursor: pointer;
padding: 15px 20px;
position: relative;
z-index: 100000000;
color: black;
background-color: white;
}
.expandcollapse-item:first-of-type {
border-top:0px;
}
.expandcollapse-heading-collapsed p{
font-size: 16px;
font-weight: normal;
margin:0px;
}
.expandcollapse-heading-expanded {
cursor: pointer;
z-index: 100000000;
padding: 15px 20px;
position: relative;
color: white;
background-color: black;
border: 1px solid blue;
}
.expandcollapse-heading-expanded p{
font-size: 16px;
font-weight: bold;
margin:0px;
}
.expandcollapse-heading-collapsed > span,
.expandcollapse-heading-expanded > span {
position:absolute;
top: 25px;
right: 15px;
font-size: 20px;
line-height: 0px;
}
.expand-collapse-content {
padding: 20px;
}
/*
animation:*/
.slideDown.ng-hide {
height:0;
transition:height 0.35s ease;
overflow:hidden;
position:relative;
}
.slideDown {
height:141px;
transition:height 0.35s ease;
overflow:hidden;
position:relative;
}
.slideDown.ng-hide-remove,
.slideDown.ng-hide-add {
/* remember, the .hg-hide class is added to element
when the active class is added causing it to appear
as hidden. Therefore set the styling to display=block
so that the hide animation is visible */
display:block!important;
}
.slideDown.ng-hide-add {
animation-name: hide;
-webkit-animation-name: hide;
animation-duration: .5s;
-webkit-animation-duration: .5s;
animation-timing-function: ease-in;
-webkit-animation-timing-function: ease-in;
}
.slideDown.ng-hide-remove {
animation-name: show;
-webkit-animation-name: show;
animation-duration: .5s;
-webkit-animation-duration: .5s;
animation-timing-function: ease-out;
-webkit-animation-timing-function: ease-out;
}
Demo

I can't figure out how to make my iFrame drop-down on click

So I managed to get my iFrame to drop-down on hover, but it closes when the cursor moves out of the frame, or moves outside of the hyperlink in IE 9. I'd like to keep it open until I click somewhere else on the page. So unless there's a way to keep it from closing on hover, I'd like to change it to a onclick event. Here's the code:
HTML:
<li>Upload files
<div id="stf" sty><!-- SendThisFile FileBox v3.02 (www.24-7transcripts.com) -->
<table cellspacing=0 cellpadding=3 style="font-family: verdana, arial; font-size: 10px;">
<tr><td align="center"><iframe id="stfLink" src="https://www.sendthisfile.com/filebox/index.jsp?widgetcode="ijljoo890jfljou98" marginwidth=0 marginheight=0 width="350" height="400" scrolling="no" frameborder=0></iframe></td></tr>
<tr><td align="center"></td></tr>
</table>
<!-- SendThisFile FileBox v3.02 --></div>
</li>
CSS:
.headerNav li #uploadFiles {
color: #CCC;
padding-top: 10px;
font-size: 14px;
float: right;
padding-right: 20px;
text-align: right;
}
.headerNav li {
-webkit-transition: all 0.5s ease-out;
}
.headerNav li #stf {
margin-right: -10px;
display: none;
height: 0px;
-webkit-transition: all 0.5s ease-out;
}
.headerNav li:hover #stf {
margin-right: -80px;
display: block;
float: right;
margin-top: 25px;
border-radius: 10px;
}
Is there a property I'm missing in the CSS? Or is there a way to do this with Javascript that I can't seem to find anywhere?

Because the style is applied on :hover, and the element loses that pseudo-selector on the mouseout event, the behaviour you describe is expected.
You can't use a pseudo-selector for click events. You'll have to use JavaScript to add a class on click and remove it on another event.
In jQuery it would look something like:
$('#myNavItem').click(function() {
$('#myIFrame').addClass('.expanded');
});
You'll also have to change your CSS :hover selector to be .expanded. It will observe the same CSS3 transitions on this event.