I have a little issue.
I want to highlight the answer when you click on it but the .style seem not working :(
I have a part of html code like this:
<div id="answers-type1">
<ol>
<img src="" id="answer-a-img" /><li id="answer-a" ></li>
<img src="" id="answer-b-img" /><li id="answer-b" ></li>
<img src="" id="answer-c-img" /><li id="answer-c" ></li>
<img src="" id="answer-d-img" /><li id="answer-d" ></li>
</ol>
</div>
and in my script i got this:
$("#answers-type1 li").click(function() {
$(this).style = "background-color: #FFFF00;";
if ($(this).text() == goodAnswer)
{
alert("JAYJAY");
}
else
{
alert("pas JAYJAY");
}
});
the function is well called on each click but the background is not changing i don't understand why :/
I looked over internet and saw a lot of people doing like that
thanks for answers
Use this
$(this).css("background-color","#FFFF00");
instead of this
this.style = "background-color: #FFFF00;";
The style is not applied because jQuery objects don't have a style property. You can use the css method instead:
$(this).css("background-color","#FFFF00");
Alternatively, you could use the underlying element (don't pass it to jQuery):
this.style.backgroundColor = "#FFFF00";
The second example will likely be more efficient.
Fixed here: http://jsfiddle.net/RichardTowers/99Zpz/
try:
$(this).css("background-color","#FFFF00");
instead of :
$(this).style = "background-color: #FFFF00;";
Related
I want to make a simple list of images (something like a slideshow) and in the beginning only first one shows up (put display: none; on whole class and display: block on the first of type)and I have added the buttons to switch between pictures. So I have my one image showing and arrows looking good but when I press the buttons on the side I cant get it to work. I used materialize to create this but changed it and wanted to do it myself.
My code:
<div class="slider">
<div class="left">
<img class="arrow" id="arrow_left" src="imgs/arrow_left.png" alt="">
</div>
<ul class="slike_lista">
<li class="slider_image"><img class="slide_photo" src="imgs/test.jpg" alt=""></li>
<li class="slider_image"><img class="slide_slike" src="imgs/test2.jpg" alt=""></li>
<li class="slider_image"><img class="slide_slike" src="imgs/test3.jpg" alt=""></li>
</ul>
<div class="right">
<img class="arrow" id="arrow_right" src="imgs/arrow_right.png" onclick="NextImage();" alt="">
</div>
</div>
jQuery part:
var bannerImages= $(".slider_image");
var position= 0;
var numberOfImages= bannerImages.length;
function NextImage(){
if(position+1 >= brojSlika){
bannerImages[position].css('display', "none");
position= 0;
bannerImages[position].css('display', "block");
}
else{
bannerImages[position].css('display', "none");
position+= 1;
bannerImages[position].css('display', "block");
}
}
I tried with regular .toggle to do it but it didn't work and the same thing happens with .css
The error when I press the button:
Uncaught TypeError: bannerImages[position].css is not a function
The same thing with toggle or anything else. I tried to fix it but I just don't know how, I suck at javaScript...
As Taplar commented above the problem was <ajQueryObject>[#] removes the option to access jQuery methods. The solution is to use .eq(position) instead.
Here is the edited code:
var bannerImages= $(".slider_image");
var position= 0;
var numberOfImages= bannerImages.length;
function NextImage(){
if(position+1 >= brojSlika){
bannerImages.eq(position).css('display', "none");
position= 0;
bannerImages.eq(position).css('display', "block");
}
else{
bannerImages.eq(position).css('display', "none");
position+= 1;
bannerImages.eq(position).css('display', "block");
}
}
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 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.
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);
});