We Keep Coding

variable inside addEventListener is not working

Inside an upload script I would like to check the dimensions of the image. if these are to small, it shouldn't show the preview-image. Unfortunately the vars are not working.
Can anyone help me so that the variable var_error have the value 1 if pic_width is lower than 720.
Thanks
var fileInput = document.querySelector('#file');
var preview = document.getElementById('preview');
fileInput.addEventListener('change', function(e) {
var var_error = 0;
preview.onload = function() {
var pic_width = this.naturalWidth;
var pic_height = this.naturalHeight;
if(pic_width < 720) {
$('.contest_upload_error').fadeIn();
$('.contest_upload_error').replaceWith('Falsche Bildgrösse (Mindestgrösse 1080px x 720px)');
document.var_error = 1;
}
window.URL.revokeObjectURL(this.src);
};
if(var_error == 0) {
var url = URL.createObjectURL(e.target.files[0]);
preview.setAttribute('src', url);
}
}, false);

I'm thinking the following may work better for you.
var fileInput = document.querySelector('#file');
var preview = document.getElementById('preview');
fileInput.addEventListener('change', function(event) {
var e = event;
preview.onload = function() {
var pic_width = this.naturalWidth,
pic_height = this.naturalHeight;
if (pic_width < 720) {
$('.contest_upload_error')
.fadeIn();
.replaceWith('Falsche Bildgrösse (Mindestgrösse 1080px x 720px)');
this.setAttribute('src', URL.createObjectURL(e.target.files[0]));
}
window.URL.revokeObjectURL(this.src);
};
});
Notes:
I saved the change event handler's parameter, event, as var e, so we can use it in the next function.
I moved the if(var_error == 0) part to inside the load event handler. Where it was situated originally was wrong, as preview.onload() is asynchronous and will be called after if(var_error==0), so var_error, at that point in the script, remains 0.
I removed the variable var_error as we now do the error checking inside preview.onload()'s if(pic_width < 720) conditional statement instead.
Additional notes:
You have a strange mix of jQuery and Javascript selectors in there. At the top you select elements using Javascript and inside the change event handler you select elements with jQuery.

lightbox onclick change src then change back

I am using Materialize CSS and have the "Material Box" which is a lightbox plugin. I want all of the thumbnails to be the same size. When clicked I want the full photo to load.
I am using onclick to change the src. How do I change it back to the thumbnail when the large photo closes (either with a click or the escape key)?
<div class="col s6 m3">
<img class="materialboxed responsive-img" src="images/thumb1.jpg" onclick='this.src="images/photo1"'>
</div>
Material Box Javascript
document.addEventListener('DOMContentLoaded', function() {
var elems = document.querySelectorAll('.materialboxed');
var options = {}
var instances = M.Materialbox.init(elems, options);
});
// Or with jQuery
$(document).ready(function(){
$('.materialboxed').materialbox();
});
Materializecss.com - https://materializecss.com/media.html
I haven't found an easy other way of achieving the lightbox effect with cropped square thumbnails. Any advice would be greatly appreciated!

Here is one implementation of what you want, keeping track of the image click state.
$(document).ready(function(){
$('.materialboxed').materialbox();
// Image sources
const srcThumb = '/images/thumb1.jpg'
const srcPhoto = '/images/photo1.jpg'
// Click state
var clicked = false
// Get image element and bind click event
const img = $('.materialboxed')
img.on('click', function() {
img.attr('src', clicked ? srcPhoto : srcThumb)
clicked = !clicked
})
});

No need to rely on onclick in this case.
Materialize is already binding onclick for those images.
And it provides the following native methods we can use for doing exactly what you want using pure JS (no jQuery):
onOpenStart Function null Callback function called before materialbox is opened.
onCloseEnd Function null Callback function called after materialbox is closed.
In this example below, we assume there is a normal materialboxed photo gallery containing thumbnails named thumb_whatever.jpg, for example. But we're also serving the original sized photo named whatever.jpg in the same directory.
Then we're changing src attribute dynamically removing the thumb_ prefix to get the original image, which in this case will be imediately lightboxed by materialize.
And after closing the lightbox, the src attribute is being set back again without the thumb_ prefix.
We do that while initializing Materialbox:
// Initializing Materialbox
const mb = document.querySelectorAll('.materialboxed')
M.Materialbox.init(mb, {
onOpenStart: (el) => {
var src = el.getAttribute('src') // get the src
var path = src.substring(0,src.lastIndexOf('/')) // get the path from the src
var fileName = src.substring(src.lastIndexOf('/')).replace('thumb_','') // get the filename and removes 'thumb_' prefix
var newSrc = path+fileName // re-assemble without the 'thumb_' prefix
el.setAttribute('src', newSrc)
},
onCloseEnd: (el) => {
var src = el.getAttribute('src') // get the src
var path = src.substring(0,src.lastIndexOf('/')) // get the path from the src
var fileName = src.substring(src.lastIndexOf('/')).replace('/', '/thumb_') // get the filename and adds 'thumb_' prefix
var newSrc = path+fileName // re-assemble with the 'thumb_' prefix
el.setAttribute('src', newSrc)
}
})
This solution is also working like a charm for me, crossplatform.

Embedding should have been able to show the button

Please be advised that the following codes are generated by an engineer. (I don't have contact with the engineer right now)
Now here is the scenario. According to the engineer who had created this the whole collection of these scripts should be able to generate a button once edited properly and embedded to our website.
Before I implement this on our own website I want to test these codes to a simple page created through saving codes from our website. I ask the engineer if it is possible and he said yes.
Now here is the code that should be able to generate the button.
clickCall.js
(function () {
var createScriptElement = function (src, onload, onerror) {
var element = document.createElement("script");
element.type = "text\/javascript";
element.src = src;
element.onload = onload;
element.onerror = onerror;
return element;
};
var createLinkElement = function (src) {
var element = document.createElement('link');
element.href = src;
element.rel = 'Stylesheet';
element.media_type = 'text/css';
return element;
};
var createUI = function () {
var clickCallDiv = document.createElement('div');
clickCallDiv.style.cssText = 'width: 300px;height: 60px;position: fixed;z-index: 999;right: 20px;bottom: 320px;';
var call_btn = document.createElement("button");
call_btn.id = "dial_btn_call";
var session_div = document.createElement("div");
session_div.id = 'sessions';
var webcam_div = document.createElement("div");
webcam_div.style.cssText = 'height:0';
webcam_div.id = 'webcam';
var video_remote = document.createElement('video');
video_remote.id = 'remoteView';
video_remote.autoplay = 'autoplay';
video_remote.hidden = 'hidden';
var video_local = document.createElement('video');
video_local.autoplay = 'autoplay';
video_local.hidden = 'hidden';
video_local.muted = 'muted';
video_local.id = 'selfView';
webcam_div.appendChild(video_remote);
webcam_div.appendChild(video_local);
clickCallDiv.appendChild(call_btn); //add the text node to the newly created div.
var contain = document.createElement('div');
contain.appendChild(session_div);
contain.appendChild(webcam_div);
clickCallDiv.appendChild(contain);
return clickCallDiv;
};
var urls = {};
urls.rtcninja = 'rtcninja.js';
urls.jquery = 'jquery.js';
urls.i18n = "jquery.i18n.js";
urls.messagestore = "jquery.i18n.messagestore.js";
urls.jssip = 'jssip.js';
urls.init = 'init.js';
urls.gui = 'gui.js';
urls.css = 'style.css';
var rtcninja_script = createScriptElement(urls.rtcninja, function () {
// Must first init the library
rtcninja();
// Then check.
if (!rtcninja.hasWebRTC()) {
console.log('WebRTC is not supported in your browser :(');
} else {
document.body.appendChild(createUI());
}
});
var jquery_script = createScriptElement(urls.jquery, function(){
document.head.appendChild(i18_script);
document.head.appendChild(jssip_script);
document.head.appendChild(gui_script);
document.head.appendChild(init_script);
});
var i18_script = createScriptElement(urls.i18n, function(){
document.head.appendChild(messagestore_script);
});
var messagestore_script = createScriptElement(urls.messagestore);
var jssip_script = createScriptElement(urls.jssip);
var init_script = createScriptElement(urls.init);
var gui_script = createScriptElement(urls.gui);
var click_call_css = createLinkElement(urls.css);
document.head.appendChild(jquery_script);
document.head.appendChild(rtcninja_script);
document.head.appendChild(click_call_css);
})();
That script, when embedded, should be able to generate a button. The way he embedded the script on their website is through this
<script>
document.write('<script src="sourcefile/clickCall.js">/script>')
</script>
But this won't work on my side so I tried this
document.write('<sc' + 'ript src="clickCall.js">/sc' + 'ript>')
Now my first problem is that this script prevents all other scripts from loading, causing to have an empty output. another is that it won't display the expected button that it was suppose to show on the webpage. My solution to this problems was to implement DOM but I don't know how I'll implement it especially because I can't understand how it works and how to implement it. Could you kindly explain to me how DOM works and how am I going to implement it? Thanks

document.write when executed just writes the string and doesn't execute the inside script.
Hence, instead of this,
<script>
document.write('<script src="sourcefile/clickCall.js"></script>')
you can directly call your script.
<script src="sourcefile/clickCall.js"></script>

Sharing one physical image between two img elements in HTML

There is an image element , how do I use this same img element without sending another request to the server. Its important to note, I don't want image1.jpg downloaded twice from the webserver. Any ideas?
function loadCarousels(carouselLoc, carouselId) {
$("li").find(carouselLoc).each(function (index) {
var img = this;
var outer = 0;
$(carouselId).find("ul").each(function (innerIndex) {
var liX = document.createElement("li");
$(this).append(liX);
var imgInner = document.createElement("img");
imgInner.src = img.src;
$(imgInner).appendTo(liX);
console.log($(this));
});
});
}
Is how I currently try but it doesn't work. it creates a separate image.

Browsers should be already pretty aggressive on caching images: Chrome often shows multiple requests, but if you check from the second on usually they're all satisfied using the cache.
In case you want to cache internally in your JS code, try to cache images by URL like the following:
// use this as JS cache
var images = {};
function loadCarousels(carouselLoc, carouselId) {
$("li").find(carouselLoc).each(function (index) {
var img = this;
var outer = 0;
// cache it
if(!images[img.src]){
images[img.src] = document.createElement("img");
// if the user disable the cache, this should prevent another request
images[img.src].src = img.src;
}
$(carouselId).find("ul").each(function (innerIndex) {
var liX = document.createElement("li");
$(this).append(liX);
// retrieve from the cache
var imgInner = images[img.src];
$(imgInner).appendTo(liX);
console.log($(this));
});
});
}

Displaying thumbnail image with plugin

I am using https://code.google.com/p/jquery-multifile-plugin/
I am trying to display the thumbnail of the image that was just selected with the following code:
$(function() {
var doc = document;
var oError = null;
var oFileIn = doc.getElementById('file-upload');
var oFileReader = new FileReader();
var oImage = new Image();
oFileIn.addEventListener('change', function () {
alert("in");
var oFile = this.files[this.files.length-1];
//rest of the code
});
It works for the first image. When I try to add another the event isn't triggered, any suggestions?