window.print inclusive textarea values

window.print inclusive textarea values - javascript

I am trying to print an html page, which works wonderfully, but I am missing the values within the text areas when printing?
How can I include the values of the text areas?
Here is the code of the print function:
function print(section) {
var printWindow = window.open('', '', 'height=600,width=800');
printWindow.document.write('<html><head><title>Navigationlog</title>');
//Print the Table CSS.
var table_style = document.getElementById("table_style").innerHTML;
printWindow.document.write('<style type = "text/css">');
printWindow.document.write(table_style);
printWindow.document.write('</style>');
printWindow.document.write('</head>');
//Print the DIV contents i.e. the HTML Table.
printWindow.document.write('<body>');
var divContents = document.getElementById(section).innerHTML;
printWindow.document.write(divContents);
printWindow.document.write('</body>');
printWindow.document.write('</html>');
printWindow.print();
printWindow.close();;
}
Here is the complete example code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
</head>
<style id="table_style" type="text/css">
#media print {
body {
transform: scale(.97);
height: fit-content;
width: auto;
position: absolute;
top: 0;
left: 0;
right: 0;
}
textarea {
font-size: 1.0vw;
}
#routeTable td {
font-size: 1.0vw;
}
#routeTable th {
font-size: 1.0vw;
}
}
html {
font-family: Arial, Helvetica, sans-serif;
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
overflow-y: auto;
/* for Debug */
}
body {
font-family: Arial, Helvetica, sans-serif;
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
overflow-y: auto;
/* for Debug */
}
/* Style the tab content */
.pagecontent {
display: none;
}
/* Navlog */
tr {
vertical-align: middle;
padding-top: 0.5vw;
padding-bottom: 0.5vw;
border-collapse: collapse;
}
th {
vertical-align: middle;
padding-top: 0.5vw;
padding-bottom: 0.5vw;
text-align: left;
border-collapse: collapse;
}
td {
text-align: left;
vertical-align: top;
padding: 0.3vw;
border-collapse: collapse;
}
#left {
background: linear-gradient(to top right, #357987, #357987 49%, black 49%, black 51%, transparent 51%, transparent);
}
#right {
background: linear-gradient(to bottom right, #357987, #357987 49%, black 49%, black 51%, transparent 51%, transparent);
}
table {
width: 100% !important;
font-family: Arial, Helvetica, sans-serif;
vertical-align: middle;
border-spacing: 0;
border-collapse: collapse;
background-color: white;
color: white;
}
textarea {
font-family: Arial, Helvetica, sans-serif;
border: none;
width: 100%;
height: 100%;
background-color: transparent;
resize: none;
outline: none;
font-size: 2vw;
vertical-align: middle;
text-align: center;
padding: 0;
}
#routeTable td {
border: 0.2vw solid black;
font-size: 1.4vw;
text-align: center;
vertical-align: middle;
}
#routeTable th {
border: 0.2vw solid black;
font-size: 1.4vw;
text-align: center;
}
#routeTable tr {
border: 0.2vw solid black;
}
#routeTable table {
table-layout: fixed;
display: inline-block;
overflow-wrap: break-word;
max-width: 100%;
}
p {
display: block;
margin-block-start: 0.2vw;
margin-block-end: 0.2vw;
margin-inline-start: 0vw;
margin-inline-end: 0vw;
font-weight: bold;
padding-top: 0.5vh;
padding-bottom: 0.5vh;
color: black;
}
#toolbar {
display: flex;
justify-content: space-around;
background-color: #035869;
align-items: flex-start;
align-content: flex-start;
padding: 0.5vh 0;
}
#document_controls {
height: 30px;
padding: 0.5vh 0;
padding-left: 1vh;
}
#save,
#print,
#previous,
#next {
font-size: large;
font-family: Verdana;
background-color: #357987;
color: white;
text-align: center;
cursor: pointer;
height: 100%;
width: 15vw;
outline: none;
border: 2px solid white;
margin: 0 0.5vh;
}
#save:hover,
#print:hover,
#previous:hover,
#next:hover {
font-size: larger;
}
</style>
<body>
<div id="toolbar" class="noprint">
<div id="document_controls">
<button id="print" onclick="printPage()">Print</button>
</div>
</div>
<div id="Navlog" class="pagecontent" style="padding-bottom: 1cm;">
<section id="pageNavlog">
<table id="routeTable" style="margin-top: 1vw;">
<tbody>
<tr>
<td style="background-color: #035869; font-size: 2vw;" colspan="17">Navigationlog</td>
</tr>
</tbody>
</table>
<table id="routeTable" style="border: none; margin-top: -0.2vw;">
<tbody style="border: none;">
<tr>
<td style="background-color: #357987; width: 15%" colspan="3">Aircraft Registration:</td>
<td colspan="3"><textarea style="height: 1.5em; text-align: left; margin-left: 0.5vw; padding-top: 0.21em;"></textarea></td>
<td style="background-color: #357987; width: 15%" colspan="2">Date:</td>
<td colspan="3"><textarea style="height: 1.5em; text-align: left; margin-left: 0.5vw; padding-top: 0.21em;"></textarea></td>
<td style="background-color: #357987; width: 15%" colspan="3">Pilot in command:</td>
<td colspan="4"><textarea style="height: 1.5em; text-align: left; margin-left: 0.5vw; padding-top: 0.21em;"></textarea></td>
</tr>
</tbody>
</table>
</section>
</div>
</body>
<script>
var openNavlog = openPage('Navlog');
function openPage(page) {
// Declare all variables
var i, pagecontent;
// Get all elements with class="tabcontent" and hide them
pagecontent = document.getElementsByClassName("pagecontent");
for (i = 0; i < pagecontent.length; i++) {
pagecontent[i].style.display = "none";
}
// Show the current tab, and add an "active" class to the button that opened the tab
document.getElementById(page).style.display = "block";
}
function printPage() {
print('pageNavlog');
}
function print(section) {
var printWindow = window.open('', '', 'height=600,width=800');
printWindow.document.write('<html><head><title>Navigationlog</title>');
//Print the Table CSS.
var table_style = document.getElementById("table_style").innerHTML;
printWindow.document.write('<style type = "text/css">');
printWindow.document.write(table_style);
printWindow.document.write('</style>');
printWindow.document.write('</head>');
//Print the DIV contents i.e. the HTML Table.
printWindow.document.write('<body>');
var divContents = document.getElementById(section).innerHTML;
printWindow.document.write(divContents);
printWindow.document.write('</body>');
printWindow.document.write('</html>');
printWindow.print();
printWindow.close();;
}
</script>
</html>

Just giving a point, you are just selecting all innerHTML but not the values. So one of the easiest way is to just save the textarea values and assign it back while printing in a printWindow.
I just added the above words in programming sentence in the below code.
function print(section) {
var textArea1 = document.getElementById('1').value;
var textArea2 = document.getElementById('2').value;
var textArea3 = document.getElementById('3').value;
var printWindow = window.open('', '', 'height=600,width=800');
printWindow.document.write('<html><head><title>Navigationlog</title>');
//Print the Table CSS.
var table_style = document.getElementById("table_style").innerHTML;
printWindow.document.write('<style type = "text/css">');
printWindow.document.write(table_style);
printWindow.document.write('</style>');
printWindow.document.write('</head>');
//Print the DIV contents i.e. the HTML Table.
printWindow.document.write('<body>');
var divContents = document.getElementById(section).innerHTML;
printWindow.document.write(divContents);
printWindow.document.write('</body>');
printWindow.document.write('</html>');
printWindow.document.getElementById('1').value = textArea1;
printWindow.document.getElementById('2').value = textArea2;
printWindow.document.getElementById('3').value = textArea3;
printWindow.print();
printWindow.close();
}
I think it's not the best way. But it works very fine.

Related

How do I create a filter for content displayed using Javascript?

I'm building a film review site, where all of the content is generated on the main page from data input in the admin panel and placed into a container div.
I've got a basic sorting system (by ID, ascending/descending) already which works fine on my end, but I also want to be able to filter the films by genre (e.g if film is marked as Action on database, make all non-action films hidden.
This cannot be done by CSS alone as I'm not able to add classes to the content within the containers, the container for the film image is generated via JS.
I'm assuming I need to create a new function such as
function getFilmListByGenre(genreName)
Or something along those lines, but I don't know how I'd make it work.
Here is the current Javascript that I have, which creates the sort feature.
let db = new PouchDB('films');
let radios = document.getElementsByName("sort");
radios[0].addEventListener("change", getFilmList);
radios[1].addEventListener("change", getFilmList);
getFilmList();
function getFilmList(){
db.allDocs({include_docs: true, descending: radios[0].checked}).then(function(films){
let listContents = '';
for(let i = 0; i < films.total_rows; i++) {
let thisFilm = films.rows[i].doc;
let image = '<a class="btn" href="viewFilm.html?id=' + thisFilm._id +'"><img class="filmImage" src="' + thisFilm.image +'"></a>';
listContents += '<div class="filmRow">'+ image + '</div>';
}
document.getElementById('filmContainer').innerHTML = listContents;
})
}
I basically want to grab the value for genre (which can only be "Action", "Comedy", "Horror" or "Other") for each film from the database, then if the corresponding radio (named filter) is selected, all of the films which aren't labelled as that genre are hidden.
#import url(https://fonts.googleapis.com/css?family=Raleway);
body {
margin: 0;
font-family: 'Raleway', georgia, arial;
background-color: #e0e0e0;
text-align: center;
}
h1 {
color: #aaaaaa;
text-align: left;
}
.sortFilms {
text-align: left;
display: inline-block;
background-color: #ff6699;
width: 80%;
padding: 20px;
}
header {
text-align: center;
display: inline-block;
border-bottom: 5px;
border-top: 0;
border-left: 0;
border-right: 0;
border-style: solid;
border-color: #aaaaaa;
width: 80%;
padding: 20px;
background-color: #e0e0e0;
}
.newFilm {
text-align: left;
display: inline-block;
background-color: #ff6699;
width: 80%;
padding: 20px;
}
label {
font-size: 1em;
padding: 6px;
color: #fff;
font-weight: 700;
display: block;
text-align: left;
}
.form {
margin: auto;
display: flex;
text-align: center;
flex-direction: column;
}
h2 {
font-weight: 700;
font-size: 2em;
width: 50%;
color: #B2365F;
}
#formTitle {
margin-top: 0;
margin-bottom: 0;
}
.row {
margin-left: -20px;
display: grid;
grid-template-columns: 1fr 1fr;
}
.col {
padding: 20px;
}
input,
textarea, select {
width: 100%;
display: block;
border-radius: 25px;
background-color: #e0e0e0;
padding: 10px;
border: none;
box-sizing:border-box; }
}
.tagline {
margin: 0;
color: #333333;
font-size: 1em;
font-weight: 700;
}
input::placeholder {
color: #000;
}
textarea::placeholder {
color: #000;
}
#modifyFilmButton {
float: right;
}
#media only screen and (max-width: 700px) {
.row {
grid-template-columns: 1fr;
}
}
#media screen and (max-width:800px) {
table {
border: 0;
}
table caption {
font-size: 1.3em;
}
table thead {
border: none;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
table tr {
border: 2px solid #e0e0e0;
background-color: #e0e0e0;
display: block;
margin-bottom: .625em;
border-radius: 20px;
}
table td {
display: block;
font-weight: bold;
font-size: 1.2em;
text-align: left;
padding: 15px;
}
table td::before {
/*
* aria-label has no advantage, it won't be read inside a table
content: attr(aria-label);
*/
content: attr(data-label);
float: left;
font-weight: bold;
text-transform: uppercase;
}
table td:last-child {
border-bottom: 0;
}
}
.oldFilm {
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
text-align: left;
display: inline-block;
background-color: #AAAAAA;
width: 80%;
padding: 20px;
}
#oldTitle {
margin-top: 0;
margin-bottom: 0;
color: #ff6699;
padding-bottom: 20px;
}
td {
padding: 5px;
font-weight: bold;
}
table {
border-collapse: collapse;
text-align: center;
width: 100%;
}
thead {
background: #ff6699;
}
.reviewImage {
width: 200px;
border-radius: 20px;
}
.filmRow img {
width: 300px;
height: 420px;
margin: 10px;
border-radius: 20px;
}
.filmRow {
-webkit-flex-flow: row wrap;
justify-content: space-around;
}
#filmContainer {
width: 100%;
margin-top: 10px;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-around;
}
#date {
padding: 5px;
text-align: left;
width: 30%;
}
#date input {
width: auto;
}
#date label {
display: -webkit-inline-box;
}
#oldTitle2 {
margin-top: 0;
margin-bottom: 0;
color: #ff6699;
}
.genre {
padding: 5px;
text-align: left;
width: 60%;
}
.genre input {
width:auto;
}
.genre label {
display: -webkit-inline-box;
}
<div class="sortFilms">
<h2 id="formTitle">Latest reviews</h2>
<div id='filmContainer'></div>
</div>
<div class="oldFilm">
<h2 id="oldTitle2">Sort by</h2>
<div id="date">
<p><b>Age of review</b></p>
<label>Newer<input type="radio" name="sort" checked/></label>
<label>Older<input type="radio" name="sort"/></label>
</div>
<div class="genre">
<p><b>Genre</b></p>
<label>Action<input type="radio" name="filter"/></label>
<label>Comedy<input type="radio" name="filter"/></label>
<label>Horror<input type="radio" name="filter"/></label>
<label>Other<input type="radio" name="filter"/></label>
</div>
</div>

You should seperate your display logic and your fetching logic, then you can just filter out the results that aren't the genre you wanted. I would do it something like this:
var db = {
allDocs: () => {
return new Promise((resolve) => resolve([{genre: 'Horror', title: 'The Hills Have Eyes'}, {genre: 'Comedy', title: 'Dumb and Dumber'}]))
}
}
function getFilmList() {
return db.allDocs();
}
function getFilmsByGenre(genre) {
return getFilmList().then(films => films.filter(film => film.genre === genre));
}
function displayFilms(films) {
let listContents = '';
for(let i = 0; i < films.length; i++) {
let thisFilm = films[i].title;
listContents += '<div class="filmRow">'+ thisFilm + '</div>';
}
document.getElementById('filmContainer').innerHTML = listContents;
}
document.getElementById('all').addEventListener('click', () => {
getFilmList().then(displayFilms)
})
document.querySelectorAll('[name="filter"]').forEach(radio => radio.addEventListener('change', (event) => {
getFilmsByGenre(event.target.parentNode.textContent).then(displayFilms)
}))
<div id="filmContainer"></div>
<button id="all">All</button>
<label>Action<input type="radio" name="filter"/></label>
<label>Comedy<input type="radio" name="filter"/></label>
<label>Horror<input type="radio" name="filter"/></label>
<label>Other<input type="radio" name="filter"/></label>

Images not showing up on PDF created from HTML

I want to create PDF dynamically. That means I am taking files from Google Drive and then putting them in a HTML code and trying to create PDF out of it.
Everything is working fine , except images are not showing up.
What I am doing right now is :
Create HtmlOutput from HTML string.
Getting blob of that HTML.
Then that blob getAs PDF
Then finally saving that PDF in drive.
I thought maybe it need some time to render images so I have added sleep.
Alternative suggestions/solutions/code is also welcomed.
Here is the code I am using :
function htmlToPDF() {
var file1="0BweO_SXcQGqgcEV3Mk9QYVRMczQ";
var file2="0BweO_SXcQGqgVU93ZU56WkRkN3c";
var file3="0BweO_SXcQGqgMkIxTlhKajk5MFk";
var html = "<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'> <html xmlns='http://www.w3.org/1999/xhtml'> <head> <meta http-equiv='Content-Type' content='text/html; charset=utf-8' /> <title>High Return Real Estate</title> <style> #charset 'utf-8'; /* CSS Document */ body,html{ font-family: 'Lato', sans-serif; background:#dfe7ea; margin-top: 0; margin-bottom:0; } .main_wrapper { width: 930px; margin: 0 auto; background: #fff; padding: 0 23px 0 23px; box-shadow: 1px 1px 8px -1px #bbbbbb; } .top_header { background: #dfe9e9; display: inline-block; width: 100%; margin-bottom: 6px; } .left_top { display: inline-block; width: 70%; padding: 26px 0 26px 50px; float: left; } p.contact_person.right_person { border-right: 0; padding-left: 25px; display: inline-block; } p.contact_person { width: 214px; display: inline-block; text-align: left; border-right: 1px solid #ccd4d3; } .left_top p span { font-size: 13px; color: #000; display: inline-block; width: 100%; margin-top: 2px; } .left_top p { font-size: 20px; font-weight: bold; color: #ea9a5a; margin: 0; } .right_top img { border-top: 7px solid #496bb3; border-bottom: 7px solid #496bb3; padding: 16px 5px 13px 4px; } .right_top { display: inline-block; position: absolute; background: #fff; } .galleryimage_main img { width: 100%; display: inline-block; } .property_address { } .property_address p { font-size: 15px; text-transform: uppercase; color: #fff; margin-bottom: 0; margin-top: 4px; } .common_box_style { padding: 20px; background: #496bb3; text-transform: uppercase; } .common_box_style h2 { margin-top: 2px; color: #54bb73; font-size: 20px; } .property_information { margin-left: 6px; } .property_information ul li p { font-size: 15px; color: #fff; text-transform: capitalize; margin-bottom: 3px; margin-top: 0; } .property_information ul li { list-style: none; margin-bottom: 5px; } .property_information ul li span { font-size: 15px; color: #fff; text-transform: capitalize; margin-bottom: 3px; margin-top: 0; width: 100px; display: inline-block; text-align: left; } .property_information ul { padding-left: 0; width: auto; display: inline-block; float: left; margin-right: 15px; margin-top: 0; margin-bottom: 4px; } .property_information ul li span.value_field { font-size: 13px; } ul.grpleft li span { width: 136px; } p.cash_prize { text-align: center; font-size: 18px; font-weight: bold; color: #fff; display: inline-block; width: 100%; margin: 0; } p.cash_prize span { padding-left: 10px; } .margintop{ margin-top: 6px; } .left_col { width: 34%; float: left; } .right_col { display: inline-block; width: 66%; } .gallery_small_images { display: inline-block; width: 99%; margin-left: 6px; margin-top: 6px; height: 232px; overflow: hidden; } .gallery_small_images img{ width:100%; } .gallery_small_image2 { width: 50%; float: left; } .gallery_small_image3 { width: 49%; display: inline-block; float: left; margin-left: 6px; } table.expense_info tr td.exp_info_disc { font-size: 14px; color: #fff; text-transform: capitalize; text-align: left; } tr.total_exp td { padding-top: 13px; padding-bottom: 30px; } .cashflow h2 { margin-bottom: 7px; } .roi input[type='text'] { font-size: 23px; text-align: center; font-weight: bold; height: 33px; margin-bottom: 5px; } .roi h2 { margin-top: 24px; font-size: 22px; font-weight: 800; } tr.total_exp { font-weight: bold; margin-top: 4px; /* display: table; */ width: 100%; } table.expense_info th { font-size: 12px; font-weight: bold; color: #fff; text-transform: capitalize; } td { font-size: 13px; color: #fff; text-align: center; vertical-align: middle; } .expense_info.common_box_style.margintop { padding: 20px 13px; } table.cashflow { text-align: center; margin: 0 auto; color: #fff; text-transform: capitalize; } table.cashflow tr th { font-size: 19px; font-weight: normal; } table.cashflow tr td { font-size: 17px; font-weight: bold; } .roi { display: inline-block; background: #2bb673; width: 99%; text-align: center; color: #000; padding: 10px 0px 20px 0; margin-left: 6px; margin-top: 6px; } .discliamer_sec { background: #dfe9e9; display: inline-block; text-align: center; font-size: 9px; width: 100%; padding: 10px 0; line-height: 18px; margin-top: 6px; } .discliamer_sec h2 { color: #768293; } .footer_cright { background: #496bb3; text-align: center; font-size: 8px; color: #fff; padding: 1px 0; font-weight: 400; margin-top: 7px; display: inline-block; width: 100%; } #media print { .common_box_style, .roi, .discliamer_sec, .footer_cright, .top_header { background: !important; -webkit-print-color-adjust: exact; } } </style> <link href='https://fonts.googleapis.com/css?family=Lato:400,700' rel='stylesheet'> </head> <body> <div class='main_wrapper'> <div class='top_header'> <div class='left_top'><p class='contact_person'>Xyz xyz<span>xyz#xyz.com</span></p><p class='contact_person right_person'>Xyz xyz<span>xyz#xyz.com</span></p></div> <div class='right_top'>";
html +="<img src='images/logo.png' /></div> </div> <div class='galleryimage_main'> <img src='https://drive.google.com/uc?export=view&id="+file1+"' alt='Gallery Image Here' height='350' width='885'/> </div> <div class='left_col'> <div class='property_address common_box_style margintop'> <h2>PROPERTY ADDRESS</h2> <p id='address_line_1' class='address_line_1'>4043 N RAVENSWOOD AVE,</p> <p id='address_line_2' class='address_line_2'>CSUITE 316, HICAGO,</p> </div> <div class='expense_info common_box_style margintop'> <h2>EXPENSE INFORMATION</h2> <table id='expense_information' class='expense_info' cellpadding='3' cellspacing='1'> <tr> <th></th> <th>%of Rent</th> <th>Monthly</th> <th>Yearly</th> </tr> <tr> <td class='exp_info_disc'>Estimated Taxes:</td> <td>-</td> <td>345</td> <td>777</td> </tr> <td class='exp_info_disc'>Estimated Insurance:</td> <td>-</td> <td>200</td> <td>133</td> </tr> <tr> <td class='exp_info_disc'>Management Fee:</td> <td>4</td> <td>344</td> <td>5200</td> </tr> <tr> <td class='exp_info_disc'>Vacancy Adjustment:</td> <td>2</td> <td>555</td> <td>50</td> </tr> <tr> <td class='exp_info_disc'>Repairs & Maintenance: </td> <td>10</td> <td>500</td> <td>50</td> </tr> <tr> </tr> <tr> </tr> <tr> </tr> <tr is='total_exp' class='total_exp'> <td class='exp_info_disc'>TOTAL EXPENSES:</td> <td></td> <td>343</td> <td>342</td> </tr> <tr> </tr><tr> </tr><tr> </tr> </table> </div> <div class='cashflow common_box_style margintop'> <h2>CASH FLOW ESTIMATE</h2> <table id='cashflow' class='cashflow' cellpadding='3' cellspacing='5'> <tr> <th>Per Month</th> <th>Per Year</th> </tr> <tr> <td>123</td> <td>4533</td> </tr> </table> </div> </div> <div class='right_col'> <div id='property_information' class='property_information common_box_style margintop'> <h2>PROPERTY Information</h2> <ul> <li><span>List Price:</span><span class='value_field'>100</span></p></li> <li><span>Rehab Costs:</span><span class='value_field'>100</span></p></li> <li><span>Structure:</span><span class='value_field'>Single Family</span></li> <li><span>Current Rent:</span><span class='value_field'>29</span></li> </ul> <ul class='grpleft'> <li><span>Bedrooms:</span><span class='value_field'>100</span></li> <li><span>Bathrooms:</span><span class='value_field'>100</span></p></li> <li><span>Square Footage:</span><span class='value_field'>100</span></p></li> <li><span> Current Status:</span><span class='value_field'>Rented and Performing </span></li> </ul> <p class='cash_prize'>CASH PRICE<span>300</span></p> </div> <div class='gallery_small_images'> <div class='gallery_small_image2'> <img src='https://drive.google.com/uc?export=view&id="+file2+"' /> </div> <div class='gallery_small_image3'> <img src='https://drive.google.com/uc?export=view&id="+file3+"' /> </div></div> <div class='roi' id='cash_on_cash'> <h2>CASH-ON-CASH ROI</h2> <input type='text' value='1200' id='cash_roi_input'></input> </div> </div> <div class='discliamer_sec'> <h2>Information deemed reliabale but not guranteed. Images not to scale. Buyer responsible for <br>due diligence for all information provided and should conduct their own research.</h2> </div> <div class='footer_cright'> <h2>Copyright © High Return Real Estate LLC - 2017</h2> </div> </div> </body> </html>";
var blob = HtmlService.createHtmlOutput(html);
//Utilities.newBlob(html, "text/html", "text.html");
Utilities.sleep(30000);
blob = blob.getBlob();
var pdf = blob.getAs("application/pdf");
Utilities.sleep(30000);
DriveApp.createFile(pdf).setName("text.pdf");
}

You can download the image file using URLfetchApp and convert it into a base64 data string and create a page with that. The remaining procedure is same as previous
function htmlToPDF() {
var file = []
file[0]="0BweO_SXcQGqgcEV3Mk9QYVRMczQ"
file[1]="0BweO_SXcQGqgVU93ZU56WkRkN3c"
file[2]="0BweO_SXcQGqgMkIxTlhKajk5MFk"
var url = "https://drive.google.com/uc?export=view&id="
var img = UrlFetchApp.fetch(url+file[0])
file[0] = img.getBlob().getContentType()+';base64,'+ Utilities.base64Encode(img.getBlob().getBytes())
var img = UrlFetchApp.fetch(url+file[1])
file[1] = img.getBlob().getContentType()+';base64,'+ Utilities.base64Encode(img.getBlob().getBytes())
var img = UrlFetchApp.fetch(url+file[2])
file[2] = img.getBlob().getContentType()+';base64,'+ Utilities.base64Encode(img.getBlob().getBytes())
var html = "<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'> <html xmlns='http://www.w3.org/1999/xhtml'> <head> <meta http-equiv='Content-Type' content='text/html; charset=utf-8' /> <title>High Return Real Estate</title> <style> #charset 'utf-8'; /* CSS Document */ body,html{ font-family: 'Lato', sans-serif; background:#dfe7ea; margin-top: 0; margin-bottom:0; } .main_wrapper { width: 930px; margin: 0 auto; background: #fff; padding: 0 23px 0 23px; box-shadow: 1px 1px 8px -1px #bbbbbb; } .top_header { background: #dfe9e9; display: inline-block; width: 100%; margin-bottom: 6px; } .left_top { display: inline-block; width: 70%; padding: 26px 0 26px 50px; float: left; } p.contact_person.right_person { border-right: 0; padding-left: 25px; display: inline-block; } p.contact_person { width: 214px; display: inline-block; text-align: left; border-right: 1px solid #ccd4d3; } .left_top p span { font-size: 13px; color: #000; display: inline-block; width: 100%; margin-top: 2px; } .left_top p { font-size: 20px; font-weight: bold; color: #ea9a5a; margin: 0; } .right_top img { border-top: 7px solid #496bb3; border-bottom: 7px solid #496bb3; padding: 16px 5px 13px 4px; } .right_top { display: inline-block; position: absolute; background: #fff; } .galleryimage_main img { width: 100%; display: inline-block; } .property_address { } .property_address p { font-size: 15px; text-transform: uppercase; color: #fff; margin-bottom: 0; margin-top: 4px; } .common_box_style { padding: 20px; background: #496bb3; text-transform: uppercase; } .common_box_style h2 { margin-top: 2px; color: #54bb73; font-size: 20px; } .property_information { margin-left: 6px; } .property_information ul li p { font-size: 15px; color: #fff; text-transform: capitalize; margin-bottom: 3px; margin-top: 0; } .property_information ul li { list-style: none; margin-bottom: 5px; } .property_information ul li span { font-size: 15px; color: #fff; text-transform: capitalize; margin-bottom: 3px; margin-top: 0; width: 100px; display: inline-block; text-align: left; } .property_information ul { padding-left: 0; width: auto; display: inline-block; float: left; margin-right: 15px; margin-top: 0; margin-bottom: 4px; } .property_information ul li span.value_field { font-size: 13px; } ul.grpleft li span { width: 136px; } p.cash_prize { text-align: center; font-size: 18px; font-weight: bold; color: #fff; display: inline-block; width: 100%; margin: 0; } p.cash_prize span { padding-left: 10px; } .margintop{ margin-top: 6px; } .left_col { width: 34%; float: left; } .right_col { display: inline-block; width: 66%; } .gallery_small_images { display: inline-block; width: 99%; margin-left: 6px; margin-top: 6px; height: 232px; overflow: hidden; } .gallery_small_images img{ width:100%; } .gallery_small_image2 { width: 50%; float: left; } .gallery_small_image3 { width: 49%; display: inline-block; float: left; margin-left: 6px; } table.expense_info tr td.exp_info_disc { font-size: 14px; color: #fff; text-transform: capitalize; text-align: left; } tr.total_exp td { padding-top: 13px; padding-bottom: 30px; } .cashflow h2 { margin-bottom: 7px; } .roi input[type='text'] { font-size: 23px; text-align: center; font-weight: bold; height: 33px; margin-bottom: 5px; } .roi h2 { margin-top: 24px; font-size: 22px; font-weight: 800; } tr.total_exp { font-weight: bold; margin-top: 4px; /* display: table; */ width: 100%; } table.expense_info th { font-size: 12px; font-weight: bold; color: #fff; text-transform: capitalize; } td { font-size: 13px; color: #fff; text-align: center; vertical-align: middle; } .expense_info.common_box_style.margintop { padding: 20px 13px; } table.cashflow { text-align: center; margin: 0 auto; color: #fff; text-transform: capitalize; } table.cashflow tr th { font-size: 19px; font-weight: normal; } table.cashflow tr td { font-size: 17px; font-weight: bold; } .roi { display: inline-block; background: #2bb673; width: 99%; text-align: center; color: #000; padding: 10px 0px 20px 0; margin-left: 6px; margin-top: 6px; } .discliamer_sec { background: #dfe9e9; display: inline-block; text-align: center; font-size: 9px; width: 100%; padding: 10px 0; line-height: 18px; margin-top: 6px; } .discliamer_sec h2 { color: #768293; } .footer_cright { background: #496bb3; text-align: center; font-size: 8px; color: #fff; padding: 1px 0; font-weight: 400; margin-top: 7px; display: inline-block; width: 100%; } #media print { .common_box_style, .roi, .discliamer_sec, .footer_cright, .top_header { background: !important; -webkit-print-color-adjust: exact; } } </style> <link href='https://fonts.googleapis.com/css?family=Lato:400,700' rel='stylesheet'> </head> <body> <div class='main_wrapper'> <div class='top_header'> <div class='left_top'><p class='contact_person'>Xyz xyz<span>xyz#xyz.com</span></p><p class='contact_person right_person'>Xyz xyz<span>xyz#xyz.com</span></p></div> <div class='right_top'>";
html +="<img src='images/logo.png' /></div> </div> <div class='galleryimage_main'> <img src='data:"+file[0]+"' alt='Gallery Image Here' height='350' width='885'/> </div> <div class='left_col'> <div class='property_address common_box_style margintop'> <h2>PROPERTY ADDRESS</h2> <p id='address_line_1' class='address_line_1'>4043 N RAVENSWOOD AVE,</p> <p id='address_line_2' class='address_line_2'>CSUITE 316, HICAGO,</p> </div> <div class='expense_info common_box_style margintop'> <h2>EXPENSE INFORMATION</h2> <table id='expense_information' class='expense_info' cellpadding='3' cellspacing='1'> <tr> <th></th> <th>%of Rent</th> <th>Monthly</th> <th>Yearly</th> </tr> <tr> <td class='exp_info_disc'>Estimated Taxes:</td> <td>-</td> <td>345</td> <td>777</td> </tr> <td class='exp_info_disc'>Estimated Insurance:</td> <td>-</td> <td>200</td> <td>133</td> </tr> <tr> <td class='exp_info_disc'>Management Fee:</td> <td>4</td> <td>344</td> <td>5200</td> </tr> <tr> <td class='exp_info_disc'>Vacancy Adjustment:</td> <td>2</td> <td>555</td> <td>50</td> </tr> <tr> <td class='exp_info_disc'>Repairs & Maintenance: </td> <td>10</td> <td>500</td> <td>50</td> </tr> <tr> </tr> <tr> </tr> <tr> </tr> <tr is='total_exp' class='total_exp'> <td class='exp_info_disc'>TOTAL EXPENSES:</td> <td></td> <td>343</td> <td>342</td> </tr> <tr> </tr><tr> </tr><tr> </tr> </table> </div> <div class='cashflow common_box_style margintop'> <h2>CASH FLOW ESTIMATE</h2> <table id='cashflow' class='cashflow' cellpadding='3' cellspacing='5'> <tr> <th>Per Month</th> <th>Per Year</th> </tr> <tr> <td>123</td> <td>4533</td> </tr> </table> </div> </div> <div class='right_col'> <div id='property_information' class='property_information common_box_style margintop'> <h2>PROPERTY Information</h2> <ul> <li><span>List Price:</span><span class='value_field'>100</span></p></li> <li><span>Rehab Costs:</span><span class='value_field'>100</span></p></li> <li><span>Structure:</span><span class='value_field'>Single Family</span></li> <li><span>Current Rent:</span><span class='value_field'>29</span></li> </ul> <ul class='grpleft'> <li><span>Bedrooms:</span><span class='value_field'>100</span></li> <li><span>Bathrooms:</span><span class='value_field'>100</span></p></li> <li><span>Square Footage:</span><span class='value_field'>100</span></p></li> <li><span> Current Status:</span><span class='value_field'>Rented and Performing </span></li> </ul> <p class='cash_prize'>CASH PRICE<span>300</span></p> </div> <div class='gallery_small_images'> <div class='gallery_small_image2'> <img src='data:"+file[1]+"' /> </div> <div class='gallery_small_image3'> <img src='data:"+file[2]+"' /> </div></div> <div class='roi' id='cash_on_cash'> <h2>CASH-ON-CASH ROI</h2> <input type='text' value='1200' id='cash_roi_input'></input> </div> </div> <div class='discliamer_sec'> <h2>Information deemed reliabale but not guranteed. Images not to scale. Buyer responsible for <br>due diligence for all information provided and should conduct their own research.</h2> </div> <div class='footer_cright'> <h2>Copyright © High Return Real Estate LLC - 2017</h2> </div> </div> </body> </html>";
var blob = HtmlService.createHtmlOutput(html);
//Utilities.newBlob(html, "text/html", "text.html");
blob = blob.getBlob();
var pdf = blob.getAs("application/pdf");
DriveApp.createFile(pdf).setName("text.pdf");
}

/**
* This function retrieve the html body.
* Using regex searches all the images src attribute and create array of image URLs
* Iterate over imageURL & retrieve image blob from URLFetchApp and convert it into base64
* Then replaces the imageURL with base64 with proper formatting
* Then convert the htmlText to PDF and save it in folder
* #param {string} messageID
* #param {string} folderID
* #param {string} fileURL
*/
function convertMailBodyToPDF(messageID, folderID) {
const mail = GmailApp.getMessageById(messageID);
let htmlText = mail.getBody();
const images = getAllImageTags(htmlText);
images.forEach(image => {
const res = UrlFetchApp.fetch(image);
const imgbase64 = "data:" + res.getBlob().getContentType() + ';base64,' + Utilities.base64Encode(res.getBlob().getBytes());
htmlText = replaceAll(htmlText, image, imgbase64);
});
const blob = htmlToPDF(htmlText);
const file = DriveApp.getFolderById(folderID).createFile(blob).setName("testimage.pdf");
console.log(file.getUrl());
return file.getUrl();
}
/**
* This converts html to pdf blob
* #param {string} text
* #param {Blob} blob
*/
function htmlToPDF(text) {
const html = HtmlService.createHtmlOutput(text);
const blob = html.getBlob();
return blob.getAs("application/pdf");
}
/**
* Retrieve all image src
* #param {string} str
* #return {Array} imageURL
*/
function getAllImageTags(str) {
let words = [];
str.replace(/<img[^>]+src="([^">]+)"/g, function ($0, $1) { words.push($1) });
return words;
}
const escapeRegExp = (string) => string.replace(/[.*+\-?^${}()|[\]\\]/g, '\\$&'); // $& means the whole matched string
const replaceAll = (str, find, replace) => str.replace(new RegExp(escapeRegExp(find), 'g'), replace);

You saved me with this:
> const images = getAllImageTags(htmlText); images.forEach(image => {
> const res = UrlFetchApp.fetch(image);
> const imgbase64 = "data:" + res.getBlob().getContentType() + ';base64,' + Utilities.base64Encode(res.getBlob().getBytes());
> htmlText = replaceAll(htmlText, image, imgbase64); });
I just edited it:
htmlText = htmlText.replace(image, imgbase64);
I needed to Compile a Google Doc Template that I have in DRIVE which is a letterhead with a Header and a Footer which are images and as body there are Placeholders, ex. {{name}} {{surname}}; finally upload to DRIVE as a PDF.
So the steps were:
from DOC to HTML
from HTML to BLOB
from BLOB to PDF
Everything worked correctly, but in the conversion to PDF I was missing the images... which had to be replaced by the same images but converted to Base64 ... and your procedure works great!
Thanks!!!!!!

How to reset JavaScript random number generator

I’ve started my first own JS project.
In the end, I would like to have my own slotmachine.
By now, I’ve the problem, that I don’t know how to restart my program or just the function for generating again and again the new random values.
This is my code until now:
var randomX1 = Math.ceil(Math.random() * 10 );
var randomX2 = Math.ceil(Math.random() * 10 );
var randomX3 = Math.ceil(Math.random() * 10 );
function randomClickX() {
document.getElementById("randomX1").innerHTML = randomX1;
document.getElementById("randomX2").innerHTML = randomX2;
document.getElementById("randomX3").innerHTML = randomX3;
var ausgabe = "Play again";
if (randomX1 === randomX2) {
if(randomX2 === randomX3) {
var ausgabe = "Jackpot";
}
}
var chance = ausgabe;
function clickChance() {
document.getElementById("chance").innerHTML = chance;
}
document.getElementById('spanId').innerHTML = chance;
};
.slot-container {
border: 5px solid red;
vertical-align: middle;
font-size: 50px;
font-family: Leelawadee UI Semilight, Calibri, Arial;
width: 90%;
margin: auto;
height: 0;
padding-bottom: 30%;
}
.slot {
border: 3px solid green;
height: 0;
padding-bottom: 30%;
width: 32%;
margin-right: 1%;
margin-top: 1%;
margin-bottom: 1%;
float: left;
box-sizing: border-box;
}
#slot1 {
margin-left: 1%;
}
h1 {
color: #FC3FD3;
text-align: center;
font-family: Century Gothic;
font-size: 5em;
height: 50px;
}
p {
text-align: center;
vertical-align: middle;
justify-content: center;
}
button {
position: relative;
font-size:20px;
display: block;
background-color: white;
color: black;
border: 2px solid green;
width: 90%;
position: middle;
margin-left: auto;
margin-right: auto;
margin-top: 10px;
margin-bottom: 10px;
}
button:hover {
background-color: green;
}
button.spin-button {
color: blue;
position: absolute;
height: 20%;
}
.answer {
font-family: Century Gothic;
font-size: 20px;
color: red;
text-align: center;
margin-top: 10px;
}
ul.menubar {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #008000;
}
ul.menubar li {
float: left;
}
ul.menubar li a {
color: black;
display: inline-block;
text-align: center;
padding:15px 20px;
text-decoration: none;
transition: 0.3s;
font-family: Century Gothic;
}
ul.menubar li a:hover {
background-color: #00A300;
}
<!DOCTYPE HTML>
<html>
<head>
<title>Slotmachine</title>
<script type="text/javascript" src="#.js"></script>
<link type="text/css" rel="stylesheet" href="#.css" />
</head>
<body>
<ul class="menubar" id=topmenubar>
<li>Home</li> <!-- bedeutet '#' gleicher Link + Ergänzung?-->
<li>Contact</a></li>
<li>About</li>
</ul>
<h1>1-10</h1>
<button type="button" id="spin-button" class="button" onClick="randomClickX()">SPIN</button>
<div class="slot-container">
<div id="slot1" class="slot">
<p> <!-- Your random number: --> <a id="randomX1">0</a></p>
</div>
<div id="slot2" class="slot">
<p> <!-- Your random number: --> <a id="randomX2">0</a></p>
</div>
<div id="slot3" class="slot">
<p> <!-- Your random number: --> <a id="randomX3">0</a></p>
</div>
</div>
</div>
<div class="answer" id="spanId">Test #1<a id="spanId"> </div>
</body>
</html>
As you see, I've to reload the HTML file to click the SPIN-button again to have new randoms.
I think the point is to create a big comprehensive function and call it when the SPIN function ends. But I don't now how to do that ...
What is the missing step, to have as many values as the user wishs to have?
Thanks, Jonas

Simply move the random numbers being generated into the click method.
function randomClickX() {
var randomX1 = Math.ceil(Math.random() * 10 );
var randomX2 = Math.ceil(Math.random() * 10 );
var randomX3 = Math.ceil(Math.random() * 10 );
document.getElementById("randomX1").innerHTML = randomX1;
document.getElementById("randomX2").innerHTML = randomX2;
document.getElementById("randomX3").innerHTML = randomX3;
var ausgabe = "Play again";
if (randomX1 === randomX2) {
if(randomX2 === randomX3) {
var ausgabe = "Jackpot";
}
}
var chance = ausgabe;
function clickChance() {
document.getElementById("chance").innerHTML = chance;
}
document.getElementById('spanId').innerHTML = chance;
};
.slot-container {
border: 5px solid red;
vertical-align: middle;
font-size: 50px;
font-family: Leelawadee UI Semilight, Calibri, Arial;
width: 90%;
margin: auto;
height: 0;
padding-bottom: 30%;
}
.slot {
border: 3px solid green;
height: 0;
padding-bottom: 30%;
width: 32%;
margin-right: 1%;
margin-top: 1%;
margin-bottom: 1%;
float: left;
box-sizing: border-box;
}
#slot1 {
margin-left: 1%;
}
h1 {
color: #FC3FD3;
text-align: center;
font-family: Century Gothic;
font-size: 5em;
height: 50px;
}
p {
text-align: center;
vertical-align: middle;
justify-content: center;
}
button {
position: relative;
font-size:20px;
display: block;
background-color: white;
color: black;
border: 2px solid green;
width: 90%;
position: middle;
margin-left: auto;
margin-right: auto;
margin-top: 10px;
margin-bottom: 10px;
}
button:hover {
background-color: green;
}
button.spin-button {
color: blue;
position: absolute;
height: 20%;
}
.answer {
font-family: Century Gothic;
font-size: 20px;
color: red;
text-align: center;
margin-top: 10px;
}
ul.menubar {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #008000;
}
ul.menubar li {
float: left;
}
ul.menubar li a {
color: black;
display: inline-block;
text-align: center;
padding:15px 20px;
text-decoration: none;
transition: 0.3s;
font-family: Century Gothic;
}
ul.menubar li a:hover {
background-color: #00A300;
}
<!DOCTYPE HTML>
<html>
<head>
<title>Slotmachine</title>
<script type="text/javascript" src="#.js"></script>
<link type="text/css" rel="stylesheet" href="#.css" />
</head>
<body>
<ul class="menubar" id=topmenubar>
<li>Home</li> <!-- bedeutet '#' gleicher Link + Ergänzung?-->
<li>Contact</a></li>
<li>About</li>
</ul>
<h1>1-10</h1>
<button type="button" id="spin-button" class="button" onClick="randomClickX()">SPIN</button>
<div class="slot-container">
<div id="slot1" class="slot">
<p> <!-- Your random number: --> <a id="randomX1">0</a></p>
</div>
<div id="slot2" class="slot">
<p> <!-- Your random number: --> <a id="randomX2">0</a></p>
</div>
<div id="slot3" class="slot">
<p> <!-- Your random number: --> <a id="randomX3">0</a></p>
</div>
</div>
</div>
<div class="answer" id="spanId">Test #1<a id="spanId"> </div>
</body>
</html>

Trying to Create Homepage with Random Background Image Each Time it is Accessed. Using HTML and JavaScript. What am I doing wrong?

I'm trying to make an array of multiple background images and having the browser choose one at random to display.
I have attempted coding with some help but don't know where I'm going wrong.
Here is the code I am working with
<head>
<meta charset="utf-8">
<title>Christopher Tameji Foose</title>
<script src="chrisfoose.js">
var imgSrcArr = ["/background/000.jpg", "/background/001.jpg", "/background/003.jpg"]
window.onload = function() {
var randNum = Math.floor(Math.random() * 3);
console.log(randNum); document.getElementById("main").style.backgroundImage = "url('" + imgSrcArr[randNum] + "')";
}
</script>
<link rel="stylesheet" href="stylesheet.css">
;<script>
;</script>
A zip of my website is at https://www.sendspace.com/file/2la4he. Any feedback is appreciated.

You have a couple of issues here. First, document.getElementByTagName("div.main") is invalid since there is no function called "getElementByTagName" What you want is "getElementsByTagName" (notice the extra "s").
Second, your target div has an ID, so rather than looping through all the tags and selecting the one you want, just use getElementById() instead.
var imgSrcArr = ["/background/000.jpg", "/background/001.jpg", "/background/003.jpg"]
window.onload = function() {
var randNum = Math.floor(Math.random() * 3);
document.getElementById("main").style.backgroundImage = "url('" + imgSrcArr[randNum] + "')";
Here is a fiddle: http://jsfiddle.net/fvo6v0vL/

Your javascript has a syntax error. It's getElementsByTagName. You're missing the 's'.
Alternatively, I recommend you use getElementById, that way you only select the one main object:
var imgSrcArr = ["/background/000.jpg", "/background/001.jpg", "/background/003.jpg"]
window.onload = function() {
var randNum = Math.floor(Math.random() * 3);
document.getElementById("main").style.backgroundImage = "url('" + imgSrcArr[randNum] + "')"
}

You can run the snippet below to see the result:
var imgSrcArr = ["http://www.hdwallpapers.in/walls/running_horse-wide.jpg", "http://www.hdwallpapers.in/walls/colorful_background-wide.jpg", "http://www.hdwallpapers.in/walls/moonlight_cruise-wide.jpg"]
window.onload = function() {
var randNum = Math.floor(Math.random() * 3);
document.getElementById("main").style.backgroundImage = "url('" + imgSrcArr[randNum] + "')"
}
a {text-decoration: none;color: white}
.left {float: left;}
.right {float: right;}
.center {float: center;}
div.main {
margin: auto;
height: 500px;
width: 500px;
background-position: center;
backgroud-repeat: no-repeat border: 1px solid black;
}
body {background-color: black;}
#main {
width: 1000px;
margin: 0 auto;
}
#vid {
width: 1200px;
text-align: center;
}
#circle {position: fixed;z-index: 1;}
#buttonred {
width: 100px;
height: 100px;
border-radius: 100%;
background-color: red;
border-style: solid;
text-align: center;
}
#buttonblue {
width: 100px;
height: 100px;
border-radius: 100%;
background-color: blue;
border-style: solid;
text-align: center;
}
#buttongreen {
width: 100px;
height: 100px;
border-radius: 100%;
background-color: green;
border-style: solid;
text-align: center;
}
#buttonpink {
width: 100px;
height: 100px;
border-radius: 100%;
background-color: pink;
border-style: solid;
text-align: center;
}
#buttonorange {
width: 100px;
height: 100px;
border-radius: 100%;
background-color: orange;
border-style: solid;
text-align: center;
}
#buttonback {
witdth: 100px;
height 100px;
border-radius: 100%;
background-color: red;
border-style: solid;
text-align: center;
}
;
table.center {
background-color: white;
margin-left: auto;
margin-right: auto;
}
table.center {
width: 70%;
margin-left: 200px;
margin-top: 300px;
color: white;
}
p {
font-family: Arial, Terminal, Times New Roman;
margin-top: 30px;
font-color: white;
line-height: 100px;
margin: 0;
}
p.bio {
font-family: Terminal, Arial;
color: black;
}
td.bio {
background-color: white;
font-family: Courier, Terminal, Arial;
padding: 50px;
}
table.bio {
width: 70%;
margin-left: 300px;
margin-top: 150px;
}
table.video {
width: 85%;
margin-left: 150px;
margin-top: 200px;
}
table.graphics {
width: 85%;
margin-left: 50px;
margin-top: 150px;
background-color: black;
border: 1px border-color: white;
}
td.graphics {
border: 1px solid white;
align: center;
}
#videobanner {
width: 150px;
height: 50px;
background-color: grey;
text-align: center;
margin-top: 1px;
margin-bottom: 20px;
color: white;
}
p.video {
font-family: Arial;
font-size: large;
color: white;
text-align: center;
font-size: 18px;
margin-top: 5px;
}
<div id="main" class="main">
;
<table class="center" id="tablecenter">
<td>
<div id="buttonred">
<p>Who?
</p>
</div>
</td>
<td>
<div id="buttonblue">
<p>Resume / CV
</p>
</div>
</td>
<td>
<div id="buttongreen">
<p>Video
</p>
</div>
</td>
<td>
<div id="buttonpink">
<p>Graphics
</p>
</div>
</td>
<td>
<div id="buttonorange">
<p>Projects</p>
</div>
</td>
;</table>
</div>
I used getElementById instead and you can access the style object directly through it (no need to access the first position the array with [0] as w3schools explain).

I'm adding <li> via my submit button and it is pushing past my div. My js function can't fix it

So I'm trying to make the page continue to add the list items without breaking past the body element as shown.
I would like to keep the all the list items within the body and div like the first few. My best idea on how to go through this is by using if statement at the bottom of the JS to rerun autoResizeDiv. Thanks for any help!!
JS
$(function() {
var $newItemButton= $('#newItemButton');
var $newItemForm= $('#newItemForm');
var $textInput= $('input:text');
$newItemButton.show();
$newItemForm.hide();
$('#showForm').on('click', function() {
$newItemButton.hide();
$newItemForm.show();
});
$newItemForm.on('submit', function(e) {
e.preventDefault();
// this prevents the form from submitting which you need
var newText=$('input:text').val();
$('li:last').after('<li>'+ newText + '</li>');
$newItemForm.hide();
$newItemButton.show();
$textInput.val('')
// this empties the text box so you can add a new entry
});
function autoResizeDiv() {
document.getElementById('page').style.height = window.innerHeight +'px';
// document.getElementById('newItemButton').style.height = window.innerHeight +'px';
}
window.onresize = autoResizeDiv;
autoResizeDiv();
if(document.getElementById('addButton').clicked == true) {
autoResizeDiv();
}
})
CSS
#media screen and (max-width:700px) {
body {
background: #111;
background-size: 780px;
font-family: 'Dosis', sans-serif;
color: white;
display: block;
height:100%;
}
h1, h2, p {
text-align: center;
}
img {
max-width: 50px;
/* display: inline-block; */
/* margin: 4% 0 0% 165px;*/
padding: 10% 45% 0 44%;
/* vertical-align: middle;*/
/* position: absolute;*/
}
h1 {
margin: -1% 0 0 0;
font-size: .8rem;
letter-spacing: 1.2px;
}
h2 {
min-width: 70%;
letter-spacing: 8px;
text-transform: uppercase;
margin: 5% 0 4% 0%;
font-size: 1.4rem;
}
div {
margin: auto;
background: #222;
width: 360px;
}
#page {
/* padding: auto;*/
/* display: inline-block;*/
height: 465px;
}
ul {
list-style: none;
padding: 0;
margin: 5%;
}
li:nth-child(-n+3) {
background-color: #B80000;
}
li:nth-child(n+4) {
background-color: coral;
}
li {
margin: .3% -5.2% .3% -5.2%;
padding: 12px 0 1px 16px;
height: 35px;
font-size: 1.1rem;
/* width: 100%;*/
/*text-align: 30% 0 30% 30%*/
}
p {
color: #111;
background: #FFF;
border-radius: 1.5% / 10%;
font-size: .85rem;
margin: 0% 10%;
}
#newItemButton {
position: absolute;
background: #222;
}
#newItemForm {
display: -webkit-flex;
-webkit-flex-direction: row;
-webkit-justify-content: center;
-webkit-flex-wrap: wrap;
background: #222;
z-index: 10; position:relative
}
#itemDescription {
margin: 3.8px 10px 0 0;
width: 68%;
border: none;
border-radius: 2.5% / 18%;
/* padding: 10px 0 0 0;*/
font-size: 1rem;
text-align: left;
text-indent: 10px;
}
#addButton, #showForm {
background: #B80000;
border: none;
text-transform: uppercase;
font-weight: bold;
font-size: 1rem;
color: white;
letter-spacing: .9px;
text-align: center;
}
#addButton {
border-radius: 8% / 20%;
padding: 10px 22px;
margin: 3px 0px 0 0;
}
#showForm {
border-radius: 3% / 11%;
padding: 10px 22px;
margin: 3px 17px 0 0;
float: right;
}
HTML
<!DOCTYPE html>
<html lang="en">
<script src="jquery-1.11.2.min.js"></script>
<script src="jquery-1.11.2.js"></script>
<script src="myscript.js"></script>
<link href='http://fonts.googleapis.com/css?family=Dosis:300|Yanone+Kaffeesatz'
rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="main.css">
<head>
<title> JavaScript Foundations: Variables</title>
<style>
html {
background: #FAFAFA;
font-family: sans-serif;
}
</style>
</head>
<body id="body">
<div id="page">
<img src="lion.png" alt="there's supposed to be a lion">
<h1 id="header">LISTKING</h1>
<h2>Buy Groceries</h2>
<p>"Lions are awesome, fun to play with, and have to pee a lot"
-J.K. Growling</p>
<ul>
<li id="one" class="hot"><em>fresh</em> figs</li>
<li id="two" class="hot">pine nuts</li>
<li id="three" class="hot">honey</li>
<li id="four">balsamic vinegar</li>
</ul>
<div id="newItemButton"><button href="#" id="showForm">new item</button></div>
<form id="newItemForm">
<input type="text" id="itemDescription" placeholder="Add description..." />
<input type="submit" id="addButton" value="add" />
</form>
</div>
</body>
</html>

Please have a look at your CSS and adjust the #page div to have overflow, or remove the height entirely.
#page {
/* padding: auto;*/
/* display: inline-block;*/
height: 465px;
overflow: scroll;
}

try changing your body height:100% to min-height: 100%;
making ul overflow-y:scroll also solves the problem, but a scroll bar may disrupt your look and feel

We Keep Coding

JavaScript is the programming language of the Web.

window.print inclusive textarea values - javascript

Related

How do I create a filter for content displayed using Javascript?

Images not showing up on PDF created from HTML

How to reset JavaScript random number generator

Trying to Create Homepage with Random Background Image Each Time it is Accessed. Using HTML and JavaScript. What am I doing wrong?

I'm adding <li> via my submit button and it is pushing past my div. My js function can't fix it

Categories

Resources