Thanks everyone for helping me find out, that it was a ridiculous mistake. I had two versions of the html file and the version I was working with had no IDs specified for the img-tags. JQuery was right, when it told me that the IDs were undefined. What you see below does work perfectly.
I can't find a working solution on this one:
$('.iconf').live('tap', function(){
var id = $(this).attr('id');
alert (id); //this alerts "undefined"
});
There are three <img>-Tags with different IDs (attributes) which have the class "iconf". This is my HTML:
<img class="iconf" id="bad" src="img/icons/icon_rate_circle.png"/>
<img class="iconf" id="ok" src="img/icons/icon_rate_circle.png"/>
<img class="iconf" id="good" src="img/icons/icon_rate_circle.png"/>
Can you help me get this working?
I see nothing wrong with your code
http://jsfiddle.net/QpXL6/1/
JS
$('.iconf').live('tap', function(){
var id = $(this).attr('id');
alert (id);
});
HTML
<img class="iconf" id="bad" src="http://www.mricons.com/store/png/120658_38581_64_windows_icon.png"/>
<img class="iconf" id="ok" src="http://images2.wikia.nocookie.net/__cb20100620154531/en.linux/images/3/3d/Tux-icon.png"/>
<img class="iconf" id="good" src="http://www.mricons.com/store/png/120611_38534_64_apple_icon.png"/>
If you are working with mobile Safari, then the source of your problem may be the buggy jquery live implementation on that platform: http://bugs.jquery.com/ticket/5677
Try this and tell the result please:
$('img.iconf').click(function() {
var itemId = $(this).attr('id');
alert(itemId);
});
Related
I'm using onerror feature to detect broken links and replace those with an image, the problem is that in my code images that are okay are clickable.
So I want to make it in that way that when the function imageOnError is called to make that image impossible to click.
I tried to do it like this (img).unbind("click");
Lik this also: img.class = "blocked";
but it doesn't work?
<img class="img img-click not-selected " src="" onerror="return imageOnError(this);" />
countImgReplaced = 0;
function imageOnError(img) {
img.onerror = '';
img.src = 'https://dummyimage.com/256x256?text=Broken%20images%20.';
(img).unbind("click");
countImgReplaced ++;
return true;
}
And also I want to get the number of times that the image is replaced I did that with countImgReplaced , but it gives me the total number of images :/
I'm really confused. Can somebody help me?
You can apply pointer-events: none; to them via a class. You can apply that using the classList API
i.e.
img.classList.add('blocked');
You can just do this in HTML tag.
<img src="../resources/images/Image1.jpg" onerror="this.src='https://www.google.co.in/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png';this.style='pointer-events: none'" />
$(document).ready(function(){
$("img").click(function(){
alert("Valid");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="clear:both;"><lable>Click in image(Invalid img):</lable>
<img width=200px height=200px src="../resources/images/Image1.jpg" onerror="this.src='https://www.google.co.in/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png';this.style='pointer-events: none'" />
</div>
<div style="clear:both;"><lable>Click in image (Valid img):<lable>
<img width=200px height=200px src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQzltPjpuUfCzEsYbhTYTm4xab4wfmCTFoNllbU5ljLLEAb3VvJXkgpWvU" onerror="this.src='https://www.google.co.in/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png';this.style='pointer-events: none'" /></div>
Sorry if this is already asked, but i could not find my exact error. I want the image to change as i mouse over and change back as i mouse off. For some reason i get the alert messages, but the actual images do not change.
This is my J script
function altimage(){
alert("hi");
document.getelementbyid("header").innerhtml="This is good";
document.getelementbyid("homeicon").src="homelogoalt.jpg";
}
function normimage(){
alert("bye");
document.getelementbyid("homeicon").src="Homelogo.jpg";
}
and this is my div that hold the image i would like to change:
<div class="search" onmouseenter="altimage()" onmouseout="normimage()" style="width:30px;z-index:4;">
<img src="homelogo.jpg" alt="Home" class="menu" style="width:30px;height:30px;" id="homeicon">
</div>
Javascript is case-sensitive so:
document.getelementbyid = document.getElementById
innerhtml = innerHTML
Make you JS as follows:
function altimage(){
//alert("hi");
document.getElementById("header").innerHTML="This is good";
document.getElementById("homeicon").src="homelogoalt.jpg";
}
function normimage(){
//alert("bye");
document.getElementById("homeicon").src="Homelogo.jpg";
}
And you HTML should be like the following:
<div class="search" onmouseover="altimage()" onmouseout="normimage()" style="width:30px;z-index:4;">
<img src="homelogo.jpg" alt="Home" class="menu" style="width:30px;height:30px;" id="homeicon">
</div>
Hope it helps!
Thanks
I want to make the whole staff-container linked to the first href inside of it. (The one in staff-picture). How do I write this with jQuery? I'm pretty confused with attr() and I know that I have to use it.
In the following HTML, the jQuery should make staff-container linked to google.com.
<div class="staff-container">
<div class="staff">
<div class="staff-picture">
<img src="img/people/teachers/ahmed.png" />
</div>
<p><span class="bold">Mr. Ahmed</span><br />
Ext. 13417<br />
Room 417/323<br />
email#wcskids.net</p>
</div>
</div>
EDIT: Thanks to the answers I used this jQuery:
$('.staff-container').click(function() {
window.location.href = $(this).find('a').attr('href');
});
If there is no link inside staff-picture I do NOT want it to link the email. If jQuery can't find the link in staff-picture, I want the click to do nothing.
Try like this
$('.staff-container').click(function(e) {
if($(this).find('a').attr('href'))
window.location.href = $(this).find('a').attr('href');
e.preventDafault();
});
like this..??If you want specifically first anchor tag then you can give like
window.location.href = $(this).find('a').eq(0).attr('href');
Try this:
$('.staff-container').click(function() {
var $first_link = $(this).find('a').first();
window.location.href = $first_link.attr('href');
});
Pure JS version: should be a bit faster than jQuery
<script>
function link(loc){
var href=loc.getElementsByTagName('a')[0].href;
console.log(this);
console.log(href);
loc.setAttribute("onclick","window.location.href='"+href+"'");
loc.removeAttribute("onmouseover","");
}
</script>
<div class="staff-container" onmouseover="link(this)">
<div class="staff">
<div class="staff-picture">
<img src="img/people/teachers/ahmed.png" />
</div>
<p><span class="bold">Mr. Ahmed</span><br />
Ext. 13417<br />
Room 417/323<br />
email#wcskids.net</p>
</div>
</div>
Working tested
I am trying this JS code in jquery capty plugin . However the plugin needs an image to works, like:
<img id="default1" src="img/1.jpg" name="#content-target1" width="208" height="143" class="latest_img" />
Well, when i add this image the JS below didn't works. Basically what i want is just click in span and show an alert message with the content.
$('.tag_content').live('click', function(event){
var span_val = $(this).parent().children("span").html();
alert(span_val);
});
html code
<div class="images">
<img id="default1" src="img/1.jpg" name="#content-target1" width="208" height="143" class="latest_img" />
<div id="content-target1">
<span class="tag_content">Design</span>
</div>
</div>
Any idea ? thanks
The following code seems to work for me. You can try it out on jsFiddle: http://jsfiddle.net/fZSGt/4/
$('#default1').capty();
$('.tag_content').click(function() {
//var span_val = $(this).parent().children("span").html();
var span_val = $(this).html();
alert(span_val);
});
I also changed $(this).parent().children("span").html() to $(this).html() because it seems to be unnecessary for your code.
How to show/hide big image by clicking on thumbnails?
I need like this
Try with JSFiddle here http://jsfiddle.net/jitendravyas/Qhdaz/
Is it possible with CSS only. if not then jQuery solution is OK.
An is it good to use <a href=#"> even it's not opening any new page in same or new tab.
Edit:
I forgot to add. it should work on iPad too
See this example:
No preloading
HTML:
<div id="big-image">
<img src="http://lorempixel.com/400/200/sports/1/">
</div>
<div class="small-images">
<img src="http://lorempixel.com/100/50/sports/1/">
<img src="http://lorempixel.com/100/50/fashion/1/">
<img src="http://lorempixel.com/100/50/city/1/">
</div>
Javascript (jQuery)
$(function(){
$(".small-images a").click(function(e){
var href = $(this).attr("href");
$("#big-image img").attr("src", href);
e.preventDefault();
return false;
});
});
Currently only 1 big image, when clicking on an A, the href of the A is copied as SRC of the big image.
Live example: http://jsfiddle.net/Qhdaz/1/
If you wan't to do it without the extra DOM progressing, you can add 3 big images, and load them directly. The above solution does not preload the images, the below function will.
With preloading
HTML:
<div id="big-image">
<img src="http://lorempixel.com/400/200/sports/1/">
<img src="http://lorempixel.com/400/200/fashion/1/">
<img src="http://lorempixel.com/400/200/city/1/">
</div>
<div class="small-images">
<img src="http://lorempixel.com/100/50/sports/1/">
<img src="http://lorempixel.com/100/50/fashion/1/">
<img src="http://lorempixel.com/100/50/city/1/">
</div>
Javascript:
$(function(){
$("#big-image img:eq(0)").nextAll().hide();
$(".small-images img").click(function(e){
var index = $(this).index();
$("#big-image img").eq(index).show().siblings().hide();
});
});
http://jsfiddle.net/Qhdaz/2/