I have a simple jquery script to highlight DOM element on hover. But this script failed to highlight the rows of my table, there're no problem with cells.
In my script, I need to be able to select any type of elements, not just tables, so I cant't code a solution based on table selection, like DataTables for example. Any suggestions?
$(document).ready(function() {
$("body").on('mouseover', function(event) {
var highlightTarget = $(event.target);
highlightTarget.addClass("highlight");
}).on('mouseout', function(event) {
$(event.target).removeClass('highlight');
});
});
.highlight {
border: 1px solid green;
background-color: darkseagreen;
z-index: 99999;
}
.main {
border-top: 1px solid #9EBACF;
border-bottom: 1px solid #FFFFFF;
border-left: 1px solid #9EBACF;
border-right: 1px solid #FFFFFF;
}
.cat {
border-top: 1px solid #FFFFFF;
border-bottom: 1px solid #9EBACF;
border-left: 1px solid #FFFFFF;
border-right: 1px solid #9EBACF;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="main" cellspacing="0" cellpadding="4">
<tr>
<td class="cat">data 1</td>
<td class="cat">data 2</td>
</tr>
<tr>
<td class="cat">data 3</td>
<td class="cat">data 4</td>
</tr>
<tr>
<td class="cat">data 5</td>
<td class="cat">data 6</td>
</tr>
</table>
One way of doing this using CSS would be to use the :hover selector.
.hoverable:hover {
background: rgba(150, 150, 150, 0.5);
}
All elements of class .hoverable will be highlighted. Note that in the following example, on hovering the first row, both <tr> and <td> are highlighted. In the second row, only the <td> is highlighted, while in the third row, only the <tr> is highlighted.
.hoverable:hover {
background: rgba(180, 180, 180, 0.5);
}
<table class="main" cellspacing="0" cellpadding="4">
<tr class="hoverable">
<td class="hoverable">data 1</td>
<td class="hoverable">data 2</td>
</tr>
<tr>
<td class="hoverable">data 3</td>
<td class="hoverable">data 4</td>
</tr>
<tr class="hoverable">
<td>data 5</td>
<td>data 6</td>
</tr>
</table>
Logic
Bind mouse events on every element.
Create a map for elements where parent is to be considered.
Now, on hover, just check if map has value for this element type.
If yes, fetch parent selector and navigate to it.
If not, use current element as default element.
Remove class from any other element
Add class to stored element.
Note: step 6 is required because, you will have a div. This div will have a table and on till td, but you just want to access current element and not all.
Sample
$(document).ready(function() {
createHover()
});
function createHover() {
const map = {
"TD": "tr"
}
$(document).on('mouseenter mouseout', '*', function(e) {
var myClass = "highlight"
var parent = map[this.nodeName];
var $this = $(this)
var el = $this;
$('.' + myClass).removeClass(myClass)
if (parent) {
el = $this.closest(parent)
}
el.toggleClass(myClass, $this.is(":hover"))
e.stopPropagation()
})
}
.highlight {
border: 1px solid green;
background-color: darkseagreen;
}
.main {
border-top: 1px solid #9EBACF;
border-bottom: 1px solid #FFFFFF;
border-left: 1px solid #9EBACF;
border-right: 1px solid #FFFFFF;
}
.cat {
border-top: 1px solid #FFFFFF;
border-bottom: 1px solid #9EBACF;
border-left: 1px solid #FFFFFF;
border-right: 1px solid #9EBACF;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<body>
<table class="main" cellspacing="0" cellpadding="4">
<tr>
<td class="cat">
<strong>Edge case</strong>
</td>
<td class="cat">data 2</td>
</tr>
<tr>
<td class="cat">data 3</td>
<td class="cat">data 4</td>
</tr>
<tr>
<td class="cat">data 5</td>
<td class="cat">data 6</td>
</tr>
</table>
<ul>
<li>This is a test</li>
</ul>
<p>This is also a test</p>
</body>
you don't need JS for that, simple css hover would do it :
.cat:hover{
border: 1px solid green;
background-color: darkseagreen;
z-index: 99999;
}
you dont need .highlight either
Related
I am using the Collapsible divs code from here: https://www.w3schools.com/howto/howto_js_collapsible.asp
And I had asked here how to make the divs visible by default & that was answered here: Make Collapsible Divs NOT hidden by default
But, now I have a problem with my CSS because, I have added border-radius to mine. So when it's open, it works fine - it has a rounded border around the whole .collapsible/.inside pair, but when it's closed I don't know how to have the rounded border on the .container button (because how I have the code makes the bottom of the collapsible not rounded) - how to I give "not active" CSS code, I guess?
var coll = document.getElementsByClassName("collapsible");
var i;
for (i = 0; i < coll.length; i++) {
coll[i].addEventListener("click", function() {
this.classList.toggle("active");
var content = this.nextElementSibling;
if (!content.style.display || content.style.display === "block") {
content.style.display = "none";
} else {
content.style.display = "block";
}
});
}
.collapsible {
background-color: #007784;
color: white;
cursor: pointer;
width: 97%;
border:2px solid #000000;
border-bottom:0px;
border-radius:15px 15px 0px 0px;
text-align: center;
outline: none;
font-size: 16px;
font-weight:bold;
font-family:Verdana, Arial, Helvetica, sans-serif;
margin-top:3px;
padding:2px;
}
.collapsible:hover {
background-color: #0066FF;
border-bottom:0px;
border-radius:15px 15px 0px 0px;
margin-top:3px;
}
.active {
background-color: #007784;
border-bottom:0px;
border-radius:15px 15px 0px 0px;
margin-top:3px;
}
.inside {
padding: 0;
width: 97%;
display: block;
overflow: hidden;
border-top:0px;
border-left: 2px solid #000000;
border-right: 2px solid #000000;
border-bottom: 2px solid #000000;
background-color: #FFFFFF;
border-radius:0px 0px 15px 15px;
}
/*unrelated coding*/
table.trials {border:0; border-collapse:collapse; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:12px; text-align:center; background-color:#000000; border-radius:15px; }
table.trials tr td {border: 1px solid #000000;}
table.trials tr td:first-child {border-left:0;}
table.trials tr td:last-child {border-right:0;}
table.trials tr:last-child td {border-bottom:0;}
.trials tr:last-child td:first-child {border-radius:0px 0px 0px 13px;}
.trials tr:last-child td:last-child {border-radius:0px 0px 13px 0px;}
td {background-color:#FFFFFF;}
td.NA {background-color:#CCCCCC;}
.divider td {height:3px; padding:0px; background-color:#000000;}
<button type="button" class="collapsible">CH — Conformation Champion <span style="font-size:14px; font-weight:normal; font-style:italic;">total: 15 pts / 3 Majors</span></button>
<div class="inside" style="padding:0;"><!------------CH - Conformation Champion------------------------------------------------------>
<table class="trials" cellspacing="0" cellpadding="2px" style="width:100%; margin:0; border-radius:0;">
<tr><!------DATE: Weekday — Month ##, YYYY------->
<td width="25%">Saturday – August 20, 2016</td>
<td width="25%">Sunday – September 11, 2016</td>
<td width="25%">Sunday – January 22, 2017</td>
<td width="25%">Sunday – May 7, 2017</td>
</tr>
<tr><!------HOST CLUB---------------------------------->
<td width="25%">Olympic Kennel Club</td>
<td width="25%">Eugene Kennel Club</td>
<td width="25%">Tualatin Kennel Club</td>
<td width="25%">Olympia Dog Fanciers Association</td>
</tr>
<tr><!------LOCATION: Venue — City, State-------->
<td width="25%">Enumclaw, WA</td>
<td width="25%">Brownsville, OR</td>
<td width="25%">Portland, OR</td>
<td width="25%">Elma, WA</td>
</tr>
<tr><!------JUDGE-------------------------------------->
<td width="25%">Judge: Adrian Woodfork</td>
<td width="25%">Judge: Nancy Simmons</td>
<td width="25%">Judge: John Ronald</td>
<td width="25%">Judge: Roger Pritchard</td>
</tr>
<tr class="award"><!------SCORE/PLACE/POINT------------>
<td width="25%"><i class="W">WB</i> — 1 pt</td>
<td width="25%"><i class="W">WB</i> / <i class="BOW">BOW</i> / <i class="BOS">BOS</i> — 2 pts</td>
<td width="25%"><i class="W">WB</i> — 1 pt</td>
<td width="25%"><i class="W">WB</i> — 3 pt Major</td>
</tr>
<tr class="divider"><td colspan="4"></td></tr><!--------------------------------DIVIDER-------------------------------->
<tr><!------DATE: Weekday — Month ##, YYYY------->
<td width="25%">Monday – May 29, 2017</td>
<td width="25%">Sunday – June 25, 2017</td>
<td width="25%">Monday – July 10, 2017</td>
<td width="25%" class="NA"> </td>
</tr>
<tr><!------HOST CLUB---------------------------------->
<td width="25%">Kennel Club of the California Sierra</td>
<td width="25%">Clackamas Kennel Club</td>
<td width="25%">Puyallyp Valley Dog Fanciers</td>
<td width="25%" class="NA"> </td>
</tr>
<tr><!------LOCATION: Venue — City, State-------->
<td width="25%">Placerville, CA</td>
<td width="25%">Canby, OR</td>
<td width="25%">Puyallup, WA</td>
<td width="25%" class="NA"> </td>
</tr>
<tr><!------JUDGE-------------------------------------->
<td width="25%">Judge: Pat Hastings</td>
<td width="25%">Judge: Minna-Liisa Koltes</td>
<td width="25%">Judge: Sheila DiNardo</td>
<td width="25%" class="NA"> </td>
</tr>
<tr class="award"><!------SCORE/PLACE/POINT------------>
<td width="25%"><i class="W">WB</i> / <i class="BOW">BOW</i> / <i class="BOS">BOS</i> — 3 pt Major</td>
<td width="25%"><i class="W">WB</i> / <i class="BOW">BOW</i> — 1 pt</td>
<td width="25%"><i class="BOB">BOB</i> — 4 pt Major</td>
<td width="25%" class="NA"> </td>
</tr>
</table>
</div>
You can add a CSS rule
button.collapsible.active {
border-radius: 15px;
}
This says when the button has both the collapsible and the active classes the border radius should be 15px all around.
Additionally I would avoid directly manipulating content.style.display and make the display block or none also based on classes.
I have html tables,and I would like to click each cells and change it's classes to outpatient
td, th {
border: 5px ;
cursor: pointer;
padding: 2.5px;*/
position: relative;
}
.outpatient {
background-color: rgb(0,255,0);
border: 5px solid aqua;
}
When I tried this class the result is like below.
It seems border is not collapsed and some cells are distorted.
https://gyazo.com/a6e5ef991b345934c070ed77d8949305
I guess it must be inner bordered to it's cells.
How can I fix it?
Thanks
I hope that you will agree with it. Thanks
$(function() {
$("td").click(function() {
$(this).addClass('outpatient');
});
});
td, th {
border:1px solid #ccc;
cursor: pointer;
padding: 2.5px;
position: relative;
text-align:center;
box-sizing:border-box;
}
.outpatient {
background-color: rgb(0,255,0);
outline: 3px solid #546565;
outline-offset: -4px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
<tr>
<td>10</td>
<td>11</td>
<td>12</td>
</tr>
<tr>
<td>13</td>
<td>14</td>
<td>15</td>
</tr>
<tr>
<td>16</td>
<td>17</td>
<td>18</td>
</tr>
</table>
You can set to the td, th style box-sizing:border-box and it will make the border to be in the inner width, and not the outer. as I understand, it is what you looking for
set a 5px border for cells and test it now!
td, th {
border:5px solid transparent;
}
I'm trying to convert JavaScript into jQuery but it doesn't seem to work (alert returns zero). In this thread "scrollheight of an element gives undefined value" I've learned that I should use scrollTop() jQuery function but it doesn't return what I want.
Edit:
HTML code:
Istorija (paspauskite)
<div class="panel">
<table>
<tr style="border-top: none;">
<td>Dėl tvarkos, visi sąrašai yra 30 įrašų ilgio, išskyrus sąskaitos papildymus bei lėšų išsiėmimus.</td>
</tr>
</table>
</div>
<div class="panel-nested-parent active" style="max-height: 94px;">
<table>
<tbody>
<tr>
<th>Pelnas nuo įsigytų (1 kaimynas)</th>
</tr>
</tbody>
</table>
<table>
<tbody>
<tr style="border: none;">
<td style="vertical-align: top; padding: 0;">
<button style="border-right: none;" class="accordion-nested">Gyvulių (5%)</button>
<div class="panel-nested">
<table>
<tbody>
<tr style="border: none;">
<th style="background: #21aedb; border-left: 1px solid #1f76a1;">Gyvulys</th>
<th style="background: #21aedb; border-left: 1px solid #1f76a1;">Kiekis</th>
<th style="background: #21aedb; border-left: 1px solid #1f76a1; border-right: 1px solid #1f76a1;">Pelnas</th>
</tr>
<tr>
<td>Višta</td>
<td>1 vnt.</td>
<td>1 Eur</td>
</tr>
</tbody>
</table>
</div>
</td>
<td style="vertical-align: top; padding: 0;">
<button style="border-right: none;" class="accordion-nested">Fermų (10%)</button>
<div class="panel-nested">
<table>
<tbody>
<tr>
<th style="background: #21aedb; border-left: 1px solid #1f76a1;">Ferma</th>
<th style="background: #21aedb; border-left: 1px solid #1f76a1;">Kiekis</th>
<th style="background: #21aedb; border-left: 1px solid #1f76a1; border-right: 1px solid #1f76a1;">Pelnas</th>
</tr>
<tr>
<td>Vištidė</td>
<td>1 vnt.</td>
<td>1 Eur</td>
</tr>
</tbody>
</table>
</div>
</td>
<td style="vertical-align: top; padding: 0;">
<button style="border-right: none;" class="accordion-nested">Fabrikų (10%)</button>
<div class="panel-nested">
<table>
<tbody>
<tr>
<th style="background: #21aedb; border-left: 1px solid #1f76a1;">Fabrikas</th>
<th style="background: #21aedb; border-left: 1px solid #1f76a1;">Kiekis</th>
<th style="background: #21aedb; border-left: 1px solid #1f76a1; border-right: 1px solid #1f76a1;">Pelnas</th>
</tr>
<tr>
<td>Tešlos</td>
<td>1 vnt.</td>
<td>1 Eur</td>
</tr>
</tbody>
</table>
</div>
</td>
<td style="vertical-align: top; padding: 0;">
<button class="accordion-nested">Kepyklų (10%)</button>
<div class="panel-nested">
<table>
<tbody>
<tr>
<th style="background: #21aedb; border-left: 1px solid #1f76a1;">Kepykla</th>
<th style="background: #21aedb; border-left: 1px solid #1f76a1;">Kiekis</th>
<th style="background: #21aedb; border-left: 1px solid #1f76a1; border-right: 1px solid #1f76a1;">Pelnas</th>
</tr>
<tr>
<td>Blynų su mėsa</td>
<td>1 vnt.</td>
<td>1 Eur</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</div>
var accHeader = document.getElementsByClassName("accordion-header");
var acc = document.getElementsByClassName("accordion");
var accNestedParent = document.getElementsByClassName("accordion-nested-parent");
var accNested = document.getElementsByClassName("accordion-nested");
var panelNested = document.getElementsByClassName("panel-nested");
JS Works:
for (i = 0; i < accHeader.length; i++) {
accHeader[i].onclick = function() {
if ($(this).hasClass('active')) {
$('.accordion').removeClass('active');
$('.accordion-header').removeClass('active');
$('.panel').removeClass('active');
$('.panel').css('max-height', '');
$(this).next().next().removeClass("top-border");
} else {
$('.accordion').removeClass('active');
$('.accordion-header').removeClass('active');
$('.panel').removeClass('active');
$('.panel').css('max-height', '');
$(this).next().next().removeClass("top-border");
var accPanel = this.nextElementSibling;
var nextAcc = this.nextElementSibling.nextElementSibling;
$(this).addClass("active");
$(this).next().addClass('active');
$(this).next().next().addClass("top-border");
if (accPanel.style.maxHeight) {
accPanel.style.maxHeight = null;
} else {
accPanel.style.maxHeight = accPanel.scrollHeight + "px";
}
alert(accPanel.scrollHeight);
}
}
}
jQuery doesn't work:
for (i = 0; i < accNested.length; i++) {
accNested[i].onclick = function() {
if ($(this).hasClass('active')) {
$('.panel').removeClass('active');
$('.panel').css('max-height', '');
$('.panel-nested').removeClass('active');
$('.panel-nested').css('max-height', '');
$('.accordion').removeClass('active');
$('.accordion-header').removeClass('active');
$('.accordion-nested').removeClass('active');
$(this).next().next().removeClass("top-border");
} else {
$('.panel').removeClass('active');
$('.panel').css('max-height', '');
$('.panel-nested').removeClass('active');
$('.panel-nested').css('max-height', '');
$('.accordion').removeClass('active');
$('.accordion-header').removeClass('active');
$('.accordion-nested').removeClass('active');
$(this).next().next().removeClass("top-border");
var accPanel = $('.panel');
var nextAcc = this.nextElementSibling.nextElementSibling;
$('.panel-nested').addClass("active");
$('.accordion-nested').addClass('active');
$('.accordion-nested').addClass("top-border");
if (accPanel.css('max-height')) {
accPanel.css('max-height', '');
} else {
accPanel.css('max-height', accPanel.scrollTop() + "px");
}
alert(accPanel.scrollTop());
}
}
}
Here there is -I hope- the result you want to achieve:
<!DOCTYPE html>
<html>
<head>
<script>*INCLUDE YOUR JQUERY LIBRARY*</script>
<style type="text/css">
#div{
border: 1px solid black;
width:900px;
height: 900px;
max-height: 2px;
}
</style>
</head>
<body>
<div id="div">My div</div>
</body>
<script type="text/javascript">
$(document).ready(function() {
var accPanel = $('#div');
var maxHeigth = $('#div').css( "max-height" );
var height = accPanel.height();
if (maxHeigth == 'none') {
console.log('No max-height set by default.')
console.log('Changing to ', height)
accPanel.css('max-height', accPanel.height() + "px");
} else {
console.log('Currently it has max-height equal to ', height)
console.log('Changing to 0px');
accPanel.css('max-height', '0px');
}
});
</script>
</html>
Try it in your browser as it is, I've added some log shown into the console that should help.
Let me know,
Laura
I think you are using the jQuery scrollTop() function improperly.
It is not a CSS propery that you can assign to an element.
Indeed, it is a function, so you cannot do :
accPanel.css('max-height', accPanel.scrollTop() + "px")
If you want to add as CSS property the max-height you should use .height:
accPanel.height();
Hope this could help,
Laura.
I have a page with two dynamic tables.
When I want to print my page, each of my tables will be separated, one side in one page and other side in other pages. (both tables are dynamic)
I want to make static page break in any 672px
I did many way, but still I didn't get response.
Is there anyway for me?
My HTML:
<table id="selectedTable" style="width: 100%; font-size: 12pt; margin-top: 2px; text-align: right; border-top: 4px solid #000000; border-right: 4px solid #000000;border-left: 4px solid #000000;">
<tr>
<td colspan="{{(TotalDetailsOfUsagesCurrent.length * 2) + 2}}TotalDetailsOfUsagesCurrent">Blah blah</td>
</tr>
<tr>
<td width="53px">
<div style="text-align: center;">Usage</div>
</td>
<td ng-repeat='TDUC in TotalDetailsOfUsagesCurrent track by $index' colspan="2">
{{TDUC.UsageType}}
</td>
<td width="55px" style="border-bottom: 2px solid #000000; border-top: 2px solid #000000; font-size: 12pt;text-align: center; ">
<div>Total</div>
</td>
</tr>
<tr id="selectedRow" ng-click="heightChecker(this)" ng-repeat='DFC in DetailsOfFloorsCurrent'>
<td width=" 53px">
<div dir="ltr"> {{getFloorName(DFC.FloorNo)}} </div>
</td>
<td ng-repeat-start="usage in DFC.Usages track by $index">{{usage.UnitNo}}</td>
<td ng-repeat-end>{{usage.UnitArea}}</td>
<td width="55px">
{{DFC.TotalAreaCurrent.toFixed(2)}}
</td>
</tr>
<tr>
<td>
<div>Total</div>
</td>
<td ng-repeat-start="TDFC in TotalDetailsOfUsagesCurrent">{{TDFC.UnitNo}}</td>
<td ng-repeat-end>{{TDFC.UnitArea.toFixed(2)}}</td>
<td>{{TotalAreaCurrent.toFixed(2)}}</td>
</tr>
</table>
JS:
$scope.heightChecker = function (row) {
selectedRow[row.$index].offsetTop; //it gives me my row distance from top of table. for getting the pixles. but its usless
}
I would like to add a class for a table cell that matches the hover color onclick or on select of the cell.
I have this javascript (that doesnt work currently):
$('#tblContainer').click(function() {
var $this = $(this);
// Remove highlight
$this.closest("tr").find("td.guidelines").removeClass("guidelines");
// Add it to this one
$this.closest("td").addClass("guidelines2");
});
With these 3 main classes (guidelines, guidelines2- the class I want it to change to, and guidelines:hover):
table.rubrictable td.guidelines {
background: #FFF;
padding: 6px;
text-align:left;
color:#666666;
font-size:9pt;
font-style:plain;
border-right: 1px solid #eeeeee;
border-left: 1px solid #eeeeee;
border-bottom: 2px solid #666666;
width:150;
background: #FFF;
background: -moz-linear-gradient(left top , #E6E6E6, #FFF);
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#E6E6E6), color-stop(100%,#FFF));
}
table.rubrictable td.guidelines2 {
background: #3C0;
padding: 6px;
text-align:left;
color:#666666;
font-size:9pt;
font-style:plain;
border-right: 1px solid #eeeeee;
border-left: 1px solid #eeeeee;
border-bottom: 2px solid #666666;
width:150;
}
table.rubrictable td.guidelines:hover {
background:#3C0;
}
And here is my html:
<table width="100%" border="0" cellspacing="0" cellpadding="0" id="tblContainer" class="rubrictable">
<th class="dimensionstitle">ROWS (Dimensions)</th>
<th class="level">Delicious<br />
4</th>
<th class="level">Good<br />
3</th>
<th class="level">Needs Improvement<br /
2</th>
<th class="level">Poor <br />
1
</th>
<th class="dimensionstitle">COMMENTS</th>
</tr>
<tr>
<td class="dimensions" nowrap="nowrap">Number of Chips
</td>
<td class="guidelines">Chocolate chip in every bite</td>
<td class="guidelines">Chips in about 75% of bites</td>
<td class="guidelines">Chips in about 50% of bites</td>
<td class="guidelines"Too few or too many chips</td>
<td class="dimensions"><img src="Icons/edit-green.gif" width="16" height="16" /></td>
</tr>
<tr>
<td class="dimensions">Texture </td>
<td class="guidelines">Chew</td>
<td class="guidelines">Chewy in middle, crisp on edges</td>
<td class="guidelines">Texture either crispy/crunchy or 50% uncooked</td>
<td class="guidelines">Texture resembles a dog biscuit</td>
<td class="dimensions"><img src="Icons/edit-green.gif" width="16" height="16" /></td>
</tr>
</table>
And you can see an example here in my FIDDLE
You've put your click() handler on the table itself, so when you do $this.closest("tr"), it's looking for an element that is an ancestor (not a child) of the table and that is a tr. It won't find it.
Just change the click declaration to
$('#tblContainer td').click(function() {
As JacobM stated, you need to use the td on the cell.
$('#tblContainer td').click(function() {
However, your table has a class for all the options you would like to be selectable. That means you could use #tblContainer .guidelines instead.
$('#tblContainer .guidelines').click
I also believe this is what you are trying to achieve:
http://jsfiddle.net/sZenj/1/