I have replicated my issue in jsfiddle: http://jsfiddle.net/66UCX/
All I want to do is toggle between red and white when the user clicks on the td in a table. I have tried using an if statement to test for the background colour like so :
if($("#fbodytd_"+uid+"_"+row+"_"+col).css("background-color") == "rgb(255, 0, 0)"){
and that didn't work so I have tried adding and removing a class called 'active' and testing for that. Thanks.
You didn't make any binding on your function function changecream(uid, row, col).
Here is a working Fiddle:
$("table").on("click", "td", function(){
if($(this).hasClass("red")){
$(this).removeClass("red").addClass("white");
} else {
$(this).removeClass("white").addClass("red");
}
});
Edit:
Of yourse if you are only toggling between background color and a chosen color, you could simplify the "on click":
$(this).toggleClass("red");
You have to include jquery library
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js" type="text/javascript"></script>
and your code look like this in $(document).ready function
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
$('#button').bind('click', function(){
$(this).after('<span> click is active</span>');
$('span').fadeOut(1000);
});
$('#toggle').toggle(
function(){
$(this).text('rebind').removeClass('unbind').addClass('rebind');
},
function(){
$(this).text('unbind').addClass('unbind').removeClass('rebind');
}
);
if($("#toggle").hasClass("unbind")) {
$('#button').bind('click');
}
else {
$('#button').unbind('click');
}
});
</script>
If all you want is to simply change the background back and fourth (and maybe something else also). Add class like
.active
{
background-color: Red
}
and use a code like so:
$("table").on("click", "td", function() {
$(this).toggleClass("active");
});
Hope this helps.
If you are using jQuery anyway, the following simplified version should do:
$('table.bodymap td').click(function () {
$(this).toggleClass('active')
});
See this fiddle for a working example.
Related
As i have dynamic added content i need to use "document" as the selector for my event.
$(document).hover(function(){
//Do something
}
Now i'd like to know if i can also use a class as a selector?
I tried:
$(document).hover('.liDoc', function(){
$(this).children('.delDoc').css('color', 'red'); console.log($(this).children('.delDoc'))
}, function() {
// on mouseout, reset the background colour
$(this).children('.delDoc').css('color', '');
});
This one don't work! It seems like whole document is target.
When using .on() i can do it like this...but .on('hover')is deprecated?!
You need to delegate mouseenter/mouseleave events and filter by type event, e.g:
$(document).on('mouseenter mouseleave', '.liDoc', function(e) {
$(this).children('.delDoc').css('color', e.type === "mouseenter" ? 'red' : '');
});
But you would have better to toggle a class instead:
$(document).on('mouseenter mouseleave', '.liDoc', function(e) {
$(this).children('.delDoc').toggleClass('colored');
});
with in CSS:
.delDoc.colored {
color: red;
}
OR just use CSS if your use-case is simple as the one you posted:
.liDoc:hover > .delDoc {
color: red;
}
please try below code
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("p").hover(function(){
$(this).css("background-color", "yellow");
}, function(){
$(this).css("background-color", "pink");
});
});
</script>
</head>
<body>
<p>Hover the mouse pointer over this paragraph.</p>
</body>
</html>
You can use the class name as the selector directly.
Of course, you need to import the jQuery library first for this to work.
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min"></script>
If you already downloaded the jQuery library (recommended) then the "src" value should lead to the file. If not, you can reference it directly with the URL above.
And now, your jQuery codes
<script>
$(document).ready(function(){
$(".liDoc").hover(function(){
//mouse is in.. Do something
$(this).children(".delDoc").css("background","red");
}, function(){
//mouse is out.. Do something
$(this).children(".delDoc").css("background","transparent");
});
});
</script>
I want to change the CSS for the element btn1 (its a button) while its active.
I want to look different as long as "story" is shown (when pressed shows a div, as long as the div is shown i want the button to have a different color from the normal css)
$(function() {
$('#btn1').on('click', function() {
$('#story').fadeToggle(400);
});
});
$('#btn1').on('click', function() {
$(this).toggleClass('active'); // add/remove a css class
$('#story').fadeToggle(400);
});
in your css add
.active{
// styles you wish to apply
}
Try .css() method:
$('#btn1').on('click', function() {
$(this).css({'border':'1px solid blue', 'color':'red'});
$('#story').fadeToggle(400);
});
Working Example
:active selector https://developer.mozilla.org/en-US/docs/Web/CSS/:active
and look on this site http://www.paulund.co.uk/css3-buttons-with-pseudo-classes
It sounds like you want to do this:
$(function() {
$('#btn1').on('click', function() {
$(this).css('background-color','red'); // or whatever
$('#story').fadeToggle(400, function() { // 'complete' callback function
$('#btn1').css('background-color','white');
});
});
});
I’m trying to change the class of an element when it is clicked on from one value A to value B and then from value B back to value A when it is clicked a second time. I found some code on here that allowed me to change it once, but not a second time. (See original here).
Here is the original code:
<script type="text/javascript">
function changeClass() {
document.getElementById("MyElement").className += " MyClass";
document.getElementById("MyElement").className = document.getElementById("MyElement").className.replace(/(?:^|\s)MyClass(?!\S)/g, '')
}
</script>
And here is my code:
<script type="text/javascript">
function changeClass() {
if (document.getElementByID("arrow").className == "arrowdown") {
document.getElementById("arrow").className.replace(/(?:^|\s)arrowdown(?!\S)/g, 'arrowup')
}
elseif(document.getElementByID("arrow").className == "arrowup") {
document.getElementById("arrow").className.replace(/(?:^|\s)arrowup(?!\S)/g, 'arrowdown')
}
}
</script>
$('#arrow').toggleClass('arrowup arrowdown');
Why not simply use jQuery toggleClass instead along with a id selector?
$('#arrow').toggleClass('arrowup');
$('#arrow').toggleClass('arrowdown');
And save yourself debugging and a few lines of code!
Check this FIDDLE
Its far easier with JQuery..
$(function() {
var i = 0;
$('div').on('click', function() {
i++;
if( i % 2 == 0){
$(this).addClass('arrowup').removeClass('arrowdown');
}
else{
$(this).addClass('arrowdown').removeClass('arrowup');
}
});
});
just use jquery addClass() and removeClass() or even better the toggleClass inside your click event
<div id="elemID" class="class1">
</div>
function changeClass()
{
$("#elemID").toggleClass("class1");
$("#elemID").toggleClass("class2");
}
REF's
http://api.jquery.com/addClass/
http://api.jquery.com/removeClass/
http://api.jquery.com/toggleClass/
Cheers
I faced something similar to this today. In my code for each feature the user would express his opinion by pressing thumbs up or thumbs down. The selected thumb icon would have a brighter color, so when the user would click the thumbs up icon, the thumbs up icon would turn green and the thumbs down icon (if it were green) would turn black.
I solved it using jQuery:
$(document).ready(function () {
$('#vote-yes-#(Model.ProductReviewId)').click(function () {
setProductReviewHelpfulness#(Model.ProductReviewId)('true');
$('#1vote-yes-#(Model.ProductReviewId)').toggleClass('green');
$('#1vote-no-#(Model.ProductReviewId)').removeClass('green').addClass('black');
});
$('#vote-no-#(Model.ProductReviewId)').click(function () {
setProductReviewHelpfulness#(Model.ProductReviewId)('false');
$('#1vote-no-#(Model.ProductReviewId)').toggleClass('green');
$('#1vote-yes-#(Model.ProductReviewId)').removeClass('green').addClass('black');
});
});
i am using jquery for set background color to the table data and its working fine but i need when user again click the td the color should be deselect. its my script for add color.
java script:
jQuery('td').click(function () { $(this).addClass('active'); });
my css class:
.active{background-color:red;}
when user again click the td the class should remove. How to achieve this.
jQuery('td').click(function () { $(this).toggleClass('active'); });
toggleClass adds if it doesn't exist or removes if it does exist.
You can use
$(this).removeClass('active');
although you would need to do a check to see if it is already active, which would make your code look like this:
jQuery('td').click(function () {
if($(this).hasClass('active') {
$(this).removeClass('active');
} else {
$(this).addClass('active');
}
});
EDIT:
#Justice is more correct:
jQuery('td').click(function () { $(this).toggleClass('active'); });
I am having problem with the following line:
document.getElementById("giftcard").getElementsByTagName("label").style.backgroundImage ="url(giftcard_icon-d.jpg)";
I am trying to change background image after clicking a label.
I do have 5 labels in a page, but when i click on label, the background should change it. Other labels should be reset to use this giftcard_icon-d.jpg image as their background.
How can I fix this?
$(document).ready(function() {
$('#giftcard label').click(function() {
document.getElementById("giftcard").getElementsByTagName("label").style.backgroundImage ="url(giftcard_icon-d.jpg)";
this.style.backgroundImage ="url(giftcard_icon-a.jpg)";
});
If you're using jQuery, this ought to do the trick:
$(document).ready(function() {
$('#giftcard label').click(function() {
$("#giftcard label").css("background-image", "url(giftcard_icon-a.jpg)");
});
});
But it also depends on whether the ID is correct, a label is present and that the image URL is valid.
For multiple label's you should be OK with a selector:
$("#giftcard > label").css("background-image", "url(giftcard_icon-a.jpg)");
To update after concluding exactly what it was you wanted:
$('#giftcard label').click(function() {
$("#giftcard label").css("background-image", "url(giftcard_icon-d.jpg)");
$(this).css("background-image", "url(giftcard_icon-a.jpg)");
});
Firstly your mixing vanilla javascript and jquery here, seems a bit silly. If you want to alter the other labels to "reset" them you can do something like this:
$(document).ready(function() {
$('#giftcard').delegate('label', 'click', function() {
$(this).css('background', 'url(giftcard_icon-d.jpg)');
$('#giftcard > label').not(this)
.css('background', 'url(giftcard_icon-a.jpg)');
});
});
fiddle: http://jsfiddle.net/garreh/GUFtx/
If I understood it correctly this should do the trick
$(function() {
$('#giftcard label').click(function() {
$('#giftcard label').css("background-image", "url(giftcard_icon-d.jpg)");
$(this).css("background-image", "url(giftcard_icon-a.jpg)");
});
});
working sample
http://jsfiddle.net/FvNdR/