HTML onClick event does not fire

HTML onClick event does not fire - javascript

Need some help. This seem like a simple piece of code, but I am stumped as to why things are not properly working. The onClick events showdiv(n) works just fine. But the onClick event hidediv() does not. What's weird is that if I type "hidediv(1)" on the Firebug console, the javascript statement works just fine. But the js code is not executed when the div the event is attached to is clicked on. Here's the code:
<script type="text/javascript">
function showdiv(n){
switch(n){
case 1:
var div = document.getElementById("menucontent");
div.setAttribute("class","menucontent_v");
break;
case 2:
var div = document.getElementById("biographycontent");
div.setAttribute("class","biographycontent_v");
break;
case 3:
var div = document.getElementById("productscontent");
div.setAttribute("class","productscontent_v");
break;
case 4:
var div = document.getElementById("thankyoucontent");
div.setAttribute("class","thankyoucontent_v");
break;
case 5:
var div = document.getElementById("specialscontent");
div.setAttribute("class","specialscontent_v");
break;
case 6:
var div = document.getElementById("contactcontent");
div.setAttribute("class","contactcontent_v");
break;
case 7:
var div = document.getElementById("gallerycontent");
div.setAttribute("class","gallerycontent_v");
break;}}
function hidediv(n){
switch(n){
case 1:
var div = document.getElementById("menucontent");
div.setAttribute("class","menucontent_h");
break;
case 2:
var div = document.getElementById("biographycontent");
div.setAttribute("class","biographycontent_h");
break;
case 3:
var div = document.getElementById("productscontent");
div.setAttribute("class","productscontent_h");
break;
case 4:
var div = document.getElementById("thankyoucontent");
div.setAttribute("class","thankyoucontent_h");
break;
case 5:
var div = document.getElementById("specialscontent");
div.setAttribute("class","specialscontent_h");
break;
case 6:
var div = document.getElementById("contactcontent");
div.setAttribute("class","contactcontent_h");
break;
case 7:
var div = document.getElementById("gallerycontent");
div.setAttribute("class","gallerycontent_h");
break;}}
</script>
</head>
<body>
<div id="background" class="containerbg">
<img id="background" src="background.jpg" class="bgimg">
</div>
<div id="menuofservices" class="menuofservices" onClick="showdiv(1);"></div>
<div id="menucontent" class="menucontent_h">
<div id="goawaymenu" class="goaway" onClick="hidediv(1);"><img src="closex.jpg" width="30px" height="30px"></div>
<div id="menutitle" class="menutitle"><h2>Menu of Services</h2></div>
<div id="menutext" class="menutext"><p>
<table width="270">
<tr>
<td><strong>Cuts</strong></td>
<td></td>
</tr>
<tr>
<td>Women</td>
<td>$30</td>
</tr>
<tr>
<td>Boys</td>
<td>$15</td>
</tr>
<tr>
<td>Girls (12 & under)</td>
<td>$20</td>
</tr>
<tr>
<td>Bang trim</td>
<td>$7</td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td><strong>Color</strong></td>
<td></td>
</tr>
<tr>
<td>All over</td>
<td>$50</td>
</tr>
<tr>
<td>Retouch</td>
<td>$45</td>
</tr>
<tr>
<td>Full Highlight</td>
<td>$68</td>
</tr>
<tr>
<td> additional color</td>
<td>$5</td>
</tr>
<tr>
<td>Partial Highlight</td>
<td>$52</td>
</tr>
<tr>
<td>Simple Highlight (per foil)</td>
<td>$5</td>
</tr>
<tr>
<td>Men's Color</td>
<td>$24</td>
</tr>
<tr>
<td>Retouch & Highlight</td>
<td>$75</td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td><strong>Wax</strong></td>
<td></td>
</tr>
<tr>
<td>Eyebrow</td>
<td>$12</td>
</tr>
<tr>
<td>Lip</td>
<td>$7</td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td><strong>Makeup</strong></td>
<td></td>
</tr>
<tr>
<td>Application & Lesson</td>
<td>$40</td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td><strong>Misc</strong></td>
<td></td>
</tr>
<tr>
<td>Shampoo & Style</td>
<td>$16</td>
</tr>
<tr>
<td>Shampoo & Flatiron</td>
<td>$21</td>
</tr>
<tr>
<td>Deep Conditioning Treatment</td>
<td>$15</td>
</tr>
<tr>
<td>Updo</td>
<td>$45</td>
</tr>
</table>
</p>
</div>
</div>
Everything seems to render OK, but the event does not fire and I'm at a total loss as to why.
Here's the CSS:
#charset "utf-8";
/* CSS Document */
body {
font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
height: 768px;
width: 1024px;
}
.containerbg {
position: absolute;
height: 768px;
width: 1024px;
z-index: 0;
}
.bgimg {
height: 768px;
width: 1024px;
}
.goaway {
top: 10px;
right: 10px;
width: 30px;
height: 30px;
z-index: 3;
cursor: pointer;
position: absolute;
}
.menuofservices {
position: absolute;
border: thin solid #000;
height:86px;
width:257px;
left: 600px;
top: 560px;
opacity: 0;
cursor: pointer;
z-index: 1;
}
.menucontent_h {
position: absolute;
border: thin solid #780C19;
height: 600px;
width: 300px;
left: 360px;
top: 100px;
opacity: 0;
z-index: 2;
font-size: 11px;
background-color: #dc7c87;
text-align: left;
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
border-radius: 30px;
box-shadow: 10px 10px 25px rgba(0, 0, 0, 0.50);
-moz-box-shadow: 10px 10px 25px rgba(0, 0, 0, 0.50);
-webkit-box-shadow: 10px 10px 25px rgba(0, 0, 0, 0.50);
}
.menucontent_v {
position: absolute;
border: thin solid #780C19;
height: 600px;
width: 300px;
left: 360px;
top: 100px;
opacity: 1.0;
z-index: 2;
font-size: 11px;
background-color: #dc7c87;
text-align: left;
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
border-radius: 30px;
box-shadow: 10px 10px 25px rgba(0, 0, 0, 0.50);
-moz-box-shadow: 10px 10px 25px rgba(0, 0, 0, 0.50);
-webkit-box-shadow: 10px 10px 25px rgba(0, 0, 0, 0.50);
}
.menutitle{
position: absolute;
text-align: center;
width: 300px;
height: 50x;
z-index: 3;
top: 0px;
left: 0px;
}
.menutext{
position: absolute;
left: 0px;
top: 50px;
width: 300px;
height: 500px;
z-index: 3;
background-color: #dc7c87;
text-align: left;
}

I think it's because the z-index is putting the background in front of everything, so nothing behind it can get a click

Related

how can i make the table responsive with fixed header? Means it scrolls when it reaches maximum viewpoint and also header fixed at its point

How can i make the table responsive with fixed header? means it scrolls when reaches maximum viewpoint. Well, i don't want to scroll the whole page on reaching max viewpoint instead i want table to be scrolled. Also fixed header is important. I tried with box-sizing: border-box; and overflow-x:scroll;but it didn't worked , help me to create a responsive table. Thanks.
table{
border-collapse: separate;
border-spacing: 0;
width: 100%;
box-sizing: border-box;
}
thead,tbody{
box-sizing: border-box;
overflow: auto;
}
th,td{
padding: 6px 15px;
}
th{
background: #42444e;
color: #fff;
text-align: left;
position: static;
top: 50px;
}
tbody tr td img{
flex-wrap: wrap;
pointer-events: none;
-moz-user-select: none;
-webkit-user-select: none;
user-select: none;
width: 30px;
height: 30px;
float: none;
display:block;
object-fit: fill;
border-radius: 10%;
}
tr:first-child th:first-child {
border-top-left-radius: 6px;
}
tr:first-child th:last-child {
border-top-right-radius: 6px;
}
td{
border-right: 1px solid #c6c9cc;
border-bottom: 1px solid #c6c9cc;
}
td:first-child {
border-left: 1px solid #c6c9cc;
}
tr:nth-child(even) td {
background: #eaeaed;
}
tr:last-child td:first-child {
border-bottom-left-radius: 6px;
}
tr:last-child td:last-child {
border-bottom-right-radius: 6px;
}
<table>
<thead>
<tr>
<th>Image</th>
<th>ID</th>
<th>Date</th>
<th>Name</th>
<th>Email</th>
<th>Phone no.</th>
<th>Role</th>
</tr>
</thead>
<tbody>
<tr>
<td><img src="img/4.jpeg"></td>
<td>1</td>
<td>445445564</td>
<td>Umann goswami</td>
<td>Umanngoswami#gmail.com</td>
<td>9999672450</td>
<td>Admin</td>
</tr>
<tr>
<td><img src="img/4.jpeg"></td>
<td>1</td>
<td>445445564</td>
<td>Umann goswami</td>
<td>Umanngoswami#gmail.com</td>
<td>9999672450</td>
<td>Admin</td>
</tr>
<tr>
<td><img src="img/4.jpeg"></td>
<td>1</td>
<td>445445564</td>
<td>Umann goswami</td>
<td>Umanngoswami#gmail.com</td>
<td>9999672450</td>
<td>Admin</td>
</tr>
<tr>
<td><img src="img/4.jpeg"></td>
<td>1</td>
<td>445445564</td>
<td>Umann goswami</td>
<td>Umanngoswami#gmail.com</td>
<td>9999672450</td>
<td>Admin</td>
</tr>
</thead>
</table>

I reviewed your codepan and conclude with that, You need to add some CSS property in your CSS file and it's work.
tbody {
height: 200px;
display: inline-block;
overflow: auto;
}
thead tr th{
position: sticky;
top:0;
left:0;
right:0;
}

set position sticky of header
and for table overflow-y set as auto
.fixTable {
overflow-y: auto;
height: 110px;
}
.fixTable thead th {
position: sticky;
top: 0;
}
table {
border-collapse: collapse;
width: 100%;
}
th,
td {
padding: 8px 15px;
border: 2px solid #529432;
}
th {
background: #060606;
}
::-webkit-scrollbar {
-webkit-appearance: none;
}
::-webkit-scrollbar:vertical {
width: 12px;
}
::-webkit-scrollbar:horizontal {
height: 12px;
}
::-webkit-scrollbar-thumb {
background-color: rgba(0, 0, 0, .5);
border-radius: 10px;
border: 2px solid #ffffff;
}
::-webkit-scrollbar-track {
border-radius: 10px;
background-color: #ffffff;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="fixTable">
<table>
<thead>
<tr>
<th>Col 1</th>
<th>Col 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>1.1</td>
<td>2.1</td>
</tr>
<tr>
<td>1.2</td>
<td>2.2</td>
</tr>
<tr>
<td>1.3</td>
<td>2.3</td>
</tr>
<tr>
<td>1.4</td>
<td>2.4</td>
</tr>
<tr>
<td>1.5</td>
<td>2.5</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>

Javascript for making the element disappear and reappear after scroll

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

How to display a circle within a td by adding a class?

I have a table and I would like to change a class on the td by clicking them. When I addClass() each cell changes but it seems override any class.
My desired result for each cell is like this:
How can I achieve this by adding a class to them?
$(function() {
$("td").click(function() {
$(this).addClass('outpatient');
});
});
table td {
width: 20px;
overflow: hidden;
display: inline-block;
white-space: nowrap;
border: 1px solid gray;
text-align: center;
padding: 5px;
cursor: pointer;
background-color: aqua;
}
.outpatient {
background-color: yellow;
border-radius: 50%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</table>

To achieve this can create another element inside each td. The td will be used to display the square with the teal background. The inner element is necessary to show the circle with the yellow background. By default the circle can be hidden, and then displayed when the class is added to the parent td. Try this:
$(function() {
$("td").click(function() {
$(this).addClass('outpatient');
});
});
table td {
overflow: hidden;
white-space: nowrap;
border: 1px solid gray;
text-align: center;
cursor: pointer;
background-color: aqua;
padding: 0;
margin: 0;
position: relative;
}
td div {
width: 32px;
height: 32px;
border: 1px solid transparent;
line-height: 32px;
margin: -1px;
box-sizing: border-box;
}
td.outpatient div {
background-color: yellow;
border-radius: 50%;
border-color: gray;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<td><div>1</div></td>
<td><div>2</div></td>
<td><div>3</div></td>
</tr>
<tr>
<td><div>4</div></td>
<td><div>5</div></td>
<td><div>6</div></td>
</tr>
<tr>
<td><div>7</div></td>
<td><div>8</div></td>
<td><div>9</div></td>
</tr>
</table>

You can consider background-image with radial-gradient to create the circle above the background-color
$(function() {
$("td").click(function() {
$(this).addClass('outpatient');
});
});
table td {
width: 20px;
overflow: hidden;
display: inline-block;
white-space: nowrap;
border: 1px solid gray;
text-align: center;
padding: 15px;
cursor: pointer;
background-color:aqua;
}
.outpatient {
background-image:
radial-gradient(farthest-side,yellow calc(100% - 3px),#000 calc(100% - 2px),transparent 100%);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</table>

Change object width with window size with jQuery

I have some span objects that I insert into a table with jQuery with a specific width attribute. I want the widths of these objects to change as the window size changes, as the table has position relative.
Here is my code (The snippet doesn't show the issue very well - changing window size, but it gives an idea of the context):
$(document).ready(function() {
var var1 = 2
var element = $('td').filter(function() {
var holidayText = $(this).contents()[0].textContent.trim();
return parseInt(holidayText, 10) == var1;
});
//need this to adjust with table size
var cell_width = element.width();
var2 = 3;
var width = var2 * cell_width;
add_html = element.append('</br><span class="spanclass" style="width: ' + width + 'px; position: absolute"></span>');
});
div.class1 {
position: relative;
}
table {
border: 1px solid navy;
width: 70%;
text-align: center;
}
table th {
text-align: center;
width: 100px;
height: 20px;
}
table td {
width: 100px;
height: 100px;
vertical-align: top;
text-align: right;
border: 1px solid #c6c6ec;
position: relative;
}
span.spanclass {
background-color: purple;
height: 14px;
display: inline-block;
padding: 2px;
left: 0;
z-index: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div class="class1">
<table>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
</tr>
</tbody>
</table>
</div>
How do I get a width attribute / assign a new attribute that means this widths scales with the table/window size? Do I use em for this? Or as a percentage width?
Thanks

You have to use $(window).resize().
I have changed your script and it's working for me:
https://fiddle.jshell.net/71rd84jy/
Let me know. Cheers.

Why use js in a first place?
$(document).ready(function() {
var var1 = 2
var element = $('td').filter(function() {
var holidayText = $(this).contents()[0].textContent.trim();
return parseInt(holidayText, 10) == var1;
});
add_html = element.append('</br><span class="spanclass"></span>');
});
div.class1 {
position: relative;
}
table {
border: 1px solid navy;
width: 70%;
text-align: center;
}
table th {
text-align: center;
width: 100px;
height: 20px;
}
table td {
width: 100px;
height: 100px;
vertical-align: top;
text-align: right;
border: 1px solid #c6c6ec;
position: relative;
}
span.spanclass {
background-color: purple;
height: 14px;
display: inline-block;
padding: 2px;
left: 0;
z-index: 1;
position: absolute;
width: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="class1">
<table>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
</tr>
</tbody>
</table>
</div>
Notice box-sizing: border-box; - it make width 100% including 2px of padding, otherwise it would be [2px]+[100%]+[2px]

.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>

We Keep Coding

JavaScript is the programming language of the Web.

HTML onClick event does not fire - javascript

I think it's because the z-index is putting the background in front of everything, so nothing behind it can get a click

Related

how can i make the table responsive with fixed header? Means it scrolls when it reaches maximum viewpoint and also header fixed at its point

Javascript for making the element disappear and reappear after scroll

How to display a circle within a td by adding a class?

Change object width with window size with jQuery

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

Categories

Resources