I have web page which display product images. These images are coming from server (images are not specific or dynamic images ) over HTTP request in JSON format. This JSON has information about each image.
I want to add dialog or popup box with respective image information when you click on image with Javascript ES6 Engine. How I can pass image Information from JSON to dialog or popup when I click a specific image.
Let's assume you wrote
<img id="xyz" data-id="alpha" src="http://some.url/image.jpg" />
Then you may retrieve the id value writing
document.getElementById("xyz").dataset.id
In your case, since you want to use the value when the image is clicked, you may use an onClick event handler, like this:
<img data-id="alpha" src="http://some.url/image.jpg" onClick="someFunction();" />
and then have
someFunction = (ev) => {
let id = ev.target.dataset.id;
// Put here the code to open you dialog or popup
// based on the data retrieved by using the id
}
This also works assuming you used the same image element mentioned by #Ed
<img id="xyz" data-id="alpha" src="http://some.url/image.jpg" />
Then drop in the following JS to select the image by the ID:
const image = document.querySelector("#xyz");
Then use the following code to "listen" for a click on the image:
image.addEventListener("click", popup);
Then use the following code to create a popup:
function popup() {
alert("Hello! I am a popup!!");
}
Related
I have a web page where users can sign to accept a contract. I'm have a signature box that uses canvas to display. I would like to have the canvas save as a image, when I right click on the image it gives me a option to save it and works perfectly however I want to save it to my server to use for later
I have tried searching around a lot looking for code
<div>Signature: <i class="fa fa-pencil" aria-hidden="true" onclick="Signature('jm38s4i1');"></i></div>
<button onclick="download()">Click me</button>
Download!
<canvas id="Sig-jm38s4i1" class="dig-sig " sig-id-data="jm38s4i1" signed-data="false" width="400" height="100"></canvas>
function download(){
document.getElementById("downloader").download = "image.png";
document.getElementById("downloader").href = document.getElementById("Sig-jm38s4i1").toDataURL("image/png").replace(/^data:image\/[^;]/, 'data:application/octet-stream');
}
When ever I click download it downloads a image to my computer however it cannot display it, I want to 1. be able to use it and 2. download server side
Edit:
The PNG file contains the HTML of the page
Why don't you prevent the event, then change href, and fire click again?
function down(e){
if(e.isTrusted){
e.preventDefault()
}
document.getElementById("downloader").download = "image.png";
document.getElementById("downloader").href = document.getElementById("Sig-jm38s4i1").toDataURL("image/png").replace(/^data:image\/[^;]/, 'data:application/octet-stream');
e.target.click()
}
e.isTrusted tells you whether the user clicked or the script clicked, triggering e.preventDefault only when user clicks.
To get the event parameter, you have to write onclick as download(event).
Download!
The initial href is set to the current page, and it has the download attribute. Seems likely that this would cause a click to download the current page.
Your onclick handler changes the href, but doesn't prevent the default behavior. So it wouldn't surprise me if, after it downloads the page, the href is set to the image. If you click it a second time does it work?
I have a form to upload images. By default the source is "images/noimage.png";
<img id="previewing" src="images/noimage.png" />
I store the path in the database. If I select a specific user and the form gets loaded I want to display the image for the specific user. I do this in the windows.onload event. However another image (previous image the user had, if user had one) gets loaded instead of the new one.
var Logo = 'Logos/123.png'; //path stored in Database
if (Logo!='') {
//If the user has a 'Logo', show it
$("#previewing").prop("src", Logo);
} else {
// if user has no 'Logo', show default image
$("#previewing").prop("src", 'Images/noimage.png');
}
This does not work as expected. What's wrong here?
If after reloading image getting change then most probably its Caching issue.
you may try adding some random string into image URL like
Logos/123.png?v=xyz
I have set up a pop up sign up box to show on first site arrival that is loaded using a .js file called inside the <head> tag and this all works fine.
How can i get it to re-show if a menu link is clicked?
Obviously when i link it like this below it will open the file itself containing the codes.
Mailing List
So how do i get it to carry out the function that's in popup.js when the above link is clicked?
Edit: I was able to get the pop up to show by using the below thank you all who contributed.
Mailing List
Now to complete what i'm trying to achieve is to ignore/disable the cookie being set that stops the popup from showing the next time the link is clicked.
function AlreadyBeenNewsletter()
and
function SetNewsletterCookie()
Link to the actual js file
If the JS is already included, you could use the onclick attribute. It will run JS code when a link is clicked.
Mailing List
For the second part of your question, I would create two functions. One that shows the popup without checking if the cookie is set, and another (you already have it) that checks the cookie.
Function that shows popup without checking:
function showPopup(){
var id;
id = "popupSignup";
if (jq(".popupWindow").length) {
jq(".popupWindow").prop("id", id);
} else {
jq("#aspnetForm").after('<div id="popupSignup" class="popupWindow"><a class="popupClose" href="javascript:;"></a><div class="popupDetails"></div></div><div class="backgroundPopup"></div>');
}
jq("#" + id + " .popupDetails").html('<iframe class="popupiframe" src="/user/files/newsletter.html"></iframe>');
InitialisePopup(id, 99, false, true);
ShowPopup();
CenterPopup();
}
Function that you already have popup()
jq(function popup() {
if (!AlreadyBeenNewsletter()) {
SetNewsletterCookie();
showPopup();
}
});
Then you can do the following for your link:
Mailing List
By separating the two functions apart like this you are free to show the popup without preventing it from showing again.
i'm not great with Javascript and jquery etc.
Using http://odyniec.net/projects/imgareaselect/ and a CSS popup, i'm trying to create a file upload that you can crop the image by choosing your selection with and then cancel or continue to upload the file.
I've got the popup opening with the image inside and you can crop the part of the image you want. My issue at the moment is that when you click on the "Cancel" button, the crop highlight still remains. How would I go about getting that to close too?
I've tried numerous things, checking to see if it can hide the div if the other div is pressed, or hidden, or not visible, and I just can't seem to get anything to work.
Here is my jsbin, the upload part isn't working though, so you can't actually see the error on there.
http://jsbin.com/eKaNupU/1
Thanks in advance for any help!
UPDATE:
Working (up until it doesn't!) example: http://www.costapass.es/imageupload/
Looks like you need to do cancelSelection() (see: http://odyniec.net/projects/imgareaselect/usage.html).
In order to get access that method you need to get a reference to your imgAreaSelect object. To do that, put the following in your <head> (or similar).
var ias = null;
$(document).ready(function() {
ias = $('#uploadPreview').imgAreaSelect({ instance: true });
});
Then modify your close button to be:
<div id="blanket" style="display:none;"></div>
<div id="popUpDiv" style="display:none;">
Cancel
<img id="uploadPreview" style="display:none;"/>
</div>
Your modified jsbin: http://jsbin.com/eKaNupU/11/edit
I am trying to write a Google Chrome extension to basically favorite pictures. So you see a picture on a page that you want to remember but don't want to manually save it or save the image URL. You will be able to right click on the image and add it to your image favorites with this extension.
I have everything figured out except for when the user right clicks on the picture, I can't figure out how to get the image URL from that action. The solution would need to work on any normal page on the internet. I am not sure if I need a normal listener or what.
Your context menu item's onclick handler should expect an onClickData object as its first argument. This object will contain a srcUrl property, which is the src property of the image that was right-clicked.
You'd set up your menu item like this:
chrome.contextMenus.create({
title: "Remember image as favorite",
contexts: ["image"],
onclick: function(data) {
console.log("we're about to save " + data.srcUrl);
// do whatever you need with data.srcUrl to save it
}
});