Snap to div horizontal on slide or swipe - javascript

I have a horizontal set of Divs each holding a score table from a game. The intent is to have the user on a phone slide / swipe the game table and when the user removes his finger, the program will snap to the next div. For example, if Game 1 appears, the user swipes quickly and lifts the finger when Game 1 and Game 2 are both showing, the program will advance to Game 2, not continuing sliding. The code is below and a demo here. Any and all help appreciated.
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<style type="text/css" media="screen">
table.swingTable {
border-collapse: collapse;
font-size: 12px;
margin: 0px 0px 20px;
/* original: margin: 10px 10px 20px; */
text-align: left;
width:100%;
}
table.swingTable thead th.rounded-company {
background: #ccc;
}
table.swingTable thead th.rounded-q4 {
background: #ccc;
}
table.swingTable th {
background: none repeat scroll 0 0 #CCCCCC;
color: #222222;
font-size: 11px;
/*font-size: 10px;*/
font-weight: bold;
padding: 6px;
/*padding: 8px;*/
text-transform: uppercase;
}
/*table.swingTable th#hole-shot{ width: 50;}*/
table.swingTable td {
background: none repeat scroll 0 0 #eee;
border-top: 1px solid #FFFFFF;
color: #333;
padding: 8px;
}
table.swingTable tfoot td.rounded-foot-left {
background: #eee;
}
tabletfoot.swingTable td.rounded-foot-right {
background: #eee;
}
table.swingTable tbody tr:hover td {
background: none repeat scroll 0 0 #ddd;
}
.slideContainer {
white-space: nowrap;
}
.horizontal{
display: inline-block;
margin:0 auto;
border:2px solid;
/*border-radius:25px;*/
white-space: normal;
width: 100%;
/*left:0;right:0; */
}
</style>
<script>
$(document).ready(function()
{
}); // end main
</script>
</head>
<body>
<div class="slideContainer">
<div class="horizontal" style="background: #DBDBDB">
<table class="swingTable" >
<caption><strong>Game 1</strong></caption>
<tr>
<th>Swing#</th>
<th>start</th>
<th>H-Dis</th>
<th>S-Dis</th>
<th>SG</th>
<th>Flags</th>
</tr>
<tr>
<td>1</td>
<td>T</td>
<td>400</td>
<td>300</td>
<td>0</td>
<td></td>
</tr>
<tr>
<td>2</td>
<td>F</td>
<td>100</td>
<td>90</td>
<td>0</td>
<td></td>
</tr>
<tr>
<td>3</td>
<td>G</td>
<td>10</td>
<td>10</td>
<td>SG</td>
<td>HO</td>
</tr>
</table>
</div>
<div class="horizontal">
<table class="swingTable" >
<caption><strong>Game 2</strong></caption>
<tr>
<th>Swing#</th>
<th>start</th>
<th>H-Dis</th>
<th>S-Dis</th>
<th>SG</th>
<th>Flags</th>
</tr>
<tr>
<td>1</td>
<td>T</td>
<td>400</td>
<td>300</td>
<td>0</td>
<td></td>
</tr>
<tr>
<td>2</td>
<td>F</td>
<td>100</td>
<td>90</td>
<td>0</td>
<td></td>
</tr>
<tr>
<td>3</td>
<td>G</td>
<td>10</td>
<td>10</td>
<td>SG</td>
<td>HO</td>
</tr>
</table>
</div>
<div class="horizontal" style="background: #DBDBDB">
<table class="swingTable" >
<caption><strong>Game 3</strong></caption>
<tr>
<th>Swing#</th>
<th>start</th>
<th>H-Dis</th>
<th>S-Dis</th>
<th>SG</th>
<th>Flags</th>
</tr>
<tr>
<td>1</td>
<td>T</td>
<td>400</td>
<td>300</td>
<td>0</td>
<td></td>
</tr>
<tr>
<td>2</td>
<td>F</td>
<td>100</td>
<td>90</td>
<td>0</td>
<td></td>
</tr>
<tr>
<td>3</td>
<td>G</td>
<td>10</td>
<td>10</td>
<td>SG</td>
<td>HO</td>
</tr>
</table>
</div>
<div class="horizontal">
<table class="swingTable" >
<caption><strong>Game 4</strong></caption>
<tr>
<th>Swing#</th>
<th>start</th>
<th>H-Dis</th>
<th>S-Dis</th>
<th>SG</th>
<th>Flags</th>
</tr>
<tr>
<td>1</td>
<td>T</td>
<td>400</td>
<td>300</td>
<td>0</td>
<td></td>
</tr>
<tr>
<td>2</td>
<td>F</td>
<td>100</td>
<td>90</td>
<td>0</td>
<td></td>
</tr>
<tr>
<td>3</td>
<td>G</td>
<td>10</td>
<td>10</td>
<td>SG</td>
<td>HO</td>
</tr>
</table>
</div>
<div class="horizontal" style="background: #DBDBDB">
<table class="swingTable" >
<caption><strong>Game 5</strong></caption>
<tr>
<th>Swing#</th>
<th>start</th>
<th>H-Dis</th>
<th>S-Dis</th>
<th>SG</th>
<th>Flags</th>
</tr>
<tr>
<td>1</td>
<td>T</td>
<td>400</td>
<td>300</td>
<td>0</td>
<td></td>
</tr>
<tr>
<td>2</td>
<td>F</td>
<td>100</td>
<td>90</td>
<td>0</td>
<td></td>
</tr>
<tr>
<td>3</td>
<td>G</td>
<td>10</td>
<td>10</td>
<td>SG</td>
<td>HO</td>
</tr>
</table>
</div>
</div>
</body>
</html>

Related

HTML prev function on td is returning null or empty

In a <table>with check box in the Last column, on selection of whcih I want to sum the values of previous two <td>.
The js function should sum the values of the columns for which the CheckBox is ticked. But I am stuck at locating the previous <td> itself. The Snippet is as follows.
function doSumAeFunction(){
var prevCell = $(this).closest('tr').prev('td').text();
console.log(prevCell);
alert(prevCell);
}
table {
table-layout: fixed;
width: auto;
border-collapse: collapse;
border: 3px solid purple;
}
table,
th,
td {
border: 1px solid;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" rel="stylesheet" />
<table style="table table-bordered text-center" style="width:auto">
<thead>
<th>Sl No</th>
<th>English</th>
<th>Geography</th>
<th>Maths</th>
<th>Science 2</th>
<th align="center">Select</th>
</thead>
<tbody>
<tr>
<td>1</td>
<td>22</td>
<td>15</td>
<td>12</td>
<td>15</td>
<td><input type="checkbox" value="checked" onclick="doSumAeFunction()" /></td>
</tr>
<tr>
<td>1</td>
<td>8</td>
<td>7</td>
<td>10</td>
<td>5</td>
<td><input type="checkbox" value="checked" onclick="doSumAeFunction()" />
</tr>
</tbody>
</table>
<br />
<div>
<div>Sum of Marks</div>
<div id="sum_of_maths">Sum of Maths is: </div>
<div id="sum_of_science">Sum of Science is: </div>
</div>

To get the value in the cell before the checkbox use $(this).parent().prev('td').text():
$('input[type="checkbox"]').change(function() {
var prevCell = $(this).parent().prev('td').text();
console.log(prevCell);
})
table {
table-layout: fixed;
width: auto;
border-collapse: collapse;
border: 3px solid purple;
}
table,
th,
td {
border: 1px solid;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" rel="stylesheet" />
<table style="table table-bordered text-center" style="width:auto">
<thead>
<th>Sl No</th>
<th>English</th>
<th>Geography</th>
<th>Maths</th>
<th>Science 2</th>
<th align="center">Select</th>
</thead>
<tbody>
<tr>
<td>1</td>
<td>22</td>
<td>15</td>
<td>12</td>
<td>15</td>
<td><input type="checkbox" value="checked" /></td>
</tr>
<tr>
<td>1</td>
<td>8</td>
<td>7</td>
<td>10</td>
<td>5</td>
<td><input type="checkbox" value="checked" />
</tr>
</tbody>
</table>
<br />
<div>
<div>Sum of Marks</div>
<div id="sum_of_maths">Sum of Maths is: </div>
<div id="sum_of_science">Sum of Science is: </div>
</div>

Why is only the first button turning green? [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 3 months ago.
Improve this question
I am a noobie programmer, using MAC OS and Visual Studio Code trying to build a responsive fitness routine in HTML for personal use, as a personal project.
I am trying to get all my buttons to turn green on click, the first one is turning green fine, but the rest are not. I have uploaded a code pen here: https://codepen.io/3991chris/full/OJEZwKL
Any help would be awesome!
I tried
let btnDone = document.querySelectorAll('#done');

There's two main issues in your code. Firstly all the buttons have the same #done id applied to them, which is invalid. id must be unique within the DOM. Change these to a class.
From there you need to amend your JS code to use querySelectorAll('.done') so that it returns a collection of all the elements you can loop through. Within that loop you can bind your event handlers to each button.
Secondly, it looks like your goal is to toggle the styling of the buttons on successive clicks. Therefore you should toggle() the class on the element, not use removeClickHandler().
document.querySelectorAll('.done').forEach(btn => {
btn.addEventListener('click', e => e.target.classList.toggle('active'));
});
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td,
th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
.card {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
max-width: 300px;
margin: auto;
text-align: center;
font-family: arial;
}
.btn {
display: flex;
justify-content: center;
}
.btn .done.active {
background-color: #4cae4c;
}
button {
padding: 10px 20px;
margin: 5px;
background-color: black;
color: #fff;
border: none;
border-radius: 5px;
}
.topnav {
overflow: hidden;
background-color: blue;
flex-wrap: wrap;
}
.topnav a {
float: left;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
background-color: red;
color: white;
}
.topnav a.active {
background-color: red;
color: white;
}
<div class="card">
<div class="topnav">
Home
A
B
C
<a class="active" href="leg day d.html">D</a>
E
</div>
<h1>Leg Day D</h1>
<div class="card">
<img src="images/deadlift.jpeg" style="width:100%">
<h1>1. Deadlift</h1>
<p>Feet at 45 angle, back straight,<br>shoulders back<br> hip stiff</p>
<div class="btn">
<button class="done">Done</button>
</div>
<table>
<tr>
<th>Week</th>
<th>Set X Rep</th>
<th>Weight</th>
</tr>
<tr>
<td>1</td>
<td>4 * 8</td>
<td>60 kg</td>
</tr>
<tr>
<td>2</td>
<td>5 * 8</td>
<td>65 kg</td>
</tr>
<tr>
<td>3</td>
<td>5 * 8</td>
<td>70 kg</td>
</tr>
<tr>
<td>4</td>
<td>4 * 8</td>
<td>75 kg</td>
</tr>
</table>
</div>
<div class="card">
<img src="images/sumosquat.png" style="width:100%">
<h1>2. SumoSquats</h1>
<p>Feet at 45 angle, wide legs,<br> make sure back straight</p>
<div class="btn">
<button class="done">Done</button>
</div>
<table>
<tr>
<th>Week</th>
<th>Set X Rep</th>
<th>Weight</th>
</tr>
<tr>
<td>1</td>
<td>4 * 10</td>
<td>70 kg</td>
</tr>
<tr>
<td>2</td>
<td>5 * 10</td>
<td>75 kg</td>
</tr>
<tr>
<td>3</td>
<td>5 * 10</td>
<td>80 kg</td>
</tr>
<tr>
<td>4</td>
<td>4 * 10</td>
<td>85 kg</td>
</tr>
</table>
</div>
<div class="card">
<img src="images/flexora.webp" style="width:100%">
<h1>3. Flex Chair</h1>
<p>alig knees with chair, <br> keep back on seat</p>
<div class="btn">
<button class="done">Done</button>
</div>
<table>
<tr>
<th>Week</th>
<th>Set X Rep</th>
<th>Weight</th>
</tr>
<tr>
<td>1</td>
<td>4 * 10</td>
<td>70 kg</td>
</tr>
<tr>
<td>2</td>
<td>5 * 10</td>
<td>75 kg</td>
</tr>
<tr>
<td>3</td>
<td>5 * 10</td>
<td>75 kg</td>
</tr>
<tr>
<td>4</td>
<td>4 * 10</td>
<td>70 kg</td>
</tr>
</table>
</div>
<div class="card">
<img src="images/stepups.png" style="width:100%">
<h1>4. StepUps</h1>
<p>Use bench or box <br> and do 10 each leg,<br> up and down same leg</p>
<div class="btn">
<button class="done">Done</button>
</div>
<table>
<tr>
<th>Week</th>
<th>Set X Rep</th>
<th>Weight</th>
</tr>
<tr>
<td>1</td>
<td>4 * 20</td>
<td>15 kg</td>
</tr>
<tr>
<td>2</td>
<td>5 * 20</td>
<td>20 kg</td>
</tr>
<tr>
<td>3</td>
<td>5 * 20</td>
<td>20 kg</td>
</tr>
<tr>
<td>4</td>
<td>4 * 20</td>
<td>25 kg</td>
</tr>
</table>
</div>
<div class="card">
<img src="images/adutora.webp" style="width:100%">
<h1>5. Adutora</h1>
<p>Stretch to allow wider leg</p>
<div class="btn">
<button class="done">Done</button>
</div>
<table>
<tr>
<th>Week</th>
<th>Set X Rep</th>
<th>Weight</th>
</tr>
<tr>
<td>1</td>
<td>4 * 10</td>
<td>Max kg</td>
</tr>
<tr>
<td>2</td>
<td>5 * 10</td>
<td>Max kg</td>
</tr>
<tr>
<td>3</td>
<td>5 * 10</td>
<td>Max kg</td>
</tr>
<tr>
<td>4</td>
<td>4 * 10</td>
<td>Max kg</td>
</tr>
</table>
</div>
<div class="card">
<img src="images/pelvicthrust.jpeg" style="width:100%">
<h1>6. Pelvic Thrust</h1>
<p>Top of shoulders and chest<br>should be on bench</p>
<div class="btn">
<button class="done">Done</button>
</div>
<table>
<tr>
<th>Week</th>
<th>Set X Rep</th>
<th>Weight</th>
</tr>
<tr>
<td>1</td>
<td>4 * 10</td>
<td>70 kg</td>
</tr>
<tr>
<td>2</td>
<td>5 * 10</td>
<td>75 kg</td>
</tr>
<tr>
<td>3</td>
<td>5 * 10</td>
<td>80 kg</td>
</tr>
<tr>
<td>4</td>
<td>4 * 10</td>
<td>80 kg</td>
</tr>
</table>
</div>
<div class="card">
<img src="images/gemeossentado.webp" style="width:100%">
<h1>7. Seated Calf Raise</h1>
<p>Make sure to go slow</p>
<div class="btn">
<button class="done">Done</button>
</div>
<table>
<tr>
<th>Week</th>
<th>Set X Rep</th>
<th>Weight</th>
</tr>
<tr>
<td>1</td>
<td>4 * 10</td>
<td>60 kg</td>
</tr>
<tr>
<td>2</td>
<td>5 * 10</td>
<td>65 kg</td>
</tr>
<tr>
<td>3</td>
<td>5 * 10</td>
<td>65 kg</td>
</tr>
<tr>
<td>4</td>
<td>4 * 10</td>
<td>70 kg</td>
</tr>
</table>
</div>
<div class="card">
<img src="images/landminesquat.webp" style="width:100%">
<h1>8. Landmine Squat</h1>
<p>Feet at 45 angle, back straight,<br>shoulders back</p>
<div class="btn">
<button class="done">Done</button>
</div>
<table>
<tr>
<th>Week</th>
<th>Set X Rep</th>
<th>Weight</th>
</tr>
<tr>
<td>1</td>
<td>4 * 8</td>
<td>40 kg</td>
</tr>
<tr>
<td>2</td>
<td>5 * 8</td>
<td>45 kg</td>
</tr>
<tr>
<td>3</td>
<td>5 * 8</td>
<td>50 kg</td>
</tr>
<tr>
<td>4</td>
<td>4 * 8</td>
<td>55 kg</td>
</tr>
</table>
</div>
<div class="card">
<img src="images/pullthrough.webp" style="width:100%">
<h1>9. Pull Through</h1>
<p>Feet at 45 angle, back straight,<br>shoulders back</p>
<div class="btn">
<button class="done">Done</button>
</div>
<table>
<tr>
<th>Week</th>
<th>Set X Rep</th>
<th>Weight</th>
</tr>
<tr>
<td>1</td>
<td>4 * 8</td>
<td>20 kg</td>
</tr>
<tr>
<td>2</td>
<td>5 * 8</td>
<td>30 kg</td>
</tr>
<tr>
<td>3</td>
<td>5 * 8</td>
<td>35 kg</td>
</tr>
<tr>
<td>4</td>
<td>4 * 8</td>
<td>40 kg</td>
</tr>
</table>
</div>
<div class="card">
<img src="images/liedownlegcurl.jpeg" style="width:100%">
<h1>10. Lie Down Leg Curl</h1>
<p>Feet at 45 angle, back straight,<br>shoulders back</p>
<div class="btn">
<button class="done">Done</button>
</div>
<table>
<tr>
<th>Week</th>
<th>Set X Rep</th>
<th>Weight</th>
</tr>
<tr>
<td>1</td>
<td>4 * 8</td>
<td>50 kg</td>
</tr>
<tr>
<td>2</td>
<td>5 * 8</td>
<td>55 kg</td>
</tr>
<tr>
<td>3</td>
<td>5 * 8</td>
<td>60 kg</td>
</tr>
<tr>
<td>4</td>
<td>4 * 8</td>
<td>65 kg</td>
</tr>
</table>
</div>
</div>

I add Jquery CDN, and change your javascript.
I hope you understand it.
$(document).ready(function () {
$("div div button").click(function () {
$(this).addClass("activeButton");
});
});
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td,
th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
.card {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
max-width: 300px;
margin: auto;
text-align: center;
font-family: arial;
}
.btn {
display: flex;
justify-content: center;
}
button {
padding: 10px 20px;
margin: 5px;
background-color: black;
color: #fff;
border: none;
border-radius: 5px;
}
.topnav {
overflow: hidden;
background-color: blue;
flex-wrap: wrap;
}
.topnav a {
float: left;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
background-color: red;
color: white;
}
.topnav a.active {
background-color: red;
color: white;
}
.activeButton {
background-color: #4cae4c;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js" integrity="sha512-aVKKRRi/Q/YV+4mjoKBsE4x3H+BkegoM/em46NNlCqNTmUYADjBbeNefNxYV7giUp0VxICtqdrbqU7iVaeZNXA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<div class="card">
<div class="topnav">
Home
A
B
C
<a class="active" href="leg day d.html">D</a>
E
</div>
</div>
<div class="card">
<h1>Day 1</h1>
<img src="images/deadlift.jpeg" style="width:100%">
<h1>1. Deadlift</h1>
<p>Feet at 45 angle, back straight,<br>shoulders back<br> hip stiff</p>
<div id="btn">
<button id="done" class="">Done</button>
</div>
<table>
<tr>
<th>Week</th> <th>Set X Rep</th> <th>Weight</th>
</tr>
<tr>
<td>1</td> <td>4 * 8</td> <td>60 kg</td>
</tr>
<tr>
<td>2</td> <td>5 * 8</td> <td>65 kg</td>
</tr>
<tr>
<td>3</td> <td>5 * 8</td> <td>70 kg</td>
</tr>
<tr>
<td>4</td> <td>4 * 8</td> <td>75 kg</td>
</tr>
</table>
</div>
<div class="card">
<h1>Day 2</h1>
<img src="images/deadlift.jpeg" style="width:100%">
<h1>1. Push Up</h1>
<p>Feet at 45 angle, back straight,<br>shoulders back<br> hip stiff</p>
<div id="btn">
<button id="done" class="">Done</button>
</div>
<table>
<tr>
<th>Week</th> <th>Set X Rep</th> <th>Weight</th>
</tr>
<tr>
<td>1</td> <td>4 * 8</td> <td>60 kg</td>
</tr>
<tr>
<td>2</td> <td>5 * 8</td> <td>65 kg</td>
</tr>
<tr>
<td>3</td> <td>5 * 8</td> <td>70 kg</td>
</tr>
<tr>
<td>4</td> <td>4 * 8</td> <td>75 kg</td>
</tr>
</table>
</div>
<div class="card">
<h1>Day 3</h1>
<img src="images/deadlift.jpeg" style="width:100%">
<h1>1. Jump</h1>
<p>Feet at 45 angle, back straight,<br>shoulders back<br> hip stiff</p>
<div id="btn">
<button id="done" class="">Done</button>
</div>
<table>
<tr>
<th>Week</th> <th>Set X Rep</th> <th>Weight</th>
</tr>
<tr>
<td>1</td> <td>4 * 8</td> <td>60 kg</td>
</tr>
<tr>
<td>2</td> <td>5 * 8</td> <td>65 kg</td>
</tr>
<tr>
<td>3</td> <td>5 * 8</td> <td>70 kg</td>
</tr>
<tr>
<td>4</td> <td>4 * 8</td> <td>75 kg</td>
</tr>
</table>
</div>

CSS Table - Color effect on mouse over in 3 tables [duplicate]

This question already has answers here:
JavaScript: Bold all table td entries which contain "*sometext*" on mouse-over
(3 answers)
Closed 3 years ago.
I have 3 tables with information inside. On mouse over the column and line gets colored. This works perfect for each table individually, but I want it this way:
If my mouse is on field 3 in table 1, not only get the field 3 in table 1 colored, but also in table 2 and table 3.
table {
overflow: hidden;
}
tr:hover {
background-color: #ffa;
}
td,
th {
position: relative;
width: 50px;
height: 20px;
text-align: center;
}
td:hover::after,
th:hover::after {
content: "";
position: absolute;
background-color: #ffa;
left: 0;
top: -5000px;
height: 10000px;
width: 100%;
z-index: -1;
}
Table 1
<table border=1>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>mouse over on this field</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>
</table>
Table 2
<table border=1>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>should also color this field</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>
</table>
Table 3
<table border=1>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>and this one</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>
</table>

Using jQuery index() you can get the row index and column index of the hovered cell and add a class to the corresponding cells in the other tables
Fiddle Demo
const $tables = $('table')
$('td, th').hover(function() {
const $cell = $(this),
$row = $cell.parent(),
$table = $cell.closest('table'),
cIdx = $cell.index(),
rIdx = $row.index();
$tables.not($table).each(function() {
$(this).find('tr').eq(rIdx).children().eq(cIdx).addClass('activeCell');
});
}, function() {
$('.activeCell').removeClass('activeCell')
})
table {
overflow: hidden;
}
.activeCell,
tr:hover {
background-color: #ffa;
}
td,
th {
position: relative;
width: 50px;
height: 20px;
text-align: center;
}
td:hover::after,
th:hover::after {
content: "";
position: absolute;
background-color: #ffa;
left: 0;
top: -5000px;
height: 10000px;
width: 100%;
z-index: -1;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Table 1
<table border=1>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>mouse over on this field</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>
</table>
Table 2
<table border=1>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>should also color this field</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>
</table>
Table 3
<table border=1>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>and this one</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>
</table>

using jquery sortable with css transform/transition

I have a page that uses transform to slide the content when navigating. Some of the content has jQuery sortable table rows. At first, the sorting works as expected. But after clicking a nav item (thus applying a transform and sliding to the desired content), sorting does not act as expected. Instead, when you click on the row to be dragged, it drops below the cursor making it hard to sort. See the CodePen below as an example. Try dragging a row before clicking on the nav, then see the difference after clicking the nav.
Is there a way around this (I have no idea where to start)? Or do I need to find a different way sliding my content?
https://codepen.io/thespareroomstudio/pres/XjrEyg
<nav>
<ul>
<li id='goto_slide-1' class='slideNavItem'>Home</li>
<li id='goto_slide-2' class='slideNavItem'>Not Home</li>
<li id='goto_slide-3' class='slideNavItem'>Far from home</li>
</ul>
</nav>
<main>
<div id='slide-1' class='slide active'>
<table>
<caption>This is a table at home</captin>
<thead>
<tr>
<td>Col 1</td>
<td>Col 2</td>
<td>Col 3</td>
<td>Col 4</td>
<td>Col 5</td>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
</tbody>
</table>
</div>
<div id='slide-2' class='slide inactive'>
<table>
<caption>This is a table not at home</captin>
<thead>
<tr>
<td>Col 1</td>
<td>Col 2</td>
<td>Col 3</td>
<td>Col 4</td>
<td>Col 5</td>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
</tbody>
</table>
</div>
<div id='slide-3' class='slide inactive'>
<table>
<caption>This is a table far from home</captin>
<thead>
<tr>
<td>Col 1</td>
<td>Col 2</td>
<td>Col 3</td>
<td>Col 4</td>
<td>Col 5</td>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
</tbody>
</table>
</div>
body {
overflow: hidden;
}
nav ul li {
display: inline-block;
margin-left: 1em;
cursor: pointer;
}
table {
border-collapse: collapse;
border: 1px solid #000;
margin-bottom: 1em;
}
main {
display: flex;
width: 303%;
}
.slide {
width: 100%;
margin: 1em;
}
table tr:nth-child(even) {
background-color: lightgrey;
}
table td {
border: 1px solid lightgray;
}
#slide-1 table {
width: 100%;
}
#slide-1 table caption {
background-color: lightblue;
border: 1px solid #000;
}
#slide-2 table {
width: 100%;
}
#slide-2 table caption {
background-color: lightgreen;
border: 1px solid #000;
}
#slide-3 table {
width: 100%;
}
#slide-3 table caption {
background-color: lightyellow;
border: 1px solid #000;
}
$("tbody").sortable({
items: "> tr"
});
$(document).on("click", ".slideNavItem", function() {
var navID = $(this).attr('id');
console.log(navID);
var slideTo = $('#' + navID.split("_")[1]);
console.log(slideTo);
var inactiveElems = $("main").find(".slide.inactive").toggleClass("inactive");
var curActiveElem = $("main").find(".slide.active");
var wrapper = slideTo.closest("main");
console.log(wrapper);
var button = $(this);
var wrapperInlineStyles = wrapper.attr('styles');
if (wrapperInlineStyles === undefined) {
wrapperInlineStyles = ""
}
var elemPos = slideTo.offset().left;
console.log(elemPos);
var moveTo = (wrapper.offset().left) - (elemPos);
console.log(moveTo);
wrapper.css({
"transform": "translate(" + moveTo + "px, 0)",
"transition": "1s ease-in-out"
});
wrapper.one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend',
function(e) {
$("main").find(".slide.active").removeClass("active") // remove active class from old position
slideTo.addClass("active"); // add active classs to new position
$("main").find(".slide").not(".active").addClass("inactive"); // now add hide (add inactive class to)the other elemens
wrapper.css({
"transition": "none"
});
});
});

It's probably a problem with jQuery having trouble calculating position with static positioning and translate transform. One easy solution would be to set your main element to position absolute and apply the -16 translate you apply when returning home. Like this:
main {
display: flex;
width: 303%;
position: absolute;
transform: translateX(-16px)
}
http://codepen.io/anon/pen/bwqPqk

CSS/HTML Div Resizing and Table positioning

I have 3 divs, the parent div, child div at the top and another on the bottom. Any help will be highly appreciated, here is what I want to achieve:
When the top div resizes/increases its size, the bottom div that contains a table will shrink but remain in its position. Please see below the mock up so that you can clearly visualize it.
Here is my Mock Up Image
Here is my JSFiddle: https://jsfiddle.net/koykoys/t09v854r/8/
$("#btnExpand").click(function(){
$(#top).css("height","400px");
});
.wrapper{
height: 73vh;
display: flex;
flex-direction: column;
border: 2px solid red;
}
#top{
border:2px solid blue;
position:relative;
height:100px
}
#bottom{
border:2px solid green;
position:relative;
height:100%"
}
table, th, td {
border: 1px solid black;
}
<div class="wrapper">
<div id "expand">
<input id = "btnExpand" type="button" value="Expand Blue Div"/>
</div>
<div id="top"></div>
</br>
<div id "Download CSV">
<button >
Download CSV of Table
</button>
</div>
<div id="bottom" style="border:2px solid green;position:relative;height:100%" >
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Firstname</th>
<th>Lastname</th>
<th>Firstname</th>
<th>Lastname</th>
<th>Firstname</th>
</tr>
<tr>
<td>John</td>
<td>Jaranjan</td>
<td>John</td>
<td>Jaranjan</td>
<td>John</td>
<td>Jaranjan</td>
<td>John</td>
</tr>
<tr>
<td>Boom</td>
<td>Panes</td> <td>John</td>
<td>Jaranjan</td>
<td>John</td>
<td>Jaranjan</td>
<td>John</td>
</tr>
<tr>
<td>Boom</td>
<td>Panes</td> <td>John</td>
<td>Jaranjan</td>
<td>John</td>
<td>Jaranjan</td>
<td>John</td>
</tr>
<tr>
<td>Boom</td>
<td>Panes</td> <td>John</td>
<td>Jaranjan</td>
<td>John</td>
<td>Jaranjan</td>
<td>John</td>
</tr>
<tr>
<td>Boom</td>
<td>Panes</td> <td>John</td>
<td>Jaranjan</td>
<td>John</td>
<td>Jaranjan</td>
<td>John</td>
</tr>
<tr>
<td>Boom</td>
<td>Panes</td> <td>John</td>
<td>Jaranjan</td>
<td>John</td>
<td>Jaranjan</td>
<td>John</td>
</tr>
</table>
</div>
</div>

Set your wrapper height to auto.
$(document).ready(function(){
$("#btnExpand").click(function(){
$('#top').animate({
'height' : '400px'
});
});
});
.wrapper{
width:100%;
height: auto;
display: flex;
flex-direction: column;
border: 2px solid red;
}
#top{
border:2px solid blue;
position:relative;
height:100px;
}
#bottom{
border:2px solid green;
position:relative;
height:100%"
}
table, th, td {
border: 1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div id = "expand">
<input id = "btnExpand" type="button" value="Expand Blue Div"/>
</div>
<div id="top" >
</div>
</br>
<div id = "Download CSV">
<button >
Download CSV of Table
</button>
</div>
<div id="bottom" style="border:2px solid green;position:relative;height:100%" >
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Firstname</th>
<th>Lastname</th>
<th>Firstname</th>
<th>Lastname</th>
<th>Firstname</th>
</tr>
<tr>
<td>John</td>
<td>Jaranjan</td>
<td>John</td>
<td>Jaranjan</td>
<td>John</td>
<td>Jaranjan</td>
<td>John</td>
</tr>
<tr>
<td>Boom</td>
<td>Panes</td> <td>John</td>
<td>Jaranjan</td>
<td>John</td>
<td>Jaranjan</td>
<td>John</td>
</tr>
<tr>
<td>Boom</td>
<td>Panes</td> <td>John</td>
<td>Jaranjan</td>
<td>John</td>
<td>Jaranjan</td>
<td>John</td>
</tr>
<tr>
<td>Boom</td>
<td>Panes</td> <td>John</td>
<td>Jaranjan</td>
<td>John</td>
<td>Jaranjan</td>
<td>John</td>
</tr>
<tr>
<td>Boom</td>
<td>Panes</td> <td>John</td>
<td>Jaranjan</td>
<td>John</td>
<td>Jaranjan</td>
<td>John</td>
</tr>
<tr>
<td>Boom</td>
<td>Panes</td> <td>John</td>
<td>Jaranjan</td>
<td>John</td>
<td>Jaranjan</td>
<td>John</td>
</tr>
</table>
</div>

wrapper height must be auto:
.wrapper{
height: auto;
display: flex;
flex-direction: column;
border: 2px solid red;
}
And you've forgotten the double-quotes:
$("#top").height("400px");

Here's new js fiddle that works https://jsfiddle.net/whp257jp/
You had errors in your html markup. I fixed it.
<div class="wrapper">
<div id="expand">
<input id="btnExpand" type="button" value="Expand Blue Div"/>
</div>
<div id="top" >
</div>
<br/>
jQuery:
$("#btnExpand").click(function(){
$('#top').css("height","400px");
});
It's not full solution for your task. I just made your code work.
Task that u given pretty hard for u as beginner. U need to learn css, html and jQuery more deeply to solve this task.

Categories