Develop Reference

JS insert URL link from textarea to the image src with live preview

How can I insert URL text from textarea to the image src with this code:
var wpcomment = document.getElementById('previewimage');
wpcomment.onmouseover = wpcomment.onkeyup = wpcomment.onkeypress = function(){
document.getElementById('prevCom').innerHTML = this.value;
}
<textarea name="previewimage" id="previewimage" placeholder="drag drop here"></textarea>
<div id="prevCom"><img alt="" id="nahled" src=""></div>
I already asked here: jQuery : how turn link from textarea to image in div?
but there is only jQuery solution with no live preview.

I think there is no need to capture keypress and mouse leave. besides by changing image attribute like below, or image.setAttribute('src', this.value)
var wpcomment = document.getElementById('previewimage');
var image = document.getElementById('nahled');
wpcomment.onkeyup = function(){
image.src = this.value;
}
<textarea name="previewimage" id="previewimage" placeholder="drag drop here"></textarea>
<div id="prevCom">
<img alt="" id="nahled" src="" />
</div>

var wpcomment = document.getElementById('previewimage');
wpcomment.onmouseover = wpcomment.onkeyup = wpcomment.onkeypress = function(){
document.getElementById('nahled').src = this.value;
}
<textarea name="previewimage" id="previewimage" placeholder="drag drop here"></textarea>
<div id="prevCom"><img alt="" id="nahled" src=""></div>

Here is a version with test and eventListener
const wpcomment = document.getElementById('previewimage');
const image = document.getElementById('nahled');
wpcomment.addEventListener("input", function() {
const str = this.value.trim();
if (str.startsWith("data:")) { // data uri
image.src=str;
return;
}
try {
const url = new URL(str);
// if (url.href.contains(....) ===-1) { /* test extension here */ }
image.src=url.href;
} catch (_) {
console.log("Not a valid URL")
return false;
}
});
#prevCom img {
height: 300px;
}
#prevCom img::before {
content: "ッ";
}
<textarea name="previewimage" id="previewimage" placeholder="drag drop here"></textarea>
<div id="prevCom">
<img alt="" id="nahled" src="" />
</div>

click event not working when clicking html icon

I have setup a click event in Javascript which is not working for some reason, the image just isn't changing and there are no errors in the console. The image src is meant to change when clicking the html icon.
Here is the javascript:
document.querySelector(".left").addEventListener("click", () => {
leftArrow();
});
Here is the leftArrow function:
leftArrow: () => {
if (document.querySelector(DOMStrings.characterImg).src === characters[0]) {
document.querySelector(DOMStrings.characterImg).classList.add("boris");
document.querySelector(DOMStrings.characterImg).src = characters[1];
const el = document.querySelector(DOMStrings.characterImg);
console.log(el);
} else if (document.querySelector(DOMStrings.characterImg).src === characters[1]) {
document.querySelector(DOMStrings.characterImg).classList.remove("boris");
document.querySelector(DOMStrings.characterImg).src = characters[0];
const el = document.querySelector(DOMStrings.characterImg);
console.log(el);
}
Here is where the images are stored:
const characters = ["Resources/Images/trump.png", "Resources/Images/boris.png"];
Here is where the DOM strings are stored:
const DOMstrings = {
characterImg: ".character-img"
}
Lastly, here is the relevant html:
<div class="character-select">
<ion-icon class="left" name="arrow-dropleft-circle"></ion-icon>
<ion-icon class="right" name="arrow-dropright-circle"></ion-icon>
<img class="character-img" src="Resources/Images/trump.png">
</div>

//below HTML part
/*
<div class="character-select">
<ion-icon class="icon" id='left' name="arrow-dropleft-circle"></ion-icon>
<ion-icon class="icon" id='right' name="arrow-dropright-circle"></ion-icon>
<img class="character-img" src="Resources/Images/trump.png">
</div>
*/
-----------------------------------------------------------------------
//javascript part
document.querySelectorAll(".icon").forEach(function(item,index){
item.addEventListener('click',function(event){
if(event.targer.id='right'){
document.querySelector('.character-img').src='your source that you want to set'
}else if(event.targer.id='left'){
document.querySelector('.character-img').src='your source that you want to set'
}
});
});

After I played 2 videos and closed iFrame, the "Back" button on browser will play sound without video, how to fix it?

On my site [ now at : http://gatecybertech.com/test but will be moved to main site later : http://gatecybertech.com ] you can click on the top right "Video" link to get to the videos section, after I played a few clips and closed the iFrame, if I click on the "Back" button on browser, the last video will be played again, but the strange thing is : I can hear the sound, but can't see the video ? So how to solve the problem by achieving one of the following :
[1] Show the video again in iFrame and play it normally
or
[2] Don't play the sound & don't show the video
Either of the above will do. How can I achieve that ?
My html looks like this :
<div class="tools-icon">
<img src=https://i.ytimg.com/vi/IgBIaZgoAQc/hqdefault.jpg?sqp=-oaymwEXCPYBEIoBSFryq4qpAwkIARUAAIhCGAE=&rs=AOn4CLDW3KcjXsTR5utmlvhFfibLe-bvRg width=170 height=110>
<p class="tools-icon__text">Keypad Pins Easily Stolen</p>
</div>
...
<!-- the modal div that will open when an anchor link is clicked to show the related video in an iframe. -->
<div id="modal" tabindex="-1">
<div class="content">
<h4 class="title"></h4>
<iframe class="yt-video" src="https://www.youtube.com/embed/A1nRiiWYgZw" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</div>
<div class="black_overlay" onclick="closeLightBox()" style="display: block;">
<div style=" z-index: 0; left: 76%; top: 17%; width: 22px; position: absolute;">
<a class="close" onclick = "return close_iFrame();"><h2>×</h2></a>
</div>
</div>
</div>
Script looks like this :
<script>
var modal = document.getElementById('modal'),
closeBtn = modal.querySelector('close'),
ytVideo = modal.querySelector('.content .yt-video'),
title = modal.querySelector('.content .title'),
anchors = document.querySelectorAll('a[data-target="modal"]'),
l = anchors.length;
for (var i = 0; i < l; i++)
{
anchors[i].addEventListener("click", function(e)
{
e.preventDefault();
title.textContent = this.dataset.videoTitle || 'No title';
ytVideo.src = this.href;
modal.classList.toggle('is-visible');
modal.focus();
});
}
modal.addEventListener("keydown", function(e)
{
if (e.keyCode == 27)
{
title.textContent = '';
ytVideo.src = '';
this.classList.toggle('is-visible');
}
});
</script>
<script language="javascript" type="text/javascript">
function close_iFrame()
{
var modal = document.getElementById('modal'),
ytVideo = modal.querySelector('.content .yt-video');
ytVideo.src = '';
modal.classList.toggle('is-visible');
}
</script>

OK, I figured it out, just make the following change :
<script language="javascript" type="text/javascript">
function close_iFrame()
{
var modal = document.getElementById('modal'),
ytVideo = modal.querySelector('.content .yt-video');
ytVideo.src = '';
modal.classList.toggle('is-visible');
history.go(-1);
window.location.href = '#Videos';
}
</script>

Click any image opens popup and change image url like

Actually I need to replace image url when i click image then open a popup window with input field and I put url and and save it but using this method.
Like this: http://jsfiddle.net/eDMmy/9/
//Set up the dialog box
$("#myDialog").dialog({
autoOpen : false,
modal : true,
title : "A Dialog Box",
buttons : {
'OK' : function() {
var textValue = $('#myTextBox').val();
var image1 = document.getElementById("image1");
image1.src=textValue;
},
'Close' : function() {
alert('The Close button was clicked');
$(this).dialog('close');
}
}
});
.img {
height:200px;
width:200px;
}
<img class='img' src="http://media1.santabanta.com/full5/Nature/Animals/animals-89a.jpg" onclick="ChangeUrl()" id="image1">
<div id="myDialog">
change url
<input type="text" id="myTextBox" />
</div>
<script>
function ChangeUrl(){
$("#myDialog").dialog("open");
var image1 = document.getElementById("image1");
$("#myTextBox").val(image1.src);
image1.src= url;
}</script>

You are setting the text field instead of reading from it, do this instead:
var image1 = document.getElementById("image1");
var url = $("#myTextBox").val();
image1.src= url;

You need to target only that image you clicked. .data() is important in this case to be able to pass the arguments. Check this solution.
http://jsfiddle.net/eDMmy/687/
//Set up the dialog box
$("#myDialog").dialog({
autoOpen: false,
modal: true,
title: "A Dialog Box",
buttons: {
'OK': function() {
var img_to_update = $(this).data('link');
var textValue = $('#myTextBox').val();
document.getElementById(img_to_update).src = textValue;
},
'Close': function() {
//alert('The Close button was clicked');
$(this).dialog('close');
}
}
});
.img {
height: 200px;
width: 200px;
}
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css" />
<img class='img' src="http://media1.santabanta.com/full5/Nature/Animals/animals-89a.jpg" onclick="ChangeUrl(this.id)" id="image1">
<img class='img' src="http://www.jqueryscript.net/images/Simplest-Responsive-jQuery-Image-Lightbox-Plugin-simple-lightbox.jpg" onclick="ChangeUrl(this.id)" id="image2">
<img class='img' src="https://3.bp.blogspot.com/-W__wiaHUjwI/Vt3Grd8df0I/AAAAAAAAA78/7xqUNj8ujtY/s1600/image02.png" onclick="ChangeUrl(this.id)" id="image3">
<div id="myDialog">
change url
<input type="text" id="myTextBox" />
</div>
<script>
function ChangeUrl(x) {
//$("#myDialog").dialog("open");
$("#myDialog")
.data('link', x)
.dialog('open');
var url = document.getElementById(x).src;
$('#myTextBox').val(url);
}
</script>

How to preview images uploaded to database?

I've tried several different ways to upload image to database, using Bootstrap. My IDE is Visual Studio. What I need is to let the uploaded image appear in a preview. Although I've seen a working demo before, when I run my code, the photo file appears on screen without a preview image. Because of this, I'm not sure if the image is stored in database successfully or not. Any advice would be very appreciated! I've included all of the current code:
HTML:
<div>
<form>
<div>
<div class="form-group hirehide is-empty is-fileinput width100">
<div class=socialmediaside2>
<input class=fileUpload accept="image/jpeg, image/jpg" name=profilepic[] type=file value="Choose a file">
<div class=input-group>
<input class=form-control id=uploadre placeholder="Please select your profile picture" readonly>
<span class="input-group-btn input-group-sm">
<button class="btn btn-fab btn-fab-mini"type=button><i class=material-icons>attach_file</i></button>
</span>
</div>
</div>
</div>
<div class=upload-demo>
<div class=upload-demo-wrap><img alt="your image" class=portimg src=#></div>
</div>
</div>
</form>
</div>
JavaScript:
function readURL() {
var $input = $(this);
var $newinput = $(this).parent().parent().parent().find('.portimg');
if (this.files && this.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
reset($newinput.next('.delbtn'), true);
$newinput.attr('src', e.target.result).show();
$newinput.after('<input type="button" class="delbtn removebtn" value="remove">');
}
reader.readAsDataURL(this.files[0]);
}
}
$(".fileUpload").change(readURL);
$("form").on('click', '.delbtn', function (e) {
reset($(this));
});
function reset(elm, prserveFileName) {
if (elm && elm.length > 0) {
var $input = elm;
$input.prev('.portimg').attr('src', '').hide();
if (!prserveFileName) {
$($input).parent().parent().parent().find('input.fileUpload').val("");
//input.fileUpload and input#uploadre both need to empty values for particular div
}
elm.remove();
}
}
CSS:
body {
img.portimg {
display: none;
max-width: 200px;
max-height: 200px;
}
}