Replacing Choose File with Font Awesome icon makes cloned image preview inoperable - javascript

Apparently, I can’t figure out how to bind font awesome element to the cloned form. I tried everything, but the image on the cloned form goes to the original message.
The image preview was already functioning on the cloned form. Afterwards First on html, I added font awesome element with camera icon just above <input type="file". Second on javascript, I added a function to trigger font awesome element, which works on the original message submission. Third, I created iClone() function to find, trigger, and change the data-count number of both font awesome and input file after grabbing font awesome element using jQuery. Fourth, I created var cloneCount = 0; variable initially set to 0 to increment and change the id name of the cloned form. Fifth, I created var bindFileChange = function(cloneCount) { variable to bind font awesome and file input elements to the new form with new form id name.
Next on the reply button $("button").click(function(){, where the actual cloning takes place, first, cloneCount++; increments cloneCount, i.e., id name of the new form. Second, it clones the form and add the new id name to it. Third, it runs the iClone function. Finally, it runs the bindFileChange(cloneCount); function. This is supposed to bind both font awesome and input file to the new form with a new id. But it doesn't work.
Here is the link to the test case, where I tried to add font-awesome to cloned image preview, on JSBin: https://jsbin.com/cepanet/4/edit?js
And, here is the link to the functioning code for cloning image preview without font-awesome on JSBin: https://jsbin.com/xexejur/10/edit?html,js,output
$(document).ready(function() {
// Original message. It is not cloned.
$("#form_clone0").click('submit', function() {
let fileInput = $('input[type="file"][data-count="' + cloneCount + '"]');
fileInput.on('change', function() {
$(this).siblings('.image_Preview').attr('src', window.URL.createObjectURL(this.files[0]));
});
// Function to activate font awesome
$("i").click(function() {
$("input[type='file']").trigger('click');
});
});
// Function to find, trigger, and change the data-count number of both font
// awesome and input file after grabbing font awesome element using jQuery.
function iClone() {
$("i").click(function() {
$("input[type='file']").first().attr('data-count', cloneCount).trigger('click');
});
};
// Variables to bind font awesome and file input elements to cloned form.
// Including, variable to increment cloned form counter. Set to zero.
var cloneCount = 0;
var bindFileChange = function(cloneCount) {
let fileInput = $('i, span, input[type="file"][data-count="' + cloneCount + '"]');
fileInput.on('change', function() {
$('i').siblings('.image_Preview').attr('src', window.URL.createObjectURL(this.files[0]));
});
};
$("button").click(function() {
// Cloned functions for reply message. Actual cloning takes place
// here.
cloneCount++;
$("#form_clone0").clone().attr('id', 'form_clone' + cloneCount).insertAfter("#form_clone" + (cloneCount - 1));
iClone();
bindFileChange(cloneCount);
});
});
<!DOCTYPE html>
<html>
<head>
<title>Test Case</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div id="form_clone0">
<form method="post" enctype="multipart/form-data">
<div>
<img class="image_Preview" width="100" height="100" />
<i class="fa fa-camera"></i>
<input type="file" class="fileUpload" data-count="0" style="display: none;">
</div>
<div>
<input type="submit" name="submit" id="submit" class="btn btn-info" value="Submit" />
</div>
</form>
</div>
<button>Reply</button>
</body>
</html>

Use a label and assign it [for] attribute with the value of the input id:
<label for='upload'></label>
<input id='upload' type='file'>
When the label is clicked then the input that it is associated with is as well.
Delegate events on an ancestor tag that existed since the page loaded. Pass a selector that represents all applicable tags that you want to target to the second parameter (it's called Event.data).
$('main').on('click change', '.file, .upload, .reply', function(e) {...
Cloning becomes complicated if the source being cloned has unwanted content. It may be easier just to clone the contents of a <template> or just render a htmlString. The following demo does the latter.
99% of the time it's optimal to place all <script> tags before the </body> end tag (see HTML of Demo).
let count = 0;
$('main').on('click change', '.file, .reply, .upload', function(e) {
if ($(this).is('.reply')) {
++count;
const htmlString = `<form id="box${count}" class="input-group form-row" method="post" enctype="multipart/form-data"><label class="input-group-prepend" for="image${count}" style="display:block;min-height:120px"><figure class="input-group-text" style="min-height:100%"><i class="btn btn-light fa fa-camera tip" title='Select an image or video file'></i> <img class="preview" width="100" height="100"> <figcaption> </figcaption></figure></label><input id="image${count}" name='image${count}' class="file" type="file" data-count="${count}" style="display: none"><section class="input-group-append" style="max-height: 120px"><fieldset class="btn-group-vertical" style="min-height: 100%"><button class="upload btn btn-primary btn-sm" type="button" style="min-height: 50%" form="box${count}">Upload</button> <button class="reply btn btn-secondary btn-sm" type="button" style="min-height: 50%">Reply</button></fieldset></section></form>`;
$('main')[0].insertAdjacentHTML('beforeend', htmlString);
} else if ($(this).is('.file')) {
$(this).closest('.input-group').find('.preview').attr('src', window.URL.createObjectURL(this.files[0]));
$(this).closest('.input-group').find('figcaption').text(this.value.split(`\\`).pop());
} else if ($(this).is('.upload')) {
$(this).closest('form').submit();
e.stopPropagation();
} else {
return false;
}
});
$('body').tooltip({
selector: '.tip'
});
i.tip.btn:hover {
color: #fff;
background: #000;
cursor:pointer;
}
<!DOCTYPE html>
<html>
<head>
<title>Test Case</title>
<meta charset="utf-8">
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<link href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" rel="stylesheet" crossorigin="anonymous">
</head>
<body>
<main class='container'>
<form id='box' class='input-group form-row' method='post' enctype="multipart/form-data">
<label class='input-group-prepend' for='image' style='display:block;min-height:120px'>
<figure class='input-group-text' style='min-height:100%'>
<i class="btn btn-light fa fa-camera tip" title='Select an image or video file'></i>
<img class="preview" width="100" height="100">
<figcaption> </figcaption>
</figure>
</label>
<input id='image' name='image' class="file" type="file" data-count="0" style="display: none;">
<section class=' input-group-append' style='max-height: 120px'>
<fieldset class='btn-group-vertical' style='min-height: 100%'>
<button class='upload btn btn-primary btn-sm' type='button' style='min-height: 50%' form='box'>Upload</button>
<button class='reply btn btn-secondary btn-sm' type='button' style='min-height: 50%'>Reply</button>
</fieldset>
</section>
</form>
</main>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js'></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script>
<!--This is where the jQuery/JavaScript would be placed-->
</script>
</body>
</html>

Related

Image not showing over text on form submit

Trying to create a meme generator that spits out an image and puts some input text over it.
I have gotten this to the point where it creates the image and a text html with everything the way I want it, but the text is not showing up over the image when I submit the form. I can tell that the html for the text is accepting and updating correctly with the input text, but text just not showing.
I tried setting the div wrapper to a position:relative and the text to position:absolute with a top setting, but no dice. Doing this just with vanilla JS..
Any help would be hugely appreciated!
here is the Code that I have:
'use strict';
let count=0;
// SUBMIT FORM
document.getElementById('memeInput').addEventListener('submit',function(e){
count++;
//prevent default
e.preventDefault();
//set image, top, and bottom to variables we can work with
let bottomText = document.getElementById('bottomText').value;
createMeme();
appendTop();
})
function createMeme(){
let image = document.getElementById('imageLink').value;
//create the 'meme'
let meme = document.createElement("IMG");
//add that meme to the memeSection
document.getElementById('memeSection').appendChild(meme);
//set the id = meme plus count so that multiple can be created at once, and then set the image equal to the image input link based on the form
meme.setAttribute("id", "meme"+count);
document.getElementById("meme"+count).src=image;
}
function appendTop(){
// put the top text in the image
let topText = document.getElementById('topText').value;
let top = document.createElement("H1");
document.getElementById('meme' + count).appendChild(top);
top.setAttribute("id","text"+ count);
document.getElementById("text" + count).innerHTML = topText;
}
#memeSection{
position:relative;
}
#memeSection > img{
height:60vh;
margin:5vh;
}
#memeSection > h1{
position:absolute;
top:5px;
color:white;
top: 10px;
left:5px;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
<title>Meme</title>
</head>
<container>
<body>
<div class="text-center">
<h1>Meme Generator</h1>
</div>
<div class="text-center">
<form action="#" id="memeInput">
<div>
<label for="image">Image Link</label>
<input type="url" id="imageLink">
</div>
<div>
<label for="topText">Text at Top</label>
<input type="topText" id="topText">
</div>
<div>
<label for="bottomText">Text at Bottom</label>
<input type="bottomText" id="bottomText">
</div>
<input type="submit" value="Make Meme">
</form>
</div>
<div id="memeSection" class="col-12 col-lg-6">
</div>
</body>
<script src="script.js"></script>
</container>
</html>
After Inspecting your Code, I ended up with that the Text at Top is appended as you wanted but it is not shown because of your Styling and if you want to add a text onto a image this is not the way it is done,
Read This Question At StackOverflow it has detailed information on how you can add text to a image
Or
Checkout this tutorial On YouTube which Will for sure help you to achieve your Goal

combine jquery and kendo example

I found a this post and reduce the working example to an input field where a number is displayed and two buttons where you can in- and decrease the value of integer by click as you can see here.
...
<input type="text" name="quantity" size="2" value="1" />
...
<div class="quantity-wrapper pull-left">
<span class="add-up add-action fa fa-plus"></span>
<span class="add-down add-action fa fa-minus"></span>
</div>
...
$(document).ready(function () {
$(".quantity-adder .add-action").click(function () {
if ($(this).hasClass('add-up')) {
var text = $(this).parent().parent().parent().find("[name=quantity]", '.quantity-adder')
text.val(parseInt(text.val()) + 1);
} else {
var text = $(this).parent().parent().parent().find("[name=quantity]", '.quantity-adder')
if (parseInt(text.val()) > 1) {
text.val(parseInt(text.val()) - 1);
}
}
});
});
I want to add a kendo dropdownlist as I tried in this link. But the +/- buttons are missing. Can someone pls tell me how to fix that?
I believe you are looking for something like this. Try this in the Telerik DOJO. I'll leave the CSS stuff to you. If you are going to reuse this functionality then I'd suggest creating this into a custom Widget. See Kendo documentation for extending the Widget class.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Kendo UI Snippet</title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2021.1.330/styles/kendo.default-v2.min.css"/>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2021.1.330/js/kendo.all.min.js"></script>
</head>
<body>
<input id="dropdownlist" />
<input type="text" name="quantity" size="2" value="1" />
<div class="quantity-wrapper">
<button class="up">+</button>
<button class="down">-</button>
</div>
<script>
$(document).ready(function() {
var $quantity = $("[name=quantity]");
$("#dropdownlist").kendoDropDownList({
dataSource: {
data: ["Banana", "Lemon"]
}
});
$(".quantity-wrapper").on("click", "button", function () {
var quantity = parseInt($quantity.val());
if ($(this).hasClass("up")) {
$quantity.val(quantity + 1);
} else {
if (quantity > 1) {
$quantity.val(quantity - 1);
}
}
});
});
</script>
<style>
.quantity-wrapper {
display: inline-grid;
}
</style>
</body>
</html>
Just add buttons instead of span
<div class="quantity-wrapper pull-left">
<button class="add-up add-action fa fa-plus">+</button>
<button class="add-down add-action fa fa-minus">-</button>
</div>

Show images in order of buttons clicked

I'm new to web developing and trying to build a website that shows different flags when clicking buttons.
I encounter some problems when positioning the image... For example, when I click "C -> A -> D -> B ->A", the A flag shows up before other flags and I cannot click again to make it show up twice. Here are my questions.
1) When I click the buttons the images show up in the order of the , not by which button I click first. Is there any way to make the first click one shows up first?
2) What function or code in CSS/javascript/JQuery I can use if I want the image to show up twice or for more times?
Thank you!
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<script>
function showImg( id ) {
for ( i = 1; i < 10; i++) {
}
var obj = document.getElementById( "flag" + id );
if (obj != null)
obj.className = 'show';
}
</script>
<style type="text/css">
.hide{display:none;}
</style>
<input type="button" onclick="showImg(1)" value="A" >
<input type="button" onclick="showImg(2)" value="B">
<input type="button" onclick="showImg(3)" value= "C">
<input type="button" onclick = "showImg(4)" value= "D">
<input type="button" onclick = "showImg(5)" value= "E">
<input type="button" onclick = "showImg(6)" value= "ANS">
<div class="row">
<div class="main">
<div class="screen" position: relative">
<img id="flag1" src="flag1.jpeg" title="1" class="hide" position="static">
</div>
<div position= "relative">
<img id="flag2" src="lag2.jpeg" title="2" class="hide">
<div position= "relative">
<img id="flag3" src="flag3.jpeg" title="3" class="hide">
</div>
<div position= "relative">
<img id="flag4" src="flag4.jpeg" title="4" class="hide">
</div>
<div position= "relative">
<img id="flag5" src="flag5.jpeg" title="5" class="hide">
</div>
<div position= "relative">
<img id="flag6" src="flag6.jpeg" class="hide" position="static">
</div>
</div>
</div>
</div>
</body>
</html>
One approach to the problem is, rather than hiding and showing elements (which relies on those elements being within the DOM already, then showing and hiding them as appropriate which retains their original order), to insert the relevant <img /> elements on clicking the <button> elements.
In the HTML below I've stripped out much of the extraneous HTML in order to simplify the example, and I've converted your <input type="button" /> elements into <button> elements, which allows those elements to contain HTML and allows us to use generated content in the pseudo-elements, ::before and ::after:
// here we select all <button> elements that have a "data-src"
// attribute:
const buttons = document.querySelectorAll('button[data-src]'),
// creating a named function to handle inserting the
// elements:
insertImage = function() {
// the 'this' is passed automatically from the later
// use of EventTarget.addEventListener() method, here
// we cache that within a variable:
let clicked = this,
// we retrieve the element, via its id, into which
// we wish to append the elements:
output = document.getElementById('gallery'),
// we create an <img> element:
image = document.createElement('img');
// we use a template literal to set the 'src'
// property-value to the 'https' protocol
// coupled with the data-src attribute-value
// retrieved via the Element.dataset API:
image.src = `https://${clicked.dataset.src}`;
// and append the <img> to the desired element:
output.append(image);
};
// here we iterate over the NodeList of <button> elements
// retrieved earlier, using NodeList.prototype.forEach():
buttons.forEach(
// along with an Arrow function to the attach the
// insertImage function (note the deliberate lack of
// parentheses) via the EventTarget.addEventListener()
// method:
(btn) => btn.addEventListener('click', insertImage)
);
/*
using the ::before pseudo-element, with generated
content, to add text to the button elements that
have a data-src attribute:
*/
button[data-src]::before {
content: 'Show image ' attr(value);
}
#gallery {
display: grid;
grid-template-columns: repeat(auto-fill, 180px);
grid-gap: 1em;
align-content: center;
justify-content: center;
}
<!--
here we have three <button> elements, each with a data-src
custom attribute that contains the src of the relevant image:
-->
<button type="button" value="A" data-src="i.stack.imgur.com/4CAZu.jpg"></button>
<button type="button" value="B" data-src="i.stack.imgur.com/SqYhm.gif"></button>
<button type="button" value="C" data-src="i.stack.imgur.com/a9xXV.png"></button>
<div id="gallery"></div>

zoom image href values is not setting

I am using easyzoom to zoom image on hover. I am changing images by clicking from the list but when i click for the first time the zoom works fine. When i click another image, i console to see the current href value and it appears fine but zoom image doesnt change
function setImage(source) {
// console.log(source);
$('a#zoom_img').attr('href', 'http://localhost:8080/ipfs/' + source);
$('#displayimage').attr('src', 'http://localhost:8080/ipfs/' + source);
console.log($('#zoom_img').attr("href"));
$('.easyzoom').easyZoom();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="easyzoom easyzoom--overlay">
<a id="zoom_img" href="">
<img src="" id="displayimage" alt="" style="height: 480px; margin: auto; width: auto;" class="" />
</a>
</div>
You need to use the .swap() function. Look into the API description for more information. Here is a little snippet to demonstrate that:
//init easyzome and get api-reference
var easyzoom = $('.easyzoom').easyZoom ();
var api = easyzoom.data ('easyZoom');
//this function uses .swap () to change the images
//it gets called by the buttons onclick-attribute
function switch_image (std_src, zoom_src) {
//std_src = the source to your standard-image (small verison)
//zoom_src = the source to your zoom-image (big version)
api.swap (std_src, zoom_src);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://i-like-robots.github.io/EasyZoom/dist/easyzoom.js"></script>
<link rel="stylesheet" href="http://i-like-robots.github.io/EasyZoom/css/easyzoom.css">
<button type="button" onclick="switch_image ('http://i-like-robots.github.io/EasyZoom/example-images/1_standard.jpg', 'http://i-like-robots.github.io/EasyZoom/example-images/1_zoom.jpg')">switch to image 1</button>
<button type="button" onclick="switch_image ('http://i-like-robots.github.io/EasyZoom/example-images/3_standard_1.jpg', 'http://i-like-robots.github.io/EasyZoom/example-images/3_zoom_1.jpg')">switch to image 2</button>
<br><br>
<div class="easyzoom easyzoom--overlay">
<a href="http://i-like-robots.github.io/EasyZoom/example-images/1_zoom.jpg">
<img src="http://i-like-robots.github.io/EasyZoom/example-images/1_standard.jpg" alt="" />
</a>
</div>

How do I get to the current picture source of a slideshow?

Completely new to coding over here. Learning the basics.
How can I get to "the picture only", when clicking on a current picture of a slideshow?
Normally in html I would just put this around it:
Current picture
But in this version I just don't seem to get it.
Clicking on the small pictures makes them appear as the big centred one.
Clicking on the big picture currently only pauses/continues the slideshow.
$(".crop-img").click(function(){
$("#bigImage").attr("src",
$(this).attr("src"));
});
var counter=1;
$("#image"+counter).click();
$("#forward").click(function(){
counter = counter + 1;
if (counter>4){
counter=1;
}
$("#image"+counter).click();
})
$("#backward").click(function(){
counter=counter-1;
if (counter<1){
counter=4;
}
$("#image"+counter).click();
})
$("#bigImage").click(function(){
paused=!paused;
})
Picture of how it looks is on my post about it.
Thank you!
Full code
<html>
<head>
<title> FWP - Gallery </title>
<script src="jquery-3.1.1.min.js"></script>
<link rel="stylesheet"
type="text/css"
href="bootstrap.css">
<link rel="stylesheet"
type="text/css"
href="mystyles.css">
<link rel="stylesheet"
type="text/css"
href="https://fonts.googleapis.com/css?family=Gruppo">
<link rel="stylesheet"
type="text/css"
href="https://fonts.googleapis.com/css?family=Syncopate">
</head>
<body>
<div class="container">
<h1>Image Gallery</h1>
<div class="row">
<div class="col-md-3 thin_border">
<img id="image1"
class="crop-img"
src="before.jpg"
alt="before prisma">
</div>
<div class="col-md-3 thin_border">
<img id="image2"
class="crop-img"
src="after.jpg"
alt="after prisma">
</div>
<div class="col-md-3 thin_border">
<img id="image3"
class="crop-img"
src="sleepy.jpg"
alt="Sleepy cat">
</div>
<div class="col-md-3 thin_border">
<img id="image4"
class="crop-img"
src="Cute.jpg"
alt="Cute cat">
</div>
</div>
<div class="row">
<div class="col-md-1 thin_border">
<button id="backward"><</button>
</div>
<div class="col-md-10 thin_border">
<img id="bigImage"
class="big-img"
src="before.jpg"
alt="before prisma">
</div>
<div class="col-md-1 thin_border">
<button id="forward">></button>
</div>
</div>
</div>
<script>
var paused=false;
setInterval(function(){
if(!paused){
$("#forward").click();
}
}, 3000);
$("#bigImage").click(function(){
paused=!paused;
});
$(".crop-img").click(function(){
$("#bigImage").attr("src",
$(this).attr("src"));
});
var counter=1;
$("#image"+counter).click();
$("#forward").click(function(){
counter = counter + 1;
if (counter>4) {
counter=1;
}
$("#image"+counter).click();
})
$("#backward").click(function(){
counter=counter-1;
if (counter<1) {
counter=4;
}
$("#image"+counter).click();
})
</script>
</body>
</html>
The section of javascript isn't vanilla javascript, it is a sample of this 'jquery' that you may have heard of in your quest to learn a bit of coding.
Jquery is syntactic sugar for javascript. $ is your cue to key in that this might be jquery (there are other js libraries that use $ syntax but I think jquery is the most prevalent).
$(".crop-img")
$("#bigImage")
$("#image"+counter)
This is jquery code to select an element from the page, the '.' is for selecting class, the '#' is for selecting id, there are tons of others you can look up as well. This gets you a jquery object that you can then save to a variable, call a method on, etc.
$(".crop-img").click(someFunctionNameHere);
$("#image"+counter).click();
These are examples of functions being called on the jquery objects, which happen to be event functions. The first is assigning a function to the click event of the selected element(s) (all elements with class 'crop-img'), the second is firing the click event of the selected element (the element with id='imageX' with 'X' being the current value of counter).
Also instead of a function name, you can just inline the function instead:
$("#bigImage").click(function(){
paused=!paused;
})
This assigns the unnamed inline function for the click event of the element with id='bigImage', which is where you want to pull up the image. Put your code in there that will bring up the image, it will run when the big image is clicked.
Such as if you want to actually go to the image, as in your html example, put this line in there:
window.location.href = "someHrefHere";
If you want to know the the src of the current bigImage, you can grab it with jquery:
var myhref = $("#bigImage").attr("src");
You can put it together from there.
Happy Coding!
You can retrieve the src of the current image when you click on the big image like this:
$( ".row div:nth-child("+counter+") img" ).attr('src')
counter was setted as index of your current image and this should be inside of your $("#bigImage") click function.

Categories

Resources