Javascript for making the element disappear and reappear after scroll - javascript

I want an element to disappear and reappear after scrolling from the top. I found javascript for this, but something is not right. I don't know much about JS, I found it here, inserted it, but it doesn't work as it should - it only makes element to change position. Multiple examples of javascript I found on StackExchange and on the Internet don't work either for some reason.
How do I make the element disappear after scrolling down and reappear after scrolling back to the top?
I also have set CSS for this element on smaller screens, should I make a separate script for smaller screens then?
var prevScrollpos = window.pageYOffset;
window.onscroll = function() {
var currentScrollPos = window.pageYOffset;
if (prevScrollpos > currentScrollPos) {
document.getElementById("stub").style.top = "0";
} else {
document.getElementById("stub").style.top = "150px";
}
prevScrollpos = currentScrollPos;
}
.stub {
background-color: #577284;
float: right;
position: fixed;
right: 0;
text-transform: uppercase;
font-family: 'Yanone Kaffeesatz', sans-serif;
font-weight: 700;
padding: 10px;
border: 3px solid #ff8000;
margin-right: 1em;
}
#stublink {
color: #F3E0BE;
text-decoration: none;
}
.stub:hover .pagenav {
display: block;
position: absolute;
top: 100%;
left: -3px;
width: calc(100% + 6px);
}
.pagenav {
background-color: #577284;
display: none;
text-transform: uppercase;
font-size: 0.8em;
font-family: 'Yanone Kaffeesatz', sans-serif;
font-weight: 700;
border: 3px solid #ff8000;
border-top: none;
padding-bottom: 10px;
}
.pagenav a {
display: block;
color: #F3E0BE;
padding: 6px 0px 0px 8px;
}
.pagenav a:hover {
box-shadow: inset 5px 0 0 0 #ff8000
}
body {
height: 200vh
}
;
#media only screen and (max-width: 670px) {
.stub {
right: 0;
left: auto;
top: 0;
bottom: auto;
}
.stub:hover .pagenav {
display: block;
position: absolute;
top: 100%;
left: -3px;
}
}
<body>
<div class="stub" id="stub">
<div class="pagenav">
<a href="#last">
<table>
<tr>
<td>02.19 03.20</td>
<td>:</td>
<td class="two"></td>
</tr>
</table>
</a>
<a href="#previous">
<table>
<tr>
<td>02.18 02.19</td>
<td>:</td>
<td class="two"></td>
</tr>
</table>
</a>
<a href="#dec17">
<table>
<tr>
<td>12.17 04.18</td>
<td>:</td>
<td class="two"></td>
</tr>
</table>
</a>
<a href="#nov17">
<table>
<tr>
<td>11.17 01.18</td>
<td>:</td>
<td class="two"></td>
</tr>
</table>
</a>
<a href="#sep16">
<table>
<tr>
<td>09.16 11.17</td>
<td>:</td>
<td class="two"></td>
</tr>
</table>
</a>
<a href="#sep15">
<table>
<tr>
<td>09.15 08.16</td>
<td>:</td>
<td class="two"></td>
</tr>
</table>
</a>
<a href="#jan15">
<table>
<tr>
<td>01.15 03.16</td>
<td>:</td>
<td class="two"></td>
</tr>
</table>
</a>
<a href="#jan14">
<table>
<tr>
<td>01.14 08.15</td>
<td>:</td>
<td class="two"></td>
</tr>
</table>
</a>
</div><a id="stublink" href=#>Pagemenu</a>
</div>
<script></script>
</body>

change that line document.getElementById("stub").style.top = "0"; for that document.getElementById("stub").style.block = "block";
var prevScrollpos = window.pageYOffset;
window.onscroll = function() {
var currentScrollPos = window.pageYOffset;
if (prevScrollpos > currentScrollPos) {
document.getElementById("stub").style.display = "block";
} else {
document.getElementById("stub").style.display = "none";
}
prevScrollpos = currentScrollPos;
}
.stub {
background-color: #577284;
float: right;
position: fixed;
right: 0;
text-transform: uppercase;
font-family: 'Yanone Kaffeesatz', sans-serif;
font-weight: 700;
padding: 10px;
border: 3px solid #ff8000;
margin-right: 1em;
}
#stublink {
color: #F3E0BE;
text-decoration: none;
}
.stub:hover .pagenav {
display: block;
position: absolute;
top: 100%;
left: -3px;
width: calc(100% + 6px);
}
.pagenav {
background-color: #577284;
display: none;
text-transform: uppercase;
font-size: 0.8em;
font-family: 'Yanone Kaffeesatz', sans-serif;
font-weight: 700;
border: 3px solid #ff8000;
border-top: none;
padding-bottom: 10px;
}
.pagenav a {
display: block;
color: #F3E0BE;
padding: 6px 0px 0px 8px;
}
.pagenav a:hover {
box-shadow: inset 5px 0 0 0 #ff8000
}
body {
height: 200vh
}
;
#media only screen and (max-width: 670px) {
.stub {
right: 0;
left: auto;
top: 0;
bottom: auto;
}
.stub:hover .pagenav {
display: block;
position: absolute;
top: 100%;
left: -3px;
}
}
<body>
<div class="stub" id="stub">
<div class="pagenav">
<a href="#last">
<table>
<tr>
<td>02.19 03.20</td>
<td>:</td>
<td class="two"></td>
</tr>
</table>
</a>
<a href="#previous">
<table>
<tr>
<td>02.18 02.19</td>
<td>:</td>
<td class="two"></td>
</tr>
</table>
</a>
<a href="#dec17">
<table>
<tr>
<td>12.17 04.18</td>
<td>:</td>
<td class="two"></td>
</tr>
</table>
</a>
<a href="#nov17">
<table>
<tr>
<td>11.17 01.18</td>
<td>:</td>
<td class="two"></td>
</tr>
</table>
</a>
<a href="#sep16">
<table>
<tr>
<td>09.16 11.17</td>
<td>:</td>
<td class="two"></td>
</tr>
</table>
</a>
<a href="#sep15">
<table>
<tr>
<td>09.15 08.16</td>
<td>:</td>
<td class="two"></td>
</tr>
</table>
</a>
<a href="#jan15">
<table>
<tr>
<td>01.15 03.16</td>
<td>:</td>
<td class="two"></td>
</tr>
</table>
</a>
<a href="#jan14">
<table>
<tr>
<td>01.14 08.15</td>
<td>:</td>
<td class="two"></td>
</tr>
</table>
</a>
</div><a id="stublink" href=#>Pagemenu</a>
</div>
<script></script>
</body>

You need to play with the style.display property of the element with id "stub" and set it to:
"block" when prevScrollPos > currentScrollPos;
"none" in the other cases.
var prevScrollPos = window.pageYOffset;
window.onscroll = function() {
var currentScrollPos = window.pageYOffset;
document.getElementById("stub").style.display = prevScrollPos > currentScrollPos ? "block" : "none";
prevScrollPos = currentScrollPos;
}
.stub {
background-color: #577284;
float: right;
position: fixed;
right: 0;
text-transform: uppercase;
font-family: 'Yanone Kaffeesatz', sans-serif;
font-weight: 700;
padding: 10px;
border: 3px solid #ff8000;
margin-right: 1em;
}
#stublink {
color: #F3E0BE;
text-decoration: none;
}
.stub:hover .pagenav {
display: block;
position: absolute;
top: 100%;
left: -3px;
width: calc(100% + 6px);
}
.pagenav {
background-color: #577284;
display: none;
text-transform: uppercase;
font-size: 0.8em;
font-family: 'Yanone Kaffeesatz', sans-serif;
font-weight: 700;
border: 3px solid #ff8000;
border-top: none;
padding-bottom: 10px;
}
.pagenav a {
display: block;
color: #F3E0BE;
padding: 6px 0px 0px 8px;
}
.pagenav a:hover {
box-shadow: inset 5px 0 0 0 #ff8000
}
body {
height: 200vh
}
;
#media only screen and (max-width: 670px) {
.stub {
right: 0;
left: auto;
top: 0;
bottom: auto;
}
.stub:hover .pagenav {
display: block;
position: absolute;
top: 100%;
left: -3px;
}
}
<div class="stub" id="stub">
<div class="pagenav">
<a href="#last">
<table>
<tr>
<td>02.19 03.20</td>
<td>:</td>
<td class="two"></td>
</tr>
</table>
</a>
<a href="#previous">
<table>
<tr>
<td>02.18 02.19</td>
<td>:</td>
<td class="two"></td>
</tr>
</table>
</a>
<a href="#dec17">
<table>
<tr>
<td>12.17 04.18</td>
<td>:</td>
<td class="two"></td>
</tr>
</table>
</a>
<a href="#nov17">
<table>
<tr>
<td>11.17 01.18</td>
<td>:</td>
<td class="two"></td>
</tr>
</table>
</a>
<a href="#sep16">
<table>
<tr>
<td>09.16 11.17</td>
<td>:</td>
<td class="two"></td>
</tr>
</table>
</a>
<a href="#sep15">
<table>
<tr>
<td>09.15 08.16</td>
<td>:</td>
<td class="two"></td>
</tr>
</table>
</a>
<a href="#jan15">
<table>
<tr>
<td>01.15 03.16</td>
<td>:</td>
<td class="two"></td>
</tr>
</table>
</a>
<a href="#jan14">
<table>
<tr>
<td>01.14 08.15</td>
<td>:</td>
<td class="two"></td>
</tr>
</table>
</a>
</div><a id="stublink" href=#>Pagemenu</a>
</div>

I would use the intersection observer api
https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API
Be careful if you want to use the display css property because with display property:
if an element is display: none it will not be rendered at all (try with visibility: hidden or with opacity: 0)
css transition do not work.
So I would suggest to use opacity.
css
.stub {
transition: opacity 1s linear;
opacity: 0;
}
.stub.triggered {
opacity: 1;
}
javascript:
const options = {
root: null, // The document viewport (default)
rootMargin: '0px', // No offset from the root element (default)
threshold: 1.0, // Full intersection into the root element
};
const obs = new IntersectionObserver( elms => {
elms.forEach( curr => {
if(curr.intersectionRatio < options.threshold) {
curr.target.classList.remove('triggered')
} else {
curr.target.classList.add('triggered')
}
})
}, options)
Array.from(document.querySelectorAll('.stub')).forEach(obs.observe.bind(obs))
As you can see on the MDN page, there is a Internet Explorer polyfill if needed https://github.com/w3c/IntersectionObserver

Related

Set class in HTML table, but not for the entire column

Here is the situation, I have a HTML file with a table, the table gets filled with XML data. The last column (10) got a number in it: 1, 2, 3, 4 or 5. I've got 5 lines of jQuery which look for the number and give the cell with the corresponding number a specific class, this works fine (The cell has 0% opacity because it's not meant to be "shown", but for our means, it works fine like that).
Now the problem is: Column 7 and 8 need to get that class to without the whole column getting it, just the row with the specific number.
I've got a jsfiddle so you can see the code and stuff:
The jQuery:
$("td:nth-child(10):contains('1')").addClass('disaster');
$("td:nth-child(10):contains('2')").addClass('high');
$("td:nth-child(10):contains('3')").addClass('average');
$("td:nth-child(10):contains('4')").addClass('warning');
$("td:nth-child(10):contains('5')").addClass('information');
Note: The data in the table is just for testing, the real xml will have those number of 1, 2, 3, 4, 5 in like 100 rows in a random order.
EDIT: Got a picture of how it should look:
$("td:nth-child(10):contains('1')").addClass('disaster');
$("td:nth-child(10):contains('2')").addClass('high');
$("td:nth-child(10):contains('3')").addClass('average');
$("td:nth-child(10):contains('4')").addClass('warning');
$("td:nth-child(10):contains('5')").addClass('information');
td:nth-child(10) {
opacity: 0;
}
.disaster{
background-color: #E45858
}
.high{
background-color: #E87658
}
.average{
background-color: #FEA058
}
.warning{
background-color: #FEC858
}
.information{
background-color: #7498FE
}
/*CSS for main elements*/
div {
max-width: 2600px;
display: block;
}
body {
font-family: Arial, Tahoma, Verdana, sans-serif;
background-color: #FFFFFF;
}
table {
text-align: left;
border-collapse: collapse;
}
th {
font-size: 75%;
font-weight: normal;
color: #768C98;
padding-top: 5px;
padding-bottom: 5px;
border-bottom: 2px solid #DCE2E4;
}
td {
font-size: 75%;
color: #1F2C33;
height: 25px;
padding-top: 1px;
padding-bottom: 1px;
border-bottom: 1px solid #EAEEF0;
}
img {
position: absolute; left: -100px;
margin-top: 165px;
transform: rotate(270deg);
}
/*CSS for Hover*/
td:nth-child(1):hover{
text-decoration: underline;
}
td:nth-child(1) {
background-color: #FFFFFF;
}
td:nth-child(2) {
background-color: #FFFFFF;
}
tr.NoHover:hover{
background-color: #FFFFFF;
}
tr:hover {
background-color: #E8F5FF;
}
/*Column specific CSS*/
th.col1 {
text-align: right;
width: 240px;
padding-right: 18px
}
th.col2 {
width: 11px;
padding: none;
}
th.col3 {
text-align: left;
width: 188px;
padding-left: 10px;
}
th.col4 {
text-align: left;
width: 70px;
}
th.col5 {
text-align: left;
width: 77px;
padding-left: 82px;
}
th.col6 {
text-align: left;
width: 430px;
}
th.col7 {
text-align: left;
padding-left: 10px;
width: 497px;
}
th.col8 {
text-align: left;
width: 498px;
}
th.col9 {
text-align: left;
padding-left: 10px;
width: 75px;
}
td:nth-child(1) {
text-align: right;
color: #0274B8;
padding-right: 18px;
border-right: 2px solid #AAD6F0;
border-bottom: none;
}
td:nth-child(2) {
color: white;
border-bottom: none;
width: 11px;
padding: none;
}
td:nth-child(3) {
text-align: left;
text-decoration: underline dotted;
padding-left: 10px;
border-bottom: 1px solid #EAEEF0;
}
td:nth-child(4) {
text-align: left;
color: #DC0000;
border-bottom: 1px solid #EAEEF0;
}
td:nth-child(5) {
text-align: right;
text-decoration: underline dotted;
padding-right: 15px;
border-bottom: 1px solid #EAEEF0;
}
td:nth-child(6) {
text-align: left;
text-decoration: underline dotted;
border-bottom: 1px solid #EAEEF0;
}
td:nth-child(7) {
text-align: left;
text-decoration: underline dotted ;
padding-left: 10px;
border-bottom: 1px solid #EAEEF0;
}
td:nth-child(8) {
text-align: left;
text-decoration: underline dotted;
border-bottom: 1px solid #EAEEF0;
}
td:nth-child(9) {
text-align: left;
padding-left: 10px;
border-bottom: 1px solid #EAEEF0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<body>
<br><br>
<div id="main">
<table id="Table">
<thead>
<tr class="NoHover">
<th class="col1" scope='col' >Time▼</th>
<th class="col2" scope='col' ></th>
<th class="col3" scope='col' >Client</th>
<th class="col4" scope='col' >Status</th>
<th class="col5" scope='col' >Site</th>
<th class="col6" scope='col' >Host</th>
<th class="col7" scope='col' >Problem • Cause</th>
<th class="col8" scope='col' ></th>
<th class="col9" scope='col' >Frequency</th>
<th class="col10" scope='col'></th>
</tr>
</thead>
<tbody id="TableData">
<tr>
<td>2017-11-22</td>
<td>1</td>
<td>Client 1</td>
<td>FAILING</td>
<td>Site 1</td>
<td>PC1</td>
<td>test1</td>
<td>Unable to open service</td>
<td>24x7</td>
<td>1</td>
</tr>
<tr>
<td>2017-11-22</td>
<td>1</td>
<td>Client 2</td>
<td>FAILING</td>
<td>Site 2</td>
<td>PC2</td>
<td>test2</td>
<td>Unable to open service</td>
<td>24x7</td>
<td>2</td>
</tr>
<tr>
<td>2017-11-22</td>
<td>1</td>
<td>Client 3</td>
<td>FAILING</td>
<td>Site 3</td>
<td>PC3</td>
<td>test3</td>
<td>Unable to open service</td>
<td>24x7</td>
<td>3</td>
</tr>
<tr>
<td>2017-11-22</td>
<td>1</td>
<td>Client 4</td>
<td>FAILING</td>
<td>Site 4</td>
<td>PC4</td>
<td>test4</td>
<td>Unable to open service</td>
<td>24x7</td>
<td>4</td>
</tr>
<tr>
<td>2017-11-22</td>
<td>1</td>
<td>Client 5</td>
<td>FAILING</td>
<td>Site 5</td>
<td>PC5</td>
<td>test5</td>
<td>Unable to open service</td>
<td>24x7</td>
<td>5</td>
</tr>
</tbody>
</table>
</div>
</body>
I think you are looking for the .siblings() selector:
$("td:nth-child(10):contains('1')").siblings('td:nth-child(7), td:nth-child(8)').addClass('disaster');
$("td:nth-child(10):contains('2')").siblings('td:nth-child(7), td:nth-child(8)').addClass('high');
$("td:nth-child(10):contains('3')").siblings('td:nth-child(7), td:nth-child(8)').addClass('average');
$("td:nth-child(10):contains('4')").siblings('td:nth-child(7), td:nth-child(8)').addClass('warning');
$("td:nth-child(10):contains('5')").siblings('td:nth-child(7), td:nth-child(8)').addClass('information');
Fiddle: https://jsfiddle.net/8sL86sc7/2/
Something like this maybe? (Fiddle)
$("tr").each(function(index) {
var row = $(this),
lastCol = row.find('td:nth-child(10)'),
appendTo = row.find('td:nth-child(7), td:nth-child(8), td:nth-child(10)');
switch(lastCol.text()) {
case '1':
appendTo.addClass('disaster');
break;
case '2':
appendTo.addClass('high');
break;
case '3':
appendTo.addClass('average');
break;
case '4':
appendTo.addClass('warning');
break;
case '5':
appendTo.addClass('information');
break;
}
});
If there are a lot of rows and you don't need extra stuff to happen exept for the added classes, this could be overkill. the .siblings() selector (as in this answer) could be enough.

.slideToggle() hides element when it reaches the top of the page, animation appears cut short

I'm creating a mobile navigation that slides down, and I'm using .slideToggle() to animate it
fiddle
html
<table id=menu>
<tr>
<td align="center">link</td>
<td align="center">link</td>
</tr>
<tr>
<td align="center">link</td>
<td align="center">link</td>
</tr>
<tr>
<td align="center">link</td>
<td align="center">link</td>
</tr></table>
css
#menu {
display: none;
position: absolute;
margin-top: 50px;
width: 100%;
height: 150px;
background-color: #fff;
z-index: 8;
}
tr {
height: 50px;
}
js
$(".toggle").click(function() {
$("#drop").toggleClass('flip');
$("#menu").slideToggle(300);
});
but the table is taller than my header and when the it slides to the top of the page it just disappears instead of finishing the slide animation (see fiddle).
Any way to solve this? Or a better animation to use?
Thanks!
What you're seeing is the margin-top animating - but jQuery cannot animate the height of a <table> element (more info in similar thread). Wrap the <table> in a <div> element and animate that, like so:
$(document).ready(function() {
$(".toggle").click(function() {
$("#drop").toggleClass('flip');
$("#menu").slideToggle(300);
});
});
html,
body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
max-width: 100%;
overflow-x: hidden;
}
header {
background-color: #fff;
height: 50px;
width: 100%;
position: absolute;
box-shadow: 0px 1px 3px #d3d3d3;
z-index: 9;
}
#drop {
height: 15px;
position: absolute;
margin-left: 15px;
margin-top: 18px;
-moz-transition: transform .5s;
-webkit-transition: transform .5s;
transition: transform .5s;
}
.flip {
transform: rotate(-180deg);
}
#menu {
display: none;
position: absolute;
margin-top: 50px;
width: 100%;
height: 150px;
background-color: #fff;
z-index: 8;
}
#menu table {
width: 100%;
}
tr {
height: 50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
<img alt=menu class="toggle" id="drop" src=# />
</header>
<div id="menu">
<table>
<tr>
<td align="center">link</td>
<td align="center">link</td>
</tr>
<tr>
<td align="center">link</td>
<td align="center">link</td>
</tr>
<tr>
<td align="center">link</td>
<td align="center">link</td>
</tr>
</table>
</div>
i think this issue with your table, i have put a div before the table, now the issue is solved
$(function(){
$(".toggle").click(function() {
//$("#drop").toggleClass('flip');
$("#menu").slideToggle(400);
});
});
html,
body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
max-width: 100%;
overflow-x: hidden;
}
header {
background-color: #fff;
height: 50px;
width: 100%;
position: absolute;
box-shadow: 0px 1px 3px #d3d3d3;
z-index: 9;
}
#drop {
height: 15px;
position: absolute;
margin-left: 15px;
margin-top: 18px;
-moz-transition: transform .5s;
-webkit-transition: transform .5s;
transition: transform .5s;
}
.flip {
transform: rotate(-180deg);
}
#menu {
display: none;
position: absolute;
margin-top: 50px;
width: 100%;
height: 150px;
float:left;
background-color: #fff;
z-index: 8;
top:0;
}
#menu table {
width:100%;
}
tr {
height: 50px;
}
<header>
<img alt=menu class="toggle" id="drop" src=# />
</header>
<div id=menu>
<table>
<tr>
<td align="center">link</td>
<td align="center">link</td>
</tr>
<tr>
<td align="center">link</td>
<td align="center">link</td>
</tr>
<tr>
<td align="center">link</td>
<td align="center">link</td>
</tr>
</table>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

Tooltip window changing height and width when more text is added

i tried to make this tooltip dynamic with the text (so when there is less text - smaller window) but it didn't work for me. I need this tooltip to change size of itself when more text is added and shrink itself when there is only a few words. Example in Jsfiddle.
PS: I don't like to use JS, but if it's necessary I can live with that.
JsFiddle: https://jsfiddle.net/d4m5hj6f/
.content {
position: static;
}
.header {
text-align: center;
position: relative;
margin-top: 40px;
}
th, td {
border:1px solid black;
overflow: hidden;
}
th {
background-color: #eff0f0;
}
td {
background-color: #eed6b1;
height: 45px;
}
tr:nth-child(even) td {
background-color: #FFF1E1;
}
table {
table-layout: fixed;
min-width: 2000px;
border-collapse: collapse;
width: 100%;
margin-left: 5px;
}
.DZ {
text-align: center;
}
tr:hover td {
background-color: #ccc;
}
tr:nth-child(even) {
background-color: #e5e5e5;
}
tr td {
border-right: 1px solid #a5a5a5;
}
.Bezborder {
border-right: 1px solid black;
}
.ht:hover .tooltip {
display: block;
}
.tooltip {
position:absolute;
display: none;
background-color: #fafbb8;
border: 1px solid black;
border-radius: 4px;
margin-left: 28px;
padding: 10px;
position:absolute;
z-index: 1000;
width: 680px;
height: 50px;
font-weight: bold;
}
<div class="content">
<div class="header">
</div>
<a name="172016">
<!--1. riadok H-->
<table cellspacing="0" cellpadding="0" border="0">
<tr>
<th width="50px">C. u.</th>
<th width="30px">Zobrazit</th>
<th width="30px">Typ</th>
<th width="220px">Look here ---></th>
<th width="650px">hover Under this</th>
<th width="130px">System</th>
<th width="100px">Dopad/Symptom</th>
<th width="100px">Dátum zadania</th>
<th width="100px">Dátum vzniku</th>
<th width="100px">Datum Verifikacie</th>
<th width="80px">Ukoncenie</th>
<th width="100px">Dátum</th>
</tr>
<!--2. riadok D-->
<tr>
<td style="text-align:center">100</td>
<td style="text-align:center">X</td>
<td style="text-align:center">C </td>
<td>DOBRIKOVA/DURACKA</td>
<td class="ht"> Gefco PC nasa siet CD vs finalne riesenie internet gefco pc CORAIL <span class="tooltip">Tooltip windows need to change with text, more text - larger window, less text = smaller windows.</span></td>
<td>CORAIL/CONSO</td>
<td></td>
<td class="DZ">06/07/2016</td>
<td class="DZ">06/07/2016</td>
<td class="DZ">06/07/2016</td>
<td style="text-align:center">OK</td>
<td class="Bezborder" style="text-align:center">07/07/2016</td>
</tr>
<!--3. riadok D-->
<tr>
<td style="text-align:center">101</td>
<td style="text-align:center">X</td>
<td style="text-align:center">C </td>
<td>DOBRIKOVA/DURACKOVA</td>
<td class="ht"> Gefco PC nasa siet CD vs finalne riesenie internet gefco pc CORAIL <span class="tooltip">You see there is a big tooltip window space under this.</span></td>
<td>CORAIL/CONSO</td>
<td></td>
<td class="DZ">06/07/2016</td>
<td class="DZ">06/07/2016</td>
<td class="DZ">06/07/2016</td>
<td style="text-align:center">OK</td>
<td class="Bezborder" style="text-align:center">07/07/2016</td>
</tr>
</table>
</a>
</div>
Removing the width property from the tooltip css should work. Remove the height too if you want it to adapt when resizing the window.
Are you trying to achieved something like this
.content {
position: static;
}
.header {
text-align: center;
position: relative;
margin-top: 40px;
}
th, td{
border:1px solid black;
overflow: hidden;
}
th{
background-color: #eff0f0;
}
td{
background-color: #eed6b1;
height: 45px;
}
tr:nth-child(even) td {
background-color: #FFF1E1;
}
table{
table-layout: fixed;
min-width: 2000px;
border-collapse: collapse;
width: 100%;
margin-left: 5px;
}
.DZ {
text-align: center;
}
tr:hover td{
background-color: #ccc;
}
tr:nth-child(even) {
background-color: #e5e5e5;
}
tr td{
border-right: 1px solid #a5a5a5;
}
.Bezborder {
border-right: 1px solid black;
}
.ht:hover .tooltip {
display: block;
}
.tooltip {
position:absolute;
display: none;
background-color: #fafbb8;
border: 1px solid black;
border-radius: 4px;
margin-left: 28px;
padding: 10px;
position:absolute;
z-index: 1000;
width: 680px;
/* height: 50px;*/
font-weight: bold;
}
<div class="content">
<div class="header">
</div>
<a name="172016">
<!--1. riadok H-->
<table cellspacing="0" cellpadding="0" border="0">
<tr>
<th width="50px">C. u.</th>
<th width="30px">Zobrazit</th>
<th width="30px">Typ</th>
<th width="220px">Cislo/Meno</th>
<th width="650px">Popis</th>
<th width="130px">System</th>
<th width="100px">Dopad/Symptom</th>
<th width="100px">Dátum zadania</th>
<th width="100px">Dátum vzniku</th>
<th width="100px">Datum Verifikacie</th>
<th width="80px">Ukoncenie</th>
<th width="100px">Dátum</th>
</tr>
<!--2. riadok D-->
<tr>
<td style="text-align:center">100</td>
<td style="text-align:center">X</td>
<td style="text-align:center">C </td>
<td>DOBRIKOVA/DURACKA</td>
<td class="ht"> Gefco PC nasa siet CD vs finalne riesenie internet gefco pc CORAIL <span class="tooltip">ked sa vytvara uplne novu hypotheza tak nefunguje vyber tlaciarni a globalny export tiez NOK (nepouzivame)</span></td>
<td>CORAIL/CONSO</td>
<td></td>
<td class="DZ">06/07/2016</td>
<td class="DZ">06/07/2016</td>
<td class="DZ">06/07/2016</td>
<td style="text-align:center">OK</td>
<td class="Bezborder" style="text-align:center">07/07/2016</td>
</tr>
<!--3. riadok D-->
<tr>
<td style="text-align:center">101</td>
<td style="text-align:center">X</td>
<td style="text-align:center">C </td>
<td>DOBRIKOVA/DURACKOVA</td>
<td class="ht"> Gefco PC nasa siet CD vs finalne riesenie internet gefco pc CORAIL <span class="tooltip">ked sa vytvara uplne novu hypotheza tak nefunguje vyber tlaciarni a globalny export tiez NOK (nepouzivame)</span></td>
<td>CORAIL/CONSO</td>
<td></td>
<td class="DZ">06/07/2016</td>
<td class="DZ">06/07/2016</td>
<td class="DZ">06/07/2016</td>
<td style="text-align:center">OK</td>
<td class="Bezborder" style="text-align:center">07/07/2016</td>
</tr>
In your code you have a fix value for your tooltip width and height.
If you need to make the toolip width and height adjusted dynamically by its content you should remove the width and height value.
Edit based on your comment.
If you need to keep some space between the tooltip and your view port you can use margin property, this will allow some space on each d side of your tooltip.
Try to comment out as in the follow example:
https://jsfiddle.net/d4m5hj6f/6/
.tooltip {
position:absolute;
display: none;
background-color: #fafbb8;
border: 1px solid black;
border-radius: 4px;
margin: 28px;
padding: 10px;
position:absolute;
z-index: 1000;
/*width: 680px;*/
/*height: 50px;*/
font-weight: bold;
}

Why does my jQuery slidedown not work in my table?

I'm trying to get the slider to work but it simply won't. It works when I'm not using a table but for my website I need a table where I can display the members. What's wrong with my code? The information has to below the name, not next to it.
<!DOCTYPE html>
<html>
<head>
<title>Bestuur</title>
<link rel="icon" href="images/favicon.png">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#flip").click(function(){
$("#panel").slideToggle("slow");
});
});
</script>
<style type="text/css">
body {
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
}
table {
border-collapse: collapse;
}
th, td {
padding: 8px;
text-align: left;
border-bottom: 1px solid #ddd;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
border: 1px solid #e7e7e7;
background-color: #f3f3f3;
}
li {
float: left;
}
li a {
display: block;
color: #666;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: #ddd;
}
li a.active {
color: white;
background-color: #42a5f5;
}
#panel, #flip {
padding: 5px;
}
#panel {
display: none;
}
</style>
</head>
<ul class="horizontal gray">
<li><a class="active" href="index.php">Bestuur</a></li>
<li>Bestuur wijzigen</li>
<li>Bestuur toevoegen</li>
</ul>
<div>
<table class="table" border="1" frame="void" rules="rows">
<tbody>
<tr>
<th>Naam</th>
<th>Functie</th>
</tr>
<tr>
<td><div id="flip">Pieter Schreurs</td>
<td>
<label for="pieter">Secretaris</label>
</div></td>
<td><div id="panel">Hidden information</div></td>
</tr>
<tr>
<td>Wessel Oblink</td>
<td>
<label for="wessel">Penningmeester</label>
</td>
</tr>
<tr>
<td>Luca Fraser</td>
<td>
<label for="luca">Voorzitter</label>
</td>
</tr>
</tbody>
</table>
</div>
</html>
I tidied up your markup - divs and tds closing incorrectly and moved the #panel. Is this what you're after?
$(document).ready(function() {
$("#flip").click(function() {
$("#panel").slideToggle("slow");
});
});
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
table {
border-collapse: collapse;
}
th,
td {
padding: 8px;
text-align: left;
border-bottom: 1px solid #ddd;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
border: 1px solid #e7e7e7;
background-color: #f3f3f3;
}
li {
float: left;
}
li a {
display: block;
color: #666;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: #ddd;
}
li a.active {
color: white;
background-color: #42a5f5;
}
#panel,
#flip {
padding: 5px;
}
#panel {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="horizontal gray">
<li><a class="active" href="index.php">Bestuur</a></li>
<li>Bestuur wijzigen</li>
<li>Bestuur toevoegen</li>
</ul>
<div>
<table class="table" border="1" frame="void" rules="rows">
<tbody>
<tr>
<th>Naam</th>
<th>Functie</th>
</tr>
<tr>
<td width="200">
<div id="flip">Pieter Schreurs</div>
<div id="panel">Hidden information</div>
</td>
<td>
<label for="pieter">Secretaris</label>
</td>
</tr>
<tr>
<td>Wessel Oblink</td>
<td>
<label for="wessel">Penningmeester</label>
</td>
</tr>
<tr>
<td>Luca Fraser</td>
<td>
<label for="luca">Voorzitter</label>
</td>
</tr>
</tbody>
</table>
</div>
There are a few tags that you never close. Fix those, then either move your #flip inside a td or remove that div and set the parent tr to have that ID.
I changed implementation so that "Functie" doesn't move.
Demo
$(document).ready(function(){
$("#flip").click(function(){
$("#panel").slideToggle("slow");
});
});
body {
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
}
table {
border-collapse: collapse;
table-layout: fixed;
}
th, td {
width: 150px;
padding: 8px;
text-align: left;
border-bottom: 1px solid #ddd;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
border: 1px solid #e7e7e7;
background-color: #f3f3f3;
}
li {
float: left;
}
li a {
display: block;
color: #666;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: #ddd;
}
li a.active {
color: white;
background-color: #42a5f5;
}
#panel, #flip {
padding: 5px;
}
#panel {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul class="horizontal gray">
<li><a class="active" href="index.php">Bestuur</a></li>
<li>Bestuur wijzigen</li>
<li>Bestuur toevoegen</li>
</ul>
<div>
<table class="table" border="1" frame="void" rules="rows">
<tbody>
<tr>
<th>Naam</th>
<th>Functie</th>
</tr>
<tr id="flip">
<td>Pieter Schreurs<div id="panel">Hidden information</div></td>
<td>
<label for="pieter">Secretaris</label>
</td>
</tr>
<tr>
<td>Wessel Oblink</td>
<td>
<label for="wessel">Penningmeester</label>
</td>
</tr>
<tr>
<td>Luca Fraser</td>
<td>
<label for="luca">Voorzitter</label>
</td>
</tr>
</tbody>
</table>
</div>

Dynamic Table with Hide/Show features

Here is my JSfiddle with the table environment: http://jsfiddle.net/pY66Q/
I am having trouble understanding how I can write my JavaScript in such a way that when the element with the given class name of "pmap-program-name-label" is clicked, the click handler runs an expression that will only slideToggle the second child of the that contains the that was clicked. I hope that makes sense.
My HTML:
<table class="pmap-font-clr-drk-grey">
<thead>
<tr>
<th>Audit Program Results</th>
<th>Open</th>
<th>Closed</th>
<th>Overdue</th>
<th>Total</th>
</tr>
</thead>
<tbody>
<tr class="pmap-parent-row-odd">
<td class="pmap-program-name-label"><div class="fa fa-plus-circle fa-lg"></div><span>2011 EH&S Audits - USF Sites</span></td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>2011 EH&S Audits - USF Sites</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
</tbody>
<tbody>
<tr class="pmap-parent-row-even">
<td class="pmap-program-name-label"><div class="fa fa-plus-circle fa-lg"></div><span>2011 EH&S Audits - USF Sites</span></td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>2011 EH&S Audits - USF Sites</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
</tbody>
<tfoot>
</tfoot>
My CSS:
table {
width: 100%;
border: 1px #eaeaea solid;
}
th {
width: 10%;
text-align: center;
border-bottom: 4px #007290 solid;
padding: 5px 0;
}
th:first-child {
width: 60%;
text-align: left;
border-bottom: 4px #007290 solid;
padding: 5px 0 5px 20px;
font-family: 'Segoe UI Bold' sans-serif;
font-weight: normal;
}
tr:nth-child(2) {
display: none;
}
td {
width: 10%;
text-align: center;
border-bottom: 1px #eaeaea solid;
border-left: 1px #eaeaea solid;
padding: 0;
line-height: 30px;
}
td:first-child {
width: 60%;
text-align: left;
border-bottom: 1px #eaeaea solid;
padding-left: 38px;
}
td.pmap-program-name-label {
width: 60%;
text-align: left;
border-bottom: 1px #eaeaea solid;
padding: 2px 0 0 10px;
color: #007290;
font-weight: bold;
cursor: pointer;
}
td.pmap-program-name-label span {
padding-left: 10px;
}
tr.pmap-parent-row-odd {
background-color:#FFFFFF;
}
tr.pmap-parent-row-even {
background-color: #F3F4F5;
}
td a {
text-decoration: none;
color: #007290;
font-weight: bold;
}
My JavaScript/jQuery:
$(document).ready(function () {
/*
================================================
Toggles Form Parent/Children Data Fields
================================================
*/
var sectionAnimating = false;
$('.pmap-program-name-label').click(function () {
if (sectionAnimating == false) {
$("tbody").find('tr:nth-child(2)').slideToggle(450, function () {
sectionAnimating = false;
});
sectionAnimating = true;
}
});
});
Here u have code
(document).ready(function () {
/*
================================================
Toggles Form Parent/Children Data Fields
================================================
*/
var sectionAnimating = false;
$('.pmap-program-name-label').click(function () {
if (sectionAnimating == false) {
console.log(this.parentNode.parentNode)
$(this.parentNode.parentNode).find('tr:nth-child(2)').slideToggle(450, function () {
sectionAnimating = false;
});
sectionAnimating = true;
}
});
});

Categories