How to make one modal work for multiple button [duplicate]

How to make one modal work for multiple button [duplicate] - javascript

This question already has answers here:
How to add one event listener for all buttons
(4 answers)
Closed 1 year ago.
It's working but only in one button here's my code. When i click at first button it showed up but when i click on the other buttons it doesnt show up. it seems that only at the first buttons its working. I also used the class to call the modal but it seems it also doesnt work.
<!DOCTYPE HTML>
<html>
<head>
<title>Video Records</title>
<style type="text/css">
*{
margin:0;
padding: 0;
box-sizing: border-box;
}
body{
background-image: url(wallpaper.jpg) ;
background-repeat: no-repeat;
background-size: cover;
font-family: sans-serif;
}
.table-container{
padding: 0 10%;
margin: 40px auto 0;
}
.heading{
font-size: 40px;
text-align: center;
color:#FFFFFF;
text-shadow: -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000;
margin-bottom: 40px;
}
.table{
width: 100%;
border-collapse: separate;
border-spacing: 0;
box-shadow: 0 0 0 2px #FFD700;
border-radius: 6px;
}
.table thead{
background-color: #FFD700;
}
.table thead tr th{
font-size: 14px;
font-weight: medium;
letter-spacing: 0.35px;
color: #000000;
opacity: 1;
padding: 12px;
vertical-align: top;
border: 1px solid #000000;
}
.table tbody tr td{
font-size: 14px;
letter-spacing: 0.35px;
font-weight: normal;
color: #000000;
background-color: white;
padding: 8px;
text-align: center;
border: 1px solid #000000;
}
table tr:first-child th:first-child,
table.table tr:first-child {
border-top-left-radius: 6px;
}
table tr:first-child th:last-child,
table.table tr:first-child {
border-top-right-radius: 6px;
}
table tr:last-child td:first-child {
border-bottom-left-radius: 6px;
}
table tr:last-child td:last-child {
border-bottom-right-radius: 6px;
}
.table tbody tr td .btn{
width: 130px;
text-decoration: none;
line-height: 35px;
background-color:#ee2828;
display: inline-block;
font-weight: medium;
color: #FFFFFF;
text-align: center;
vertical-align: middle;
user-select: none;
border: 1px solid transparent;
font-size: 14px;
opacity: 1;
border-radius: 5px;
}
.table tbody tr td .btn:hover{
font-weight: bold;
}
.video-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 999999;
background-color: rgba(1, 1, 1, 0.7);
display: flex;
justify-content: center;
align-items: center;
opacity: 0;
pointer-events: none;
transition: all 0.3s;
}
.video-container .close{
position: absolute;
top:10%;
right: 25px;
font-size: 20px;
cursor: pointer;
color:white;
}
.video-container video{
width: 90%;
max-width: 800px;
transform: scale(0);
box-shadow: 0 20px 20px rgba(0, 0, 0, 0.2);
outline: none;
transition: all 0.3s;
}
.video-container.show{
pointer-events: all;
opacity: 1;
}
.video-container.show video{
transform: scale(1);
}
#media(max-width: 768px){
.table thead{
display: none;
}
.table, .table tbody, .table tr, .table td{
display: block;
width: 100%;
box-shadow: none;
}
.table tr{
margin-bottom: 15px;
}
.table tbody tr td{
text-align: right;
padding-left: 50%;
position: relative;
}
.table td:before{
content: attr(data-label);
position: absolute;
left: 0;
width: 50%;
padding-left: 15px;
font-weight: 600;
font-size: 14px;
text-align: left;
}
}
</style>
</head>
<body>
<div class="video-container" id="videoContainer">
<span class="close" id="close">✖</span>
<video src="video.mp4" controls autoplay></video>
</div>
<div class="table-container">
<h1 class="heading">Video Records</h1>
<table class="table">
<thead>
<tr>
<th>Video ID</th>
<th>File Name</th>
<th>Date</th>
<th>Time</th>
<th>#</th>
</tr>
</thead>
<tbody>
<tr>
<td data-label="Video ID">0022332</td>
<td data-label="File Name">Videocapture.mp4</td>
<td data-label="Date">12 / 04 / 2021</td>
<td data-label="Time">11:34 PM</td>
<td data-label="#">Play</td>
</tr>
<tr>
<td data-label="Video ID">0022311</td>
<td data-label="File Name">Videocapture1.mp4</td>
<td data-label="Date">12 / 04 / 2021</td>
<td data-label="Time">11:34 PM</td>
<td data-label="#">Play</td>
</tr>
<tr>
<td data-label="Video ID">0022131</td>
<td data-label="File Name">Videocapture2.mp4</td>
<td data-label="Date">12 / 04 / 2021</td>
<td data-label="Time">11:34 PM</td>
<td data-label="#">Play</td>
</tr>
<tr>
<td data-label="Video ID">0025321</td>
<td data-label="File Name">Videocapture3.mp4</td>
<td data-label="Date">12 / 04 / 2021</td>
<td data-label="Time">11:34 PM</td>
<td data-label="#">Play</td>
</tr>
</tbody>
</div>
<script type="text/javascript">
btn = document.getElementById("btn");
videoContainer = document.getElementById("videoContainer");
close = document.getElementById("close");
btn.addEventListener('click',()=>{
videoContainer.classList.add('show');
})
close.addEventListener('click',()=>{
videoContainer.classList.remove('show');
})
</script>
</body>
</html>
I think its because of my javascript so I kind of wondering if someone could help me to make it work in multiple buttons instead of one only

With getElementById you'll only get one HTML element. You should use getElementByClassName or querySelectorAll to get all the nodes that match the .class selector. And to attach event listenters to all the nodes in a NodeList object, you can use forEach.
document.querySelectorAll(".btn").forEach(btn => {
btn.addEventListener('click',()=>{
videoContainer.classList.add('show');
})
})
Learn more at https://developer.mozilla.org/en-US/docs/Web/API/Document_object_model/Locating_DOM_elements_using_selectors

Related

How to generate pdf from an html template with a React.js frontend?

I want to convert a plain HTML with basic CSS to a PDF document. I'm using React.js as my frontend framework. Ideally the conversion will be on the browser instead of the server, to not burden the server in case a lot of clients want to generate pdf documents.
The solutions I found are kind of weird to me. I expected to find a relatively simple library where you can pass a html object and returns a pdf binary data. But what I find is jsPDF that works with a canvas and it looks a bit overcomplicated to me.
It's possible to export the template html to pdf using the browser itself. However, I can't set, for example, a footer this way.
An example html could be like:
/* reset */
*
{
border: 0;
box-sizing: content-box;
color: inherit;
font-family: inherit;
font-size: inherit;
font-style: inherit;
font-weight: inherit;
line-height: inherit;
list-style: none;
margin: 0;
padding: 0;
text-decoration: none;
vertical-align: top;
}
/* content editable */
*[contenteditable] { border-radius: 0.25em; min-width: 1em; outline: 0; }
*[contenteditable] { cursor: pointer; }
*[contenteditable]:hover, *[contenteditable]:focus, td:hover *[contenteditable], td:focus *[contenteditable], img.hover { background: #DEF; box-shadow: 0 0 1em 0.5em #DEF; }
span[contenteditable] { display: inline-block; }
/* heading */
h1 { font: bold 100% sans-serif; letter-spacing: 0.5em; text-align: center; text-transform: uppercase; }
/* table */
table { font-size: 75%; table-layout: fixed; width: 100%; }
table { border-collapse: separate; border-spacing: 2px; }
th, td { border-width: 1px; padding: 0.5em; position: relative; text-align: left; }
th, td { border-radius: 0.25em; border-style: solid; }
th { background: #EEE; border-color: #BBB; }
td { border-color: #DDD; }
/* page */
html { font: 16px/1 'Open Sans', sans-serif; overflow: auto; padding: 0.5in; }
html { background: #999; cursor: default; }
body { box-sizing: border-box; height: 11in; margin: 0 auto; overflow: hidden; padding: 0.5in; width: 8.5in; }
body { background: #FFF; border-radius: 1px; box-shadow: 0 0 1in -0.25in rgba(0, 0, 0, 0.5); }
/* header */
header { margin: 0 0 3em; }
header:after { clear: both; content: ""; display: table; }
header h1 { background: #000; border-radius: 0.25em; color: #FFF; margin: 0 0 1em; padding: 0.5em 0; }
header address { float: left; font-size: 75%; font-style: normal; line-height: 1.25; margin: 0 1em 1em 0; }
header address p { margin: 0 0 0.25em; }
header span, header img { display: block; float: right; }
header span { margin: 0 0 1em 1em; max-height: 25%; max-width: 60%; position: relative; }
header img { max-height: 100%; max-width: 100%; }
header input { cursor: pointer; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; height: 100%; left: 0; opacity: 0; position: absolute; top: 0; width: 100%; }
/* article */
article, article address, table.meta, table.inventory { margin: 0 0 3em; }
article:after { clear: both; content: ""; display: table; }
article h1 { clip: rect(0 0 0 0); position: absolute; }
article address { float: left; font-size: 125%; font-weight: bold; }
/* table meta & balance */
table.meta, table.balance { float: right; width: 36%; }
table.meta:after, table.balance:after { clear: both; content: ""; display: table; }
/* table meta */
table.meta th { width: 40%; }
table.meta td { width: 60%; }
/* table items */
table.inventory { clear: both; width: 100%; }
table.inventory th { font-weight: bold; text-align: center; }
table.inventory td:nth-child(1) { width: 26%; }
table.inventory td:nth-child(2) { width: 38%; }
table.inventory td:nth-child(3) { text-align: right; width: 12%; }
table.inventory td:nth-child(4) { text-align: right; width: 12%; }
table.inventory td:nth-child(5) { text-align: right; width: 12%; }
/* table balance */
table.balance th, table.balance td { width: 50%; }
table.balance td { text-align: right; }
/* aside */
aside h1 { border: none; border-width: 0 0 1px; margin: 0 0 1em; }
aside h1 { border-color: #999; border-bottom-style: solid; }
/* javascript */
.add, .cut
{
border-width: 1px;
display: block;
font-size: .8rem;
padding: 0.25em 0.5em;
float: left;
text-align: center;
width: 0.6em;
}
.add, .cut
{
background: #9AF;
box-shadow: 0 1px 2px rgba(0,0,0,0.2);
background-image: -moz-linear-gradient(#00ADEE 5%, #0078A5 100%);
background-image: -webkit-linear-gradient(#00ADEE 5%, #0078A5 100%);
border-radius: 0.5em;
border-color: #0076A3;
color: #FFF;
cursor: pointer;
font-weight: bold;
text-shadow: 0 -1px 2px rgba(0,0,0,0.333);
}
.add { margin: -2.5em 0 0; }
.add:hover { background: #00ADEE; }
.cut { opacity: 0; position: absolute; top: 0; left: -1.5em; }
.cut { -webkit-transition: opacity 100ms ease-in; }
tr:hover .cut { opacity: 1; }
#media print {
* { -webkit-print-color-adjust: exact; }
html { background: none; padding: 0; }
body { box-shadow: none; margin: 0; }
span:empty { display: none; }
.add, .cut { display: none; }
}
#page { margin: 0; }
<html>
<head>
<meta charset="utf-8">
<title>Invoice</title>
<link rel="stylesheet" href="style.css">
<link rel="license" href="https://www.opensource.org/licenses/mit-license/">
<script src="script.js"></script>
</head>
<body>
<header>
<h1>Invoice</h1>
<address contenteditable>
<p>Jonathan Neal</p>
<p>101 E. Chapman Ave<br>Orange, CA 92866</p>
<p>(800) 555-1234</p>
</address>
<span><img alt="" src="http://www.jonathantneal.com/examples/invoice/logo.png"><input type="file" accept="image/*"></span>
</header>
<article>
<h1>Recipient</h1>
<address contenteditable>
<p>Some Company<br>c/o Some Guy</p>
</address>
<table class="meta">
<tr>
<th><span contenteditable>Invoice #</span></th>
<td><span contenteditable>101138</span></td>
</tr>
<tr>
<th><span contenteditable>Date</span></th>
<td><span contenteditable>January 1, 2012</span></td>
</tr>
<tr>
<th><span contenteditable>Amount Due</span></th>
<td><span id="prefix" contenteditable>$</span><span>600.00</span></td>
</tr>
</table>
<table class="inventory">
<thead>
<tr>
<th><span contenteditable>Item</span></th>
<th><span contenteditable>Description</span></th>
<th><span contenteditable>Rate</span></th>
<th><span contenteditable>Quantity</span></th>
<th><span contenteditable>Price</span></th>
</tr>
</thead>
<tbody>
<tr>
<td><a class="cut">-</a><span contenteditable>Front End Consultation</span></td>
<td><span contenteditable>Experience Review</span></td>
<td><span data-prefix>$</span><span contenteditable>150.00</span></td>
<td><span contenteditable>4</span></td>
<td><span data-prefix>$</span><span>600.00</span></td>
</tr>
</tbody>
</table>
<a class="add">+</a>
<table class="balance">
<tr>
<th><span contenteditable>Total</span></th>
<td><span data-prefix>$</span><span>600.00</span></td>
</tr>
<tr>
<th><span contenteditable>Amount Paid</span></th>
<td><span data-prefix>$</span><span contenteditable>0.00</span></td>
</tr>
<tr>
<th><span contenteditable>Balance Due</span></th>
<td><span data-prefix>$</span><span>600.00</span></td>
</tr>
</table>
</article>
<aside>
<h1><span contenteditable>Additional Notes</span></h1>
<div contenteditable>
<p>A finance charge of 1.5% will be made on unpaid balances after 30 days.</p>
</div>
</aside>
</body>
</html>
Does anyone know a good solution for what I want? Converting a html with embedded styling to pdf? I'm willing to pay for a library, but I've to try it out first before I pay.

CSS Printing: Avoiding cut-in-half table between pages?

Here is the sample of my page to print, but it break the page in the bad place and the print looks very bad, please check the code to understand what happens? I need to page bread before or after it if needed not in the middle, also some space from bottom.
body {
opacity: 0;
}
#media print {
* {
-webkit-print-color-adjust: exact !important;
}
#font-face {
font-family: "YekanWeb";
src: url("../fonts/YekanWeb-Regular.woff2") format("woff2"),
url("../fonts/YekanWeb-Regular.woff") format("woff");
font-weight: normal;
font-style: normal;
font-display: swap;
}
#page {
margin-top: 0;
margin-bottom: 0;
padding-top: 1cm;
padding-bottom: 1cm;
}
h2.right-border {
background-color: #f3f5f7;
border-color: #42b983;
padding: 7px 10px;
border-right-width: 0.6rem;
border-right-style: solid;
margin: 1rem -15px;
}
body {
padding-top: 15px;
padding-bottom: 15px;
direction: rtl !important;
text-align: right !important;
font-family: "YekanWeb", arial, sans-serif !important;
}
.table-prices {
break-inside: avoid;
}
body {
opacity: 1 !important;
display: grid !important;
}
table {
page-break-inside: avoid;
}
table {
font-family: "YekanWeb", arial, sans-serif;
border-collapse: collapse;
width: 70%;
}
td,
th {
border: 1px solid #dddddd;
text-align: right;
padding: 2px 8px;
font-weight: 700;
}
.table-invoice tr:nth-child(even) {
background: rgb(241 241 241 / 50%) !important;
}
.reports {
padding: 20px 10px;
font-family: "YekanWeb", "Calibri", "Adobe Arabic";
background: rgb(255, 255, 255);
}
.rep_header {
color: #555;
width: 100%;
height: 100px;
padding-bottom: 10px;
}
.container.rep_header {
border-bottom: 2px solid #333;
}
.header {
position: fixed;
top: 0;
}
.footer {
position: relative;
bottom: 0;
margin-top: 20px;
width: 100%;
text-align: center;
}
.rep_header_logo {
margin: 0px 0px 0px 0px;
display: block;
float: right;
height: 90px;
text-align: right;
}
.rep_header_logo img {
height: 100%;
position: relative;
}
.rep_header_title {
margin: 0px 40px 0px 0px;
float: right;
display: block;
height: 100px;
text-align: right;
}
.rep_header_title h2 {
font-size: 32px;
text-align: right;
line-height: 90px;
vertical-align: middle;
}
.rep_header_extra {
margin: 20px 0px 0px 0px;
float: left;
display: block;
height: 90px;
width: 150px;
text-align: right;
font-size: 13px;
}
.inv_header_extra {
margin: 20px 0px 0px 0px;
float: left;
display: block;
height: 90px;
width: 140px;
text-align: right;
font-size: 12px;
}
.rep_body {
display: block;
width: 100%;
}
.rep_body_content {
display: block;
width: 100%;
}
.rep_overview {
padding: 0px;
}
.rep_description {
margin: 14px 0px 12px;
}
.paneldiv {
padding: 0px 1%;
}
.table-reports {
margin: 10px 0px 20px;
}
.table-reports tr th,
.table-reports tr td {
padding: 2px 8px;
vertical-align: top;
}
.table-reports thead tr th {
background: rgb(241 241 241 / 50%);
font-weight: 700;
font-size: 12px;
line-height: 28px;
direction: rtl !important;
text-align: right !important;
}
.table-reports tfoot tr th {
background: #eee;
font-weight: 700;
font-size: 12px;
line-height: 28px;
direction: rtl !important;
text-align: right !important;
}
.table-reports tr {
font-size: 12px;
}
.table-reports tr:nth-child(even) {
background: #efefef;
}
.rep_wait {
width: 100%;
text-align: center;
margin-top: 130px;
margin-bottom: 130px;
font-size: 40px;
color: #ccc;
}
.rep_no_result {
display: block;
width: 100%;
text-align: center;
margin: 150px 0px;
font-size: 21px;
color: #999;
}
.invoice_heading {
display: block;
width: 98%;
margin: 30px 1%;
font-size: 16px;
}
.in_info {
width: 20%;
text-align: left;
display: block;
float: left;
left: 0px;
}
.or_datetime {
margin: 15px 0px 15px 0px;
font-size: 12px;
color: #777;
font-weight: normal !important;
}
.cu_in_table {
width: 100%;
}
.cu_in_table tr td {
border: 1px solid #999;
font-size: 14px;
padding: 2px 6px;
font-weight: 700;
}
.invtablediv {
display: block;
padding: 0px !important;
}
.table-invoice {
width: 100%;
}
.table-invoice tr th {
padding: 1px 8px;
vertical-align: top;
text-align: center;
border: 1px solid #c2bfbf;
font-size: 12px;
font-weight: 700;
}
.table-invoice tr td {
font-size: 14px;
padding: 3px 8px 2px;
vertical-align: top;
text-align: right;
font-weight: 700;
border: 1px solid #cfcfcf;
}
.table-invoice thead tr th {
background: #ddd;
font-weight: 700;
font-size: 14px;
line-height: 24px;
direction: rtl !important;
text-align: right !important;
}
.table-itemreceipt thead tr th {
line-height: 16px !important;
}
.table-invoice tfoot tr th {
padding: 0px 8px;
background: #e9e9e9;
font-weight: 700;
font-size: 11px;
line-height: 20px;
direction: rtl !important;
text-align: right;
}
.table-invoice tfoot tr th {
padding: 0px 8px;
}
.table-invoice tr {
font-size: 10px;
}
.inv_stamp {
display: block;
padding: 0px 0px;
float: right;
width: 100%;
margin: 15px 0px;
font-size: 12px;
font-weight: 700;
}
.inv_desc {
display: block;
padding: 0px 4px;
margin: 0px 0%;
font-weight: 700;
}
.table-prices {
float: left;
max-width: 50%;
width: min-content;
}
.table-prices th {
white-space: nowrap;
}
.table-prices tr {
background: rgb(241 241 241 / 50%);
}
.inv_verify {
display: block;
padding: 0px 4px;
width: 56%;
width: 100%;
height: 120px;
margin: 10px 0%;
}
.inv_notesdiv {
display: block;
padding: 0px 4px;
float: right;
width: 98%;
margin: 20px 0%;
font-size: 10px;
}
.inv_note {
display: block;
width: 100%;
margin: 8px 0%;
}
.rep_footer {
display: block;
float: right;
width: 80%;
text-align: center;
color: #ccc;
margin-top: 30px;
}
.inv_footer {
background: #fff;
position: fixed;
bottom: 10px;
padding: 8px 1%;
display: block;
float: right;
width: 98%;
font-size: 14px;
color: #555;
line-height: 16px;
}
.invz_footer {
border-top: 2px solid #333 !important;
background: #fff;
position: fixed !important;
bottom: 4px !important;
margin-top: 60px;
padding: 8px 1%;
display: block;
float: right;
width: 98%;
font-size: 14px;
color: #777;
line-height: 16px;
}
.invz_footer .company_desc,
.invz_footer .company_contact,
.invz_footer .company_address {
display: block;
float: right;
text-align: right;
font-size: 12px;
}
.invz_footer .company_desc {
width: 40%;
}
.invz_footer .company_contact {
width: 30%;
}
.invz_footer .company_address {
width: 30%;
}
.transaction-block {
display: block;
width: 98%;
margin: 0px 1%;
font-size: 14px;
}
.tr_date table tr td {
padding-left: 4px;
}
.tr_titles {
margin-top: 10px;
}
.tr_titles table tr td {
padding-left: 4px;
}
.tr_desc_table {
width: 100%;
margin-top: 20px;
}
.tr_desc_table thead tr td {
text-align: center;
line-height: 26px;
font-weight: 700;
background: #ddd;
border: 1px solid #c2bfbf;
}
.tr_desc_table tbody tr td {
padding: 4px 0;
text-align: center;
border: 1px solid #cfcfcf;
}
.narrations {
margin-top: 20px;
}
.blank_line_label {
display: inline-block;
width: 80px;
}
.blank_line {
display: inline-block;
width: 450px;
border-bottom: 2px solid #aaa;
margin: 0 10px;
}
.verification_area {
width: 100%;
display: block;
margin-top: 20px;
}
.verification_area .tr_titles {
width: 100%;
display: block;
text-align: center;
}
.verification_area .signatures {
display: inline-block;
width: 15%;
margin: 80px 4% 20px;
padding-top: 6px;
border-top: 1px solid #999;
}
.tr_cost_table {
width: 100%;
font-size: 14px;
margin-top: 20px;
}
.tr_cost_table thead tr td {
text-align: center;
line-height: 26px;
font-weight: 700;
background: #ddd i !important;
}
.tr_cost_table tbody tr td {
padding: 4px 0;
text-align: center;
}
.tr_cost_table tfoot tr td {
line-height: 26px;
background: #e4e4e4 !important;
}
.bs_tr_s td {
line-height: 0.3rem !important;
}
.table-prices tr th:first-child {
text-align: left !important;
width: 192px;
}
}
<!DOCTYPE html>
<html>
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
<link rel="stylesheet" media="print" href="http://localhost:8000/css/print.css">
<link rel="stylesheet" href="http://localhost:8000/css/print.css" />
</head>
<body onload="window.print()">
<div class="container rep_header">
<header class="rep_header">
<div class="rep_header_logo"><img src="/img/default/logo.png"></div>
<div class="rep_header_title">
<h2>شرکت تجارتی شایق علیمی لمیتد</h2>
</div>
<div class="inv_header_extra"><span>بل آقر</span><br>شمارۀ بل: <span class="invoice_number"
dir="ltr"></span><br>تاریخ صادره: <span class="curdate"></span></div>
</header>
</div>
<div class="container mt-5">
<h2 class="right-border">معلومات آقر</h2>
<div class="row justify-content-between">
<table class="cu_in_table pull-left">
<thead>
<tr>
<td style="width:20%;">سریال نمبر: </td>
<td style="width:80%;">
WB-101
</td>
</tr>
</thead>
<tbody>
<tr>
<td>عنوان:</td>
<td><span class="cu_name">Ducimus do illo id</span>
</td>
</tr>
<tr>
<td>تاریخ نشر اعلان: </td>
<td><span class="" dir="ltr" style="text-align:left;">1400-01-14</span></td>
</tr>
<tr>
<td>آدرس نشر اعلان: </td>
<td><span class="" dir="ltr" style="text-align:left;">Aliqua Debitis volu</span></td>
</tr>
<tr>
<td>تاریخ آفرگشایی:</td>
<td><span class="" dir="ltr" style="text-align:left;">1400-01-14</span></td>
</tr>
<tr>
<td>آدرس آفرگشایی: </td>
<td><span class="" dir="ltr" style="text-align:left;">Blanditiis et odit e</span></td>
</tr>
<tr>
<td>تاریخ ختم پیشنهاد:</td>
<td><span class="" dir="ltr" style="text-align:left;">1400-01-14</span></td>
</tr>
<tr>
<td>شماره شناسایی آقر:</td>
<td><span class="" dir="ltr" style="text-align:left;">Laudantium adipisic</span></td>
</tr>
<tr>
<td>مرجع مربوطه:</td>
<td><span class="" dir="ltr" style="text-align:left;">ریاست محافظت رئیس جمهور</span></td>
</tr>
<tr>
<td>تضمین آفر:</td>
<td><span class="" dir="ltr" style="text-align:left;">23233</span></td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="container">
<h2 class="right-border">لیست محصولات</h2>
<div class="row justify-content-between">
<div class="invtablediv">
<table class="table-invoice">
<thead>
<tr>
<th style="width:4%; text-align: center !important;">#</th>
<th style="width:14%; text-align: center !important;">نام محصول</th>
<th style="width:15%; text-align: center !important;">مقدار</th>
<th style="width:10%; text-align: center !important;">فی واحد</th>
<th style="width:15%; text-align: center !important;">مجموع</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Armando Welch</td>
<td>6348</td>
<td>3</td>
<td>19044</td>
</tr>
<tr>
<td>2</td>
<td>2021 سوپر</td>
<td>109980</td>
<td>12</td>
<td>1319760</td>
</tr>
<tr>
<td>3</td>
<td>Cruz Lee</td>
<td>10235</td>
<td>30</td>
<td>307050</td>
</tr>
<tr>
<td>4</td>
<td>Armando Welch</td>
<td>36</td>
<td>2222</td>
<td>79992</td>
</tr>
</tbody>
</table>
<br>
<table class="table-prices text-right float-left">
<thead>
<tr>
<th>قیمت مجموعی اجناس :</th>
<th style="width:142px;">1725846 AFN</th>
</tr>
<tr>
<th style="text-align:left !important;">ارزش آقر :</th>
<th>614624 AFN</th>
</tr>
<tr>
<th style="text-align:left !important;">تامینات :</th>
<th>0 %</th>
</tr>
<tr>
<th style="text-align:left !important;">مالیات :</th>
<th>0 %</th>
</tr>
<tr>
<th style="text-align:left !important;">انتقالات :</th>
<th>0 AFN</th>
</tr>
<tr>
<th style="text-align:left !important;">خدمات :</th>
<th>1444 AFN</th>
</tr>
<tr>
<th style="text-align:left !important;">تخفیف :</th>
<th>1111222 AFN</th>
</tr>
<tr>
<th style="text-align:left !important;">قیمت نرخ دهی :</th>
<th>1725846 AFN</th>
</tr>
</thead>
</table>
<div class="inv_stamp pull-left margin-top-30" style="width:50%;">
<div class="inv_desc">
ملاحضات:<br>
<div class="inv_desc_detail">
به تعداد (4) قلم جنس برای محترم/محترمه
"ریاست محافظت رئیس جمهور" به ارزش "1725846 افغانی" به
آفر تهیه شده است.
</div>
</div>
<div class="inv_verify margin-top-30">
مهر و امضاء:<br>
<div class="inv_desc_detail">
</div>
</div>
</div>
</div>
</div>
</div>
<div class="footer">
<div class="container">
<span class="hidespan seller" style="float: left;padding-left: 2%;">چاپ شده توسط
شرکت شایق علیمی</span>
</div>
</div>
</body>
<script>
</script>
</html>

You need to add margins to your page like this:
#page {
margin: 72px 72px 138.24px 72px;
}
and also add these style to avoid breaking your table
table {
page-break-inside: avoid;
page-break-after: auto;
}
tr {
page-break-inside: avoid;
page-break-after: auto;
}
table tfoot thead {
break-inside: auto;
overflow: hidden;
}

How to make tooltips visible on clicking an icon and hidden when clicking the same icon?

I want to show tooltips at three different places when clicking an info icon. And disable the tooltips by clicking the icon once again. How can I achieve this by using HTML and jQuery? Say in the below example, I click Add and it shows me those 3 tooltips, and clicking on Add again hides them.
EDIT : Code that I tried
HTML
<div id="info-info">
<i class="fa fa-info-circle" ></i>
<div class="tip" data-toggle="tooltip" data-trigger="click">Info 1</div>
<div class="tip1">Info 2</div>
<div class="tip2">Info 3</div>
</div>
JS
$(".info").click(function(){
var left = $("i", this).offset().left + ($("i", this).width() / 2) - ($(".tip", this).width() / 2);
$(".tip", this).toggle();
$(".tip1", this).toggle()
$(".tip2", this).toggle();
});
CSS
#info-info {
float: left;
height: 50px;
padding: 9px 0px 0px 10px;
text-align: left;
letter-spacing: 0;
color: #FFFFFF;
opacity: 1;
text-decoration: none;
font-size: 18px;
}
#info-info .tip {
display: none;
position: absolute;
border: 1px solid #333;
border-radius: 2px;
padding-left: 3px;
margin-left: 300px;
left: 900px;
color: #000000;
}
#info-info .tip1 {
display: none;
position: absolute;
border: 1px solid #333;
border-radius: 2px;
padding-left: 3px;
margin-left: 300px;
left: 1px;
color: #000000;
}
#info-info .tip2 {
display: none;
position: absolute;
border: 1px solid #333;
border-radius: 2px;
padding-left: 3px;
margin-left: 300px;
left: 10px;
color: #000000;
}

Essentially you'll want to hide/show a set of absolutely positioned elements when certain things are clicked (or hovered)
function toggleTips () {
$(".tooltip").each(function() {
$(this).toggleClass("hidden")
})
}
$("#toggle-tips").on("click", function() {
toggleTips();
})
body {
font-family: Sans-serif
}
table {
border-collapse: collapse;
}
thead {
background: lightgray;
}
table, th, td {
border: 1px solid gray;
}
th, td {
position: relative;
padding: 10px
}
.tooltip {
box-shadow: 3px 3px 10px 0 rgba(0,0,0,.5);
padding: 10px;
position: absolute;
background: white;
white-space: nowrap;
font-weight: normal;
z-index: 2;
}
.hidden {
display: none;
}
button {
margin-top: 10px;
background: lightgray;
padding: 10px;
border: 0;
border-radius: 10px;
}
button:hover {
background: gray;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<thead>
<th>First Name <span class="tooltip hidden">User's first name</span></th>
<th>Last Name</th>
<th>Phone #</th>
</thead>
<tbody>
<td>Jane</td>
<td>Doe</td>
<td>0123456789<span class="tooltip hidden">User's phone number</span></td>
</tbody>
</table>
<button id="toggle-tips">Toggle Tips</button>

Want like this...
$(function(){
$(".info").click(function(){
var left = $("img",this).offset().left + ($("img",this).width()/2) - ($(".tip", this).width()/2);
$(".tip", this).toggle().css({"left":left});
});
});
.info .tip{
display: none;
position: absolute;
border: 1px solid #333;
border-radius: 2px;
padding: 3px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="info"><img src="http://blog.flattr.net/wp-content/uploads/2011/09/stackoverflow.png" />
<div class="tip">tool tip text</div>
</div>
Source - http://jsfiddle.net/NPXaf/

Javascript sorting html elements

I'm trying to sort html elements in JS so it looks like this,
I have it so when you hover over them, they expand with extra info but only the last one in every row gets that feature and I can't figure out why, (i've been trying for hours) if someone could help me i'd appreciate it.
i'll post it link a jsfiddle and ill post my js code here so it's eaiser to read, and all the css/html/js code with be on the jsfiddle,
https://jsfiddle.net/b7dt0xwj/
var days = ['monday', 'tuesday', 'wednesday', 'thursday', 'friday'] //'saturday', "sunday"];
var show = document.getElementsByTagName("tr");
function sortElements(){
// console.log(show)
for (var i=0; i<4; i++){
var dayHeader = document.getElementById(days[i])
var showInfo = document.getElementsByClassName("info")[1]
// console.log(showInfo)
for(var j=0; j<show.length; j++){
if (show[j].getAttribute("day") === dayHeader.getAttribute("id")){
dayHeader.parentNode.insertBefore(show[j], dayHeader.nextSibling);
console.log(show[j])
console.log(j)
dayHeader.parentNode.insertBefore(showInfo, show[j].nextSibling);
}
}
}
}

I used jQuery's .insertAfter after finding the appropriate day. However, I noticed that you rely on the next element to come directly after. So, I moved that element as well.
function sortElements(){
$(".main table tr[day]").each(function () {
var $this = $(this),
$nextEl = $this.next();
$this.insertAfter($this.parent().find("#" + $this.attr("day")));
$nextEl.insertAfter($this)
});
}
sortElements();
body {
font-family: "Roboto";
padding: 0px;
margin: 0px;
background-color: #dddcdc;
}
p {
display: inline;
}
.logo {
display: inline-block;
width: 120px;
margin-top: 10px;
margin-right: 0px;
margin-left: 75px;
font-weight: bold;
color: #ff0808;
font-size: 28px;
}
.logo a {
text-decoration: none;
color: red;
}
.logo a:hover {
color: #e20505;
}
.navbar {
background-color: #e7e6e6;
box-shadow: 1px 1px 7px #5c5c5c;
/* x, distance */
margin: 0px;
height: 52px;
}
.navbar-links {
display: inline;
}
.navbar-links p a {
margin: 0px 0px 0px 65px;
padding: 0px;
display: inline;
font-weight: bold;
text-transform: uppercase;
color: #5c5c5c;
font-size: 18px;
text-decoration: none;
}
p a:hover {
padding-bottom: 6px;
border-bottom: 2px solid #f87531;
}
div p .orange-btn {
position: relative;
bottom: 5px;
left: 230px;
border: 1px solid #f87531;
border-radius: 5px;
color: white;
margin-bottom: 5px;
font-size: 13px;
padding: 12px;
background-color: #f87531;
}
div p .orange-btn:hover {
background-color: #e06f35;
}
.main {
box-shadow: 0 4px 2px -4px #5c5c5c;
margin: 60px 66px;
background-color: #f2f2f2;
}
table {
width: 100%;
border-collapse: collapse;
border-top: none;
border-left: none;
border-right: none;
}
th,
td {
border-left: none;
border-right: none;
padding: 4px 0px;
width: 33%;
text-align: center;
font-size: 18px;
font-weight: 500;
/*border: 1px solid black;*/
}
th {
font-size: 20px;
padding: 5px;
font-weight: bolder;
}
tbody tr:hover {
background-color: #f87531;
cursor: default;
color: white;
}
.day {
width: 99%;
color: #5c5c5c;
text-align: center;
font-weight: 900;
font-size: 25px;
letter-spacing: 2px;
background-color: #dddcdc;
}
.airing {
background-color: #16c966;
}
.info {
/*display: none;*/
}
tr+tr.info {
color: #5c5c5c;
visibility: collapse;
height: 0px;
/*opacity: 0;*/
transition: height 0.3s linear, opacity 0.3s linear;
}
tr:hover+tr.info {
border: 1px solid #f87531;
height: 100px;
opacity: 1;
visibility: visible;
display: table-row;
}
.info:hover {
color: #5c5c5c;
background-color: #f2f2f2;
height: 100px;
opacity: 1px;
visibility: visible;
display: table-row;
border: 1px solid #f87531;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="main">
<table border="1">
<thead>
<tr>
<th>Show name</th>
<th>Season | Episode</th>
<th>Day of Return</th>
</tr>
</thead>
<tbody>
<tr id="monday">
<td class="day"colspan="3">
Monday
</td>
</tr>
<tr id="tuesday">
<td class="day" colspan="3">
Tuesday
</td>
</tr>
<tr id="wednesday">
<td class="day" colspan="3">
Wensday
</td>
</tr>
<tr id="thursday">
<td class="day" colspan="3">
Thursday
</td>
</tr>
<tr id="friday">
<td class="day" colspan="3">
Friday
</td>
</tr>
<tr class="airing" day="monday">
<td>test1</td>
<td>Test2</td>
<td>Test3</td>
</tr>
<tr class="info">
<td colspan="3">show info here</td>
</tr>
<!-- -->
<tr class="airing" day="monday">
<td>test1</td>
<td>Test2</td>
<td>Test3</td>
</tr>
<tr class="info">
<td colspan="3">show info here</td>
</tr>
<!-- -->
<tr day="tuesday">
<td>arrow</td>
<td>Test</td>
<td>Test</td>
</tr>
</tbody>
</table>
</div>

You are not calling the sortElement function. add the following at the bottom of your script.
sortElements();

How can I create a function that detects when my scrollable tbody overflows?

I* created a scrollable table that only scrolls up its tbody but the rest stays fixed and that's how it should be, however, when the tbody is not big enough the little trick that I made to keep the scrollbar out of the tbody because it disarranges. how can I create a function that detects when it (the lines td) overflows the table's size (let's say its height is 100%) so I can change the settings of the table.
Ex:
function detector(){
if(table.overflow-y:is_on){
//bla
}
}
*We actually, StackOverflow community and I, Thank you! live long and prosper.
When there are more lines than the table's height it's okay:
But if not...
th, td {
word -
break: break -all;
}
html {
width: 100 % ;
height: 100 % ;
overflow: hidden;
}
body {
background: #FFF;
color: #000;font: normal normal 12px Verdana, Geneva, Arial, Helvetica, sans-serif;margin: 10px; padding: 0;}
table, td, a {color: # 000;
font: normal normal 12px Verdana, Geneva, Arial, Helvetica, sans - serif
}
h1 {
font: normal normal 18px Verdana,
Geneva,
Arial,
Helvetica,
sans - serif;
margin: 0 0 5px 0
}
div.tableContainer {
clear: both;
border: 1px solid #963;padding-right:1px;height: 285px;overflow: auto;width: 100%;}
html>body div.tableContainer {overflow: hidden;width: 100%;height:83%;}
div.tableContainer table {float: left;width: 100%;height:100%;}
html>body div.tableContainer table {
width: calc(100% - 16px);
height:100%;
}
thead.fixedHeader tr {
position: relative
}
html>body thead.fixedHeader tr {
display: block
}
thead.fixedHeader th {
background: # C96;
border - left: 1px solid# EB8;
border - right: 1px solid# B74;
border - top: 1px solid# EB8;
font - weight: normal;
padding: 4px 3px;
text - align: left;
}
thead.fixedHeader a, thead.fixedHeader a: link, thead.fixedHeader a: visited {
color: #FFF;
display: block;
text - decoration: none;
width: 100 % ;
}
thead.fixedHeader a: hover {
color: #FFF;
display: block;
text - decoration: underline;
width: 100 % ;
}
html > body tbody.scrollContent {
display: block;
overflow: auto;
width: 100 % ;
height: 100 % ;
}
/* make TD elements pretty. Provide alternating classes for striping the table */
/* http://www.alistapart.com/articles/zebratables/ */
tbody.scrollContent td, tbody.scrollContent tr.normalRow td {
background: #FFF;
border - bottom: none;
border - left: none;
border - right: 1px solid# CCC;
border - top: 1px solid# DDD;
padding: 2px 3px 3px 4px
}
tbody.scrollContent tr.alternateRow td {
background: #EEE;
border - bottom: none;
border - left: none;
border - right: 1px solid# CCC;
border - top: 1px solid# DDD;
padding: 2px 3px 3px 4px
}
.scrollTable, .scrollContent {
overflow: visible;
}
html > body tbody.scrollContent {
width: calc(100 % +17px);
}
th,
td {
word-break: break-all;
}
html {
width: 100%;
height: 100%;
overflow: hidden;
}
body {
background: #FFF;
color: #000;
font: normal normal 12px Verdana, Geneva, Arial, Helvetica, sans-serif;
margin: 10px;
padding: 0;
}
table,
td,
a {
color: #000;
font: normal normal 12px Verdana, Geneva, Arial, Helvetica, sans-serif
}
h1 {
font: normal normal 18px Verdana, Geneva, Arial, Helvetica, sans-serif;
margin: 0 0 5px 0
}
div.tableContainer {
clear: both;
border: 1px solid #963;
padding-right: 1px;
height: 285px;
overflow: auto;
width: 100%;
}
html>body div.tableContainer {
overflow: hidden;
width: 100%;
height: 83%;
}
div.tableContainer table {
float: left;
width: 100%;
height: 100%;
}
html>body div.tableContainer table {
width: calc(100% - 16px);
height: 300px;
}
thead.fixedHeader tr {
position: relative
}
html>body thead.fixedHeader tr {
display: block
}
thead.fixedHeader th {
background: #C96;
border-left: 1px solid #EB8;
border-right: 1px solid #B74;
border-top: 1px solid #EB8;
font-weight: normal;
padding: 4px 3px;
text-align: left;
}
thead.fixedHeader a,
thead.fixedHeader a:link,
thead.fixedHeader a:visited {
color: #FFF;
display: block;
text-decoration: none;
width: 100%;
}
thead.fixedHeader a:hover {
color: #FFF;
display: block;
text-decoration: underline;
width: 100%;
}
html>body tbody.scrollContent {
display: block;
overflow: auto;
width: 100%;
height: 100%;
}
/* make TD elements pretty. Provide alternating classes for striping the table */
/* http://www.alistapart.com/articles/zebratables/ */
tbody.scrollContent td,
tbody.scrollContent tr.normalRow td {
background: #FFF;
border-bottom: none;
border-left: none;
border-right: 1px solid #CCC;
border-top: 1px solid #DDD;
padding: 2px 3px 3px 4px
}
tbody.scrollContent tr.alternateRow td {
background: #EEE;
border-bottom: none;
border-left: none;
border-right: 1px solid #CCC;
border-top: 1px solid #DDD;
padding: 2px 3px 3px 4px
}
.scrollTable,
.scrollContent {
overflow: visible;
}
html>body tbody.scrollContent {
width: calc(100% + 17px);
}
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Pure CSS Scrollable Table with Fixed Header</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta http-equiv="language" content="en-us">
<style type="text/css"></style>
</head>
<body>
<h1>Pure CSS Scrollable Table with Fixed Header</h1>
<div id="tableContainer" class="tableContainer">
<table border="0" cellpadding="0" cellspacing="0" width="100%" class="scrollTable" id="Stable">
<thead class="fixedHeader">
<tr class="alternateRow">
<th>Header 1ahjsgdhjagsdhjgahjsdghjasgdhjagshjdgahjsdghjagsdhj
</th>
<th>Header 2
</th>
<th>Header 3
</th>
<th>Header 2
</th>
<th>Header 3
</th>
<th>Header 2
</th>
<th>Header 3
</th>
</tr>
</thead>
<tbody class="scrollContent">
<tr class="normalRow">
<td>123</td>
<td>123</td>
<td>123</td>
<td>123</td>
<td>123</td>
<td>123</td>
<td>123</td>
</tr>
<tr class="alternateRow">
<td>More Cell Content 1</td>
<td>More Cell Content 2</td>
<td>More Cell Content 3</td>
<td>Cell Content 2</td>
<td>Cell Content 3</td>
<td>Cell Content 2</td>
<td>Cell Content 3</td>
</tr>
</tbody>
</table>
</div>
<div>
<br>
</div>
</body><span class="gr__tooltip"><span class="gr__tooltip-content"></span><i class="gr__tooltip-logo"></i><span class="gr__triangle"></span></span>
</html>

var tbody = $('.scrollContent'),
theader = $('.fixedHeader'),
table = $('#Stable');
console.log(tbody[0].scrollHeight);
console.log(theader.height());
console.log(table.height());
if(table.height() - theader.height() < tbody[0].scrollHeight){
console.log('Overflowed height of table');
} else {
console.log('Did not overflow.');
}
I believe this is what you're looking for. It uses jQuery, but can be converted to raw Javascript if you want.
The tbody[0].scrollHeight gives the actual height of the tbody. So if this is greater than the height of the table - height of the header, a scroll bar will be created.
http://plnkr.co/edit/pSvM6S0HbEfIwMyo2NbQ?p=preview

I'm not sure I fully understand your question but it sounds like you need to just set a min-height on the table body so it doesn't shrink below a certain height when you don't have the content to fill it.

We Keep Coding

JavaScript is the programming language of the Web.

How to make one modal work for multiple button [duplicate] - javascript

Related

How to generate pdf from an html template with a React.js frontend?

CSS Printing: Avoiding cut-in-half table between pages?

How to make tooltips visible on clicking an icon and hidden when clicking the same icon?

Javascript sorting html elements

How can I create a function that detects when my scrollable tbody overflows?

Categories

Resources