How to execute javascript function when the user clicks on the image - javascript

I want to call or execute javascript function when user click on image. I have javascript file with many functions and one of them is ShowKeybord(). So i want to execute this function ShowKeybord() when user clicks on image.
I tried with HTML parameter onclick: <img src = "' + content + '" alt = "Heads" onclick = "ShowKeyboard()" height="170" width="170"/> but its not working.
Here is my code of key functions that are related to my problem.
I tried with header.addEventListener('click', ShowKeyboard) and work properly but the keyboard is displayed when you click anywhere in the header of the web page. I would however like to make the keyboard appear only when a user clicks on the image.
What am I doing wrong and what should change depending on my code?
Thank you very much for your help.

You can also try to encapsulate your img with a div with the attribute onclick="ShowKeyboard()"
Wich gives something like this
<div onclick = "ShowKeyboard()">
<img src = "' + content + '" alt ="Heads" height="170" width="170"/>
</div>

It's better to enclose your image inside a div tag. As suggested by #Lucas Duval.
This should definitely work if not please give your div an "ID" or "class" and try to handle this with JQuery.
Thanks!

in the head tag put
<script src="yourjavascriptfilepath"></script>
and should work.
or maybe try onclick="ShowKeyboard()" rather than onclick = "ShowKeyboard()"
I think that has to do something with it.

Related

How to add banner at the bottom of image with a 'x' button to close it in React/HTML?

Here is my mock-up. I'm using react on the website I'm working on, and I just want to add a banner(that is closeable) for every image that is rendered on the website. I'm new to css so I am not sure what class to use, or if I have to make my own, or how usually people implement this kind of mock-up on css.
Background info: I'm doing this because I want to make the website more accessible for the visually impaired. So the description will basically stored as alt text of the image.
The user will be uploading images so they need to be able to add alt-text for the image themselves, not the coder. So I wanted to implement some kind of mechanism for the UI to accept input for every image, and the input is the image description.The problem is I'm not sure how to code that. I need some help where/when to start with.
The ReactJS API can be found here - https://facebook.github.io/react/ (see the An Application Example) There is an example where you can add text to a page dynamically. I would recommened using that same concept. You would have to break the process down in steps.
Step 1: Declare a variable that will capture what is in the text field whenever the user inputs(types/pastes) anything.
Step 2: When the user presses "Add", call that variable with the stored name and apply it as the alt attribute of the image.
Step 3: Use jQuery to add a <div> that is positioned at the bottom of the image and has the same value of the alt attribute of the image.
If you need the actual code please do let me know.
Consider a lightweight, easy to use tool that is dedicated to making everything related to images easier to implement on a webpage (although it can work with other DOM elements as well, i. e., videos, iframes, PDFs).
FancyBox
Here is a simply example of the alt attribute of an image being used to elegantly give the image a title.
Alt Image FancyBox
Lastly, using the same tool, you can use jQuery to build up the alt name and render automatically, so you do not have to do it manually.
// fancyBox v2.0 Next of X Solution, Auto assign title to all images on page.
//www.craigwasselphotoart.com/portrait_and_event_photography/main_test.htm
//http://stackoverflow.com/questions/3216013/get-the-last-item-in-an-array
//All credit goes to JFK of fancybox.net
//Alexander Dixon 07-06-2015
$("a").each(function(index) {
var titleName = $(this).closest("a").find("img").attr("src").toString().split('/').splice(-1, 1);
var anchorIndex = "a:eq(" + index + ")";
$(anchorIndex).attr("title", titleName).attr("rel", "img_gallery");
});
$("a[rel=img_gallery]").fancybox({
helpers: {
title: {
type: 'over'
}
},
// helpers
beforeShow: function() {
this.title = 'Image ' + (this.index + 1) + ' of ' + this.group.length + (this.title ? ' - ' + this.title : '');
} // beforeShow
}); // fancybox
<link href="http://www.alexldixon.com/fancybox/jquery.fancybox.css" rel="stylesheet" />
<script src="http://www.alexldixon.com/fancybox/jquery.fancybox.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="http://fancyapps.com/fancybox/demo/1_b.jpg">
<img src="http://fancyapps.com/fancybox/demo/1_s.jpg" alt="" />
</a>
<a href="http://fancyapps.com/fancybox/demo/2_b.jpg">
<img src="http://fancyapps.com/fancybox/demo/2_s.jpg" alt="" />
</a>
jsFiddle of auto alt Names

How can I append dynamic variables to div with jquery?

I'm having some difficulty getting this to work. What I want to do is take dynamic variables from the onclick and place them into a div I am appending to another div in the document. Since each each item will have variables associated from a database query, I figured populating the buildTicket() variables from the database would be easier.
I know I'm doing something wrong. I just can't figure out what.
If you have a better way, I'm all ears.
Here is my javascript:
<script type="text/javascript">
$(document).ready(function(){
$(function() {
buildTicket = function(eventname,ticketprice,venueid,userid) {
$(".ticketbtn").click(function(){
$(".ticketwindow").append("<div class='ticket'>" + eventname + " - " + eventprice + "</div>");
});
}
});
</script>
Here is my HTML:
<div class="ticketbtn" onclick="buildTicket('Some Show','12.00','1','2');">
<img src="assets/images/tixicon.png" alt=""> <div class="eventname">Some Show</div>
<div class="ticketprice">Adult - 12.00 </div>
</div>
<div id="ticketwindow">
</div>
Can someone help me figure this out?
(sorry for the code formatting. Still trying to figure out how to use stackoverflow's forms properly.)
Thanks,
Joe
Firstly, $(function() { is equivalent to $(document).ready(function() { so you only need one of them.
Secondly, you don't need to use the onclick attribute if you are binding to click() with jQuery, or vice versa.
If you just use the onclick attribute, then you can remove your document ready handler, and your click() binding, all together and simply define the buildTicket() function.
Thirdly, the eventprice variable is misnamed in buildTicket().
Here is a working fiddle, using jQuery to bind to the click event of your button div. http://jsfiddle.net/BdJAL/
You are binding the onClick listener on click of your button.
If you must use the onClick element attribute then the following code will work although you should become familiar with the principles of Unobtrusive JavaScript.
$(document).ready(function(){
var buildTicket = function(eventname,ticketprice,venueid,userid) {
$("#ticketwindow").append("<div class='ticket'>" + eventname + " - " + eventprice + "</div>");
});
});
I quote from your question:
"I figured populating the buildTicket() variables from the database would be easier."
If you want to get hold of database data in your JavaScript how about making an HTTP request to get it. Obviously, you could do this in the normal XJAX way using XMLHttpRequest:
http://www.w3schools.com/xml/xml_http.asp
Or you could call up some server side code to produce JSON for you and reference it in a <script> tag e.g.
<script type="text/javascript" src="../js/jsonFromServerSideCode.jsp"></script>

How to add HTML after image then wrapping in a div?

In my function I would like to take an image add a dynamically created caption then wrap it all neatly in a div.
Before:
<img src="whatever" />
After:
<div class="imageBlock">
<img src="whatever" />
<span class="caption">The Caption</span>
</div>
This is what I currently have:
var imageCaption = '<span class="caption">'+array[1]+'</span>'
$(this).after(imageCaption).wrap('<div class="imageBlock '+array[0]+'" />');
This is working BUT is placing the span outside of the closing div tag.
You have to pay attention to what this actually refers to.
To get what you want just reverse the order,
var imageCaption = '<span class="caption">'+array[1]+'</span>'
$(this).wrap('<div class="imageBlock '+array[0]+'" />').after(imageCaption);
This is because your object that is being passed is the original image tag. Originally you call after on your tag so it does that correctly, but what gets returned from that call is still just the original image element, not both. So when you call wrap, you are only calling it on the original image tag. By wrapping first, the image tag becomes the child of the wrapped element, then after will insert it in the correct location.
This might be clearer,
var myImage = $(this);
myImage.after(imageCaption);
myImage.wrap('<div class="imageBlock '+array[0]+'" />');
See the problem?
try
$(document).ready(function() {
$('#x').wrap('<div class="imageBlock">');
$('<span class="caption">The Caption</span>').insertAfter($('#x'));
});​
'x' is the ID attribute value of <img src="whatever"> element
Here is a fiddle to start you off:
http://jsfiddle.net/c3nxe/

unable to load image using Javascript in IE 6

I am trying to set source for Img tag using Javascript at button click. The problem which i m facing is that the I cannot see the Image in IE 6 but it works in FireFox. I browsed and tried few solutions like load the image in page load(Document load) itself or set a timer, but nothing works consistently. This problem also not consistent so unable to find the exact solution. the code goes here-
<li> <a id="lnk1" runat="server">
<img class="each_idea_icon" alt="" runat="server" id="imgAs" idea="images" />
</a>
</li>
//on button client click
var imgAs = $('#<%=imgAs.ClientID %>');
imgAs.attr("src", "../../Common/Images/EN/ABC.png");
Can somebody tell me wat could be the issue. It works perfectly in IE. I have removed ">" or "<" so code can be visible.
by default in server side i set the image src.
I too had the same problem and the below code fixed it:
var imgAs = $('#<%=imgAs.ClientID %>');
var imgParent = img.parentNode;
imgParent.innerHTML = "<img src='/_layouts/images/minus.gif' id='" + img.id + "' alt='" + img.alt + "'></img>";
I assigned the HTML string to innerHTML of its parent element.
Hope this helps!
Try using
imgAs.setAttribute ( "src" , "../../Common/Images/EN/ABC.png" );
See
element.setAttribute
Have you tried setting it first to a blank/clear gif or image file? Sometimes it has a hard time setting the img src, if it did not have an image initially.
I beleve i know what is your problem , for some reason when u use
<img ... />
insted of
<img ..> </img>
in some cases it does not work
Try an image that is not a png, ie6 and png's never played nicely. You need some ie specific code to get them to work properly.

Changing IMG SRC with Javascript

I'm new at javascript and while there are many more complex solutions, I don't understand them and hope I don't have to at this point.
I have a main picture...
<img src="main-picture.jpg" name="Mainpic" id="image">
...and I want to be able to change this picture when I click on one of two thumbnails.
<img src="replacement1.jpg" name="pic1">
<img src="replacement2.jpg" name="pic2">
My javascript code I thought would be super easy. I'm currently using...
function FirstPic(){
document.Mainpic.src = document.pic1.src
return
}
function SecPic(){
document.Mainpic.src = document.pic2.src
return
}
Now the variable is changing however it's not staying changed. When the thumbnail is clicked on, the replacement picture flashes on the screen and then it returns to the original main-picture.jpg.
How do I make the change permanent until a different thumbnail is clicked?
Thanks!
I think it's flipping back because your page is reloading.
You need to return false from your onclick= if you don't want the href= value to activate after your onclick.
Also, you can set href="#" just in case. # goes nowhere (doesn't ever reload the page)
I think your page is refreshing by your click, change your links as :
<img src="replacement1.jpg" name="pic1">
<img src="replacement2.jpg" name="pic2">
Why not do something like this (haven't checked the syntax completly, so it could be faulty.
function FirstPic()
{
var pic1 = document.getElementById("pic1");
if (pic1 == typeof('undefined')) return;
pic1.src = "newpicname.jpg";
}
Make sure you give the tags an ID attribute called pic1 and pic2 (instead of a name attribute) and give the image itself an 'onclick' attribute...
<img onclick='FirstPic()' id='pic1' src='image1.jpg' />

Categories