I have a (simple) question : is it possible to do 2 differents actions when I click on a picture on an html page? Are there examples to explain that?
Thanks in advance
Sure that's easy.
document.getElementById("myPic").addEventListener("click", function(e){
doActionOne();
doActionTwo();
});
You can do simultaneous actions within an onclick event attached to your picture, using jQuery or plain javaScript.
In jQuery for instance, where #myImg is the id of the image:
HTML image tag:
<img id ="myImg" alt="image" src="someImg.png">
jQuery code:
https://api.jquery.com/click/
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript">
(function ($) {
$(window).load(function () {
$("#myImg").click(function () {
//Change source of the image
$(this).attr( "src", "anotherimage.png" );
// Do something else here...
});
});
})(jQuery);
</script>
Using plain javaScript:
<script type="text/javascript">
window.onload = function() {
document.getElementById('myImg').addEventListener('click', function (e) {
//Change source of the image
this.setAttribute('src', 'anotherimage.png');
// Do something else here...
});
};
</script>
Related
Can you select an image based on id using jQuery? Because when I tried it, it didn't work. Is this the correct way? Thanks
$(document).ready(function () {
$("#imageID").click(function (){
$("#imageID").addClass("className");
});
});
This could be happening because the element is not inside the DOM when you bind the event. Then you could try to bind with jquery using on function and binding the event to body for instance:
$(document).ready(function () {
$("body").on("click", "#imageID", function (){
$(e.target).addClass("className");
});
});
First, check duplicate id's.
Better way:
$(document).ready(function () {
$("#imageID").on('click', function (){
$(this).addClass("className");
});
});
Also, it add new classname only to clicked image, not to all images, so this is right way.
Your problem may occures because you have thow or more tags with #imageID id.
So, more better way is using js-* classes:
<img src="/images/img.png" class="js-my-image" alt="">
Code:
$(document).ready(function () {
$(".js-my-image").on('click', function (){
$(this).addClass("className");
});
});
If image is added after page loads, right code:
$(document).ready(function () {
$(document).on('click', '.js-my-image', function (){
$(this).addClass("className");
});
});
or
$(document).ready(function () {
$(".js-my-image").live('click', function (){
$(this).addClass("className");
});
});
I can create Jquery functions, but what if you want more functions.
For example say I wanted to have a function for a drop down list AND a button.
I can only seem to do one function:
<script type="text/javascript">
$(document).ready(function() {
$("button").click(function() {
this.hide();
});
});
</script>
<script type="text/javascript">
$(document).ready(function() {
$("banner").click(function() {
this.fadeTo();
});
});
</script>
Is this right on how to create multiple functions in one document or is there an easier way to create them?
Can you show me how to create multiple ones instead of one?
Both functions can go inside the same document ready function:
<script type="text/javascript">
$(document).ready(function() {
$("button").click(function() {
$(this).hide();
});
$("banner").click(function()
$(this).fadeTo();
});
});
</script>
However, the selector $("banner") is invalid, if you're targeting a class of banner it should be $(".banner"), ID would be $("#banner")
You should rather use single document ready event and then wrap the two methods in it.
You would need to use class selector as element have class banner in it.also double quote is missing at the end of this selector
:
$(document).ready(function() {
$("button").click(function() {
$(this).hide();
});
$(".banner").click(function() {
$(this).fadeTo();
});
});
You can put them in the same $(document).ready function - you don't need a new document ready for each event listener.
<script type="text/javascript">
$(document).ready(function() {
$("button").click(function() {
$(this).hide();
});
$("banner).click(function() {
$(this).fadeTo();
});
});
</script>
Also your $("banner") selector is invalid - take a look at the jQuery Selectors documentation here: https://api.jquery.com/category/selectors/
you only require one $(document).ready(function () {})
<script type="text/javascript">
$(document).ready(function () {
$("button").click(function () {
$(this).hide();
});
$("banner").click(function () {
$(this).fadeTo();
});
});
</script>
Combine both and change $("banner) to $(".banner"):
$(document).ready(function() {
$("button").click(function() {
$(this).hide();
});
$(".banner").click(function()
$(this).fadeTo();
});
});
concat button & banner click code in $(document).ready:
<script type="text/javascript">
$(document).ready(function() {
$("button").click(function() {
$(this).hide();
});
$("banner").click(function() {
$(this).fadeTo();
});
});
</script>
If you are going to use the code several time it is fairly easy to write a function that hides a certain element. Then you just have to call the function with a parameter(the value of your DOM.
function hideElement(value)
{
$('' + value +' ').click(function() {
$(this).fadeTo();
});
$(document).ready(function() {
hidedElement(banner);
hideElement(button);
});
I'm trying to load an external page and insert it in my HTML. Here is my code :
$(document).ready( function() {
$("#idButton").click( function() {
$(":mobile-pagecontainer").pagecontainer("load","file:///url/to/my/HTMLFILE");
$(document).ready( function() {
$(":mobile-pagecontainer").pagecontainer("change","#pageID");
});
});
});
When I execute it, I need to press the button twice before it change my page. How can I fix this ?
Thanks !
you have wrong syntax. Please check if this works for you.
$(document).ready( function() {
$("#idButton").click( function() {
$(":mobile-pagecontainer").pagecontainer("load","file:///url/to/my/HTMLFILE");
$(":mobile-pagecontainer").pagecontainer("change","#pageID");
});
});
I know how to implement clickable background on current page using css and js.
I'm placing image with top center background position and making it clickable by following js:
<script type='text/javascript'>
$(function () {
$('body').bind('click', function (evt) {
if(evt.target == $('body')[0]) {
window.open('http://goto.com');
}
});
});
</script>
Now I would like to make one step forward and implement such an advertisement only with JS without changing any of my css styles. I know that its possible because many ad agencies are using something like this:
<script language='Javascript' src='//adserver.com/view.php?ad=123'></script>
You can update the style of an element easily with jQuery. Example:
$('body').css({ background-image: 'url(/img.png)' });
So, your code should be something like:
<script type='text/javascript'>
$(function () {
$('body').css( { /* SET YOUR CSS MODIFICATIONS HERE */ } );
$('body').bind('click', function (evt) {
if(evt.target == $('body')[0]) {
window.open('http://goto.com');
}
});
});
</script>
The following way of loading a page in a div via clicking a link works with all browsers but with Safari.
Can anyone please give me a clue on what is Safari choking on?
Thanks a lot!
<script type="text/javascript">
$(document).ready(function(){
$("#fs").click(function(eventt){
$("#adiv").html('<div id="destiny"></div>');
fs();
});
})
function fs() {
$("#destiny").load("mypage.php", {}, function(){ });
}
</script>
Click me
<div id="adiv"></div>
I think it would work better when you replace .html with below code
.ajaxComplete(function(event, XMLHttpRequest, ajaxOptions) {
});
Old code
<script type="text/javascript">
$(document).ready(function(){
$("#fs").click(function(event){
$("#content").html('<div id="content"></div>');
fs();
});
})
function Diensten() {
$("#content").load("test.php", {}, function(){ });
}
</script>
New Code
<script type="text/javascript">
$(document).ready(function(){
$("#Diensten").click(function(event){
$("#content").ajaxComplete(function(event, XMLHttpRequest, ajaxOptions) {
});('<div id="content"></div>');
Diensten();
});
})
function Diensten() {
$("#content").load("diensten.php", {}, function(){ });
}
</script>
Have you tried simplifying your code to
$(document).ready(function(){
$("#fs").click(fs);
function fs() {
$("#adiv").html('<div id="destiny"></div>');
$("#destiny").load("mypage.php");
}
});