Sequence scroll animation - javascript

In the begining I have to say I am pure newbie in coding (especially in JS and jQuery) and I have a problem that I really cannot solve since few days.
I want to create sequence animation that will be animated depending on scroll position. I found the source online with the code for that ---> THIS https://www.jqueryscript.net/demo/jQuery-Plugin-To-Create-Image-Sequence-Animation-On-Scroll-Sequencer/ <-- The thing is I have a massive problem to put them togheter...
I would love to have this scrolabble animation on the right side of the page (div called "right") but whenever I am doing this, the animation is not running...
Below you can see my code.
Would be more than happy to hear from you guys with some help!
$(document).ready(function() {
$(document).mousemove(function(e) {
$('.project1').offset({
left: e.pageX + 20,
top: e.pageY + 20
});
});
$(".numero1").hover(function () {
$('.project1').css({opacity : 1.0});
},
function () {
$('.project1').css({opacity : 0.0});
}
);
});
body {
background-color:#ffffff;
font:300 Arial, sans-serif;
top:0px;
margin: 0;
padding: 0;
cursor: url('./img/dot1.ico'), auto;
overflow:hidden;
}
*{
border:none;
}
a{
text-decoration:none;
}
/* unvisited link */
a:link {
color: black;
}
/* visited link */
a:visited {
color: black;
}
a:hover{
color: black;
font-family: Arial;
font-style:italic;
}
.left a{
color: black;
font-family: Arial;
font-style: italic;
}
.left a:hover{
color: black;
font-family: Arial;
font-style: normal;
}
li {
list-style-type: none;
}
#container {
display: flex;
overflow: hidden;
height: 100vh;
padding-top: 100px;
position: fixed;
width: 100%;
backface-visibility: hidden;
will-change: overflow;
}
.left,
.middle,
.right {
overflow: auto;
height: auto;
padding: .5rem;
-webkit-overflow-scrolling: touch;
-ms-overflow-style: none;
}
.left::-webkit-scrollbar,
.middle::-webkit-scrollbar,
.right::-webkit-scrollbar {
display: none;
}
.left {
top: 15px;
font:300 45px Arial, sans-serif, white;
font-style: normal;
line-height: 1em;
color: white;
width: 2.7%;
margin-left: 0px;
padding-left: 15px;
margin-top: -100px;
background-color: white; /* Old browsers */
/* background: -moz-linear-gradient(top, #ffb2b2 0%, #849fff 100%); /* FF3.6-15 */
/* background: -webkit-linear-gradient(top, #ffb2b2 0%,#849fff 100%); /* Chrome10-25,Safari5.1-6 */
/* background: linear-gradient(to bottom, #ffb2b2 0%,#849fff 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
/* filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffb2b2', endColorstr='#849fff',GradientType=0 ); /* IE6-9 */
border-right: 0.5px solid black;
}
.middle {
width: 28%;
padding: 10 10 0 0;
margin-top: -110px;
margin-bottom: 100px;
background-color: white;
border-right: 0.5px solid black;
}
.projects img{
width: 100%;
}
.right {
flex: 1;
padding: 0 0 0 0;
margin-top: -100px;
margin-bottom: 100px;
font: Arial, sans-serif;
background-color: white ;
font-size: 0px;
color: black;
}
.right img{
width: 100%;
}
.gallery {
margin-top: 0px;
}
.projects {
position: relative;
margin-top: 5px;
height: 70px;
padding-bottom: 50px;
font:300 22px Arial, sans-serif;
color: black;
cursor: url('./img/dot.ico'), pointer;
border-bottom: 0.5px solid black;
}
#container figure {
background: black;
margin: 0px;
line-height: 0px;
}
#container figure img {
opacity: 1;
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
}
#container figure:hover img {
opacity: 0;
}
table .numero1{
width: 100%;
text-align: left;
}
table .numero2{
width: 100%;
text-align: left;
}
table .numero3{
margin-top: 0px;
width: 100%;
text-align: left;
}
table .numero4{
margin-top: 0px;
width: 100%;
text-align: left;
}
.numero {
padding-right: 1%;
margin-top: -5px;
width:5%;
font-size: 33px;
/* -webkit-text-stroke: 0.5px black;*/
}
.title {
padding-left: 3%;
width: 40%;
padding-right: 1%;
}
.type {
width: 30%;
padding-left: 10%;
}
.year {
width: 5%;
padding-left: 1%;
}
.project1 {
position: fixed;
top: 0px;
left: 0px;
z-index: 9999;
opacity: 0;
height: 150px;
}
<!DOCTYPE HTML>
<html>
<head>
<title>Name</title>
<meta charset="utf-8" />
<link rel="icon" href="./img/sm.png" type="image/gif" />
<link rel="stylesheet" type="text/css" href="./index.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="js/app.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="responsiveslides.min.js"></script>
</head>
<body>
<div id="container">
<div class="left">
<a style="cursor: url('./img/dot.ico'), pointer;" href="index.html">N<br>A<br>M<br>E</a>
</div>
<div class="middle">
<div class="gallery">
<img class="project1" src="img/project01.jpg" alt="project1">
<div class="projects">
<table class="numero1">
<td></td>
<tr><td valign="top" class="year">0</td>
<td valign="top" class="title"><a>title</a></td>
<td valign="top" class="type">what is it</td>
</tr>
</table>
</div>
<img class="project1" src="img/project01.jpg" alt="project1">
<div class="projects">
<table class="numero1">
<td></td>
<tr><td valign="top" class="year">0</td>
<td valign="top" class="title"><a>title</a></td>
<td valign="top" class="type">what is it</td>
</tr>
</table>
</div>
<img class="project1" src="img/project01.jpg" alt="project1">
<div class="projects">
<table class="numero1">
<td></td>
<tr><td valign="top" class="year">0</td>
<td valign="top" class="title"><a>title</a></td>
<td valign="top" class="type">what is it</td>
</tr>
</table>
</div>
<img class="project1" src="img/project01.jpg" alt="project1">
<div class="projects">
<table class="numero1">
<td></td>
<tr><td valign="top" class="year">0</td>
<td valign="top" class="title"><a>title</a></td>
<td valign="top" class="type">what is it</td>
</tr>
</table>
</div>
<img class="project1" src="img/project01.jpg" alt="project1">
<div class="projects">
<table class="numero1">
<td></td>
<tr><td valign="top" class="year">0</td>
<td valign="top" class="title"><a>title</a></td>
<td valign="top" class="type">what is it</td>
</tr>
</table>
</div>
<div class="right">
</div>
</div>
</body>

Related

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

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

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

Multiple Sidenavs from multiple buttons?

I am working on a site that has five icons along the right side of the screen. In a perfect world, each icon when clicked would open its' respective sidenav.
For example:
MyBtn onclick opens sidenav and closes all other sideavs.
MyBtn2 onclick opens sidenav2 and closes all other sidenavs.
...and on...
However,
I currently have my five icons. Unfortunately, when any one icon is clicked; it opens sidenav5 rather than its' respective sidenav.
What am I missing here?
My thanks in advance for anybody who can help!
Relevant ode below... I do tend to use the style tag which I know is taboo:
document.getElementById("myBtn").addEventListener("click", open_close);
var menuState = 0 // close
function open_close() {
if(menuState === 0){
menuState = 1;
document.getElementById("sidenav").style.width = "320px";
document.getElementById("main").style.marginLeft = "-300px";
//document.getElementById("main").style.marginLeft = "250px";
document.body.style.backgroundColor = "rgba(0,0,0,0.4)";
}
else {
menuState = 0;
document.getElementById("sidenav").style.width = "0";
document.getElementById("main").style.marginLeft = "0";
//document.getElementById("main").style.marginLeft = "0";
document.body.style.backgroundColor = "white";
}
console.log(menuState);
}
/**/
document.getElementById("myBtn2").addEventListener("click", open_close);
var menuState = 0 // close
function open_close() {
if(menuState === 0){
menuState = 1;
document.getElementById("sidenav2").style.width = "320px";
document.getElementById("main").style.marginLeft = "-300px";
//document.getElementById("main").style.marginLeft = "250px";
document.body.style.backgroundColor = "rgba(0,0,0,0.4)";
}
else {
menuState = 0;
document.getElementById("sidenav2").style.width = "0";
document.getElementById("main").style.marginLeft = "0";
//document.getElementById("main").style.marginLeft = "0";
document.body.style.backgroundColor = "white";
}
console.log(menuState);
}
/**/
document.getElementById("myBtn3").addEventListener("click", open_close);
var menuState = 0 // close
function open_close() {
if(menuState === 0){
menuState = 1;
document.getElementById("sidenav3").style.width = "320px";
document.getElementById("main").style.marginLeft = "-300px";
//document.getElementById("main").style.marginLeft = "250px";
document.body.style.backgroundColor = "rgba(0,0,0,0.4)";
}
else {
menuState = 0;
document.getElementById("sidenav3").style.width = "0";
document.getElementById("main").style.marginLeft = "0";
//document.getElementById("main").style.marginLeft = "0";
document.body.style.backgroundColor = "white";
}
console.log(menuState);
}
/**/
document.getElementById("myBtn4").addEventListener("click", open_close);
var menuState = 0 // close
function open_close() {
if(menuState === 0){
menuState = 1;
document.getElementById("sidenav4").style.width = "320px";
document.getElementById("main").style.marginLeft = "-300px";
//document.getElementById("main").style.marginLeft = "250px";
document.body.style.backgroundColor = "rgba(0,0,0,0.4)";
}
else {
menuState = 0;
document.getElementById("sidenav4").style.width = "0";
document.getElementById("main").style.marginLeft = "0";
//document.getElementById("main").style.marginLeft = "0";
document.body.style.backgroundColor = "white";
}
console.log(menuState);
}
/**/
document.getElementById("myBtn5").addEventListener("click", open_close);
var menuState = 0 // close
function open_close() {
if(menuState === 0){
menuState = 1;
document.getElementById("sidenav5").style.width = "320px";
document.getElementById("main").style.marginLeft = "-300px";
//document.getElementById("main").style.marginLeft = "250px";
document.body.style.backgroundColor = "rgba(0,0,0,0.4)";
}
else {
menuState = 0;
document.getElementById("sidenav5").style.width = "0";
document.getElementById("main").style.marginLeft = "0";
//document.getElementById("main").style.marginLeft = "0";
document.body.style.backgroundColor = "white";
}
console.log(menuState);
}
#sidenav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
right: 0;
background-color: transparent;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
#sidenav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 16sp;
color: black;
display: block;
transition: 0.3s;
}
#sidenav a:hover {
color: lightgray;
}
#media screen and (max-height: 450px) {
#sidenav {padding-top: 15px;}
#sidenav a {font-size: 18px;}
}
/**/
#sidenav2 {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
right: 0;
background-color: transparent;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
#sidenav2 a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 16sp;
color: black;
display: block;
transition: 0.3s;
}
#sidenav2 a:hover {
color: lightgray;
}
#media screen and (max-height: 450px) {
#sidenav2 {padding-top: 15px;}
#sidenav2 a {font-size: 18px;}
}
/**/
#sidenav3 {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
right: 0;
background-color: transparent;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
#sidenav3 a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 16sp;
color: black;
display: block;
transition: 0.3s;
}
#sidenav3 a:hover {
color: lightgray;
}
#media screen and (max-height: 450px) {
#sidenav3 {padding-top: 15px;}
#sidenav3 a {font-size: 18px;}
}
/**/
#sidenav4 {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
right: 0;
background-color: transparent;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
#sidenav4 a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 16sp;
color: black;
display: block;
transition: 0.3s;
}
#sidenav4 a:hover {
color: lightgray;
}
#media screen and (max-height: 450px) {
#sidenav4 {padding-top: 15px;}
#sidenav4 a {font-size: 18px;}
}
/**/
#sidenav5 {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
right: 0;
background-color: transparent;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
#sidenav5 a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 16sp;
color: black;
display: block;
transition: 0.3s;
}
#sidenav5 a:hover {
color: lightgray;
}
#media screen and (max-height: 450px) {
#sidenav5 {padding-top: 15px;}
#sidenav5 a {font-size: 18px;}
}
#main {
transition: margin-left .5s;
padding: -16px;
}
<!---->
<div style="font-family: Centaur; font-size: 18px; color: black; position: fixed; " id="sidenav" class="sidenav">
<div style="width: 100%; margin-top: 6%; float: left;">
<table>
<tbody>
<tr>
<td style="width: 20%;"><a style="font-family:Centaur; color: black; width: 95%; float: left; margin-left: 0%;"><img src="images/TehNextGeneration.png" width="auto" height="35px" alt=""/></a></td>
</tr>
<tr>
<td style="width: 20%"><a style="font-family: Centaur; color: black; width: 95%; float: left; margin-left: 0%;"><b style="float: left; margin-left: 0%;">Early Swords</b></a></td>
</tr>
<tr>
<td style="width: 20%"><a style="font-family: Centaur; color: black; width: 95%; float: left; margin-left: 0%;"><b style="float: left; margin-left: 0%;">Roman Swords</b></a></td>
</tr>
<tr>
<td style="width: 20%"><a style="font-family: Centaur; color: black; width: 95%; float: left; margin-left: 0%;"><b style="float: left; margin-left: 0%;">Viking Swords</b></a></td>
</tr>
<tr>
<td style="width: 20%"><a style="font-family: Centaur; color: black; width: 95%; float: left; margin-left: 0%;"><b style="float: left; margin-left: 0%;">Medieval One Handed</b></a></td>
<tr>
<td style="width: 20%"><a style="font-family: Centaur; color: black; width: 95%; float: left; margin-left: 0%;"><b style="float: left; margin-left: 0%;">Hand & a Half Swords</b></a></td>
</tr>
<tr>
<td style="width: 20%"><a style="font-family: Centaur; color: black; width: 95%; float: left; margin-left: 0%;"><b style="float: left; margin-left: 0%;">Medieval Two Handed</b></a></td>
</tr>
<tr>
<td style="width: 20%"><a style="font-family: Centaur; color: black; width: 95%; float: left; margin-left: 0%;"><b style="float: left; margin-left: 0%;">Single Edged Swords</b></a></td>
</tr>
<tr>
<td style="width: 20%"><a style="font-family: Centaur; color: black; width: 95%; float: left; margin-left: 0%;"><b style="float: left; margin-left: 0%;">Next Generation Scabbards</b></a></td>
</tr>
</tbody>
</table>
</div>
</div>
<!---->
<div style="font-family: Centaur; font-size: 18px; color: black; position: fixed; " id="sidenav2" class="sidenav2">
<div style="width: 100%; margin-top: 6%; float: left;">
<table>
<tbody>
<tr>
<td style="width: 20%;"><a style="font-family:Centaur; color: black; width: 95%; float: left; margin-left: 0%;"><img src="images/The Museum Line.png" width="auto" height="35px" alt=""/></a></td>
</tr>
<tr>
<td style="width: 20%"><a style="font-family: Centaur; color: black; width: 95%; float: left; margin-left: 0%;"><b style="float: left; margin-left: 0%;">One Handed Museum Line Swords</b></a></td>
</tr>
<tr>
<td style="width: 20%"><a style="font-family: Centaur; color: black; width: 95%; float: left; margin-left: 0%;"><b style="float: left; margin-left: 0%;">Two Handed Museum Line Swords</b></a></td>
</tr>
<tr>
<td style="width: 20%"><a style="font-family: Centaur; color: black; width: 95%; float: left; margin-left: 0%;"><b style="float: left; margin-left: 0%;">Museum Line Scabbards</b></a></td>
</tr>
</tbody>
</table>
</div>
</div>
<!---->
<div style="font-family: Centaur; font-size: 18px; color: black; position: fixed; " id="sidenav3" class="sidenav3">
<div style="width: 100%; margin-top: 6%; float: left;">
<table>
<tbody>
<tr>
<td style="width: 20%;"><a style="font-family:Centaur; color: black; width: 95%; float: left; margin-left: 0%;"><img src="images/TehNextGeneration.png" width="auto" height="35px" alt=""/></a></td>
</tr>
<tr>
<td style="width: 20%"><a style="font-family: Centaur; color: black; width: 95%; float: left; margin-left: 0%;"><b style="float: left; margin-left: 0%;">One Handed Practice Swords</b></a></td>
</tr>
<tr>
<td style="width: 20%"><a style="font-family: Centaur; color: black; width: 95%; float: left; margin-left: 0%;"><b style="float: left; margin-left: 0%;">Two Handed Practice Swords</b></a></td>
</tr>
</tbody>
</table>
</div>
</div>
<!---->
<div style="font-family: Centaur; font-size: 18px; color: black; position: fixed; " id="sidenav4" class="sidenav4">
<div style="width: 100%; margin-top: 6%; float: left;">
<table>
<tbody>
<tr>
<td style="width: 20%;"><a style="font-family:Centaur; color: black; width: 95%; float: left; margin-left: 0%;"><img src="images/TehNextGeneration.png" width="auto" height="35px" alt=""/></a></td>
</tr>
<tr>
<td style="width: 20%"><a style="font-family: Centaur; color: black; width: 95%; float: left; margin-left: 0%;"><b style="float: left; margin-left: 0%;">Early Swords</b></a></td>
</tr>
<tr>
<td style="width: 20%"><a style="font-family: Centaur; color: black; width: 95%; float: left; margin-left: 0%;"><b style="float: left; margin-left: 0%;">Roman Swords</b></a></td>
</tr>
<tr>
<td style="width: 20%"><a style="font-family: Centaur; color: black; width: 95%; float: left; margin-left: 0%;"><b style="float: left; margin-left: 0%;">Viking Swords</b></a></td>
</tr>
<tr>
<td style="width: 20%"><a style="font-family: Centaur; color: black; width: 95%; float: left; margin-left: 0%;"><b style="float: left; margin-left: 0%;">Medieval One Handed</b></a></td>
<tr>
<td style="width: 20%"><a style="font-family: Centaur; color: black; width: 95%; float: left; margin-left: 0%;"><b style="float: left; margin-left: 0%;">Hand & a Half Swords</b></a></td>
</tr>
<tr>
<td style="width: 20%"><a style="font-family: Centaur; color: black; width: 95%; float: left; margin-left: 0%;"><b style="float: left; margin-left: 0%;">Medieval Two Handed</b></a></td>
</tr>
<tr>
<td style="width: 20%"><a style="font-family: Centaur; color: black; width: 95%; float: left; margin-left: 0%;"><b style="float: left; margin-left: 0%;">Single Edged Swords</b></a></td>
</tr>
<tr>
<td style="width: 20%"><a style="font-family: Centaur; color: black; width: 95%; float: left; margin-left: 0%;"><b style="float: left; margin-left: 0%;">Next Generation Scabbards</b></a></td>
</tr>
</tbody>
</table>
</div>
</div>
<!---->
<div style="font-family: Centaur; font-size: 18px; color: black; position: fixed; " id="sidenav5" class="sidenav5">
<div style="width: 100%; margin-top: 6%; float: left;">
<table>
<tbody>
<tr>
<td style="width: 20%;"><a style="font-family:Centaur; color: black; width: 95%; float: left; margin-left: 0%;"><img src="images/TehNextGeneration.png" width="auto" height="35px" alt=""/></a></td>
</tr>
<tr>
<td style="width: 20%"><a style="font-family: Centaur; color: black; width: 95%; float: left; margin-left: 0%;"><b style="float: left; margin-left: 0%;">One Handed Swords</b></a></td>
</tr>
<tr>
<td style="width: 20%"><a style="font-family: Centaur; color: black; width: 95%; float: left; margin-left: 0%;"><b style="float: left; margin-left: 0%;">Two Handed Swords</b></a></td>
</tr>
<tr>
<td style="width: 20%"><a style="font-family: Centaur; color: black; width: 95%; float: left; margin-left: 0%;"><b style="float: left; margin-left: 0%;">Squire Line Scabbards</b></a></td>
</tr>
</tbody>
</table>
</div>
</div>

Instead of just solving this issue I am going to attempt to save you a ton of headaches in the future. Your code can be cleaned up significantly. Inline styles and a function for every single item will become a nightmare to maintain in the future. I strongly recommend going a route similar to what I am showing below. It is worth noting that I left some of your stuff out to simplify it but it will work to add additional items as long as you follow the same pattern (which is a large part of the enhanced maintainability). Also, apologies if this isn't exactly what you want the menu to function like, I couldn't tell exactly from your code but you should be able to build from this concept
See the fiddle here
Html
<div class="sidenav">
<div class="icons">
<div class="icon">Nav 1</div>
<div class="icon">Nav 2</div>
<div class="icon">Nav 3</div>
</div>
<div class="nav-items">
<ul class="item-set">
<li>Early Swords</li>
<li>Roman Swords</li>
<li>Viking Swords</li>
<li>Medieval One Handed</li>
<li>Hand & a Half Swords</li>
<li>Medieval Two Handed</li>
<li>Single Edged Swords</li>
<li>Next Generation Scabbards</li>
</ul>
<ul class="item-set">
<li>One Handed Museum Line Swords</li>
<li>Two Handed Museum Line Swords</li>
<li>Museum Line Scabbards</li>
</ul>
<ul class="item-set">
<li>One Handed Practice Swords</li>
<li>Two Handed Practice Swords</li>
</ul>
</div>
</div>
CSS
.sidenav {
width:350px;
}
.icons {
width:50px;
float:left;
}
.icons .icon:hover {
cursor:pointer;
text-decoration:underline;
}
.nav-items {
width:300px;
float:right;
}
.nav-items {
overflow:hidden;
}
.nav-items ul {
margin-top:0px;
margin-left:-300px;
display:none;
}
.nav-items li {
list-style-type:none;
cursor:pointer;
}
And look how simple this Javascript/Jquery Is
$(document).ready(function()
{
slideRight($(".item-set").eq(0));
$(".icons .icon").click(function()
{
var idx = $(this).index();
slideLeft($(".item-set"));
slideRight($(".item-set").eq(idx));
});
});
function slideRight(elem) {
elem.show();
elem.animate({ 'marginLeft': '0px' }, 100);
}
function slideLeft(elem) {
elem.hide();
elem.css({ 'marginLeft': '-300px' });
}

I believe it is because you are using the same function on each of the click events.
document.getElementById("myBtn").addEventListener("click", open_close);
Therefore, when you're calling the function, it is calling the last implementation of it. Which in your case is the click event for "myBtn5".
A quick fix would be to rename each of the functions:
function open_close_1() {
Then for each onclick event call a different function: open_close_2 and so on.
.addEventListener("click", open_close_1);
This should stop it from calling the same function. I hope this helped!

Hi Try the below sample.
HTML:
<div class="sidebar sidebar-1 hidden">
<h3>
Sidebar 1
</h3>
<ul>
<li>One</li>
<li>Two</li>
</ul>
</div>
<div class="sidebar sidebar-2 hidden">
<h3>
Sidebar 2
</h3>
<ul>
<li>One</li>
<li>Two</li>
</ul>
</div>
<button id="btn-1">One</button>
<button id="btn-2">Two</button>
CSS:
.hidden {
display: none;
}
.active {
display: block;
}
Script:
$('button').on('click', function() {
var btnElement = $(this).attr('id').split('-');
showSidebar(btnElement[1]);
});
function showSidebar(elem) {
var sidebar = $(document).find('.sidebar-' + elem);
$(document).find('.sidebar').addClass('hidden').removeClass('active');
$(document).find('.sidebar-' + elem).removeClass('hidden').addClass('active');
}
Fiddle Demo

Unlimited side navigation bars with less than 10 lines of JavaScript
Wow that's a lot of code!
I have wrote you a little script using jQuery that may help you do what you want a lot more efficiently.
Hope it helps.
$(function sideNav() {
$('#Head a').on('click', function () {
var link = $(this).data('nav');
$('.' + link).toggleClass('Slide');
});
$('.AsideWrap').on('click', function () {
$('.Slide').toggleClass('Slide');
});
});
/* Side Navigation
---------------------------------*/
.AsideWrap {
position: fixed;
top: 0;
right: 0;
height: 100%;
width: 100%;
background: rgba(0,0,0,0.2);
opacity: 0;
visibility: hidden;
-webkit-transition: all ease-in-out 0.2s;
transition: all ease-in-out 0.2s;
z-index: 110;
}
#Aside {
position: absolute;
top: 0;
right: -200px;
height: 100%;
width: 200px;
-ms-flex-line-pack: start;
align-content: flex-start;
-ms-flex-align: stretch;
-webkit-box-align: stretch;
align-items: stretch;
-ms-flex-direction: column;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
flex-direction: column;
text-align: center;
-webkit-transition: all ease-in-out 0.2s;
transition: all ease-in-out 0.2s;
z-index: 120;
}
#Aside a {
-webkit-display: flex;
-ms-display: flex;
display: -webkit-box;
display: flex;
-ms-justify-content: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-ms-flex-direction: column;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
flex-direction: column;
-ms-flex: 1 1 0%;
-webkit-box-flex: 1;
flex: 1 1 0%;
position: relative;
padding: 5px 10px;
font:1em Centaur;
color:#111;
text-align: center;
text-decoration: none;
-webkit-transition: all ease-in-out 0.2s;
transition: all ease-in-out 0.2s;
text-shadow: 0 0 10px rgba(0,0,0,0.3);
text-transform: uppercase;
}
#Aside a:hover {
background: #fff;
color: #111;
}
.Slide {
opacity: 1 !important;
visibility: visible !important;
}
.Slide #Aside {
right: 0 !important;
}
.Flx {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.Flx1 {
-ms-flex: 1 1 0%;
-webkit-box-flex: 1;
flex: 1 1 0%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header id="Head">
<a data-nav="Link1">Link1</a>
<a data-nav="Link2">Link2</a>
<a data-nav="Link3">Link3</a>
<a data-nav="Link4">Link4</a>
<a data-nav="Link5">Link5</a>
</header>
<div class="AsideWrap Link1">
<aside id="Aside" class="Flx Flx1">
<a><img src="images/TehNextGeneration.png" width="auto" height="35px" alt="" /></a>
<a>Early Swords</a>
<a>Roman Swords</a>
<a>Viking Swords</a>
<a>Medieval One Handed</a>
<a>Hand & a Half Swords</a>
<a>Medieval Two Handed</a>
<a>Single Edged Swords</a>
<a>Next Generation Scabbards</a>
</aside>
</div>
<div class="AsideWrap Link2">
<aside id="Aside" class="Flx Flx1">
<a><img src="images/The Museum Line.png" width="auto" height="35px" alt="" /></a>
<a>One Handed Museum Line Swords</a>
<a>Two Handed Museum Line Swords</a>
<a>Museum Line Scabbards</a>
</aside>
</div>
<div class="AsideWrap Link3">
<aside id="Aside" class="Flx Flx1">
<a><img src="images/TehNextGeneration.png" width="auto" height="35px" alt="" /></a>
<a>One Handed Practice Swords</a>
<a>Two Handed Practice Swords</a>
</aside>
</div>
<div class="AsideWrap Link4">
<aside id="Aside" class="Flx Flx1">
<a><img src="images/TehNextGeneration.png" width="auto" height="35px" alt="" /></a>
<a>Early Swords</a>
<a>Roman Swords</a>
<a>Viking Swords</a>
<a>Medieval One Handed</a>
<a>Hand & a Half Swords</a>
<a>Medieval Two Handed</a>
<a>Single Edged Swords</a>
<a>Next Generation Scabbards</a>
</aside>
</div>
<div class="AsideWrap Link5">
<aside id="Aside" class="Flx Flx1">
<a><img src="images/TehNextGeneration.png" width="auto" height="35px" alt="" /></a>
<a>One Handed Swords</a>
<a>Two Handed Swords</a>
<a>Squire Line Scabbards</a>
</aside>
</div>

Reduce the font size of span text when two lines

var divWidth = parseInt($("#printtdtelno").closest('td').height());
var text = parseInt($("#printtdtelno").height());
var fontSize = parseInt($("#printtdtelno").css("font-size"));
console.log('span height ' + parseInt($("#printtdtelno").height()))
console.log('span width ' + parseInt($("#printtdtelno").width()))
console.log('td height ' + parseInt($("#printtdtelno").closest('td .wrapper').height()))
console.log('td width ' + parseInt($("#printtdtelno").closest('td .wrapper').width()))
console.log(text > divWidth)
//while (text > divWidth) {
if (text == divWidth) {
$("#printtdtelno").css("font-size", fontSize -= 0.5);
console.log(fontSize -= 0.5)
}
//}
body{
height:auto;
width:1100px;
margin:0;
padding:0;
margin-left: auto;
margin-right: auto;
//background-color:#000;
}
.wrapper {
position: relative;
}
.wrapper .underline:not(#octtext):not(#tcttext):not(#cloatext) {
position: absolute;
//text-transform: uppercase;
right: 0;
}
span.underline {
font-size: 18.5px;
border-bottom: 1px solid #000000;
text-align: center;
min-height: 24px;
}
/*span.appraise1 {
text-align: center;
}*/
span#printtdtdno{
display:inline-block;
width: 87%;
}
span.taxdecrow1{
display:inline-block;
width: 55%;
}
span.taxdecrow2{
display:inline-block;
width: 90%;
}
span.taxdecrow3{
display:inline-block;
width: 90%;
}
span.taxdecrow3phone{
display:inline-block;
width: 60%;
}
span.taxdecrow4{
display:inline-block;
width: 65%;
}
span#printtdadmintin{
display:inline-block;
width: 90%;
}
span.taxdecrow5{
display:inline-block;
width: 65%;
}
span.taxdecrow6{
display:inline-block;
width: 80%;
}
span#printtdsurvey{
display:inline-block;
width: 80%;
}
span.underline1{
font-size: 20px;
//border-bottom: 1px solid #000000;
text-align: center;
text-decoration: underline;
}
span.underline1:empty{
display:inline-block;
border-bottom: 1px solid #000000;
min-width:90%;
}
.memo {
background: repeating-linear-gradient(to bottom, transparent 0, transparent 18px, #000 20px, #000 21px);
background-attachment: local;
display: inline-block;
width: 100%;
min-height: 84px;
font-size: 14px;
line-height: 1.5;
font-family: Tahoma, sans-serif;
}
.memo:empty{
background: repeating-linear-gradient(to bottom, transparent 0, transparent 18px, #000 20px, #000 21px);
background-attachment: local;
display: inline-block;
width: 100%;
min-height: 102px;
font-size: 14px;
line-height: 1.5;
font-family: Tahoma, sans-serif;
}
/*.memo {
min-height: 85px;
width:100%;
display: inline-block;
line-height: 21px;
text-align: justify;
background: url("../images/lines.png") repeat;
}
.memo:empty {
min-height: 85px;
width:100%;
display: inline-block;
line-height: 21px;
background: url("../images/lines.png") repeat;
}*/
table{
margin-top: 0;
height:auto;
width:1050px;
font-size: 18.5px;
}
table td{
height: 25px;
}
.appraise {
margin: 0px;
display:inline-block;
min-width: 150px;
}
.appraise1 {
margin: 0px;
display:inline-block;
min-width: 100px;
border-bottom: 1px solid #000000;
}
.appraise11 {
margin: 0px;
display:inline-block;
}
#pmemo{
text-decoration: underline;
}
#spanunderline{
width:1050px;
}
.rightborderonly{
border-right: 1px solid black;
}
.annotate {
display:inline-block;
vertical-align:top
}
.annotate .note {
display:block;
font-size:smaller;
font-style:italic;
text-align: center;
}
#headeroftaxdec{
margin-top: 27px;
}
#headeroftaxdec h2{
margin: 0;
}
#headeroftaxdec span:nth-child(1){
float: left;
font-size: smaller;
}
#headeroftaxdec span{
display: inline-block;
}
#headeroftaxdec{
text-align: center;
width: 100%;
}
#propertykindtaxdec{
font-size: x-large;
font-weight: bold;
}
.amountinwords{
white-space: nowrap
}
.amountinwords span.inline{
display: inline-block;
}
#printtdassessedvalwords{
border-bottom: 1px solid #000000;
}
.tablewithpadding td{
padding-left: 70px;
padding-right: 70px;
}
.allcaps{
/* text-transform: uppercase;*/
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table width="100%" border="0">
<tbody>
<tr>
<td width="70%">
<div class="wrapper">
Owner:<span type="text" id="printtdowner" class=" underline taxdecrow2"></span>
</div>
</td>
<td width="30%">
<div class="wrapper">
TIN:<span type="text" id="printtdtin" class=" underline taxdecrow2"></span>
</div>
</td>
</tr>
<tr>
<td>
<div class="wrapper">
Address: <span type="text" id="printtdaddress" class="underline taxdecrow3"></span>
</div>
</td>
<td>
<div class="wrapper">
Telephone No. <span type="text" id="printtdtelno" class="underline taxdecrow3phone">291-894-351 / 902-910-908</span>
</div>
</td>
</tr>
<tr>
<td width="70%">
<div class="wrapper">
Administrator/Beneficial User: <span type="text" id="printtdadministrator" class=" underline taxdecrow4"></span>
</div>
</td>
<td width="30%">
<div class="wrapper">
TIN:<span type="text" id="printtdadmintin" class=" underline taxdecrow4"></span>
</div>
</td>
</tr>
<tr>
<td>
<div class="wrapper">
Address: <span type="text" id="printtdadminaddress" class=" underline taxdecrow3"></span>
</div>
</td>
<td>
<div class="wrapper">
Telephone No. <span type="text" id="printtdadmintel" class=" underline taxdecrow3phone"> </span>
</div>
</td>
</tr>
</tbody>
</table>
AIM:
Reduce the font size of span when two lines to make it one line. (Telephone Number span)
Found this post and copied the solution but when i implement it, it is reducing the font size infinitely i guess because the browser stops.
I commented the while loop to make the browser not hang. I even added an if statement but it no help

you should try white-space property
.wrapper span{ white-space: nowrap;}
var divWidth = parseInt($("#printtdtelno").closest('td').height());
var text = parseInt($("#printtdtelno").height());
var fontSize = parseInt($("#printtdtelno").css("font-size"));
console.log('span height ' + parseInt($("#printtdtelno").height()))
console.log('span width ' + parseInt($("#printtdtelno").width()))
console.log('td height ' + parseInt($("#printtdtelno").closest('td .wrapper').height()))
console.log('td width ' + parseInt($("#printtdtelno").closest('td .wrapper').width()))
console.log(text > divWidth)
//while (text > divWidth) {
if (text == divWidth) {
$("#printtdtelno").css("font-size", fontSize -= 0.5);
console.log(fontSize -= 0.5)
}
//}
body{
height:auto;
width:1100px;
margin:0;
padding:0;
margin-left: auto;
margin-right: auto;
//background-color:#000;
}
.wrapper {
position: relative;
}
.wrapper .underline:not(#octtext):not(#tcttext):not(#cloatext) {
position: absolute;
//text-transform: uppercase;
right: 0;
}
span.underline {
font-size: 18.5px;
border-bottom: 1px solid #000000;
text-align: center;
min-height: 24px;
}
/*span.appraise1 {
text-align: center;
}*/
span#printtdtdno{
display:inline-block;
width: 87%;
}
span.taxdecrow1{
display:inline-block;
width: 55%;
}
span.taxdecrow2{
display:inline-block;
width: 90%;
}
span.taxdecrow3{
display:inline-block;
width: 90%;
}
span.taxdecrow3phone{
display:inline-block;
width: 60%;
}
span.taxdecrow4{
display:inline-block;
width: 65%;
}
span#printtdadmintin{
display:inline-block;
width: 90%;
}
span.taxdecrow5{
display:inline-block;
width: 65%;
}
span.taxdecrow6{
display:inline-block;
width: 80%;
}
span#printtdsurvey{
display:inline-block;
width: 80%;
}
span.underline1{
font-size: 20px;
//border-bottom: 1px solid #000000;
text-align: center;
text-decoration: underline;
}
span.underline1:empty{
display:inline-block;
border-bottom: 1px solid #000000;
min-width:90%;
}
.memo {
background: repeating-linear-gradient(to bottom, transparent 0, transparent 18px, #000 20px, #000 21px);
background-attachment: local;
display: inline-block;
width: 100%;
min-height: 84px;
font-size: 14px;
line-height: 1.5;
font-family: Tahoma, sans-serif;
}
.memo:empty{
background: repeating-linear-gradient(to bottom, transparent 0, transparent 18px, #000 20px, #000 21px);
background-attachment: local;
display: inline-block;
width: 100%;
min-height: 102px;
font-size: 14px;
line-height: 1.5;
font-family: Tahoma, sans-serif;
}
/*.memo {
min-height: 85px;
width:100%;
display: inline-block;
line-height: 21px;
text-align: justify;
background: url("../images/lines.png") repeat;
}
.memo:empty {
min-height: 85px;
width:100%;
display: inline-block;
line-height: 21px;
background: url("../images/lines.png") repeat;
}*/
table{
margin-top: 0;
height:auto;
width:1050px;
font-size: 18.5px;
}
table td{
height: 25px;
}
.appraise {
margin: 0px;
display:inline-block;
min-width: 150px;
}
.appraise1 {
margin: 0px;
display:inline-block;
min-width: 100px;
border-bottom: 1px solid #000000;
}
.appraise11 {
margin: 0px;
display:inline-block;
}
#pmemo{
text-decoration: underline;
}
#spanunderline{
width:1050px;
}
.rightborderonly{
border-right: 1px solid black;
}
.annotate {
display:inline-block;
vertical-align:top
}
.annotate .note {
display:block;
font-size:smaller;
font-style:italic;
text-align: center;
}
#headeroftaxdec{
margin-top: 27px;
}
#headeroftaxdec h2{
margin: 0;
}
#headeroftaxdec span:nth-child(1){
float: left;
font-size: smaller;
}
#headeroftaxdec span{
display: inline-block;
}
#headeroftaxdec{
text-align: center;
width: 100%;
}
#propertykindtaxdec{
font-size: x-large;
font-weight: bold;
}
.amountinwords{
white-space: nowrap
}
.amountinwords span.inline{
display: inline-block;
}
#printtdassessedvalwords{
border-bottom: 1px solid #000000;
}
.tablewithpadding td{
padding-left: 70px;
padding-right: 70px;
}
.allcaps{
/* text-transform: uppercase;*/
}
.wrapper span{ white-space: nowrap;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table width="100%" border="0">
<tbody>
<tr>
<td width="70%">
<div class="wrapper">
Owner:<span type="text" id="printtdowner" class=" underline taxdecrow2"></span>
</div>
</td>
<td width="30%">
<div class="wrapper">
TIN:<span type="text" id="printtdtin" class=" underline taxdecrow2"></span>
</div>
</td>
</tr>
<tr>
<td>
<div class="wrapper">
Address: <span type="text" id="printtdaddress" class="underline taxdecrow3"></span>
</div>
</td>
<td>
<div class="wrapper">
Telephone No. <span type="text" id="printtdtelno" class="underline taxdecrow3phone">291-894-351 / 902-910-908</span>
</div>
</td>
</tr>
<tr>
<td width="70%">
<div class="wrapper">
Administrator/Beneficial User: <span type="text" id="printtdadministrator" class=" underline taxdecrow4"></span>
</div>
</td>
<td width="30%">
<div class="wrapper">
TIN:<span type="text" id="printtdadmintin" class=" underline taxdecrow4"></span>
</div>
</td>
</tr>
<tr>
<td>
<div class="wrapper">
Address: <span type="text" id="printtdadminaddress" class=" underline taxdecrow3"></span>
</div>
</td>
<td>
<div class="wrapper">
Telephone No. <span type="text" id="printtdadmintel" class=" underline taxdecrow3phone"> </span>
</div>
</td>
</tr>
</tbody>
</table>

Vertical align not working CSS/HTML

I'am trying to verticaly align my page, but I just cant get it to work.
I've tried other solutions from other questions, but none of them worked for me so far, does anyone know why?
This is the HTML code I want to align vertically:
header {
margin: 0 auto;
width: 600px;
margin-bottom: 3em;
margin-top: 3em;
text-align: center;
}
section {
width: 600px;
margin: 0 auto;
padding: 3px;
background-color: white;
}
#textbox {
color: #075488;
border: solid 3px #075488;
}
#textbox div {
font-weight: bold;
border-bottom: 2px solid #075488;
margin-left: 3em;
margin-right: 3em;
padding-left: 2em;
padding-right: 2em;
padding-top: 1.5em;
padding-bottom: 1em;
margin-bottom: 1em;
text-align: center;
}
#textbox table {
font-weight: normal;
width: 100%;
padding-right: 5em;
padding-left: 4em;
padding-bottom: 1em;
margin: 0 auto;
line-height: 1;
}
td:nth-child(3) {
width: 100px;
}
td:nth-child(2) {
text-align: center;
}
section p {
color: white;
font-size: 12px;
float: right;
}
<header id="header">
<img src="images/image.png">
</header>
<section id="section">
<div id="textbox">
<div>test</div>
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table>
</div>
</section>
Does anyone know a solution for this?
Thanks you!
If CSS isn't possible is it possible to use jQuery/Javascript instead, if so how would I go abouts doing so?

You could set position: absolute on your body, and center it via:
body {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%); /* Safari */
transform: translate(-50%, -50%); /* Other browsers */
}
(remember to remove top margin on header)
body {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
header {
margin: 0 auto;
width: 600px;
margin-bottom: 3em;
text-align: center;
}
section {
width: 600px;
margin: 0 auto;
padding: 3px;
background-color: white;
}
#textbox {
color: #075488;
border: solid 3px #075488;
}
#textbox div {
font-weight: bold;
border-bottom: 2px solid #075488;
margin-left: 3em;
margin-right: 3em;
padding-left: 2em;
padding-right: 2em;
padding-top: 1.5em;
padding-bottom: 1em;
margin-bottom: 1em;
text-align: center;
}
#textbox table {
font-weight: normal;
width: 100%;
padding-right: 5em;
padding-left: 4em;
padding-bottom: 1em;
margin: 0 auto;
line-height: 1;
}
td:nth-child(3) {
width: 100px;
}
td:nth-child(2) {
text-align: center;
}
section p {
color: white;
font-size: 12px;
float: right;
}
<header id="header">
<img src="http://placehold.it/600x50">
</header>
<section id="section">
<div id="textbox">
<div>test</div>
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table>
</div>
</section>

In order to use vertical alignment you have to provide heights to your elements. Your elements currently do not have a set height, so their height is the minimum that will contain their contents, and thus they do not stretch to your page height

You can just say:
td {text-align: center}
http://jsfiddle.net/k30se3fv/3/

Categories