Click add row populated with php info from row variables - javascript

I am struggling to figure out the best way to do this. I think modal is involved.
I have a dynamically resizing table. When I click on the row, I want it to add a row below with info from a php file. PHP file will include details and maybe associated charts. The PHP file will be the same for all rows and call on the row data to populate associated info. Ideally I'd want to be able to expand multiple, but one at a time would be perfect for now.
Ideal concept of operations:
1. Click on row 3 (NFLX)
2. Row 3 moves to the top of the page (I figured this out already)
3. Create a row below NFLX row 3 and populate with spreadInfo.php?variables
4. Click on row 2 (IBB)
5. Collapse NFLX info tab
6. Create a row below IBB row 2 and populate with spreadInfo.php?variables
Here's the fiddle I've started on:
https://jsfiddle.net/wolfpack06/w76ezpfq/
Before click:
After clicking IBB first row:
<style type="text/css">
#formatscreen {
font-family: Arial;
width: 790px;
border-collapse: collapse;
}
th {
background: black;
color: white;
font-size: 20px;
}
th,
td {
border: 1px solid #000;
border-bottom: 2px solid #fff;
// padding-left: 5px;
// padding-right: 5px;
}
#screen_symbol {
font-size: 40px;
font-weight: bold;
text-align: center;
}
#screen_price {
font-size: 32px;
font-weight: bold;
}
#screen_net_pct {
font-size: 24px;
font-weight: bold;
}
#screen_expiry.header,
#screen_type.header,
#screen_dist.header,
#screen_short_leg.header,
#screen_long_leg.header {
font-size: 20px;
}
#screen_change.header,
#screen_delta.header,
#screen_short_leg_vol.header,
#screen_long_leg_vol.header,
#screen_net.header {
font-size: 14px;
}
#screen_expiry,
#screen_type,
#screen_dist,
#screen_short_leg,
#screen_long_leg {
font-size: 24px;
}
#screen_change{
display: inline-block
}
#screen_change,
#screen_delta,
#screen_short_leg_vol,
#screen_long_leg_vol,
#screen_net {
font-size: 16px;
}
#media only screen and (max-device-width: 480px),
(max-width:800px) {
#formatscreen {
width: 100%;
}
th {
font-size: 2.5vw;
}
#screen_symbol {
font-size: 5vw;
}
#screen_price {
font-size: 4vw;
}
#screen_net_pct {
font-size: 3vw;
}
#screen_expiry.header,
#screen_type.header,
#screen_dist.header,
#screen_short_leg.header,
#screen_long_leg.header {
font-size: 2.5vw;
}
#screen_change.header,
#screen_delta.header,
#screen_short_leg_vol.header,
#screen_long_leg_vol.header,
#screen_net.header {
font-size: 1.75vw;
}
#screen_expiry,
#screen_type,
#screen_dist,
#screen_short_leg,
#screen_long_leg {
font-size: 3vw;
}
#screen_change,
#screen_delta,
#screen_short_leg_vol,
#screen_long_leg_vol,
#screen_net {
font-size: 2vw;
}
}
#screen_change.up {
background: green;
color: white;
}
#screen_change.down {
background: red;
color: white;
}
.center {
text-align: center;
}
.right {
text-align: right;
}
tr[data-bau="Bull Put"] {
background: #99ff99;
}
tr[data-bau="Bear Call"] {
background: #ff9999;
}
tr:hover[data-bau="Bull Put"] {
background-color: #00b300;
cursor: pointer;
}
tr:hover[data-bau="Bear Call"] {
background-color: #ff0000;
cursor: pointer;
}
</style>
<div id="prescreen">
<table id="formatscreen">
<tr>
<th>Symbol</th>
<th>Price Action</th>
<th>Expiry Date
<br>Type</th>
<th class="right">
<div id="screen_dist" class="header">Distance</div>
<div id="screen_delta" class="header">Delta</div>
</th>
<th class="right">
<div id="screen_short_leg" class="header">Short Leg</div>
<div id="screen_short_leg_vol" class="header">Volume</div>
</th>
<th class="right">
<div id="screen_long_leg" class="header">Long Leg</div>
<div id="screen_long_leg_vol" class="header">Volume</div>
</th>
<th>Return</th>
</tr>
<tr data-bau="Bull Put">
<td>
<div id="screen_symbol">IBB</div>
</td>
<td class="center">
<div id="screen_price">$1260.39</div>
<div id="screen_change" class="down">-$12.36 (0.91%)</div>
</td>
<td class="center">
<div id="screen_expiry">20160819</div>
<div id="screen_type">Bull Put</div>
</td>
<td class="right">
<div id="screen_dist">15.5%</div>
<div id="screen_delta">0.077</div>
</td>
<td class="right">
<div id="screen_short_leg">$1220.00</div>
<div id="screen_short_leg_vol">1420</div>
</td>
<td class="right">
<div id="screen_long_leg">$1915.00</div>
<div id="screen_short_leg_vol">20</div>
</td>
<td class="right">
<div id="screen_net_pct">3.00%</div>
<div id="screen_net">$0.25</div>
</td>
</tr>
<tr data-bau="Bull Put">
<td>
<div id="screen_symbol">IBB</div>
</td>
<td class="center">
<div id="screen_price">$1260.39</div>
<div id="screen_change" class="down">-$12.36 (0.91%)</div>
</td>
<td class="center">
<div id="screen_expiry">20160819</div>
<div id="screen_type">Bull Put</div>
</td>
<td class="right">
<div id="screen_dist">15.5%</div>
<div id="screen_delta">0.077</div>
</td>
<td class="right">
<div id="screen_short_leg">$1220.00</div>
<div id="screen_short_leg_vol">1420</div>
</td>
<td class="right">
<div id="screen_long_leg">$1915.00</div>
<div id="screen_short_leg_vol">20</div>
</td>
<td class="right">
<div id="screen_net_pct">3.00%</div>
<div id="screen_net">$0.25</div>
</td>
</tr>
<tr data-bau="Bear Call">
<td>
<div id="screen_symbol">NFLX</div>
</td>
<td class="center">
<div id="screen_price">$1260.39</div>
<div id="screen_change" class="up">+$12.36 (0.91%)</div>
</td>
<td class="center">
<div id="screen_expiry">20160819</div>
<div id="screen_type">Bull Put</div>
</td>
<td class="right">
<div id="screen_dist">15.5%</div>
<div id="screen_delta">0.077</div>
</td>
<td class="right">
<div id="screen_short_leg">$1220.00</div>
<div id="screen_short_leg_vol">20</div>
</td>
<td class="right">
<div id="screen_long_leg">$1915.00</div>
<div id="screen_short_leg_vol">20</div>
</td>
<td class="right">
<div id="screen_net_pct">3.00%</div>
<div id="screen_net">$0.25</div>
</td>
</tr>
<tr data-bau="Bull Put">
<td>
<div id="screen_symbol">IBB</div>
</td>
<td class="center">
<div id="screen_price">$1260.39</div>
<div id="screen_change" class="down">-$12.36 (0.91%)</div>
</td>
<td class="center">
<div id="screen_expiry">20160819</div>
<div id="screen_type">Bull Put</div>
</td>
<td class="right">
<div id="screen_dist">15.5%</div>
<div id="screen_delta">0.077</div>
</td>
<td class="right">
<div id="screen_short_leg">$1220.00</div>
<div id="screen_short_leg_vol">1420</div>
</td>
<td class="right">
<div id="screen_long_leg">$1915.00</div>
<div id="screen_short_leg_vol">20</div>
</td>
<td class="right">
<div id="screen_net_pct">3.00%</div>
<div id="screen_net">$0.25</div>
</td>
</tr>
<tr data-bau="Bear Call">
<td>
<div id="screen_symbol">NFLX</div>
</td>
<td class="center">
<div id="screen_price">$1260.39</div>
<div id="screen_change" class="up">+$12.36 (0.91%)</div>
</td>
<td class="center">
<div id="screen_expiry">20160819</div>
<div id="screen_type">Bull Put</div>
</td>
<td class="right">
<div id="screen_dist">15.5%</div>
<div id="screen_delta">0.077</div>
</td>
<td class="right">
<div id="screen_short_leg">$1220.00</div>
<div id="screen_short_leg_vol">20</div>
</td>
<td class="right">
<div id="screen_long_leg">$1915.00</div>
<div id="screen_short_leg_vol">20</div>
</td>
<td class="right">
<div id="screen_net_pct">3.00%</div>
<div id="screen_net">$0.25</div>
</td>
</tr>
<tr data-bau="Bull Put">
<td>
<div id="screen_symbol">IBB</div>
</td>
<td class="center">
<div id="screen_price">$1260.39</div>
<div id="screen_change" class="down">-$12.36 (0.91%)</div>
</td>
<td class="center">
<div id="screen_expiry">20160819</div>
<div id="screen_type">Bull Put</div>
</td>
<td class="right">
<div id="screen_dist">15.5%</div>
<div id="screen_delta">0.077</div>
</td>
<td class="right">
<div id="screen_short_leg">$1220.00</div>
<div id="screen_short_leg_vol">1420</div>
</td>
<td class="right">
<div id="screen_long_leg">$1915.00</div>
<div id="screen_short_leg_vol">20</div>
</td>
<td class="right">
<div id="screen_net_pct">3.00%</div>
<div id="screen_net">$0.25</div>
</td>
</tr>
<tr data-bau="Bear Call">
<td>
<div id="screen_symbol">NFLX</div>
</td>
<td class="center">
<div id="screen_price">$1260.39</div>
<div id="screen_change" class="up">+$12.36 (0.91%)</div>
</td>
<td class="center">
<div id="screen_expiry">20160819</div>
<div id="screen_type">Bull Put</div>
</td>
<td class="right">
<div id="screen_dist">15.5%</div>
<div id="screen_delta">0.077</div>
</td>
<td class="right">
<div id="screen_short_leg">$1220.00</div>
<div id="screen_short_leg_vol">20</div>
</td>
<td class="right">
<div id="screen_long_leg">$1915.00</div>
<div id="screen_short_leg_vol">20</div>
</td>
<td class="right">
<div id="screen_net_pct">3.00%</div>
<div id="screen_net">$0.25</div>
</td>
</tr>
</table>
words words
</div>

Related

Copying HTML table to clipboard

I want to copy my HTML table elements to the clipboard. But I have used div tag inside the td tag of the table. I think that what adding a new line after pasting the contents from clipboard. I want that to stay in the same line. Please help how to make it possible.
Sample Output
ProfileUID : 12345
First Name : John
Email : John.doe#xyz.com
Profile Status : Enabled
Country Code : United States (+1)
Phone No. :
+1- 456789125
Last Generated OTP : x5xx555
Employee ID : 223344
User ID : johndoe
Required Output
ProfileUID : 12345
First Name : John
Email : John.doe#xyz.com
Profile Status : Enabled
Country Code : United States (+1)
Phone No. : +1- 456789125
Last Generated OTP : x5xx555
Employee ID : 223344
User ID : johndoe
Have a look at the Phone No. texts in both the above outputs.
index.html
<div style="margin-left: 2rem">
<button class="btn btn-primary" type="button" style="background-color: #001872; display: none" onclick="copyTable(document.getElementById('table'))" id="copy"> <i class="fa-regular fa-copy"></i> </button>
</div>
<table class="table table-striped table-hover" style="display: none" id="table">
<tbody>
<tr align="center">
<th style="width: 20%" class="col-sm-4 text-center" scope="row">ProfileUID :</th>
<td style="width: 50%"></td>
</tr>
<tr align="center">
<th style="width: 20%" class="col-sm-4 text-center" scope="row">First Name :</th>
<td style="width: 50%"></td>
</tr>
<tr align="center">
<th style="width: 20%" class="col-sm-4 text-center" scope="row">Email :</th>
<td style="width: 50%"></td>
</tr>
<tr align="center">
<th style="width: 20%" class="col-sm-4 text-center" scope="row">Profile Status :</th>
<td style="width: 50%"></td>
</tr>
<tr align="center">
<th style="width: 20%" class="col-sm-4 text-center" scope="row">Country Code :</th>
<td style="width: 50%"></td>
</tr>
<tr>
<th style="width: 20%" class="col-sm-4 text-center" scope="row" style="padding-top: 12px;"> Phone No. :</th>
<form action="" method="post" id="form2" style="display: inline-block;"> {% csrf_token %}
<td style="width: 50%">
<div style="display: flex; justify-content: space-between;">
<div style="width: 25%;" id="1"></div>
<div style="width:100%; border: 0px solid red; align-self: center; text-align: center;" id="2"></div>
<div style="border: 0px solid blue; width: 25%; text-align: right">
<button type="button" id="edit" style="border-style: none; background-color:transparent; color:#001872;" onclick="edits()"><i class="fa-solid fa-square-pen fa-2x"></i> </button>
<button type="submit" id="save" style="display:none; border-style: none; background-color:transparent; color:#17d647e8; padding: 2px;" onclick="saved()"><i class="fa-solid fa-square-check fa-2x"></i></button>
<button type="button" id="cancel" style="display:none; border-style: none; background-color:transparent; color:#c42c2c;"><i class="fa-solid fa-square-xmark fa-2x" onclick="canceled()"></i></button>
</div>
</td>
</form>
</tr>
<tr align="center">
<th style="width: 20%" class="col-sm-4 text-center" scope="row"> Last Generated OTP : </th>
<td style="width: 50%"></td>
</tr>
<tr align="center">
<th style="width: 20%" class="col-sm-4 text-center" scope="row">Employee ID :</th>
<td style="width: 50%"></td>
</tr>
<tr align="center">
<th style="width: 20%" class="col-sm-4 text-center" scope="row">User ID :</th>
<td style="width: 50%"></td>
</tr>
</tbody>
</table>
script.js
function copyTable(el) {
var body = document.body,
range,
sel;
if (document.createRange && window.getSelection) {
range = document.createRange();
sel = window.getSelection();
sel.removeAllRanges();
try {
range.selectNodeContents(el);
sel.addRange(range);
} catch (e) {
range.selectNode(el);
sel.addRange(range);
}
} else if (body.createTextRange) {
range = body.createTextRange();
range.moveToElementText(el);
range.select();
}
document.execCommand("Copy");
}

Creating a horizontal scrolling table in shopify

So, I am trying to create a website using Shopify. I tried to edit the code and add three tabs in the product page. 1 Tab will be the description the other is Size chart and the other is reviews. I was able to put the description and reviews in the tab but when I put the size chart and look the website from the phone the size chart doesnt fit. So I wanted to create e horizonal scroll for the table.
Below is the html, CSS and Java code that I put in the product-template.liquid, theme.css, theme.java respectively. Below you can see a picture of the tabs:
Website picture
I used this code to create the review tabs.
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.tab-content
{
display:none;
}
.tab-content.active
{
display:block;
}
ul.tabs
{
list-style-type: none;
padding:0;
margin-left:0;
}
li.tab
{
display:inline-block;
padding:10px 15px;
cursor: pointer;
}
li.tab.active
{
color:grey;
border-bottom:1px solid red;
}
</style>
</head>
<body>
<ul class="tabs">
<li class="tab" data-content-id="Description">tab 1</li>
<li class="tab" data-content-id="Size chart">tab 2</li>
<li class="tab" data-content-id="Reviews">tab 3</li>
</ul>
<div id="tab-content-1" class="tab-content">content 1</div>
<div id="tab-content-2" class="tab-content">{{product.metafields.meta.sizechart}}</div>
<div id="tab-content-3" class="tab-content">content 3</div>
<script>
tabs= document.querySelectorAll('.tab');
tabContents= document.querySelectorAll('.tab-content');
tabs.forEach(function(tab){
tab.addEventListener('click',function(){
contentId = this.dataset.contentId;
content = document.getElementById(contentId);
tabContents.forEach(function(content){
content.classList.remove('active');
});
tabs.forEach(function(tab){
tab.classList.remove('active');
});
this.classList.add('active');
content.classList.add('active');
});
});
</script>
</body>
</html>
I tried a lot of things to make the horizontal scroll bar. But it still now working. If anyone has any experience with shopify can you please help me.
The table in html:
<div style='overflow-x:auto'>
<table class="t2">
<thead>
<tr>
<td style="width: 54px;" rowspan="2">Size</td>
<td style="width: 112px;" colspan="2">Length</td>
<td style="width: 96px;" colspan="2">Waist</td>
<td style="width: 86.6px;" colspan="2">Hip</td>
</tr>
<tr>
<td style="width: 57px;">CM</td>
<td style="width: 55px;">INCH</td>
<td style="width: 39px;">CM</td>
<td style="width: 57px;">INCH</td>
<td style="width: 40px;">CM</td>
<td style="width: 46.6px;">INCH</td>
</tr>
</thead>
<tbody>
<tr>
<td style="width: 54px;">S</td>
<td style="width: 57px;">100</td>
<td style="width: 55px;">39.37 </td>
<td style="width: 39px;">61</td>
<td style="width: 57px;">24.02 </td>
<td style="width: 40px;">95</td>
<td style="width: 46.6px;">37.40 </td>
</tr>
<tr>
<td style="width: 54px;">M</td>
<td style="width: 57px;">101.5</td>
<td style="width: 55px;">39.96 </td>
<td style="width: 39px;">65</td>
<td style="width: 57px;">25.59 </td>
<td style="width: 40px;">99</td>
<td style="width: 46.6px;">38.98 </td>
</tr>
<tr>
<td style="width: 54px;">L</td>
<td style="width: 57px;">103</td>
<td style="width: 55px;">40.55 </td>
<td style="width: 39px;">69</td>
<td style="width: 57px;">27.17 </td>
<td style="width: 40px;">103</td>
<td style="width: 46.6px;">40.55 </td>
</tr>
<tr>
<td style="width: 54px;">XL</td>
<td style="width: 57px;">104.5</td>
<td style="width: 55px;">41.14 </td>
<td style="width: 39px;">73</td>
<td style="width: 57px;">28.74 </td>
<td style="width: 40px;">107</td>
<td style="width: 46.6px;">42.13</td>
</tr>
</tbody>
</table>
</div>

Add This CSS & Check Updated HTML
.table-outer{
overflow: auto;
}
.table-outer table{
min-width:600px;
}
.tab-content
{
display:none;
}
.tab-content.active
{
display:block;
}
ul.tabs
{
list-style-type: none;
padding:0;
margin-left:0;
}
li.tab
{
display:inline-block;
padding:10px 15px;
cursor: pointer;
}
li.tab.active
{
color:grey;
border-bottom:1px solid red;
}
.table-outer{
overflow: auto;
padding:0 20px;
}
.table-outer table{min-width:600px;}
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<ul class="tabs">
<li class="tab" data-content-id="Description">tab 1</li>
<li class="tab" data-content-id="Size chart">tab 2</li>
<li class="tab" data-content-id="Reviews">tab 3</li>
</ul>
<div id="tab-content-1" class="tab-content">content 1</div>
<div id="tab-content-2" class="tab-content" style="display:block;"><div class="table-outer"><div style='overflow-x:auto'>
<table class="t2">
<thead>
<tr>
<td style="width: 54px;" rowspan="2">Size</td>
<td style="width: 112px;" colspan="2">Length</td>
<td style="width: 96px;" colspan="2">Waist</td>
<td style="width: 86.6px;" colspan="2">Hip</td>
</tr>
<tr>
<td style="width: 57px;">CM</td>
<td style="width: 55px;">INCH</td>
<td style="width: 39px;">CM</td>
<td style="width: 57px;">INCH</td>
<td style="width: 40px;">CM</td>
<td style="width: 46.6px;">INCH</td>
</tr>
</thead>
<tbody>
<tr>
<td style="width: 54px;">S</td>
<td style="width: 57px;">100</td>
<td style="width: 55px;">39.37 </td>
<td style="width: 39px;">61</td>
<td style="width: 57px;">24.02 </td>
<td style="width: 40px;">95</td>
<td style="width: 46.6px;">37.40 </td>
</tr>
<tr>
<td style="width: 54px;">M</td>
<td style="width: 57px;">101.5</td>
<td style="width: 55px;">39.96 </td>
<td style="width: 39px;">65</td>
<td style="width: 57px;">25.59 </td>
<td style="width: 40px;">99</td>
<td style="width: 46.6px;">38.98 </td>
</tr>
<tr>
<td style="width: 54px;">L</td>
<td style="width: 57px;">103</td>
<td style="width: 55px;">40.55 </td>
<td style="width: 39px;">69</td>
<td style="width: 57px;">27.17 </td>
<td style="width: 40px;">103</td>
<td style="width: 46.6px;">40.55 </td>
</tr>
<tr>
<td style="width: 54px;">XL</td>
<td style="width: 57px;">104.5</td>
<td style="width: 55px;">41.14 </td>
<td style="width: 39px;">73</td>
<td style="width: 57px;">28.74 </td>
<td style="width: 40px;">107</td>
<td style="width: 46.6px;">42.13</td>
</tr>
</tbody>
</table>
</div></div></div>
<div id="tab-content-3" class="tab-content">content 3</div>
<script>
tabs= document.querySelectorAll('.tab');
tabContents= document.querySelectorAll('.tab-content');
tabs.forEach(function(tab){
tab.addEventListener('click',function(){
contentId = this.dataset.contentId;
content = document.getElementById(contentId);
tabContents.forEach(function(content){
content.classList.remove('active');
});
tabs.forEach(function(tab){
tab.classList.remove('active');
});
this.classList.add('active');
content.classList.add('active');
});
});
</script>
</body>
</html>

How to make child appear on top of the parent inside the table tr?

I have a Table in the left menu which is having the Scroll bar and i have a Tooltip for each row inside a table. My requirement is to show Tooltip on Top of the Scrollbar towards right, but some how i am unable to achieve that.
Problem is Tooltip appearing behind the Scrollbar and body. I need to show it on top of the Scrollbar towards right.
I have a Position "Relative" for Parent Div and "Absolute" for Child element. Z-index also seems not working here.
HTML:
<div class="ResultsWrapper">
<table class="ResultsTable">
<tr>
<td class="hasTooltip">
<div class="SerialNumberContainer">
<div class="SerialNumber">3119985815206</div>
<div class="SerialNumberTooltip">3119985815206</div>
</div>
</td>
</tr>
</table>
</div>
CSS:
.SerialNumberContainer {
position: relative;
z-index: 10;
}
.SerialNumberTooltip {
position: absolute;
top: 10px;
left: 40px;
background-color: #FFF;
border: 1px solid #CCC;
display: none;
}
.SerialNumberContainer:hover {
z-index: 20;
}
.SerialNumberContainer:hover .SerialNumberTooltip {
display: block;
z-index: 40;
}
Please check the below Fiddle.
Full Example In Fiddle
Appreciate your Help.

I think you can use a wrapper class (.TooltipWrapper in the HTML) like the following way:
document.querySelectorAll('.SerialNumber').forEach(function(el){
el.addEventListener('mousemove',function(ele){
var x = ele.pageY;
el.parentNode.querySelector('.TooltipWrapper').style.top = `${x}px`;
});
});
.ResultsWrapper {
width:150px;
height:314px;
text-align:center;
overflow-x:hidden;
overflow-y:scroll;
border:1px solid black;
}
.ResultsTable {
width:86px;
border-collapse:collapse;
table-layout:fixed;
}
.ResultsTable th, .ResultsTable td {
border:1px solid black;
}
.ColumnSerialNo {
width:81px;
}
.SerialNumber {
width: 80px;
overflow: hidden;
}
.TooltipWrapper {
position: absolute;
visibility: hidden;
}
.hasTooltip:hover .TooltipWrapper {
visibility: visible;
opacity: 1;
}
.SerialNumberTooltip {
display: block;
--margin-top: -20px;
margin-left: 85px;
background-color: #FFF;
border: 1px solid #CCC;
}
<div class="ResultsWrapper">
<table class="ResultsTable">
<thead>
<tr>
<th class="ColumnSerialNo">Serial Number</th>
</tr>
</thead>
<tbody>
<tr>
<td class="hasTooltip">
<div class="SerialNumberContainer">
<div class="SerialNumber">3119985815206</div>
<div class="TooltipWrapper">
<div class="SerialNumberTooltip">3119985815206</div>
</div>
</div>
</td>
</tr>
<tr>
<td class="hasTooltip">
<div class="SerialNumberContainer">
<div class="SerialNumber">3119985815207</div>
<div class="TooltipWrapper">
<div class="SerialNumberTooltip">3119985815207</div>
</div>
</div>
</td>
</tr>
<tr>
<td class="hasTooltip">
<div class="SerialNumberContainer">
<div class="SerialNumber">3119985815208</div>
<div class="TooltipWrapper">
<div class="SerialNumberTooltip">3119985815208</div>
</div>
</div>
</td>
</tr>
<tr>
<td class="hasTooltip">
<div class="SerialNumberContainer">
<div class="SerialNumber">3119985815209</div>
<div class="TooltipWrapper">
<div class="SerialNumberTooltip">3119985815209</div>
</div>
</div>
</td>
</tr>
<tr>
<td class="hasTooltip">
<div class="SerialNumberContainer">
<div class="SerialNumber">3119985815210</div>
<div class="TooltipWrapper">
<div class="SerialNumberTooltip">3119985815210</div>
</div>
</div>
</td>
</tr>
<tr>
<td class="hasTooltip">
<div class="SerialNumberContainer">
<div class="SerialNumber">3119985815211</div>
<div class="TooltipWrapper">
<div class="SerialNumberTooltip">3119985815211</div>
</div>
</div>
</td>
</tr>
<tr>
<td class="hasTooltip">
<div class="SerialNumberContainer">
<div class="SerialNumber">3119985815212</div>
<div class="TooltipWrapper">
<div class="SerialNumberTooltip">3119985815212</div>
</div>
</div>
</td>
</tr>
<tr>
<td class="hasTooltip">
<div class="SerialNumberContainer">
<div class="SerialNumber">3119985815213</div>
<div class="TooltipWrapper">
<div class="SerialNumberTooltip">3119985815213</div>
</div>
</div>
</td>
</tr>
<tr>
<td class="hasTooltip">
<div class="SerialNumberContainer">
<div class="SerialNumber">3119985815214</div>
<div class="TooltipWrapper">
<div class="SerialNumberTooltip">3119985815214</div>
</div>
</div>
</td>
</tr>
<tr>
<td class="hasTooltip">
<div class="SerialNumberContainer">
<div class="SerialNumber">3119985815215</div>
<div class="TooltipWrapper">
<div class="SerialNumberTooltip">3119985815215</div>
</div>
</div>
</td>
</tr>
<tr>
<td class="hasTooltip">
<div class="SerialNumberContainer">
<div class="SerialNumber">3119985815216</div>
<div class="TooltipWrapper">
<div class="SerialNumberTooltip">3119985815216</div>
</div>
</div>
</td>
</tr>
<tr>
<td class="hasTooltip">
<div class="SerialNumberContainer">
<div class="SerialNumber">3119985815217</div>
<div class="TooltipWrapper">
<div class="SerialNumberTooltip">3119985815217</div>
</div>
</div>
</td>
</tr>
<tr>
<td class="hasTooltip">
<div class="SerialNumberContainer">
<div class="SerialNumber">3119985815218</div>
<div class="TooltipWrapper">
<div class="SerialNumberTooltip">3119985815218</div>
</div>
</div>
</td>
</tr>
<tr>
<td class="hasTooltip">
<div class="SerialNumberContainer">
<div class="SerialNumber">3119985815219</div>
<div class="TooltipWrapper">
<div class="SerialNumberTooltip">3119985815219</div>
</div>
</div>
</td>
</tr>
<tr>
<td class="hasTooltip">
<div class="SerialNumberContainer">
<div class="SerialNumber">3119985815220</div>
<div class="TooltipWrapper">
<div class="SerialNumberTooltip">3119985815220</div>
</div>
</div>
</td>
</tr>
<tr>
<td class="hasTooltip">
<div class="SerialNumberContainer">
<div class="SerialNumber">3119985815221</div>
<div class="TooltipWrapper">
<div class="SerialNumberTooltip">3119985815221</div>
</div>
</div>
</td>
</tr>
<tr>
<td class="hasTooltip">
<div class="SerialNumberContainer">
<div class="SerialNumber">3119985815222</div>
<div class="TooltipWrapper">
<div class="SerialNumberTooltip">3119985815222</div>
</div>
</div>
</td>
</tr>
<tr>
<td class="hasTooltip">
<div class="SerialNumberContainer">
<div class="SerialNumber">3119985815223</div>
<div class="TooltipWrapper">
<div class="SerialNumberTooltip">3119985815223</div>
</div>
</div>
</td>
</tr>
<tr>
<td class="hasTooltip">
<div class="SerialNumberContainer">
<div class="SerialNumber">3119985815224</div>
<div class="TooltipWrapper">
<div class="SerialNumberTooltip">3119985815224</div>
</div>
</div>
</td>
</tr>
<tr>
<td class="hasTooltip">
<div class="SerialNumberContainer">
<div class="SerialNumber">3119985815225</div>
<div class="TooltipWrapper">
<div class="SerialNumberTooltip">3119985815225</div>
</div>
</div>
</td>
</tr>
<tr>
<td class="hasTooltip">
<div class="SerialNumberContainer">
<div class="SerialNumber">3119985815226</div>
<div class="TooltipWrapper">
<div class="SerialNumberTooltip">3119985815226</div>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>

This is the workaround:
1. Change html structure:
<div class="SerialNumber" data-before-content="3119985815206">3119985815206</div>
Using pseudo elements to target attribute of div .(adding before after css)
remove position:relative on which the tooltip was depending.
Removed top and left attribute as they depend on position relative and replace with margin .
Below is the fixed code:
.ResultsWrapper {
width:150px;
height:314px;
text-align:center;
overflow-x:hidden;
overflow-y:scroll;
border:1px solid black;
}
.ResultsTable {
width:86px;
border-collapse:collapse;
table-layout:fixed;
}
.ResultsTable th, .ResultsTable td {
border:1px solid black;
text-overflow:ellipsis;
}
.ColumnSerialNo {
width:81px;
}
.SerialNumberContainer {
z-index: 10;
}
.SerialNumber {
width: 80px;
overflow: hidden;
}
.SerialNumber:hover::before {
position: absolute;
content:attr(data-before-content);
margin:10px 0 0 50px;
background-color: #fff;
border: 1px solid #CCC;
display: block;
z-index:9999;
}
.SerialNumber:hover{}
<div class="ResultsWrapper">
<table class="ResultsTable">
<thead>
<tr>
<th class="ColumnSerialNo">Serial Number</th>
</tr>
</thead>
<tbody>
<tr>
<td class="hasTooltip">
<div class="SerialNumberContainer">
<div class="SerialNumber" data-before-content="aaaaaaa3119985815206">3119985815206</div>
</div>
</td>
</tr>
<tr>
<td class="hasTooltip">
<div class="SerialNumberContainer">
<div class="SerialNumber" data-before-content="3119985815206">3119985815206</div>
</div>
</td>
</tr>
<tr>
<td class="hasTooltip">
<div class="SerialNumberContainer">
<div class="SerialNumber" data-before-content="3119985815206">3119985815206</div>
</div>
</td>
</tr>
<tr>
<td class="hasTooltip">
<div class="SerialNumberContainer">
<div class="SerialNumber" data-before-content="3119985815206">3119985815206</div>
</div>
</td>
</tr>
<tr>
<td class="hasTooltip">
<div class="SerialNumberContainer">
<div class="SerialNumber" data-before-content="3119985815206">3119985815206</div>
</div>
</td>
</tr>
<tr>
<td class="hasTooltip">
<div class="SerialNumberContainer">
<div class="SerialNumber" data-before-content="3119985815206">3119985815206</div>
</div>
</td>
</tr>
<tr>
<td class="hasTooltip">
<div class="SerialNumberContainer">
<div class="SerialNumber" data-before-content="3119985815206">3119985815206</div>
</div>
</td>
</tr>
<tr>
<td class="hasTooltip">
<div class="SerialNumberContainer">
<div class="SerialNumber" data-before-content="3119985815206">3119985815206</div>
</div>
</td>
</tr>
<tr>
<td class="hasTooltip">
<div class="SerialNumberContainer">
<div class="SerialNumber" data-before-content="3119985815206">3119985815206</div>
</div>
</td>
</tr>
<tr>
<td class="hasTooltip">
<div class="SerialNumberContainer">
<div class="SerialNumber" data-before-content="3119985815206">3119985815206</div>
</div>
</td>
</tr>
<tr>
<td class="hasTooltip">
<div class="SerialNumberContainer">
<div class="SerialNumber" data-before-content="3119985815206">3119985815206</div>
</div>
</td>
</tr><tr>
<td class="hasTooltip">
<div class="SerialNumberContainer">
<div class="SerialNumber" data-before-content="3119985815206">3119985815206</div>
</div>
</td>
</tr>
<tr>
<td class="hasTooltip">
<div class="SerialNumberContainer">
<div class="SerialNumber" data-before-content="3119985815206">3119985815206</div>
</div>
</td>
</tr>
<tr>
<td class="hasTooltip">
<div class="SerialNumberContainer">
<div class="SerialNumber" data-before-content="3119985815206">3119985815206</div>
</div>
</td>
</tr>
<tr>
<td class="hasTooltip">
<div class="SerialNumberContainer">
<div class="SerialNumber" data-before-content="3119985815206">3119985815206</div>
</div>
</td>
</tr>
<tr>
<td class="hasTooltip">
<div class="SerialNumberContainer">
<div class="SerialNumber" data-before-content="3119985815206">3119985815206</div>
</div>
</td>
</tr>
<tr>
<td class="hasTooltip">
<div class="SerialNumberContainer">
<div class="SerialNumber" data-before-content="3119985815206">3119985815206</div>
</div>
</td>
</tr>
<tr>
<td class="hasTooltip">
<div class="SerialNumberContainer">
<div class="SerialNumber" data-before-content="3119985815206">3119985815206</div>
</div>
</td>
</tr>
<tr>
<td class="hasTooltip">
<div class="SerialNumberContainer">
<div class="SerialNumber" data-before-content="3119985815206">3119985815206</div>
</div>
</td>
</tr>
<tr>
<td class="hasTooltip">
<div class="SerialNumberContainer">
<div class="SerialNumber" data-before-content="3119985815206">3119985815206</div>
</div>
</td>
</tr>
<tr>
<td class="hasTooltip">
<div class="SerialNumberContainer">
<div class="SerialNumber" data-before-content="3119985815206">3119985815206</div>
</div>
</td>
</tr>
<tr>
<td class="hasTooltip">
<div class="SerialNumberContainer">
<div class="SerialNumber" data-before-content="3119985815206">3119985815206</div>
</div>
</td>
</tr>
<tr>
<td class="hasTooltip">
<div class="SerialNumberContainer">
<div class="SerialNumber" data-before-content="3119985815206">3119985815206</div>
</div>
</td>
</tr>
<tr>
<td class="hasTooltip">
<div class="SerialNumberContainer">
<div class="SerialNumber" data-before-content="3119985815206">3119985815206</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>

You cannot position an element over the scrollbar using Position absolute and z-index.
If you want to show element on top of the scrollbar then you need to use position fixed element.
.ResultsWrapper {
width:150px;
height:314px;
text-align:center;
overflow-y:scroll;
border:1px solid black;
z-index:-1;
}
.ResultsTable {
width:86px;
border-collapse:collapse;
table-layout:fixed;
}
.ResultsTable th, .ResultsTable td {
border:1px solid black;
text-overflow:ellipsis;
}
.ColumnSerialNo {
width:81px;
}
.SerialNumberContainer {
position: relative;
z-index: 10;
}
.SerialNumber {
width: 80px;
overflow: hidden;
}
.SerialNumberTooltip {
position: fixed;
top: 10px;
left: 70px;
background-color: #FFF;
border: 1px solid #CCC;
display: none;
z-index:99999999999;
}
.SerialNumberContainer:hover {
z-index: 20;
}
.SerialNumberContainer:hover .SerialNumberTooltip {
display: block;
z-index: 40;
}
<div class="ResultsWrapper">
<table class="ResultsTable">
<thead>
<tr>
<th class="ColumnSerialNo">Serial Number</th>
</tr>
</thead>
<tbody>
<tr>
<td class="hasTooltip">
<div class="SerialNumberContainer">
<div class="SerialNumber">3119985815206</div>
<div class="SerialNumberTooltip">3119985815206</div>
</div>
</td>
</tr>
<tr>
<td class="hasTooltip">
<div class="SerialNumberContainer">
<div class="SerialNumber">3119985815206</div>
<div class="SerialNumberTooltip">3119985815206</div>
</div>
</td>
</tr>
<tr>
<td class="hasTooltip">
<div class="SerialNumberContainer">
<div class="SerialNumber">3119985815206</div>
<div class="SerialNumberTooltip">3119985815206</div>
</div>
</td>
</tr>
<tr>
<td class="hasTooltip">
<div class="SerialNumberContainer">
<div class="SerialNumber">3119985815206</div>
<div class="SerialNumberTooltip">3119985815206</div>
</div>
</td>
</tr>
<tr>
<td class="hasTooltip">
<div class="SerialNumberContainer">
<div class="SerialNumber">3119985815206</div>
<div class="SerialNumberTooltip">3119985815206</div>
</div>
</td>
</tr>
<tr>
<td class="hasTooltip">
<div class="SerialNumberContainer">
<div class="SerialNumber">3119985815206</div>
<div class="SerialNumberTooltip">3119985815206</div>
</div>
</td>
</tr>
<tr>
<td class="hasTooltip">
<div class="SerialNumberContainer">
<div class="SerialNumber">3119985815206</div>
<div class="SerialNumberTooltip">3119985815206</div>
</div>
</td>
</tr>
<tr>
<td class="hasTooltip">
<div class="SerialNumberContainer">
<div class="SerialNumber">3119985815206</div>
<div class="SerialNumberTooltip">3119985815206</div>
</div>
</td>
</tr>
<tr>
<td class="hasTooltip">
<div class="SerialNumberContainer">
<div class="SerialNumber">3119985815206</div>
<div class="SerialNumberTooltip">3119985815206</div>
</div>
</td>
</tr>
<tr>
<td class="hasTooltip">
<div class="SerialNumberContainer">
<div class="SerialNumber">3119985815206</div>
<div class="SerialNumberTooltip">3119985815206</div>
</div>
</td>
</tr>
<tr>
<td class="hasTooltip">
<div class="SerialNumberContainer">
<div class="SerialNumber">3119985815206</div>
<div class="SerialNumberTooltip">3119985815206</div>
</div>
</td>
</tr>
<tr>
<td class="hasTooltip">
<div class="SerialNumberContainer">
<div class="SerialNumber">3119985815206</div>
<div class="SerialNumberTooltip">3119985815206</div>
</div>
</td>
</tr>
<tr>
<td class="hasTooltip">
<div class="SerialNumberContainer">
<div class="SerialNumber">3119985815206</div>
<div class="SerialNumberTooltip">3119985815206</div>
</div>
</td>
</tr>
<tr>
<td class="hasTooltip">
<div class="SerialNumberContainer">
<div class="SerialNumber">3119985815206</div>
<div class="SerialNumberTooltip">3119985815206</div>
</div>
</td>
</tr>
<tr>
<td class="hasTooltip">
<div class="SerialNumberContainer">
<div class="SerialNumber">3119985815206</div>
<div class="SerialNumberTooltip">3119985815206</div>
</div>
</td>
</tr>
<tr>
<td class="hasTooltip">
<div class="SerialNumberContainer">
<div class="SerialNumber">3119985815206</div>
<div class="SerialNumberTooltip">3119985815206</div>
</div>
</td>
</tr>
<tr>
<td class="hasTooltip">
<div class="SerialNumberContainer">
<div class="SerialNumber">3119985815206</div>
<div class="SerialNumberTooltip">3119985815206</div>
</div>
</td>
</tr>
<tr>
<td class="hasTooltip">
<div class="SerialNumberContainer">
<div class="SerialNumber">3119985815206</div>
<div class="SerialNumberTooltip">3119985815206</div>
</div>
</td>
</tr>
<tr>
<td class="hasTooltip">
<div class="SerialNumberContainer">
<div class="SerialNumber">3119985815206</div>
<div class="SerialNumberTooltip">3119985815206</div>
</div>
</td>
</tr>
<tr>
<td class="hasTooltip">
<div class="SerialNumberContainer">
<div class="SerialNumber">3119985815206</div>
<div class="SerialNumberTooltip">3119985815206</div>
</div>
</td>
</tr>
<tr>
<td class="hasTooltip">
<div class="SerialNumberContainer">
<div class="SerialNumber">3119985815206</div>
<div class="SerialNumberTooltip">3119985815206</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
Check the below jsfiddle.
http://jsfiddle.net/rajeevRF/eoc8yv5a/5/

Repeating a watermark on every print page? Javascript or css

So, I have this Invoice page. and i am adding a watermark behind the page. i need to repeat the watermark for each page that would be printed.
The problem is that, I don't know how many pages would there be. there could be any number of pages.
I need to show watermark behind every page.
These images are taken from Google Chrome's print mode.
This is the page's html. you needn't go through it. the only point here is that there is a div that i know occurs two times. I used that in javascript to repeat the watermark.
<div class="content-box pad25A" style="page-break-after: always;">
<div class="row" style="min-height:1000px">
<div class="col-md-12">
<div class="row">
<div class="col-xs-3">
<div class="row">
<img src="/Images/ProjectImages/Project-Logo.jpg" style="width:100px;height:100px" class="img-circle" />
</div>
</div>
<div class="col-xs-5">
<center>
<div class="row">
<div class="col-xs-12">
<div style="font-size:14px;font-weight:bold;">TIGER INCENSE</div>
</div>
<div class="col-xs-12">
<center>
<div style="font-size:14px;font-weight:bold;">TigerIncenseRAATradersCompany#gmail.com</div>
</center>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<address style="font-size:14px;font-weight:bold" class="invoice-address">Pakistan</address>
</div>
</div>
</center>
</div>
<div class="col-xs-4 float-right text-right">
<h4 class="invoice-title">Invoice</h4>No. <b>#52462</b>
<div class="divider"></div>
<div class="invoice-date mrg20B" style="font-weight:500">23 April 2018</div>
</div>
</div>
<div class="divider"></div>
<div class="row">
<div class="col-xs-4">
<h2 class="invoice-client mrg10T">Client information:</h2>
<ul class="reset-ul">
<li><b style="font-weight:bold">Name:</b><span> Sir Fazal-e-Wahid</span></li>
<li><b>Address:</b><span> Peshawar</span></li>
<li><b>Phone:</b><span> 03319090057</span></li>
</ul>
</div>
<div class="col-xs-4">
<h2 class="invoice-client mrg10T">Order Info:</h2>
<ul class="reset-ul">
<li><b>Date:</b><span> 20 April 2018</span></li>
<li><b>Status:</b> <span class="bs-label label-warning">Delivered</span></li>
</ul>
</div>
<div class="col-xs-4">
<h2 class="invoice-client mrg10T">Order Details:</h2>
<p style="font-weight:600 !important;">Fragrance Sticks for use</p><br>
</div>
</div>
<table class="table mrg20T table-bordered">
<thead>
<tr>
<th>#</th>
<th>Product Name</th>
<th class="text-center">Per Piece</th>
<th>Price Per Piece</th>
<th>Price Per Carton</th>
<th>Carton Quantity</th>
<th>Total Price</th>
</tr>
</thead>
<tbody>
<tr>
<th colspan="4" style="border: 1px solid black;font-weight:bold">Date : 08 Feb 2018</th>
<th colspan="4" style="border: 1px solid black;font-weight:bold">BuiltyNo : #7057</th>
</tr>
<tr>
<td>1</td>
<td>China Incense Stick for Mosquito</td>
<td class="text-center">48</td>
<td>Rs : 100</td>
<td>Rs : 4800</td>
<td>125</td>
<td>Rs : <span class="RowTotal">600000</span></td>
</tr>
<tr>
<th colspan="4" style="border: 1px solid black;font-weight:bold">Date : 02 Mar 2018</th>
<th colspan="4" style="border: 1px solid black;font-weight:bold">BuiltyNo : #635</th>
</tr>
<tr>
<td>1</td>
<td>China Incense Stick </td>
<td class="text-center">240</td>
<td>Rs : 18</td>
<td>Rs : 4320</td>
<td>20</td>
<td>Rs : <span class="RowTotal">86400</span></td>
</tr>
<tr>
<td>2</td>
<td>China Incense Stick </td>
<td class="text-center">240</td>
<td>Rs : 18</td>
<td>Rs : 4320</td>
<td>28</td>
<td>Rs : <span class="RowTotal">120960</span></td>
</tr>
<tr>
<th colspan="4" style="border: 1px solid black;font-weight:bold">Date : 26 Mar 2018</th>
<th colspan="4" style="border: 1px solid black;font-weight:bold">BuiltyNo : #292</th>
</tr>
<tr>
<td>1</td>
<td>Crystal</td>
<td class="text-center">70</td>
<td>Rs : 48.57</td>
<td>Rs : 3399.9</td>
<td>34</td>
<td>Rs : <span class="RowTotal">115596.6</span></td>
</tr>
<tr>
<th colspan="4" style="border: 1px solid black;font-weight:bold">Date : 31 Mar 2018</th>
<th colspan="4" style="border: 1px solid black;font-weight:bold">BuiltyNo : #658</th>
</tr>
<tr>
<td>1</td>
<td>Crystal</td>
<td class="text-center">70</td>
<td>Rs : 48.57</td>
<td>Rs : 3399.9</td>
<td>34</td>
<td>Rs : <span class="RowTotal">115596.6</span></td>
</tr>
<tr>
<th colspan="4" style="border: 1px solid black;font-weight:bold">Date : 18 Apr 2018</th>
<th colspan="4" style="border: 1px solid black;font-weight:bold">BuiltyNo : #1902</th>
</tr>
<tr>
<td>1</td>
<td>Crystal</td>
<td class="text-center">70</td>
<td>Rs : 48.57</td>
<td>Rs : 3399.9</td>
<td>34</td>
<td>Rs : <span class="RowTotal">115596.6</span></td>
</tr>
</tbody>
</table>
<center>
<div style="font-size:14px;font-weight:bold">THANK YOU FOR YOUR BUSINESS</div>
</center>
</div>
<br />
<div class="row Signature">
<div class="col-xs-5">
<table class="table mrg20T table-bordered">
<thead>
<tr>
<th>Name</th>
<th>Per Piece</th>
<th>Carton</th>
</tr>
</thead>
<tbody>
<tr>
<td>China Incense Stick </td>
<td>240 </td>
<td>48</td>
</tr>
<tr>
<td>China Incense Stick for Mosquito</td>
<td>48 </td>
<td>125</td>
</tr>
<tr>
<td>Crystal</td>
<td>70 </td>
<td>102</td>
</tr>
</tbody>
</table>
</div>
<div class="col-xs-7">
<div class="row">
<div class="col-xs-12">
<div class="pull-right">
<span style="font-size:16px;font-weight:bold">
NET TOTAL.
<span class="TotalAmount">1154150</span>
</span>
</div>
</div>
</div>
<br />
<div class="row">
<div class="col-xs-12">
<center>
<span style="font-size:16px;font-weight:bold">
<span class="TotalAmount">Eleven Lakh Fifty-Four Thousand One Hundred And Fifty Rupees Only</span>
</span>
</center>
</div>
</div>
</div>
</div>
</div>
<div class="row Signature">
<div class="col-xs-4" style="padding:20px">
<div class="row">
<div class="col-xs-12">
<hr />
</div>
</div>
<div class="row">
<div class="col-xs-12">
<center>
<b>Reciever Signature</b>
</center>
</div>
</div>
</div>
<div class="col-xs-4" style="padding:20px">
<div class="row">
<div class="col-xs-12">
<hr />
</div>
</div>
<div class="row">
<div class="col-xs-12">
<center>
<b>GM. Signature</b>
</center>
</div>
</div>
</div>
<div class="col-xs-4" style="padding:20px">
<div class="row">
<div class="col-xs-12">
<hr />
</div>
</div>
<div class="row">
<div class="col-xs-12">
<center>
<b>Proprietor Signature</b>
</center>
</div>
</div>
</div>
</div>
</div>
<div class="content-box pad25A" style="page-break-after: always;">
<center>
<p style="font-size:20px;font-weight:bold">About Our Company</p>
</center>
<div id="row">
<div class="col-xs-12">
<table class="table table-responsive">
<tr>
<td><p style="font-size:16px;font-weight:bold">1</p></td>
<td><p style="font-size:16px;">Tiger Incense fragrence is amazing and unique.</p></td>
</tr>
<tr>
<td><p style="font-size:16px;font-weight:bold">2</p></td>
<td><p style="font-size:16px;">Use itger insence for fragrence and keep your environment redolence</p></td>
</tr>
<tr>
<td><p style="font-size:16px;font-weight:bold">3</p></td>
<td><p style="font-size:16px;">Meterial in tiger insence is very good and the fragrance is very amazing.</p></td>
</tr>
<tr>
<td><p style="font-size:16px;font-weight:bold">4</p></td>
<td><p style="font-size:16px;">If there are any complaints for tiger brand please email or contact us.</p></td>
</tr>
</table>
</div>
</div>
</div>
The last page is hardcoded so i have added a watermark behind it by using javascript and repeating content through it.
This is how i am repeating the "Tiger incense" watermark for now
$(function () {
$(".content-box").each(function () {
$(this).after('<div class="watermark">TIGER INSENCE</div>');
});
});
this is the watermark's css
.watermark {
position: fixed;
opacity: 0.2;
/* Safari */
-webkit-transform: rotate(-60deg);
/* Firefox */
-moz-transform: rotate(-60deg);
/* IE */
-ms-transform: rotate(-60deg);
/* Opera */
-o-transform: rotate(-60deg);
/* Internet Explorer */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
position: absolute;
font-size: 130px;
margin-top: -700px;
margin-left: -50px;
white-space: nowrap;
}
What i want is to repeat the watermark for each page there would be. using javascript or css or any javascript library that would help.Also Page size would always be A4.

I would consider an overlay with a background that you repeat each 100vh. You can activate this style only on print using media query.
I used SVG for simplicity, you can easily replace with an image.
body {
min-height: 300vh;
position: relative;
margin: 0;
}
body:before {
content: "";
position: absolute;
z-index: 9999;
inset: 0;
background:
url('data:image/svg+xml;utf8,<svg style="transform:rotate(-45deg)" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 60"><text x="0" y="25" fill="%23000">Lorem </text></svg>')
0 0/100% 100vh;
}

take watermark as background image
<style type="text/css" media="print">
.content-box
{
background-image:url('watermarkimage.png');
background-repeat:repeat-y;
background-position: center;
background-attachment:fixed;
background-size:100%;
}
</style>

How to get page source using selenium RC

I want to Create A Simple Web Crawler in Java.
I am trying to use this code
WebDriver driver = new HtmlUnitDriver();
driver.get("https://codereview.qt-project.org/#change,70");
String pageSource=driver.getPageSource();
System.out.println(pageSource);
So I got this source code >>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">
<html><head><META http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Gerrit Code Review</title><meta content="locale=en_US" name="gwt:property">
<script language="javascript" type="text/javascript">var gerrit_hostpagedata={"config":
{"useContributorAgreements":true,"useContactInfo":false,"allowRegisterNewEmail":false,
But the content is produced with JavaScript, I want to obtain the HTML snapshot.

Create a Javascript enabled driver..
WebDriver driver = new HtmlUnitDriver(true);
Results:
<?xml version="1.0" encoding="UTF-8"?>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>
codereview.qt-project Code Review
</title>
<meta content="locale=en_US" name="gwt:property"/>
<script language="javascript" type="text/javascript">
//<![CDATA[
var gerrit_hostpagedata={"config":{"useContributorAgreements":true,"useContactInfo":false,"allowRegisterNewEmail":false,"authType":"HTTP","downloadSchemes":["DEFAULT_DOWNLOADS"],"sshdAddress":"*:29418","wildProject":{"name":"All-Projects"},"approvalTypes":{"approvalTypes":[{"category":{"categoryId":{"id":"CRVW"},"name":"Code Review","abbreviatedName":"R","position":1,"functionName":"MaxWithBlock","copyMinScore":true,"labelName":"Code-Review"},"values":[{"key":{"categoryId":{"id":"CRVW"},"value":-2},"name":"This shall not be merged"},{"key":{"categoryId":{"id":"CRVW"},"value":-1},"name":"I would prefer this is not merged as is"},{"key":{"categoryId":{"id":"CRVW"},"value":0},"name":"No score"},{"key":{"categoryId":{"id":"CRVW"},"value":1},"name":"Looks good to me, but someone else must approve"},{"key":{"categoryId":{"id":"CRVW"},"value":2},"name":"Looks good to me, approved"}],"maxNegative":-2,"maxPositive":2},{"category":{"categoryId":{"id":"SRVW"},"name":"Sanity Review","abbreviatedName":"S","position":2,"functionName":"MaxWithBlock","copyMinScore":false,"labelName":"Sanity-Review"},"values":[{"key":{"categoryId":{"id":"SRVW"},"value":-2},"name":"Major sanity problems found"},{"key":{"categoryId":{"id":"SRVW"},"value":-1},"name":"Sanity problems found"},{"key":{"categoryId":{"id":"SRVW"},"value":0},"name":"No sanity review "},{"key":{"categoryId":{"id":"SRVW"},"value":1},"name":"Sanity review passed"}],"maxNegative":-2,"maxPositive":1}]},"editableAccountFields":["REGISTER_NEW_EMAIL","USER_NAME","FULL_NAME"],"commentLinks":[{"find":"[Tt]ask-number:\\s+([\\w\\-]+)","replace":"\u003ca href\u003d\"http://bugreports.qt-project.org/browse/$1\"\u003e$\u0026\u003c/a\u003e"}],"documentationAvailable":false}};gerrit_hostpagedata.theme={"backgroundColor":"#FCFEEF","topMenuColor":"#44A51C","textColor":"#000000","trimColor":"#B6DCA6","selectionColor":"#FFFFCC"};
//]]>
</script>
<style type="text/css">
#gerrit_topmenu {
color: #ffffff;
}
#gerrit_topmenu .gwt-Label {
color: #ffffff;
}
#gerrit_topmenu .gwt-TabBarItem-selected .gwt-Label {
color: #000000;
}
#gerrit_topmenu a, #gerrit_topmenu a:visited, #gerrit_topmenu a:hover {
color: #ffffff;
}
#qt-footer-links {
background-color: #44A51C;
}
#qt-footer-links ul {
width: 100%;
margin: 0;
text-align: center;
padding: .1em 0 .3em 0;
}
#qt-footer-links li {
display: inline;
padding: .1em 1em;
}
#qt-footer-links a, #qt-footer-links a:visited, #qt-footer-links a:hover {
font-family: Arial;
color: white;
font-size: 11px;
font-weight: bold;
text-decoration: none;
}
</style>
<link href="favicon.ico" rel="icon" type="image/gif"/>
<link href="gerrit/gwt/chrome/30B802F72484AED7E67C91FE77CD50BD.cache.css" rel="stylesheet"/>
<link href="undefined" rel="stylesheet"/>
</head>
<body>
<div id="gerrit_topmenu" class="GCLMTUVDNF">
<table class="GCLMTUVDIK">
<colgroup>
<col/>
<col/>
<col/>
</colgroup>
<tbody>
<tr>
<td class="GCLMTUVDMK">
<table cellspacing="0" cellpadding="0" class="GCLMTUVDJK">
<tbody>
<tr>
<td align="left" style="vertical-align: top;">
<table cellspacing="0" cellpadding="0" class="gwt-TabBar" role="tablist" style="width: 100%;">
<tbody>
<tr>
<td align="left" style="vertical-align: bottom;" height="100%" class="gwt-TabBarFirst-wrapper">
<div class="gwt-TabBarFirst" style="white-space: normal; height: 100%;">
 
</div>
</td>
<td align="left" style="vertical-align: bottom;" class="gwt-TabBarItem-wrapper gwt-TabBarItem-wrapper-selected">
<div tabindex="0" class="gwt-TabBarItem gwt-TabBarItem-selected" role="tab">
<div class="gwt-Label" style="white-space: nowrap;">
All
</div>
</div>
</td>
<td align="left" style="vertical-align: bottom;" width="100%" class="gwt-TabBarRest-wrapper">
<div class="gwt-TabBarRest" style="white-space: normal; height: 100%;">
 
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td align="left" style="vertical-align: top;" height="100%">
<div class="gwt-TabPanelBottom" role="tabpanel">
<div style="width: 100%; height: 100%; padding: 0px; margin: 0px;">
<div class="GCLMTUVDMG" role="menubar" style="width: 100%; height: 100%;">
<a class="GCLMTUVDPG GCLMTUVDNG" href="#q,status:open,n,z" role="menuitem">
Open
</a>
<a class="GCLMTUVDPG GCLMTUVDNG" href="#q,status:staged,n,z" role="menuitem">
Staged
</a>
<a class="GCLMTUVDPG GCLMTUVDNG" href="#q,status:integrating,n,z" role="menuitem">
Integrating
</a>
<a class="GCLMTUVDPG GCLMTUVDNG" href="#q,status:merged,n,z" role="menuitem">
Merged
</a>
<a class="GCLMTUVDPG GCLMTUVDNG" href="#q,status:deferred,n,z" role="menuitem">
Deferred
</a>
<a class="GCLMTUVDPG" href="#q,status:abandoned,n,z" role="menuitem">
Abandoned
</a>
</div>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</td>
<td class="GCLMTUVDLK">
<div>
</div>
</td>
<td class="GCLMTUVDMK">
<div class="GCLMTUVDKK">
<div class="GCLMTUVDMG" role="menubar">
<a class="GCLMTUVDPG" href="javascript:;" role="menuitem">
Sign In
</a>
</div>
<div class="GCLMTUVDJJ">
<input type="text" class="gwt-TextBox GCLMTUVDHG" value="Change #, SHA-1, tr:id, owner:email or reviewer:email"/>
<button type="button" class="gwt-Button">
Search
</button>
</div>
</div>
</td>
</tr>
</tbody>
</table>
<div class="GCLMTUVDGJ">
<span class="GCLMTUVDEJ GCLMTUVDFJ" style="">
Loading ...
</span>
</div>
</div>
<div id="gerrit_header">
<div>
<img src="static/logo_open_gov.png" style="margin: 18px 0 0 10px;"/>
<img src="static/logo_qt.png" style="float: right; margin: 18px 28px 0 0;"/>
</div>
</div>
<div id="gerrit_body" class="GCLMTUVDMF">
<div>
<div style="display: none;">
<div class="GCLMTUVDHJ GCLMTUVDLB">
<div class="GCLMTUVDIJ">
<span class="gwt-InlineLabel">
</span>
</div>
<div>
<table cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td align="left" style="vertical-align: top;">
<table class="GCLMTUVDFG GCLMTUVDKB">
<colgroup>
<col/>
<col/>
</colgroup>
<tbody>
<tr>
<td class="header GCLMTUVDNK">
Change-Id:
</td>
<td class="GCLMTUVDNK GCLMTUVDBC">
 
</td>
</tr>
<tr>
<td class="header">
Owner
</td>
<td>
 
</td>
</tr>
<tr>
<td class="header">
Project
</td>
<td>
 
</td>
</tr>
<tr>
<td class="header">
Branch
</td>
<td>
 
</td>
</tr>
<tr>
<td class="header">
Topic
</td>
<td>
 
</td>
</tr>
<tr>
<td class="header">
Uploaded
</td>
<td>
 
</td>
</tr>
<tr>
<td class="header">
Updated
</td>
<td>
 
</td>
</tr>
<tr>
<td class="header GCLMTUVDDB">
Status
</td>
<td>
 
</td>
</tr>
<tr>
<td class="GCLMTUVDHI">
 
</td>
<td class="GCLMTUVDHI">
 
</td>
</tr>
</tbody>
</table>
</td>
<td align="left" style="vertical-align: top;">
<div class="GCLMTUVDMB">
</div>
</td>
</tr>
</tbody>
</table>
<div class="GCLMTUVDO">
<table class="GCLMTUVDGG">
<colgroup>
<col/>
<col/>
<col/>
<col/>
<col/>
</colgroup>
<tbody>
<tr>
<td class="header">
Reviewer
</td>
<td class="header">
 
</td>
<td class="header">
Code Review
</td>
<td class="header">
Sanity Review
</td>
<td class="header GCLMTUVDDJ">
 
</td>
</tr>
</tbody>
</table>
<ul class="GCLMTUVDCH">
</ul>
<div class="GCLMTUVDK" style="display: none;">
<div>
<input type="text" class="gwt-SuggestBox GCLMTUVDHG" value="Name or Email"/>
<button type="button" class="gwt-Button">
Add Reviewer
</button>
</div>
</div>
</div>
<table cellspacing="0" cellpadding="0" class="gwt-DisclosurePanel gwt-DisclosurePanel-closed">
<tbody>
<tr>
<td align="left" style="vertical-align: top;">
<a href="javascript:void(0);" style="display: block;" class="header">
<table>
<tbody>
<tr>
<td align="center" style="width: 16px;">
<img onload="this.__gwtLastUnhandledEvent="load";" src="https://codereview.qt-project.org/gerrit/clear.cache.gif" style="width: 16px; height: 16px; background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAfklEQVR42mNgoDZITk4WosiAtLS0M6mpqb1Amp9cAy4B8X8gfpWenp5MiQEwfB6IbSgxAIaXArEcJQaA8Ddg+NQVFhZykmsADG8MDQ1lJseA5wQDFocBP0FRm5WVxUNOGGwEJi4VcmLhKtC5HuSkg8NA5+bjDCRCAG8UDUoAAIw8kVdwMG+3AAAAAElFTkSuQmCC) no-repeat 0px 0px" border="0" class="gwt-Image"/>
</td>
<td>
Included in
</td>
</tr>
</tbody>
</table>
</a>
</td>
</tr>
<tr>
<td align="left" style="vertical-align: top;">
<div style="padding: 0px; overflow: hidden; display: none;">
<table class="content">
<colgroup>
<col/>
</colgroup>
<tbody>
<tr>
<td>
 
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
<table cellspacing="0" cellpadding="0" class="gwt-DisclosurePanel gwt-DisclosurePanel-closed">
<tbody>
<tr>
<td align="left" style="vertical-align: top;">
<a href="javascript:void(0);" style="display: block;" class="header">
<table>
<tbody>
<tr>
<td align="center" style="width: 16px;">
<img onload="this.__gwtLastUnhandledEvent="load";" src="https://codereview.qt-project.org/gerrit/clear.cache.gif" style="width: 16px; height: 16px; background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAfklEQVR42mNgoDZITk4WosiAtLS0M6mpqb1Amp9cAy4B8X8gfpWenp5MiQEwfB6IbSgxAIaXArEcJQaA8Ddg+NQVFhZykmsADG8MDQ1lJseA5wQDFocBP0FRm5WVxUNOGGwEJi4VcmLhKtC5HuSkg8NA5+bjDCRCAG8UDUoAAIw8kVdwMG+3AAAAAElFTkSuQmCC) no-repeat 0px 0px" border="0" class="gwt-Image"/>
</td>
<td>
Dependencies
</td>
</tr>
</tbody>
</table>
</a>
</td>
</tr>
<tr>
<td align="left" style="vertical-align: top;">
<div style="padding: 0px; overflow: hidden; display: none;">
<table class="GCLMTUVDOB content" style="width: auto;">
<colgroup>
<col/>
</colgroup>
<tbody>
<tr>
<td class="GCLMTUVDDG"/>
<td class="GCLMTUVDDG"/>
<td class="GCLMTUVDFB GCLMTUVDKD">
ID
</td>
<td class="GCLMTUVDKD">
Subject
</td>
<td class="GCLMTUVDKD">
Owner
</td>
<td class="GCLMTUVDKD">
Project
</td>
<td class="GCLMTUVDKD">
Branch
</td>
<td class="GCLMTUVDKD">
Updated
</td>
</tr>
<tr>
<td colspan="8" class="GCLMTUVDKJ">
Depends On
</td>
</tr>
<tr>
<td colspan="8" class="GCLMTUVDOE">
(None)
</td>
</tr>
<tr>
<td colspan="8" class="GCLMTUVDKJ">
Needed By
</td>
</tr>
<tr>
<td colspan="8" class="GCLMTUVDOE">
(None)
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
<table class="GCLMTUVDLJ">
<colgroup>
<col/>
<col/>
</colgroup>
<tbody>
<tr>
<td>
Old Version History:
</td>
<td>
<select class="gwt-ListBox">
<option value="Base" selected="selected">
Base
</option>
</select>
</td>
</tr>
</tbody>
</table>
<div>
</div>
<div class="GCLMTUVDJB">
</div>
</div>
</div>
</div>
</div>
</div>
<div style="clear: both; margin-top: 15px; padding-top: 2px; margin-bottom: 15px;">
<div id="gerrit_footer">
<div>
<div id="qt-footer-links">
<ul>
<li>
<a href="http://qt.digia.com/">
qt.digia.com
</a>
</li>
<li>
<a href="http://qt-project.org/doc/">
Qt Documentation
</a>
</li>
<li>
<a href="http://qt-project.org/">
Qt-Project
</a>
</li>
<li>
<a href="http://planet.qt-project.org/">
Planet Qt
</a>
</li>
<li>
<a href="http://qt.gitorious.org/">
Qt Repositories - Gitorious
</a>
</li>
<li>
<a href="http://bugreports.qt-project.org/">
Qt Bug Tracker - JIRA
</a>
</li>
</ul>
</div>
</div>
</div>
<div id="gerrit_btmmenu" style="clear: both;">
<div class="GCLMTUVDIG">
Press '?' to view keyboard shortcuts
</div>
<div class="GCLMTUVDAL">
Powered by
<a href="http://code.google.com/p/gerrit/" target="_blank">
Gerrit Code Review
</a>
(V2.2.1-NQT-012) |
<a href="http://code.google.com/p/gerrit/issues/list" target="_blank">
Report Bug
</a>
</div>
</div>
</div>
<iframe id="__gwt_historyFrame" src="javascript:''" style="position:absolute;width:0;height:0;border:0" tabindex="-1">
</iframe>
<script language="javascript" type="text/javascript">
//<![CDATA[
<!--
function gerrit(){var s,l,t,w=window,d=document,n='gerrit',f=d.createElement('iframe');function m(){if(s&&l){var b,i=d.createElement('img');i.src=n+'/clear.cache.gif';b=i.src;b=b.substring(0,b.lastIndexOf('/')+1);gerrit=null;f.contentWindow.gwtOnLoad(undefined,n,b);}}gerrit.onScriptLoad=function(){s=1;m();};gerrit.r=function(){l=1;m();};f.src="javascript:''";f.id=n;f.style.cssText='position:absolute;width:0;height:0;border:none';f.tabIndex=-1;d.body.appendChild(f);f.contentWindow.location.replace(n+'/7209E38C5F54FA2918411884E5DCDFEC.cache.html');d.write('<script defer="defer">gerrit.r()</'+'script>');}gerrit();
//-->
//]]>
</script>
<iframe src="javascript:''" id="gerrit" style="position:absolute;width:0;height:0;border:none" tabindex="-1">
</iframe>
<script defer="defer">
//<![CDATA[
gerrit.r()
//]]>
</script>
</body>
</html>

Categories