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>
Related
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>
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
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.
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>
I have the following problem:
I have to list several items each with several properties on a web page. The listing is done in two HTML tables. One table for the headers and one table for the items. This separation is needed in order to have possibility to scroll only through the list. (It would be odd to have a scrollbar in the header section). AFAIK there is only one way to do scrolling in a list in HTML is the div overflow property.
The problem is that I need to set the width of columns ( elements) in the whole listing i.e. in header and in the elements list. Here is a simplified example of how it is done now:
<table width="98%">
<tr>
<td>1</td> <td>2</td> <td>3</td> <td>4</td>
</tr>
<div style="width: 100%; height: 300px; overflow-y:scroll">
<table>
<tr>
<td>123456789101112</td> <td>2</td> <td>3</td> <td>4</td>
</tr>
</table>
</div>
</table>
The problem is that since the elements in the list may have long (I mean many characters) values the browsers expand the cells even if width attribute is used. Since the header is in a separate its columns will have a different length then the columns of the div's .
So far I have tried to let the browser render the columns in the list and then get those computed styles and apply them to the header's columns but it seems that the header columns do not get exactly that widths. I have had the same problem in other places in the project, but since there the text widths were the constant I used pixels for the widths, different lengths in FF and in IE8, but now the problem is - I think- even more complex.
How can I make the columns have the same width in both tables?
Your example is invalid HTML. I wouldn't recommend using that way at all.
The only way to make all the columns have the same width (without the help of JavaScript) is in fact having them in the same table.
Check out this question. I haven't tested them, but some of the answers look like they provide the functionality you need using only one table element using thead and tbody elements.
The following example uses JavaScript to set the width of header cells:
<head>
<style>
#headerTable {
background-color: #a0f0a0;
font-size: 18px;
font-weight: bold;
}
#headerTable td {
text-align: center;
}
#itemsDiv {
height: 300px;
overflow:auto
}
#itemsTable {
background-color: #e0e0b0;
font-size: 14px;
}
#itemsTable td {
padding: 5px;
text-align: right;
}
</style>
<script>
function ResizeHeaderTable () {
var headerTable = document.getElementById ("headerTable");
var itemsTable = document.getElementById ("itemsTable");
// resize header cells
if (headerTable.rows.length > 0 && itemsTable.rows.length > 0) {
var firstHeaderRow = headerTable.rows[0];
var firstItemsRow = itemsTable.rows[0];
var colsNum = Math.min (firstHeaderRow.cells.length, firstItemsRow.cells.length);
for (var i = 0; i < colsNum; i++) {
var cellWidth = firstItemsRow.cells[i].offsetWidth;
firstHeaderRow.cells[i].style.width = cellWidth + "px";
}
}
// set the width of itemsDiv
var itemsDiv = document.getElementById ("itemsDiv");
itemsDiv.style.width = itemsTable.offsetWidth + "px";
// if the vertical scrollbar of itemsDiv is displayed, itemsDiv must be wider
var scrollWidth = itemsTable.offsetWidth - itemsDiv.clientWidth;
if (scrollWidth > 0) {
itemsDiv.style.width = itemsTable.offsetWidth + scrollWidth + "px";
}
}
</script>
</head>
<body onload="ResizeHeaderTable ()">
<table id="headerTable" cellpadding="0px" cellspacing="0px" border="0px">
<tr>
<td>1</td> <td>2</td> <td>3</td> <td>4</td>
</tr>
</table>
<div id="itemsDiv">
<table id="itemsTable" cellpadding="0px" cellspacing="0px" border="0px">
<tr>
<td>123456789101112</td> <td>2938547</td> <td>34534546</td> <td>42222221134</td>
</tr>
<tr>
<td>123</td> <td>29385</td> <td>34534546444446232</td> <td>42222221</td>
</tr>
<tr>
<td>123456789101112</td> <td>2938547</td> <td>34534546</td> <td>42222221134</td>
</tr>
<tr>
<td>123</td> <td>29385</td> <td>34534546444446232</td> <td>42222221</td>
</tr>
<tr>
<td>123456789101112</td> <td>2938547</td> <td>34534546</td> <td>42222221134</td>
</tr>
<tr>
<td>123</td> <td>29385</td> <td>34534546444446232</td> <td>42222221</td>
</tr>
<tr>
<td>123456789101112</td> <td>2938547</td> <td>34534546</td> <td>42222221134</td>
</tr>
<tr>
<td>123</td> <td>29385</td> <td>34534546444446232</td> <td>42222221</td>
</tr>
<tr>
<td>123456789101112</td> <td>2938547</td> <td>34534546</td> <td>42222221134</td>
</tr>
<tr>
<td>123</td> <td>29385</td> <td>34534546444446232</td> <td>42222221</td>
</tr>
<tr>
<td>123456789101112</td> <td>2938547</td> <td>34534546</td> <td>42222221134</td>
</tr>
<tr>
<td>123</td> <td>29385</td> <td>34534546444446232</td> <td>42222221</td>
</tr>
<tr>
<td>123456789101112</td> <td>2938547</td> <td>34534546</td> <td>42222221134</td>
</tr>
<tr>
<td>123</td> <td>29385</td> <td>34534546444446232</td> <td>42222221</td>
</tr>
<tr>
<td>123456789101112</td> <td>2938547</td> <td>34534546</td> <td>42222221134</td>
</tr>
<tr>
<td>123</td> <td>29385</td> <td>34534546444446232</td> <td>42222221</td>
</tr>
<tr>
<td>123456789101112</td> <td>2938547</td> <td>34534546</td> <td>42222221134</td>
</tr>
<tr>
<td>123</td> <td>29385</td> <td>34534546444446232</td> <td>42222221</td>
</tr>
<tr>
<td>123456789101112</td> <td>2938547</td> <td>34534546</td> <td>42222221134</td>
</tr>
<tr>
<td>123</td> <td>29385</td> <td>34534546444446232</td> <td>42222221</td>
</tr>
<tr>
<td>123456789101112</td> <td>2938547</td> <td>34534546</td> <td>42222221134</td>
</tr>
<tr>
<td>123</td> <td>29385</td> <td>34534546444446232</td> <td>42222221</td>
</tr>
<tr>
<td>123456789101112</td> <td>2938547</td> <td>34534546</td> <td>42222221134</td>
</tr>
<tr>
<td>123</td> <td>29385</td> <td>34534546444446232</td> <td>42222221</td>
</tr>
<tr>
<td>123456789101112</td> <td>2938547</td> <td>34534546</td> <td>42222221134</td>
</tr>
<tr>
<td>123</td> <td>29385</td> <td>34534546444446232</td> <td>42222221</td>
</tr>
<tr>
<td>123456789101112</td> <td>2938547</td> <td>34534546</td> <td>42222221134</td>
</tr>
<tr>
<td>123</td> <td>29385</td> <td>34534546444446232</td> <td>42222221</td>
</tr>
</table>
</div>
</body>
When the page has been loaded, the ResizeHeaderTable method is called. The ResizeHandlerTable method uses the offsetWidth property to retrieve and the style.width property to set the width of cells. Finally, it set the width of the div that contains the table for the items.
If you need further details about the offsetWidth property, the following link will be useful:
offsetWidth property
I haven't tested it a lot but this appears to work:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head><title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css"><!--
tbody{
width: 100%;
height: 300px;
overflow-y:scroll;
}
--></style>
</head>
<body>
<table width="98%">
<thead>
<tr>
<td>1</td> <td>2</td> <td>3</td> <td>4</td>
</tr>
</thead>
<tbody>
<tr>
<td>123456789101112</td> <td>2</td> <td>3</td> <td>4</td>
</tr>
<tr>
<td>123456789101112</td> <td>2</td> <td>3</td> <td>4</td>
</tr>
<tr>
<td>123456789101112</td> <td>2</td> <td>3</td> <td>4</td>
</tr>
<tr>
<td>123456789101112</td> <td>2</td> <td>3</td> <td>4</td>
</tr>
<tr>
<td>123456789101112</td> <td>2</td> <td>3</td> <td>4</td>
</tr>
<tr>
<td>123456789101112</td> <td>2</td> <td>3</td> <td>4</td>
</tr>
<tr>
<td>123456789101112</td> <td>2</td> <td>3</td> <td>4</td>
</tr>
<tr>
<td>123456789101112</td> <td>2</td> <td>3</td> <td>4</td>
</tr>
<tr>
<td>123456789101112</td> <td>2</td> <td>3</td> <td>4</td>
</tr>
<tr>
<td>123456789101112</td> <td>2</td> <td>3</td> <td>4</td>
</tr>
<tr>
<td>123456789101112</td> <td>2</td> <td>3</td> <td>4</td>
</tr>
<tr>
<td>123456789101112</td> <td>2</td> <td>3</td> <td>4</td>
</tr>
<tr>
<td>123456789101112</td> <td>2</td> <td>3</td> <td>4</td>
</tr>
<tr>
<td>123456789101112</td> <td>2</td> <td>3</td> <td>4</td>
</tr>
<tr>
<td>123456789101112</td> <td>2</td> <td>3</td> <td>4</td>
</tr>
<tr>
<td>123456789101112</td> <td>2</td> <td>3</td> <td>4</td>
</tr>
<tr>
<td>123456789101112</td> <td>2</td> <td>3</td> <td>4</td>
</tr>
<tr>
<td>123456789101112</td> <td>2</td> <td>3</td> <td>4</td>
</tr>
<tr>
<td>123456789101112</td> <td>2</td> <td>3</td> <td>4</td>
</tr>
<tr>
<td>123456789101112</td> <td>2</td> <td>3</td> <td>4</td>
</tr>
</table>
</body>
</html>
Update: It only seems to work in Firefox.