I am currently creating a meme generator app where the user can submit an image, as well as top and bottom text. I want to make it so that after form submission, the text is added onto the image and styled using CSS. I have already tried adding a class to the elements and adding css to it but that does not work. Here is my code:
JS
let form = document.querySelector('#meme-form');
let img = document.querySelector('#img');
let topTxt = document.querySelector('#top-txt');
let bottomTxt = document.querySelector('#bottom-txt');
form.addEventListener('submit', function(e) {
e.preventDefault();
let memePic = document.createElement('img');
//create the divs for the memes
let newDiv = document.createElement('div');
form.appendChild(newDiv);
topTxt.classList.add('top')
bottomTxt.classList.add('bottom')
memePic.src = img.value;
newDiv.append(memePic, topTxt.value, bottomTxt.value);
//set the textbox inputs equal to nothing
img.value = '';
topTxt.value = '';
bottomTxt.value= '';
})
CSS
div {
width: 30%;
height: 300px;
margin: 10px;
display: inline-block;
}
img {
width: 100%;
height: 100%;
margin: 10px;
display: inline-block;
}
.top{
color: blue;
}
#bottom-txt {
color: red;
}
HTML
<body>
<form action="" id="meme-form">
<label for="image">img url here</label>
<input id="img" type="url"><br>
<label for="top-text">top text here</label>
<input id="top-txt" type="text"><br>
<label for="bottom-text">bottom text here</label>
<input id="bottom-txt" type="text"><br>
<input type="submit"><br>
</form>
<script src="meme.js"></script>
</body>
</html>
You just need to fix up some of logic how the elements are being appended after form is submitted.
For that you need to div after your form which will hold you results and then order your element to be displayed. I have also added a line hr to have separator between each results displayed.
You can style your element the way you would like them to be - i have added some basic CSS to show some styling and an actual img url for demo purpose only.
Live Working Demo:
let form = document.querySelector('#meme-form');
let img = document.querySelector('#img');
let topTxt = document.querySelector('#top-txt');
let bottomTxt = document.querySelector('#bottom-txt');
let results = document.querySelector('.meme-results');
form.addEventListener('submit', function(e) {
e.preventDefault();
let memePic = document.createElement('img');
var hrLine = document.createElement('hr');
//create the divs for the memes
let newDiv = document.createElement('div');
let topText = document.createElement('span');
let bttomText = document.createElement('span');
//Top text
topText.classList.add('top')
topText.textContent = topTxt.value
//Img
memePic.src = img.value;
results.appendChild(topText);
results.append(memePic);
//bottom text
bttomText.classList.add('bottom')
bttomText.textContent = bottomTxt.value
results.append(bttomText);
results.append(hrLine);
//set the textbox inputs equal to nothing
//img.value = '';
topTxt.value = '';
bottomTxt.value = '';
})
.meme-results {
width: 30%;
height: 300px;
margin: 10px;
display: block;
}
img {
width: 100%;
height: 100%;
display: block;
}
.top, #top-txt {
color: blue;
}
.bottom, #bottom-txt {
color: red;
}
<html>
<body>
<form action="" id="meme-form">
<label for="image">img url here</label>
<input id="img" type="url" value="https://via.placeholder.com/150"><br>
<label for="top-text">top text here</label>
<input id="top-txt" type="text"><br>
<label for="bottom-text">bottom text here</label>
<input id="bottom-txt" type="text"><br>
<input type="submit"><br>
</form>
<div class="meme-results"></div>
<script src="meme.js"></script>
</body>
</html>
Related
After entering value in the text box and pressing submit button, how to resize the textbox according to value inside. So the text center alignment displays properly(Using plain javascript or css).
<!DOCTYPE html>
<body>
<div class="block">
☀
<input type="text" id="inputValue" placeholder="Change City"></input>
<button type="submit" id="submit">Submit</button>
</div>
<style>
.block{
border: 2px solid;
width: 300px;
height: 50px;
display: flex;
justify-content: center;
align-items: center;
}
#inputValue{
border: none;
}
#submit{
display: none;
}
</style>
<script>
var inputValue = document.querySelector("#inputValue");
var submit = document.querySelector("#submit");
inputValue.addEventListener("click",function(){
submit.style.display = "block";
});
submit.addEventListener("click",function(){
submit.style.display = "none";
});
</script>
</body>
</html>
I will give a example to you. Ge the idea from here
<input class="txt" id="inputBox" type="text"><br>
<button onClick=test()>test</button>
function test(){
var getClass = document.querySelector( ".txt" );
var getValue = document.getElementById("inputBox").value.length
getClass.style.width = ((getValue + 1) * 8) + 'px';
}
As well as this is another way to do this , this will be better for you.
click here
function test(){
var getClass = document.querySelector( ".txt" );
var getValue = document.getElementById("inputBox").value.length
getClass.style.width = ((getValue + 1) * 8) + 'px';
}
<input class="txt" id="inputBox" type="text"><br>
<button onClick=test()>
test
</button>
The sun-icon is decorative and would therefore be suited to being in a CSS pseudo element rather than part of the main HTML.
It is not possible to add a pseudo before element to an input element, but we can give it a label and add the sun-icon in its before pseudo element.
label::before {
content: '\2600';
/* Unicode value for the HTML characer '☀';*/
}
We can also use this when the user clicks on submit. The text the user has input can become the label text - this will mean the user can select it if wanted, and can also click on it again to go back to edit it and submit (it is not clear from the question if this is what is required, but it seems logical to restore the input element on click).
let inputValue = document.querySelector("#inputValue");
let submit = document.querySelector("#submit");
let label = document.querySelector("#label");
inputValue.addEventListener("click", function() {
submit.style.display = "block";
inputValue.style.display = "inline-block";
label.innerHTML = '';
});
submit.addEventListener("click", function() {
submit.style.display = "none";
label.innerHTML = inputValue.value;
inputValue.style.display = 'none';
});
.block {
border: 2px solid;
width: 300px;
height: 50px;
display: flex;
justify-content: center;
align-items: center;
}
label::before {
content: '\2600';
/* Unicode value for the HTML characer '☀';*/
}
#inputValue {
border: none;
}
#submit {
display: none;
}
<div class="block">
<label for="inputValue" id="label"></label>
<input type="text" id="inputValue" placeholder="Change City" />
<button type="submit" id="submit">Submit</button>
</div>
I know this question has been asked a hundred times but I cant seem to find an answer that works for me on any other thread. I am displaying images, and want three of them to be in a row, but they are all just below each other.
//displaying multiple images and delete them
const deleteFiles = [];
$("#file-upload").on("change", function(event) {
const files = event.originalEvent.target.files;
const fragmentElement = document.createDocumentFragment();
const galleryElement = document.querySelector('div.gallery');
if (galleryElement === null) {
return
}
for (let i = 0; i < files.length; i++) {
const file = files[i];
deleteFiles.push(file);
const deleteImg = document.createElement("div");
const deleteimage = document.createElement("img");
const faGlyph = document.createElement('i');
faGlyph.className = 'fas fa-times';
deleteImg.className = 'thumbnail-container';
deleteimage.className = 'thumbnail';
faGlyph.style.display = 'none';
deleteImg.appendChild(deleteimage);
deleteImg.appendChild(faGlyph);
fragmentElement.appendChild(deleteImg);
deleteimage.src = URL.createObjectURL(file);
function toggleGlyph() {
var jqGlyph = $(faGlyph);
if (jqGlyph.is(':visible')) {
jqGlyph.hide();
} else {
jqGlyph.show();
}
}
function deletePic() {
const index = deleteFiles.indexOf(file);
if (index !== -1) {
deleteFiles.splice(index, 1);
}
URL.revokeObjectURL(file);
deleteImg.parentElement.removeChild(deleteImg);
}
$(deleteImg).hover(toggleGlyph, toggleGlyph);
faGlyph.addEventListener('click', deletePic, false);
}
galleryElement.appendChild(fragmentElement);
$('div.gallery').show();
});
.form {
overflow: hidden;
}
/*upload image */
.gallery img{
display:inline-block;
position: relative;
width: 230px;
height: 210px;
padding-right:7%;
padding-bottom: 6%;
box-sizing: content-box;
}
.gallery{
border-style: dashed;
border-width: 2px;
color: #5967b9;
padding: 10%;
}
div.gallery { display: none; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="Form1" method="post" role="form" class="form" enctype="multipart/form-data">
<label> <input type="text" id="albumname" name="albumname" class="form-control" placeholder="Album Name" required autofocus> </label>
<div class="input-group">
<label for="file-upload" class="custom-file-upload">
<i class="fa fa-cloud-upload" id="choosefiles"></i> Choose Files...
</label>
` <input id="file-upload" type="file" multiple/>
</div>
<div class="gallery"></div>
<button class="btn btn-lg block btn-primary btn-block btn-signin-upload" type="submit" id="buttonForm">Upload</button>
</form>
Really not sure what the problem is, but I would be grateful for any help. Thanks
I am trying too add image inside dynamically created div. When user create go button it should create div element and image inside it according to value selected in select box. I have created div tag dynamically and created image object in order to get image. but in my code image is not loading inside div. can anyone help me to figure out issue ?
CSS
<style>
body{
background-image: url("final_images/back.jpg");
}
.container{
/*width: 600px;*/
/*height: 200px;*/
border:inset;
margin-top: 100px;
margin-left: 300px;
margin-right: 190px;
background-color:rgba(255, 234, 134, 0.9);
}
#selectBox{
margin-left: 210px;
width: 160px;
}
#holder {
width: 300px;
height: 300px;
background-color: #ffffff;
}
</style>
HTML
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div class = 'container' id="main">
<form name="myForm">
<select name="mySelect" id="selectBox">
<option value="womens">Women's coat</option>
<option value="mens">Men's coat</option>
<option value="kids">Kid's toys</option>
<option value="mixture">Classic mixture</option>
<option value="earing">Gold Earing</option>
</select>
<INPUT TYPE="button" VALUE="Go" id="go">
</INPUT>
</form>
<HR size="4" color="red" id="hr">
<!-- <div id="holder"> </div> -->
</div>
</body>
</html>
Javascript
<script>
imageObj = new Image(128, 128);
// set image list
images = new Array();
images[0]="final_images/wcoat.jpg";
images[1]="final_images/wcoat.jpg";
var go = document.getElementById('go');
go.addEventListener("click", loadItem);
function loadItem() {
var mainDiv = document.getElementById("main");
var btnPre = document.createElement("input");
//Assign different attributes to the element.
btnPre.type = "button";
btnPre.value = "previous";
btnPre.id = "preBtn";
mainDiv.appendChild(btnPre);
newdiv = document.createElement('div'); //create a div
newdiv.id = 'holder';
mainDiv.appendChild(newdiv); //add an id
var btnNxt = document.createElement("input");
//Assign different attributes to the element.
btnNxt.type = "button";
btnNxt.value = "next";
btnNxt.id = "nxtBtn";
mainDiv.appendChild(btnNxt);
var holder = document.getElementById("holder");
if(document.getElementById('selectBox').value == "womens"){
holder.src = images[0] + " Women's coat";
}
else if(document.getElementById('selectBox').value == "mens"){
holder.src = images[1] + " Men's coat";
}
}
</script>
A div is not an image container. Replace with img in the createElement fixes this.
Another big problem is the margins you use.
I've made a few adjustments
replaced margin-left with float: right for the select
put margin auto for left and right on the box.
imageObj = new Image(128, 128);
// set image list
images = new Array();
images[0] = "final_images/wcoat.jpg";
images[1] = "final_images/wcoat.jpg";
var go = document.getElementById('go');
go.addEventListener("click", loadItem);
function loadItem() {
var mainDiv = document.getElementById("main");
var btnPre = document.createElement("input");
//Assign different attributes to the element.
btnPre.type = "button";
btnPre.value = "previous";
btnPre.id = "preBtn";
mainDiv.appendChild(btnPre);
newdiv = document.createElement('img'); //create a div
newdiv.id = 'holder';
mainDiv.appendChild(newdiv); //add an id
var btnNxt = document.createElement("input");
//Assign different attributes to the element.
btnNxt.type = "button";
btnNxt.value = "next";
btnNxt.id = "nxtBtn";
mainDiv.appendChild(btnNxt);
var holder = document.getElementById("holder");
if (document.getElementById('selectBox').value == "womens") {
holder.src = images[0] + " Women's coat";
} else if (document.getElementById('selectBox').value == "mens") {
holder.src = images[1] + " Men's coat";
}
}
body {
background-image: url("final_images/back.jpg");
}
* {
box-sizing: border-box;
}
.container {
width: 400px;
border: inset;
margin-top: 100px;
margin-left: auto;
margin-right: auto;
background-color: rgba(255, 234, 134, 0.9);
}
#selectBox {
float: right;
width: 160px;
}
#holder {
width: 300px;
height: 300px;
background-color: #ffffff;
}
<div class='container' id="main">
<form name="myForm">
<select name="mySelect" id="selectBox">
<option value="womens">Women's coat</option>
<option value="mens">Men's coat</option>
<option value="kids">Kid's toys</option>
<option value="mixture">Classic mixture</option>
<option value="earing">Gold Earing</option>
</select>
<INPUT TYPE="button" VALUE="Go" id="go">
</INPUT>
</form>
<HR size="4" color="red" id="hr" />
<!-- <div id="holder"> </div> -->
</div>
You need to use an image tag instead of a div. You could also load images with CSS but thats probably not what you want.
starting on this line:
var holder = document.getElementById("holder");
var image = new Image(128, 128);
if (document.getElementById('selectBox').value == "womens") {
image.src = images[0];
holder.appendChild(image);
holder.appendChild(document.createTextNode(" Women's coat"));
} else if (document.getElementById('selectBox').value == "mens") {
image.src = images[1];
holder.appendChild(image);
holder.appendChild(document.createTextNode(" Men's coat"));
}
Let me elaborate.
In the JavaScript code you are creating a div element here
newdiv = document.createElement('div'); //create a div
newdiv.id = 'holder';
mainDiv.appendChild(newdiv);
and then you are searching for element with Id holder and setting new image url.
var holder = document.getElementById("holder");
// holder is <div></div> element
if (document.getElementById('selectBox').value == "womens") {
holder.src = images[0] + " Women's coat";
} else if (document.getElementById('selectBox').value == "mens") {
holder.src = images[1] + " Men's coat";
}
holder is a div tag now. it has no src attribute
But div element do not have attribute with name src. so the above code will just add one more attribute to your div tag. but browser will not interpret it.
So if you want load image by setting src attribute, then you probably have to create holder as img tag which has attribute src. like this.
newdiv = document.createElement('img'); //create a img
newdiv.id = 'holder';
mainDiv.appendChild(newdiv);
holder is a img tag. now it has src attribute
now it will work with no problem.
On clicking a button my program will create a dynamic div with a class name dynamictextbox . There is a label with the class name mytxt and textbox with class name mytext inside this div which is also dynamically created.
When i create a new dynamic div it is overlapping with previously created div.
Below is the CSS i've used
.dynamictextbox{
width:50%;
position:relative;
padding:10;
}
.dynamictextbox .mytxt{
position:absolute;
left:0px;
right:50%;
}
.dynamictextbox .mytext{
position:absolute;
left:51%;
right:100%;
}
Below is the HTML code
<div id="Enter your name" class="dynamictextbox">
<label class="mytxt">Enter your name</label>
<input type="text" name="Enter your name_name" id="Enter your name_id" class="mytext">
</div>
<br />
<div id="bigData" class="dynamictextbox">
<label class="mytxt">Now this is a long text which will overlap the next div.Need solution for this. Please give me a solution for this</label>
<input type="text" name="bigData_name" id="bigDate_id" class="mytext">
</div>
<br />
<div id="div_temp" class="dynamictextbox">
<label id="txtlb" class="mytxt">Dynamic Label</label>
<input type="text" name="tb" id="tb" class="mytext">
</div>
<br />
What you need here, is to expand the element according to the content height. Unfortunately you cannot do this using CSS. So we'll have to move along with javascript.
Here goes the script
<script>
var max = 0;
function setHeight() {
var elements = document.getElementsByClassName('mytxt');
var height = 0;
for (var i = 0; i < elements.length; i++) {
height = elements[i].scrollHeight;
if (height > max) {
max = height;
}
}
elements = document.getElementsByClassName('dynamictextbox');
for (var i = 0; i < elements.length; i++) {
elements[i].style = "min-height: " + max + "px";
}
}
</script>
At the end of all the divs call the funtion setHeight().
<script>setHeight()</script>
So the output will look like this
P.S. I've added borders to the class dynamictextbox for testing purposes.
This may be helpful - JSFIDDLE
Just remove the .mytxt class from your CSS and increase the left attribute of .mytext class
.dynamictextbox .mytext{
position:absolute;
left:60%;
right:100%;
}
Update the code below. Is this what you where going after?
$("#add").on("click", function(){
// just a helper function for some random content
function dynamicText(){
var min = 1;
var max = 50;
var random = Math.floor(Math.random() * max) + min;
var text = "";
for(var i = 0; i < random; i++){
text += "text ";
}
return text;
}
// add to the container
var addMe = "\
<div class='dynamictextbox'>\
<label class='mytxt'>"+dynamicText()+"</label>\
<textarea class='mytext'>"+dynamicText()+"</textarea>\
</div>\
";
var container = $("#container");
container.append(addMe);
});
.dynamictextbox{
width:50%;
padding:10;
margin-top: 10px;
background: #CCC;
overflow: auto;
}
.dynamictextbox .mytxt{
position: relative;
float: left;
width: calc(50% - 10px);
}
.dynamictextbox .mytext{
float: right;
width: calc(50% - 10px);
height: auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
On clicking a button my program will create a dynamic div with a class name dynamictextbox . There is a label with the class name mytxt and textbox with class name mytext inside this div which is also dynamically created.
<br><hr><br>
<button id="add">ADD</button><br><br>
<div id="container"></div>
I'm trying to code a custom upload button. I've hidden the regular one and then put a div with image background over the top.
It works great but I want to fill the (disabled) input field below with the file name once the user selects a file but it's not working.
JavaScript:
document.getElementById("upload_button").onchange = function () {
document.getElementById("upload_file").value = this.value;
};
HTML:
<div id="Form_FileInput_Container"><input type="file" id="upload_button" /></div>
<input class="Form_Input" id="upload_file" placeholder="Choose File" disabled="disabled" />
CSS:
#Form_FileInput_Container { position: relative; width: 100px; height: 100px; background: #e5e5e5 url('path/to/upload/image/forms_upload.png') no-repeat; border: 1px solid #cccccc; }
#Form_FileInput_Container input { filter: alpha(opacity=0); opacity: 0; width: 100px; height: 100px; }
Any help is most appreciated :)
Make sure you attach your JavaScript after the elements exist.
<input id="foo" type="file" />
<input id="bar" type="text" placeholder="Choose File" disabled />
// after elements exist
var foo = document.getElementById('foo'),
bar = document.getElementById('bar');
foo.addEventListener('change', function () {
var slash = this.value.lastIndexOf('\\');
bar.value = this.value.slice(slash + 1);
});
DEMO
HTML:
<input type="file" id="upload_button" onchange="cutomButton()" />
JS:
function customButton() {
var z=document.getElementById("upload_button").value;
document.getElementById("upload_file").value = z;
alert(document.getElementById("upload_file").value);
}