I have generated multiple barcodes using this code:
function getCode() {
var multipleCodes = document.getElementById('codeArea').value;
var eachLine = multipleCodes.split('\n');
console.log("eachLine = " + eachLine);
for (var i = 0; i < eachLine.length; i++) {
console.log("Inside loop: " + eachLine[i]);
var div = document.createElement('iframe');
div.innerHTML = "";
div.setAttribute('id', 'iFrameID' + i);
document.body.appendChild(div);
document.getElementById('iFrameID' + i).src = 'barCodeGenerator/generateBarCode.php?q=' + eachLine[i];
}
and trying to print it by using this method:
function printDiv(divName) {
var strName = document.getElementById("codeArea").value;
var imageId = document.getElementsByClassName('decoded');
var imagObject = new Image();
imagObject = imageId;
var originalImage = '<img id="imageViewer" src="' + imageSrc + '" style="padding-top: 20px" alt="' + imageSrc + '" />';
popup = window.open('', 'popup', 'toolbar=no,menubar=no,width=700,height=650');
popup.document.open();
popup.document.write("<html><head></head><body onload='print()'>");
popup.document.write(originalImage);
popup.document.write("</body></html>");
window.close('popup');
popup.document.close();
setTimeout(function () { popup.close(); }, 8000);
}
which only print single image by merging all barcodes.
How can i print them separately as multiple images.
Any help will be appreciated.
The most part of this code is irrelevant to your question. Consider removing your logs, the parts about showing popup and hiding it for more clearance.
Seems imageSrc variable in your code contains the source of one image, so you need to change your code by sending the array of image sources and iterating over it:
var originalImage = '';
// assuming imageSrc is an array of image sources
for (var i=; i < imageSrc.length; i++) {
// note that I'm changing the id of the image a litle bit to ensure it will remain unique
originalImage += '<img id="imageViewer' + i + '" src="' + imageSrc[i] + '" style="padding-top: 20px" alt="' + imageSrc[i] + '" />';
}
then the rest of your code must work.
Related
I have looked at other Questions of this type and none of them solved my problem. I am having this JavaScript code:
var count1;
for (count1 = 1; count1 < 11; count1++) {
var article = res.articles[count1]
var ImageURL = res.articles[count1].urlToImage
$('#showNews').append('<div id="' + count1 + '" class="article"><div class="overlayart"><div class="art"><h3>' + article.title + '</h3 <p>' + article.description + '<br><br><button onclick="divLoad()">Follow Link</button></p></div></div></div>');
$("#" + count1).css('background-image', 'url(' + ImageURL + ')');
x = article.url;
}
function divLoad() {
alert(article.url);
};
Basically there are 10 items with different articles. Scopes of variables are all correct. I can see the links of the items when I console log them in the loop. I want to alert each URL whenever each Item is clicked for a respected button. But when I click that I get the error:
Uncaught ReferenceError: divLoad is not defined
at HTMLButtonElement.onclick
Am I missing something?
EDIT [My Full Code]:
var x;
function divLoad() {
alert(x);
};
$(document).ready(function(){
var url = 'https://newsapi.org/v2/top-headlines?country='+country+'&apiKey=MYAPIKEY';
$.getJSON(url).then(function(res){
//console.log(res)
var count1;
for(count1 = 1; count1 < 11; count1++){
var article = res.articles[count1]
var ImageURL = res.articles[count1].urlToImage
x = article.url;
$('#showNews').append('<div id="'+count1+'" class="article"><div class="overlayart"><div class="art"><h3>'+article.title+'</h3><p>'+article.description+'<br><br><button onclick="divLoad()">Follow Link</button></p></div></div></div>');
$("#"+count1).css('background-image','url(' + ImageURL + ')');
}
});
The problem is that you're always referencing one single, global variable. That variable (x) will only ever hold the last value it was set to in your for loop.
Instead, we can append the articles and give each one a data attribute - that way, we can associate each element with a specific article URL.
function divLoad(url) {
alert(url);
};
$(document).ready(function() {
var url = 'https://newsapi.org/v2/top-headlines?country=' + "test" + '&apiKey=MYAPIKEY';
$.getJSON(url).then(function(res) {
for (let count1 = 1; count1 < 11; count1++) {
let article = res.articles[count1];
$('#showNews').append('<div id="' + count1 + '" class="article"><div class="overlayart"><div class="art"><h3>' + article.title + '</h3><p>' + article.description + '<br><br><button class="article-btn">Follow Link</button></p></div></div></div>');
$("#" + count1)
.css("background-image", "url('" + article.urlToImage + "'")
.attr("data-url", article.url); //Associate the URL to the element
}
});
$("#showNews").on("click", ".article-btn", function() {
var url = $(this).closest(".article").attr("data-url"); //Get the associated URL
divLoad(url);
});
});
If you inspect the <div class="article"> now, you'll see each one has a data-url attribute that holds its URL.
Any help would be appreciate. I need to create a slider based on JSON datas from the moviedb API. I created the slider showing the title, the picture and the description within a for loop but the last thing I need to achieve is to get the movie rating but instead of the number I need to show stars (half or full filled according to the datas provided).
I'm stuck and tried different things but it doesn't work. I know it's quite simple but I'm stuck.
Many thanks for any help. Do not hesitate if you need something else because it's my first post on stackoverflow.
Here is the fiddle of my work :
https://jsfiddle.net/y2hbzej8/7/
Here is my JS code to get datas :
JS :
var urlmoviedb = 'https://api.themoviedb.org/3/movie/upcoming?api_key=e082a5c50ed38ae74299db1d0eb822fe';
$(function() {
$.getJSON(urlmoviedb, function (data) {
console.log(data);
for (var x = 0; x < data.results.length; x++) {
var title = data.results[x].original_title;
var descr = data.results[x].overview;
var note = data.results[x].vote_average;
var noteround = Math.round(2 * note) / 2;
var str = "/jj8qgyrfQ12ZLZSY1PEbA3FRkfY.jpg";
var imageurl = str.replace("/jj8qgyrfQ12ZLZSY1PEbA3FRkfY.jpg", "https://image.tmdb.org/t/p/w1280");
var image = imageurl + data.results[x].backdrop_path;
$('#image').append('<li>' + '<h2 class="h2-like mt-4">' + title + '</h2>' + '<p class="note">' + noteround + '</p>' + "<img class='img-fluid mb-4' src='" + image + "'>" + '<p class="descr">' + descr + '</p>' + '</li>');
}
});
Divide the vote_average field of each row by two since values go from 0 to 10. This will give you five stars based values.
I edited your example, I added font-awesome CSS library that will give you lots and lots of icons you can play with. Check them out
Here's the edited example on JSFiddle
var urlmoviedb = 'https://api.themoviedb.org/3/movie/upcoming?api_key=e082a5c50ed38ae74299db1d0eb822fe';
$(function() {
$.getJSON(urlmoviedb, function(data) {
console.log(data);
for (var x = 0; x < data.results.length; x++) {
var title = data.results[x].original_title;
var descr = data.results[x].overview;
var note = data.results[x].vote_average;
var noteround = Math.round(2 * note) / 2;
var str = "/jj8qgyrfQ12ZLZSY1PEbA3FRkfY.jpg";
var imageurl = str.replace("/jj8qgyrfQ12ZLZSY1PEbA3FRkfY.jpg", "https://image.tmdb.org/t/p/w1280");
var image = imageurl + data.results[x].backdrop_path;
//Translate vote average field into number of stars by dividing them by two since vote_average goes from 0 to 10
var numberOfStars = Math.round(note/2);
var stars = '';
for(var index = 0; index < numberOfStars; index++)
stars += '<span class="fa fa-star"/>';
$('#image').append('<li>' + '<h2 class="h2-like mt-4">' + title + '</h2>' + "<img class='img-fluid mb-4' src='" + image + "'>" + '<p class="descr">' + descr + '</p>' + stars + '</li>');
}
});
});
I have an array of image links that I'm getting from reddit, but some image urls are broken. I want to skip over broken image links.
This thread suggested using .width to see if an image exists. I tried using this answer to wait for image links to load before executing code but it's not working, it's skipping right over my if(this.width>0) check.
var imgLinksArray = Array.from(imgLinks);
document.getElementById('photoGrid').innerHTML = "";
for (i = 0; i < imgLinks.length; i++) {
var workingImgLink = imgLinksArray[i]
var img = new Image();
img.onload = function() {
console.log(this);
console.log(this.src + " Width: " + this.width);
for (i = 0; i < imgLinks.length; i++) {
var workingImgLink = imgLinksArray[i]
if (this.width > 0) {
console.log(this.width);
if (workingImgLink.search("webm") >= 0) {
document.getElementById('photoGrid').innerHTML += '<video autoplay loop class="box-wrapper"> <source type="video/webm" src= "' + workingImgLink + '" data-url= "' + workingImgLink + '" class="box" style=background-image:url("' + workingImgLink + '")></video>';
} else {
document.getElementById('photoGrid').innerHTML += '<div class="box-wrapper"> <div data-url= "' + workingImgLink + '" class="box" style=background-image:url("' + workingImgLink + '")></div></div>';
}
}
}
}
img.src = workingImgLink;
var bgImgWidth = img.width;
var bgImgHeight = img.height;
}
I only want to execute the innerHTML code if I know the image exists. Any suggestions about how to go about this?
In my Firefox OS app i use Flickr API to show relevant images, My URL for the call is like this.
https://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx&lat=42.86366&lon=-75.91438&radius=3&format=json&nojsoncallback=1
and i use created a function to call the flicker api for the images. This is the function where i create the URL with the api key and latitude and longitude for the api call
function displayObject(id) {
console.log('In diaplayObject()');
var objectStore = db.transaction(dbTable).objectStore(dbTable);
objectStore.openCursor().onsuccess = function(event) {
var cursor = event.target.result;
if (cursor) {
if (cursor.value.ID == id) {
var lat = cursor.value.Lat;
var lon = cursor.value.Lon;
showPosOnMap (lat, lon);
// create the URL
var url = 'https://api.flickr.com/services/rest/?method=flickr.photos.search';
url += '&api_key=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx';
url += '&lat=' + lat + '';
url += '&lon=' + lon + '';
url += '&radius=3';
url += '&format=json&nojsoncallback=1';
$.getJSON(url, jsonFlickrFeed);
return;
}
cursor.continue();
} else {
$('#detailsTitle').html('No DATA');
}
};
}
This function gets the JSON object received from flickr. This function displays the thumbnails of the images in a jquery mobile grid.
function jsonFlickrFeed (data) {
console.log(data);
var output = '';
// http://farm{farmId}.staticflickr.com/{server-id}/{id}_{secret}{size}.jpg
for (var i = 0; i < data.photos.photo.length; i++) {
// generate thumbnail link
var linkThumb = '';
linkThumb += 'http://farm' + data.photos.photo[i].farm + '.staticflickr.com/' + data.photos.photo[i].server + '/' + data.photos.photo[i].id + '_' + data.photos.photo[i].secret + '_s.jpg';
// generate Full image link
var linkFull = '';
linkFull += 'http://farm' + data.photos.photo[i].farm + '.staticflickr.com/' + data.photos.photo[i].server + '/' + data.photos.photo[i].id + '_' + data.photos.photo[i].secret + '_b.jpg';
if (i < 20)
console.log(linkThumb);
//console.log(linkFull);
var title = data.photos.photo[i].title;
var blocktype = ((i % 3) == 2) ? 'c' : ((i % 3) == 1) ? 'b' : 'a';
output += '<div class="ui-block-' + blocktype + '">';
output += '<a href="#showphoto" data-transition="fade" onclick="showPhoto(\'' + linkFull + '\',\'' + title + '\')">';
output += '<img src="' + linkThumb + '_q.jpg" alt="' + title + '" />';
output += '</a>';
output += '</div>';
};
$('#photolist').html(output);
}
Then finally this function show the full screen view of the image. When the user taps on the thumbnail a larger image is taken and shown.
function showPhoto (link, title) {
var output = '<a href="#photos" data-transition="fade">';
output += '<img src="' + link + '_b.jpg" alt="' + title + '" />';
output += '</a>';
$('#myphoto').html(output);
}
My problem is that, i get the JSON object with the images by calling the API. i have console.log() where i output the json object and i checked all the image info is there. But when i go to the grid view and even the full view i get the default image that states that the This image or video is currently unavailable. I can't figure out what im doing wrong here.. Please help.
You may be requesting an image size that flickr does not have for that image. You are appending "_s", "_q" and "_b" to select a few sizes - so perhaps those are not available. You can check the flickr API 'photos.getSizes' to see what sizes are available. The Flickr API seems to be pretty inconvenient sometimes.
https://www.flickr.com/services/api/flickr.photos.getSizes.html
i am trying to create multiple image uploader with delete option,till now i am able to select unique multiple files but i want to have a delete option .for that i have to generate an id for each image to delete it before uploading :
window.onload = function(){
//Check File API support
if(window.File && window.FileList && window.FileReader)
{
var filesInput = document.getElementById("files");
filesInput.addEventListener("change", function(event){
var files = event.target.files; //FileList object
var dive = $(".overview").find('img').length;
var output = document.getElementById("result");
// console.log(files);
for(var i = 0; i< files.length; i++)
{
var file = files[i];
//Only pics
if(!file.type.match('image'))
continue;
$(".overview .imgdivcon").each(function(){
var its =$(this).children().eq(1).attr("title");
if(its == file.name ){
throw alert("already exits") ;
}
});
var divn = i+dive+1;
var picReader = new FileReader();
console.log(divn);
picReader.addEventListener("load",function(event){
var picFile = event.target;
var div = document.createElement("div");
div.className="imgdivcon";
div.innerHTML = "<p onclick='sliceimg("+divn+")' class='close' name='"+i+"' id='cl'>x</p><img width='150' height='150' class='thumbnail' src='" + picFile.result + "'" +
"title='" + file.name + "'/>";
output.insertBefore(div,null);
});
//Read the image
picReader.readAsDataURL(file);
}
});
when i'm selecting single image its generating unique id for each image ,but when i'm selecting multiple images it's giving total images count for each image but not a unique count.
here is my js fiddle link http://jsfiddle.net/aerfan/CdgUV/ little help wil be aprreciated .
You got wrong unique id (should be the order of image instead of total count) when you select multiple images because the "divn" variable will be the total count of images when the picReader load event handler being triggered.
Closure will add local variable to its scope when function was created. The outer for loop finished before file reader load callback being executed and divn will be the total count of images.
for(var i = 0; i< files.length; i++)
{
......
var divn = i+dive+1; //this variable will be added to callback closure
.......
picReader.addEventListener("load",function(event){
........
//divn is always the total count of images
div.innerHTML = "<p onclick='sliceimg("+divn+")' class='close' name='"+i+"' id='cl'>x</p><img width='150' height='150' class='thumbnail' src='" + picFile.result + "'" +
"title='" + file.name + "'/>";
output.insertBefore(div,null);
});
}
To solve this problem, you could try to use currying technique. Let's update the picReader load event callback:
picReader.addEventListener("load",(function(divn){
return function(event){
var picFile = event.target;
var div = document.createElement("div");
div.className="imgdivcon";
div.innerHTML = "<p onclick='sliceimg("+divn+")' class='close' name='"+i+"' id='cl'>x</p><img width='150' height='150' class='thumbnail' src='" + picFile.result + "'" +
"title='" + file.name + "'/>";
output.insertBefore(div,null);
};
})(divn));
You can prefill argument (divn) , use closure to remember its status and return new function by using currying.
Hope this is helpful for you.