My question is this, how can I save a div so I can send it to someone via email. If not possible how can I download not the entire page but only a div.I have created a small image on the left and words on the right inside a div. I want to use this to email to people on the click of a button or download this div on the click of a button. I placed a picture as an example of what div I want to send.
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#photo')
.attr('src', e.target.result)
.addClass("photo")
;
};
reader.readAsDataURL(input.files[0]);
}
}
var recipientVal = document.getElementById('recipientValue');
var senderVal = document.getElementById('senderValue')
var commentVal = document.getElementById('commentValue');
var recipient = document.getElementById('recipient');
var sender = document.getElementById('sender');
var comment = document.getElementById('comment');
function info(){
recipient.innerHTML = recipientVal.value;
sender.innerHTML = senderVal.value;
comment.innerHTML = commentVal.value;
} article, aside, figure, footer, header, hgroup,
menu, nav, section { display: block; }
#image-wrapper{
background-image:url(https://assets3.thrillist.com/v1/image/2279641/size/sk-2017_04_article_main_mobile.jpg);
background-position: 100% 100%;
background-repeat: no-repeat;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
#right-portion{
color: white;
}<!DOCTYPE html>
<html>
<head>
<link class="jsbin" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<meta charset=utf-8 />
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="main.css">
<title>JS Bin</title>
</head>
<body>
<input type='file' onchange="readURL(this);" />
<div class='col-xs-12 text-center mt-4 mb-4'>
Recipient name: <input id="recipientValue" type="text" name="recipient" value="" minlength="5">
Sender name: <input id="senderValue" type="text" name="sender" value="" minlength="5">
Background: <select name="background">
<option value="spring">Spring</option>
<option value="summer">Summer</option>
<option value="fall">Fall</option>
<option value="winter">Winter</option>
</select>
<br>
<textarea id='commentValue' class="text-center w-75 mt-4" id="subject" name="comment" value='' maxlength="255" placeholder="Write something.." style=""></textarea>
<br>
<input type="submit" onclick='info()' value="Submit">
</div>
<div id="image-wrapper" class="container-fluid">
<div class ="row">
<img id="photo" class="col-sm-6" src="#" alt="your image" />
<div id="right-portion" class="col-xl-6">
<h1 id="recipient"> Recipient name: </h1>
<p id="comment">I will never be this young again. Ever. Oh damn… I just got older. A glittering gem is not enough. The waves were crashing on the shore; it was a lovely sight. Christmas is coming. Rock music approaches at high velocity. Writing a list of random sentences is harder than I initially thought it would be. A purple pig and a green donkey flew a kite in the middle of the night and ended up sunburnt. A song can make or ruin a person’s day if they let it get to them. The lake is a long way from here. I was very proud of my nickname throughout high school but today- I couldn’t be any different to what my nickname was. I think I will buy the red car, or I will lease the blue one. When I was little I had a car door slammed shut on my hand. I still remember it quite vividly. Lets all be unique together until we realise we are all the same. We have never been to Asia, nor have we visited Africa. He ran out of money, so he had to stop playing poker.I will never be this young again. Ever. Oh damn… I just got older. A glittering gem is not enough. The waves were crashing on the shore; it was a lovely sight. I will never be this young again. Ever. Oh damn… I just got older. A glittering gem is not enough. The waves were crashing on the shore; it was a lovely sight. I will never be this young again. Ever. Oh damn… I just got older. A glittering gem is not enough. The waves were crashing on the shore; it was a lovely sight. </p>
<h2 id='sender'>From: your name</h2>
</div>
</div>
</div>
<script src="index.js"></script>
</body>
</html>
