We Keep Coding

HOW To have icon appear in a row when my mouse hovers

I am using feather icons, and i would want the feather trash to appear beside the item name when my mouse hovers it.
I see this persons asking the question on Stacks but no answer was found.
Icons Only Appearing When Hover
My code below:
<div class="container-fluid">
<div class="table-responsive">
<table class="table table-striped table-sm table-hover">
<thead>
<tr>
<th class=" text-center">Item#</th>
<th class=" text-center">Item Name</th>
<th class=" text-center">Qty</th>
</thead>
<tbody>
<tr>
<td>1,001</td>
<td>Apple</td>
<td class=" text-right">5</td>
</tr>
<tr>
<td>1,002</td>
<td>Kidney Beans</td>
<td class=" text-right">3</td>
</tr>

The principle:
tr .fa { /* row not hovered */
opacity: 0;
transition: opacity .2s ease-out; /* adding transition, improved UI */
cursor: pointer; /* change cursor when hovering icon */
transition-delay: .5s; /* delay the icon fading out */
}
tr:hover .fa { /* row hovered */
opacity: 1;
transition-delay: 0s; /* cancel delay when entering */
}
In its simplest form:
tr .fa {
opacity: 0;
}
tr:hover .fa {
opacity: 1;
}
Working example:
tr .fa {
margin-right: .5rem;
opacity: 0;
transition: opacity .2s ease-out;
cursor: pointer;
transition-delay: .5s;
}
tr:hover .fa {
opacity: 1;
transition-delay: 0s;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="table-responsive">
<table class="table table-striped table-sm table-hover">
<thead>
<tr>
<th class=" text-center">Item#</th>
<th class=" text-center">Item Name</th>
<th class=" text-center">Qty</th>
</thead>
<tbody>
<tr>
<td>1,001</td>
<td><i class="fa fa-trash"></i>Apple</td>
<td class=" text-right">5</td>
</tr>
<tr>
<td>1,002</td>
<td><i class="fa fa-trash"></i>Kidney Beans</td>
<td class=" text-right">3</td>
</tr>
</tbody>
</table>
</div>
</div>
Feel free to change the selectors so that you don't affect anything else and that they match your current markup.
In your case, you'll want want to replace .fa selector with [data-feather].

Add a class to your icon element
Hide it by add this attribute style="display: none;"
Add the hover effect to your CSS file: .youriconclass:hover {display: block;}

jQuery hover method can help you accomplish the task. First, you need to add some HTML modifications like create a container for the icon. e.g.
<td class="trigger-icon">
Apple
<span class="icon-container"> </span>
</td>
Now for the js part,
$(".trigger-icon").hover(function(){
$(".icon-container").append('<i data-feather="trash"></i>');
}, function(){
$(".icon-container").empty();
});
For feather icon to work,
$(".trigger-icon").hover(function(){
$(".icon-container").append('<i data-feather="trash"></i>');
feather.replace();
}, function(){
$(".icon-container").empty();
});

Problem adding classes to DOM elements on click in IE11 and Edge

So I'm working on this project currently in ASP.NET MVC, and silly me have been making it and only testing it towards Chrome (Which happens to be my default browser).
There was a lot of "imperfections" once i published it to my test server, but most of those have been sorted.
I got a problem now with a button panel that expands to show some information. It works great in Chrome, and the strange thing is it works sometimes on some elements in IE11 and Edge. Also there is a difference in the look:
IE11 & Edge
Chrome
Chrome open
As you can see in the IE & Edge picture it already shows the scroll bar before the div that holds that one is shown. The second picture is how i want it to look in IE/Edge prior to click and the third picture is what it should look like after. As i said it's working in chrome.
// The javascript to trigger the on click:
$("body").on('DOMSubtreeModified', function () {
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function () {
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.maxHeight) {
panel.style.maxHeight = null;
} else {
panel.style.maxHeight = panel.scrollHeight + "px";
}
});
}
});
/* Style the buttons that are used to open and close the accordion panel */
.accordion {
background-color: #eee;
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
text-align: left;
border: none;
outline: none;
transition: 0.4s;
-webkit-transition: 0.4s;
-moz-transition: 0.4s;
-o-transition: 0.4s;
}
/* Add a background color to the button if it is clicked on (add the .active
class with JS), and when you move the mouse over it (hover) */
.active, .accordion:hover {
background-color: #ccc;
}
/* Style the accordion panel. Note: hidden by default */
.panel {
padding: 0 0px;
background-color: white;
max-height: 0;
overflow: scroll;
transition: max-height 0.2s ease-out;
-webkit-transition: max-height 0.2s ease-out;
-moz-transition: max-height 0.2s ease-out;
-o-transition: max-height 0.2s ease-out;
overflow-y: hidden
}
.accordion:after {
content: '\02795'; /* Unicode character for "plus" sign (+) */
font-size: 13px;
color: #777;
float: right;
margin-left: 5px;
margin-top: 7px;
}
.active:after {
content: "\2796"; /* Unicode character for "minus" sign (-) */
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-md-12 col-lg-12" id="noPadding">
<button class="accordion defaultSubtextHeader"><b>Show data</b></button>
<div id="log_data" class="panel lightGreyBackground">
<div class="col-md-12 col-lg-12" id="flowbenchTestBox">
<table border="1">
<tr>
<th class="thCenterText">Interneal Number</th>
<th class="thCenterText">Created</th>
<th class="thCenterText">Changed</th>
<th class="thCenterText">Minimum Battery Level</th>
</tr>
#if (sigfoxData != null)
{
<tr>
<td align="center" id="minorTextPadding">#sigfoxData.InternalNumber</td>
<td align="center" id="minorTextPadding">#sigfoxData.Created</td>
<td align="center" id="minorTextPadding">#sigfoxData.Changed</td>
<td align="center" id="minorTextPadding">#sigfoxData.MinimumBatteryLevel</td>
</tr>
}
</table>
</div>
<div class="col-lg-12" style="height:15px;"></div>
</div>
</div>
The css is something i found online, and i would link to the original if i could remember it but i cant.
Any idea about why it is behaving like it is? Tried adding IE11 browser fix to App_Browsers, and that sorted the other "beauty" issues.
Hope someone here can help me out. I have tried the things i could find, but nothing so far seems to be working. And this part is an issue both when running locally and on the server. The server is running .net 4.0, and i wont be able to upgrade it at this point in time.
Thanks.
Edit: Just wanted to point out that i have something between 4-6 of these on a page, and maybe 1-2 works out of them? So it might be something with the javascript being loaded before all elements have been rendered since they are staggered because they are loaded from a sql server.
Edit2: Just adding the full partial view as per comment - and dont want to mess up the runnable code example.
#{
var sigfoxData = ViewBag.Sigfox;
}
<h1 class="defaultHeaderFont">Sigfox</h1>
#if (sigfoxData != null)
{
<div class="col-md-12 col-lg-12" id="noPadding">
<button class="accordion defaultSubtextHeader"><b>Show data</b>
</button>
<div id="log_data" class="panel lightGreyBackground">
<div class="col-md-12 col-lg-12" id="flowbenchTestBox">
<table border="1">
<tr>
<th class="thCenterText">Interneal Number</th>
<th class="thCenterText">Created</th>
<th class="thCenterText">Changed</th>
<th class="thCenterText">Minimum BatteryLevel</th>
</tr>
#if (sigfoxData != null)
{
<tr>
<td align="center" id="minorTextPadding">
#sigfoxData.InternalNumber
</td>
<td align="center" id="minorTextPadding">
#sigfoxData.Created
</td>
<td align="center" id="minorTextPadding">
#sigfoxData.Changed
</td>
<td align="center" id="minorTextPadding">
#sigfoxData.MinimumBatteryLevel
</td>
</tr>
}
</table>
</div>
<div class="col-lg-12" style="height:15px;"></div>
</div>
</div>
}
else
{
#Html.Partial("_EmptyTestView")
}

As implied by your JavaScript, additional HTML will be loaded dynamically. In this case you should use JQuery's event delegation .on('event', 'selector', handlerFunc) on an ancestor element rather than observing the DOM.
Furthermore it is alway a good idea to use the DOMContentLoaded event, i.e. the JQuery shorthand $(function(){}).
Note also that you are using multiple identical IDs, however, the HTML specs say an ID has to be unique per document. I've changed that into class.
// The javascript to trigger the on click:
$(function()
{
$('body').on('click', 'button.accordion', function () {
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.maxHeight)
{
panel.style.maxHeight = null;
} else
{
panel.style.maxHeight = panel.scrollHeight + "px";
}
});
});
/* Style the buttons that are used to open and close the accordion panel */
.accordion {
background-color: #eee;
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
text-align: left;
border: none;
outline: none;
transition: 0.4s;
-webkit-transition: 0.4s;
-moz-transition: 0.4s;
-o-transition: 0.4s;
}
/* Add a background color to the button if it is clicked on (add the .active
class with JS), and when you move the mouse over it (hover) */
.active, .accordion:hover {
background-color: #ccc;
}
/* Style the accordion panel. Note: hidden by default */
.panel {
padding: 0 0px;
background-color: white;
max-height: 0;
overflow: scroll;
transition: max-height 0.2s ease-out;
-webkit-transition: max-height 0.2s ease-out;
-moz-transition: max-height 0.2s ease-out;
-o-transition: max-height 0.2s ease-out;
overflow-y: hidden
}
.accordion:after {
content: '\02795'; /* Unicode character for "plus" sign (+) */
font-size: 13px;
color: #777;
float: right;
margin-left: 5px;
margin-top: 7px;
}
.active:after {
content: "\2796"; /* Unicode character for "minus" sign (-) */
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-md-12 col-lg-12" id="noPadding">
<button class="accordion defaultSubtextHeader"><b>Show data</b></button>
<div id="log_data" class="panel lightGreyBackground">
<div class="col-md-12 col-lg-12" id="flowbenchTestBox">
<table border="1">
<tr>
<th class="thCenterText">Interneal Number</th>
<th class="thCenterText">Created</th>
<th class="thCenterText">Changed</th>
<th class="thCenterText">Minimum Battery Level</th>
</tr>
<tr>
<td align="center" class="minorTextPadding">Example InternalNumber</td>
<td align="center" class="minorTextPadding">Example Created</td>
<td align="center" class="minorTextPadding">Example Changed</td>
<td align="center" class="minorTextPadding">Example MinimumBatteryLevel</td>
</tr>
</table>
</div>
<div class="col-lg-12" style="height:15px;"></div>
</div>
</div>

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

How to expand input field to the right in a header bar

I have a header bar with left-aligned items, center items and right-aligned items. In the center, I have multiple items and a search input field. When the search field gets focus, I'm making it wider by animating the width. Right now, because the items are centered, it's animating both left and right to center the content. How can I change this so it keeps the alignment and expands the width to the right?
I'm not using Bootstrap.
I'm currently using a table for the header bar content. I'm open to changing that, but if there's a way to do it with the current design, that would be preferred.
Here's a JSFiddle...click in the search field to see what's happening: https://jsfiddle.net/L60g0j64/1/
EDIT: I've updated it with the suggested solution below. My only issue is that the red container surrounding the input should expand also.
HTML/CSS/JS Snippet
$('#search').focus(function() {
$(this).val("");
$('#hidden_content').css('display','inline');
$(this).animate({width: '180px'}, 200);
});
$('#search').blur(function() {
$(this).val('Search');
$('#hidden_content').css('display','none');
$(this).animate({width: '120px'}, 200);
});
.header-navbar {
cursor: pointer;
white-space: nowrap;
background-color: #1f2127;
color: #cbcbcb;
min-width: 0;
text-overflow: ellipsis;
z-index: 299;
top: 0px;
left: 0px;
width: 100%;
height: 32px;
float: none;
position: fixed;
border-spacing: 0px;
}
td.cell-center {
text-align: center;
}
.cell-center table {
margin: 0 auto;
}
.header-table {
height: 32px;
border: none;
border-spacing: 0px;
}
td.header_rtd {
padding-right:12px;
}
td.header_ltd {
padding-left:12px;
}
.search-wrapper {
max-width: 124px;
background-color: red;
padding:4px;
}
.hidden_content{
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="header-navbar" id="header" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td>
<table class="header-table" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td class='header_rtd'>left1</td>
<td class='header_rtd'>left2</td>
</tr>
</table>
</td>
<td width=100% class='cell-center'>
<table class="header-table" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td class='header_rtd'>center</td>
<td class='header_rtd'>center</td>
<td><div class="search-wrapper">
<input class="search" id="search" style="width: 120px;" type="text" size="60" value="Search"/>
<div class='hidden_content' id='hidden_content'>
hidden content
</div>
</div></td>
</tr>
</tbody>
</table>
</td>
<td>
<table class="header-table" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td class='header_ltd'>right1</td>
<td class='header_ltd'>right2</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>

One quick solution would be to give the parent element a max-width equal to the initial width of the element. In doing so, the element will still be centered relative to the initial width because the input element's animated width will not effect the width of the parent element.
Updated Example
.search-wrapper {
max-width: 124px;
}
As a side note, you don't need jQuery/JS to animate the width, you can simply use a CSS transition along with the :focus pseudo-class.
Updated Example
.search-wrapper input.search {
transition: 1s width ease;
width: 120px;
}
.search-wrapper input.search:focus {
width: 180px;
}

Color overlap in CSS

<table border="1" class="sample">
<tr>
<th>Employee</th>
<th>Salary</th>
<th></th>
</tr>
<tr>
<td>EMP1</td>
<td>10000</td>
<td><input id="btn1" type="button" value="Submit">
</tr>
<tr>
<td>EMP2</td>
<td>12000</td>
<td><input id="btn2" type="button" value="Submit"></td>
</tr>
</table>
I've set the alternating color in the css. That is first row is white and second row is yellow.
The problem is the button in the second row is also getting yellow color. I've set Opacity to 0.5 so that it looks greyed out on pageload. How to remove this color overlap?
<style type="text/css">
table.sample {
border: 6px inset #8B8378;
-moz-border-radius: 6px;
}
table.sample td {
border: 1px solid black;
padding: 0.2em 2ex 0.2em 2ex;
color: black;
}
table.sample tr.d0 td {
background-color: #FCF6CF;
}
table.sample tr.d1 td {
background-color: #FEFEF2;
}
</style>

opacity makes your element see-through. An opacity of 0.5 will make the element appear 50% see-through.
The reason you can see your background colour through your input is because your input has this opacity. You're basically asking "I have added a window to my house but I can see through it, how can I prevent this?", and the answer is simply: remove the opacity.
Here is a JSFiddle demo showing 0.0 opacity, 0.5 opacity and no opacity in action: http://jsfiddle.net/JamesD/UQ48z/1.
If you want your button to have a different coloured background whilst retaining its opacity, what you can do is wrap it in a span and then give that span a background:
<td>
<span>
<input id="btn2" type="button" value="Submit">
</span>
</td>
td span { background:#fff; } /* New button background colour */
td span input { margin:0; } /* Remove the button's margins */
JSFiddle example.

Try this instead:
input {color: rgba(0,0,0,0.5);}
E.g. http://codepen.io/pageaffairs/pen/gGIiw
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style media="all">
table {
border: 6px inset #8B8378;
-moz-border-radius: 6px;
}
table td {
border: 1px solid black;
padding: 0.2em 2ex 0.2em 2ex;
color: black;
}
table tr td {
background-color: #FCF6CF;
}
table tr td {
background-color: #FEFEF2;
}
input {color: rgba(0,0,0,0.5);}
</style>
</head>
<body>
<table border="1" class="simple">
<tr>
<th>Employee</th>
<th>Salary</th>
<th></th>
</tr>
<tr>
<td>EMP1</td>
<td>10000</td>
<td><input id="btn1" type="button" value="Submit">
</tr>
<tr>
<td>EMP2</td>
<td>12000</td>
<td><input id="btn2" type="button" value="Submit"></td>
</tr>
</table>
</body>
</html>