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.
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
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);
});
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/