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>
I set multiple image sources for a div using javascript function. I want that when user clicks to the button then only a specific image set to that div.
function changeColor1() {
document.getElementById("myDIV").style = "background-image:url(coloredshirtsimages/coloredwithoutsleeve/red_withoutsleeve.png)"
document.getElementById("myDIV").style = "background-image:url(coloredshirtsimages/coloredhalfsleeveroundneck/red_halfsleeve.png)"
document.getElementById("myDIV").style = "background-image:url(coloredshirtsimages/coloredfullhalf/red_fullhalfsleeve.png)"
document.getElementById("myDIV").style = "background-image:url(coloredshirtsimages/coloredfullsleeve/red_fullsleeve.png)"
document.getElementById("myDIV").style = "background-image:url(coloredshirtsimages/coloredfullsleevev-neck/red_fullsleevevneck.png)"
document.getElementById("myDIV").style = "background-image:url(coloredshirtsimages/coloredshirtsimages/coloredvneck/red_vneck.png)"
}
<div id="myDIV"></div>
<button style="background-color:red;outline:none" class="colors" onclick="changeColor1()"></button>
#myDIV {
width: 550px;
height: 650px;
background-image: url(coloredshirtsimages/coloredhalfsleeveroundneck/white_halfsleeve.png);
border: 2px solid black;
color: orange;
float: right;
margin-top: 200px;
background-repeat: no-repeat;
}
I changed the image using css and javascript now the image belongs to particular category for example(white_vneck)is goes to div but problem is that only one image was gone to div. I want that other image (red_vneck.png) goes to div when i clicked the button in place of white_vneck.
Please feel free to ask a question if you have any confusion
Pass a parameter to your function to help it understand which image you wish to display:
onclick="changeColor1('abc.png')"
function changeColor1(pic) {
document.getElementById("myDIV").style = "background-image:url(" + pic + ")";
}
According your code snippet:
function changeColor1(pngName) {
document.getElementById("myDIV").style = "background-image:url("+pngName+")";
}
<div id="myDIV"></div>
<button style="background-color:red;outline:none" class="colors" onclick="changeColor1('coloredshirtsimages/coloredwithoutsleeve/red_withoutsleeve.png')"></button>
For selecting random image:
onclick="changeColor1()"
var pics =[
'coloredwithoutsleeve/red_withoutsleeve.png' ,
'coloredhalfsleeveroundneck/red_halfsleeve.png',
'coloredfullhalf/red_fullhalfsleeve.png',
'coloredfullsleeve/red_fullsleeve.png',
'coloredfullsleevev-neck/red_fullsleevevneck.png',
'coloredshirtsimages/coloredvneck/red_vneck.png'
];
function changeColor1() {
//random selection of pic
var picIndex = Math.floor(Math.random() * pics.length);
document.getElementById("myDIV").style = "background-image:url(coloredshirtsimages/" + pics[picIndex] + ")";
}
I am trying to create some code to work. However, I keep getting errors, and I have been stuck with this for a while now and in need of help. Whenever the image gets an attempt to be added to the page, I get:
<undefined src='(this is where the filepath is listed)'><undefined>
Why are the tags not coming out as div?
Css Code:
.clock{
background-image:url('');
background-size:cover;
background-position: center;
height: 250px; width: 250px;
border: 1px solid #bbb;
}
#myUL{
height: 1000px;
width: 1000px;
}
Html Code:
<input type='file' id='getval' />
<span onclick="readURL()" class="addBtn">Add</span>
<div class='clock'></div>
<div id='myUL'></div>
Script code:
function readURL(){
var file = document.getElementById("getval").files[0];
var reader = new FileReader();
reader.onloadend = function(){
var div = document.createElement(div);
div.setAttribute("src", "url(" + reader.result + ")");
div.class = 'clock';
document.getElementById('myUL').appendChild(div);
}
if(file){
reader.readAsDataURL(file);
}else{}
}
var div = document.createElement(div); // <<< (div) is a variant.
see https://jsfiddle.net/3L53bzx5/1/
reader.onloadend = function() {
var img = document.createElement('img');
img.setAttribute("src", reader.result);
img.className = 'clock';
document.getElementById('myUL').appendChild(img);
}
You have to change below line
var div = document.createElement(div);
to
var div = document.createElement('div');
in your readURL() method.
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>
<script>
var theNumOfWins;
var part;
theNumOfWins = 0;
function openWindow(){
part = partOfWindow("outlayer",theNumOfWins,"section0");
setCSS(part.css,"-1","400px","400px","#65A8E8","relative","30px","30px","initial","none");
part = partOfWindow("headerOfWindow",theNumOfWins,part.id);
setCSS(part.css,"1","400px","25px","#65A8E8","relative","0px","0px","initial","none");
part = partOfWindow("zoneOfWindowPosition",theNumOfWins,part.id);
setCSS(part.css,"1","204px","22px","transparent","absolute","192px","4px","move","1px solid red");
document.getElementById("5").innerHTML = document.getElementById(part.id).attributes[2].value;
theNumOfWins++;
}
function partOfWindow(name,theNumOfWins,parent){
var id;
var css;
var idAndCSS;
var tag;
var att;
id = name + "Id" + theNumOfWins;
css = name + "CSS";
tag = document.createElement("div");
tag.setAttribute("id",id);
tag.setAttribute("class",css);
document.getElementById(parent).appendChild(tag);
idAndCSS = {
tag: tag,
id: id,
css: css
}
return idAndCSS;
}
function setCSS(className,zIndex,width,height,backgroundColor,position,left,top,cursor,border){
var i;
var cssPart;
cssPart = document.getElementsByClassName(className);
document.getElementById("1").innerHTML = cssPart.length;
document.getElementById("2").innerHTML = cssPart[0];
document.getElementById("3").innerHTML = cssPart[1];
document.getElementById("4").innerHTML = cssPart[2];
for(i=0; i < cssPart.length; i++){
cssPart[i].style.zIndex = zIndex;
cssPart[i].style.width = width;
cssPart[i].style.height = height;
cssPart[i].style.backgroundColor = backgroundColor;
cssPart[i].style.position = position;
cssPart[i].style.left = left;
cssPart[i].style.top = top;
cssPart[i].style.cursor = cursor;
cssPart[i].style.border = border;
}
}
</script>
Hi!!! I need help!!!
I made a object of "div".
and then I added one more "div" into first "div".
second "div" is a red box. You can see it when you click the "+"mark.
But, second "div" has mouse event, and the event does not work.
I want to change mouse cursor when cursor become on the red box.
Why does not the mouse event work?
My last purpose is to make window object.
And there will be a lot of mouse events.
I already made window object similar to this one. However, it also did not work.
How can I try mouse event?
This is my full source: https://drive.google.com/file/d/0B4p8lZSEMXcqZUdacVJyVlBiUWc/view?usp=sharing
This is a CSS issue. Your problem is here:
part = partOfWindow("outlayer",theNumOfWins,"section0");
setCSS(part.css,"-1","400px","400px","#65A8E8","relative","30px","30px","initial","none");
Specifically, where you set the z-index to -1, by doing so you place the div and everything contained in it under the active layer so to speak. As such the hover event doesn't propagate to your div. change this to 1 and the cursor will behave as expected.
var theNumOfWins;
var part;
theNumOfWins = 0;
function openWindow(){
part = partOfWindow("outlayer",theNumOfWins,"section0");
setCSS(part.css,"1","400px","400px","#65A8E8","relative","30px","30px","initial","none");
part = partOfWindow("headerOfWindow",theNumOfWins,part.id);
setCSS(part.css,"1","400px","25px","#65A8E8","relative","0px","0px","initial","none");
part = partOfWindow("zoneOfWindowPosition",theNumOfWins,part.id);
setCSS(part.css,"1","204px","22px","transparent","absolute","192px","4px","pointer","1px solid red");
document.getElementById("5").innerHTML = document.getElementById(part.id).attributes[1].value;
theNumOfWins++;
}
function partOfWindow(name,theNumOfWins,parent){
var id;
var css;
var idAndCSS;
var tag;
var att;
id = name + "Id" + theNumOfWins;
css = name + "CSS";
tag = document.createElement("div");
tag.setAttribute("id",id);
tag.setAttribute("class",css);
document.getElementById(parent).appendChild(tag);
idAndCSS = {
tag: tag,
id: id,
css: css
}
return idAndCSS;
}
function setCSS(className,zIndex,width,height,backgroundColor,position,left,top,cursor,border){
var i;
var cssPart;
cssPart = document.getElementsByClassName(className);
document.getElementById("1").innerHTML = cssPart.length;
document.getElementById("2").innerHTML = cssPart[0];
document.getElementById("3").innerHTML = cssPart[1];
document.getElementById("4").innerHTML = cssPart[2];
for(i=0; i < cssPart.length; i++){
cssPart[i].style.zIndex = zIndex;
cssPart[i].style.width = width;
cssPart[i].style.height = height;
cssPart[i].style.backgroundColor = backgroundColor;
cssPart[i].style.position = position;
cssPart[i].style.left = left;
cssPart[i].style.top = top;
cssPart[i].style.cursor = cursor;
cssPart[i].style.border = border;
}
}
#buttonToOpenWindow{
width:50px;
height:20px;
border: 1px solid #DCDCDC;
margin: 2px;
position:fixed;
left:-1px;
top:0px;
}
#buttonToOpenWindow div.positionOfPlus{
width:20px;
height:20px;
position:absolute;
left:30px;
}
div.wrapOfPlus{
width:20px;
height:20px;
}
div.inside01{
width:15px;
height:5px;
background-color: #B0C4DE;
position:absolute;
left:2.5px;
top:7.5px;
}
div.inside02{
width:5px;
height:15px;
background-color: #B0C4DE;
position:absolute;
left:7.5px;
top:2.5px;
}
<section id="section0">
<div id="buttonToOpenWindow" onclick="openWindow()">
<div class="positionOfPlus">
<div class="wrapOfPlus">
<div class="inside01"></div>
<div class="inside02"></div>
</div>
</div>
</div>
</section>
<footer>
<br><br><br><br><br>
<div style="display:inline-flex;">00: <div id="0"></div></div><br>
<div style="display:inline-flex;">01: <div id="1"></div></div><br>
<div style="display:inline-flex;">02: <div id="2"></div></div><br>
<div style="display:inline-flex;">03: <div id="3"></div></div><br>
<div style="display:inline-flex;">04: <div id="4"></div></div><br>
<div style="display:inline-flex;">05: <div id="5"></div></div><br>
<div style="display:inline-flex;">06: <div id="6"></div></div><br>
<div style="display:inline-flex;">07: <div id="7"></div></div><br>
<div style="display:inline-flex;">08: <div id="8"></div></div><br>
<div style="display:inline-flex;">09: <div id="9"></div></div><br>
<div style="display:inline-flex;">10: <div id="10"></div></div><br>
<div style="display:inline-flex;">11: <div id="11"></div></div><br>
<div style="display:inline-flex;">12: <div id="12"></div></div><br>
<div style="display:inline-flex;">13: <div id="13"></div></div><br>
<div style="display:inline-flex;">14: <div id="14"></div></div><br>
<div style="display:inline-flex;">15: <div id="15"></div></div><br>
<div style="display:inline-flex;">16: <div id="16"></div></div><br>
<div style="display:inline-flex;">17: <div id="17"></div></div><br>
<div style="display:inline-flex;">18: <div id="18"></div></div><br>
<div style="display:inline-flex;">19: <div id="19"></div></div><br>
<div style="display:inline-flex;">20: <div id="20"></div></div><br>
<div style="display:inline-flex;">21: <div id="21"></div></div><br>
<div style="display:inline-flex;">22: <div id="22"></div></div><br>
<div style="display:inline-flex;">23: <div id="23"></div></div><br>
<div style="display:inline-flex;">24: <div id="24"></div></div><br>
<div style="display:inline-flex;">25: <div id="25"></div></div><br>
<div style="display:inline-flex;">26: <div id="26"></div></div><br>
<div style="display:inline-flex;">27: <div id="27"></div></div><br>
<div style="display:inline-flex;">28: <div id="28"></div></div><br>
<div style="display:inline-flex;">29: <div id="29"></div></div><br>
<div style="display:inline-flex;">30: <div id="30"></div></div><br>
<div style="display:inline-flex;">111: <div id="111"></div></div><br>
<div style="display:inline-flex;">222: <div id="222"></div></div><br>
<div style="display:inline-flex;">333: <div id="333"></div></div><br>
<div style="display:inline-flex;">444: <div id="444"></div></div><br>
<div style="display:inline-flex;">555: <div id="555"></div></div><br>
<div style="display:inline-flex;">666: <div id="666"></div></div><br>
<div style="display:inline-flex;">777: <div id="777"></div></div><br>
<div style="display:inline-flex;">888: <div id="888"></div></div><br>
<div style="display:inline-flex;">999: <div id="999"></div></div><br>
</footer>