Change object width with window size with jQuery - javascript

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]

Related

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>

How to make a scrollable table with fixed header

I am trying to make a scrollable table with vertical and horizontal scroll bars and with fixed header.
But when i try to make the header in fixed position,my vertical scroll bar becomes hidden and appears only when i scroll extreme right.
similarly,if i make the scroll bars visible,my header becomes movable.
Please advise.
PFB my CSS code.
.button-container{
text-align: center;
}
table {
border-collapse: collapse; /* make simple 1px lines borders if border defined */
}
tr {
width: 100%;`}
.outer-container {
position: absolute;
top:0;
left: 0;
right: 300px;
bottom:40px;
overflow: hidden;
}
.inner-container {
width: 100%;
height: 100%;
position: relative;
overflow-y:hidden;
}
.header-table-container {
float:left;
width: 100%;
}
.header-table{
background: #0088CC;
width=100%;
cellpadding=0;
cellspacing=0;
}
.body-table-container {
float:left;
height: 100%;
}
.body-table{
width=100%;
cellpadding=0;
cellspacing=0;
height:500px;
}
.header-cell {
background-color: yellow;
text-align: left;
height: 40px;
}
.body-cell {
background-color: blue;
text-align: left;
}
.headerCol {
width: 160px;
min-width: 160px;
text-align: center;
}
.bodyCol {
width: 160px;
min-width: 160px;
}
.resultsCol {
width: 250px;
min-width: 250px;
}
.even {
background: lightgrey;
}
.button-container{
text-align: center;
}
.results{
text-align: left;
}
#preprod-wrapper{
}
#prod-wrapper{
height:500px;
}
Its not too easy, but take a look here:
https://fiddle.jshell.net/805s75hb/
Many things were used here, such as position and overflow.
I hope it can help you. :)
Have you tried this?
table {
border-collapse: collapse;
overflow :scroll;
}
I have used two tables one for header to make it static so that it would fixed.
Have a look if this can help you :)
.wrap {
width: 352px;
}
.wrap table {
width: 300px;
table-layout: fixed;
}
table tr td {
padding: 5px;
border: 1px solid #eee;
width: 100px;
word-wrap: break-word;
}
table.head tr td {
background: #eee;
}
.inner_table {
height: 100px;
overflow-y: auto;
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="wrap">
<table class="head">
<tr>
<td>Head 1</td>
<td>Head 1</td>
<td>Head 1</td>
</tr>
</table>
<div class="inner_table">
<table>
<tr>
<td>Body 1</td>
<td>Body 1</td>
<td>Body 1</td>
</tr>
<tr>
<td>Body 1</td>
<td>Body 1</td>
<td>Body 1</td>
</tr>
<tr>
<td>Body 1</td>
<td>Body 1</td>
<td>Body 1</td>
</tr>
<!-- Some more tr's -->
</table>
</div>
</div>
</body>
</html>

Table expands on "tr:before"

I'm trying to achieve a sort of selection effect on a table that I'm currently working on. I want to do this by adding a class to the table row that the user clicks. The class that gets added to the row will add a small circle to the left of the row. However, as I'm adding the class to the row, the table (or the row) seems to expand a few pixels. I can't figure out why.
Some example code to illustrate my problem:
document.querySelector('tr').addEventListener('click', function() {
if (!this.classList.contains('clicked')) {
this.classList.add('clicked');
return;
}
this.classList.remove('clicked');
});
table {
position: relative;
background: #ccc;
margin: 5rem auto;
}
.clicked:before {
position: absolute;
content: '';
right: 100%;
top: 50%;
width: 10px;
height: 10px;
border-radius: 50%;
background: yellow;
}
<table>
<tr>
<td>1</td>
<td>Two</td>
<td>3</td>
<td>Four</td>
<td>1</td>
<td>Longer text..</td>
<td>3</td>
<td>Four</td>
</tr>
</table>
Any help would be much appreciated!
You could add your clicked:before element and set it's opacity to 0 and then on the click event add another class to actually show the element.
document.querySelector('tr').addEventListener('click', function() {
if (!this.classList.contains('show-clicked')) {
this.classList.add('show-clicked');
return;
}
this.classList.remove('show-clicked');
});
table {
position: relative;
background: #ccc;
margin: 5rem auto;
}
tr {
margin-left: 10px;
}
.clicked:before {
position: absolute;
content: '';
right: 100%;
top: 50%;
width: 10px;
height: 10px;
border-radius: 50%;
background: yellow;
opacity: 0;
}
.show-clicked:before {
opacity: 1;
}
<table>
<tr class="clicked">
<td>1</td>
<td>Two</td>
<td>3</td>
<td>Four</td>
<td>1</td>
<td>Longer text..</td>
<td>3</td>
<td>Four</td>
</tr>
</table>
I have a trick. I hope it works as what you want
document.querySelector('tr').addEventListener('click', function() {
if (!this.classList.contains('clicked')) {
this.classList.add('clicked');
return;
}
this.classList.remove('clicked');
});
table {
position: relative;
background: #ccc;
margin: 5rem auto;
}
.show-me {
width: 10px;
height: 10px;
border: 0;
background-color: transparent;
}
.show-me span {
display: none;
width: 10px;
height: 10px;
border-radius: 50%;
background: yellow;
}
.clicked .show-me span {
display: block;
}
<table>
<tr>
<td class="show-me">
<span></span>
</td>
<td>1</td>
<td>Two</td>
<td>3</td>
<td>Four</td>
<td>1</td>
<td>Longer text..</td>
<td>3</td>
<td>Four</td>
</tr>
</table>
You could use the css visibility property and an extra class. This way any effect that is caused by ::before will be in the rendering but just not visible.
Summary The visibility property can be used to hide an element while
leaving the space where it would have been. It can also hide rows or
columns of a table.
document.querySelector('tr').addEventListener('click', function () {
this.classList.toggle('visible');
});
table {
position: relative;
background: #ccc;
margin: 5rem auto;
}
.clicked::before {
position: absolute;
content:'';
right: 100%;
top: 50%;
width: 10px;
height: 10px;
border-radius: 50%;
background: yellow;
visibility: hidden;
}
.visible::before {
visibility: visible;
}
<table>
<tr class="clicked">
<td>1</td>
<td>Two</td>
<td>3</td>
<td>Four</td>
<td>1</td>
<td>Longer text..</td>
<td>3</td>
<td>Four</td>
</tr>
</table>
This post helped me solve the problem. Seems :before actually "creates" a new table cell. Had to add the :before to the first <td> in my code instead of the <tr>.
Is it possible to use pseudo-elements (:after, :before) inside a table row?

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;
}
});
});

HTML onClick event does not fire

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

Categories