Lets say I have 10 with red color on my page, and they have same class which is called 'myspan'.
Here is what I want:
Click an element, and then the clicked one change its color to green.
what I did:
<script>
$(document).ready(function(){
$('.myspan').click(function(){
aaa = !aaa;
if(aaa){
$(this).css('color','green');
} else {
$(this).css('color','red');
}
});
})
</script>
This works! It almost achieve what I want. When I click one element, it changes to green successfully. But I have to click twice for another red element to make it green. I hope you guys know what I mean if you watch the code. Does anyone have any idea about how to solve the problem?
You can use .toggleClass() instead.Try this:
$(".myspan").click(function () {
$(this).toggleClass("red");
});
CSS:
.myspan{ color: green; }
.myspan.red{ color: red; }
Working Demo
You need to have a state for each span separately so instead of using a common variable you can use the .data() api like
$(document).ready(function () {
$('.myspan').click(function () {
var $this = $(this),
aaa = $this.data('aaa');
aaa = !aaa;
$this.css('color', function () {
return aaa ? 'green' : 'red';
})
$this.data('aaa', aaa);
});
})
Demo: Fiddle
I would not use any variable, as long as your script's function is going to say that simple. Better try it like this:
Javascript:
$(document).ready(function () {
$('.myspan').click(function () {
if ($(this).hasClass('color-red')) {
$(this).removeClass('color-red').addClass('color-green');
} else {
$(this).removeClass('color-green').addClass('color-red');
}
});
})
CSS:
.myspan {
}
.color-red {
color:red;
}
.color-green {
color:green;
}
Working Fiddle: http://jsfiddle.net/2729p/
This saves the need to use a state saving variable and makes it more modular.
Try below code
<script>
$(document).ready(function(){
$('.myspan').click(function(){
var colorVal = $(this).css('color');
if(colorVal === 'red'){
$(this).css('color','green');
} else {
$(this).css('color','red');
}
});
})
</script>
You would be better off using toggleClass
<span class="myspan">Test</span>
JQuery:
$('.myspan').click(function () {
$(this).toggleClass("green");
});
CSS:
.myspan{
color: red;
}
.green {
color: green
}
Example
Related
Please see https://jsfiddle.net/cot33dxa/
setInterval(function() {
if ($("#one").is(":hover")) {
$("#one").css("background-color", "red");
} else {
$("#one").css("background-color", "");
}
}, 0);
if ($("#two").is(":hover")) {
$("#two").css("background-color", "blue");
} else {
$("#two").css("background-color", "");
}
#one {
width: 200px;
height: 200px;
background-color: yellow;
}
#two {
width: 200px;
height: 200px;
background-color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="one"></div>
<div id="two"></div>
Why is it that for div one, the hover check works just fine, whereas it doesn't in div two?
I have the same issue when using if ($('#element:hover').length != 0) (taken from ivo's solution).
JS fiddle for that: https://jsfiddle.net/q8dfLc6s/
In a more general sense, I am looking for the simplest, most reliable way to know if the mouse is over a div in JQuery 1.11.0. As it stands, I can't even get the boolean check to work at all aside from this SetInterval oddity.
The problem with your fiddle is that your second check is outside of your interval function. Try this:
setInterval(function(){
if($("#one").is(":hover")) {
$("#one").css("background-color","red");
}
else {
$("#one").css("background-color","");
}
if($("#two").is(":hover")) {
$("#two").css("background-color","blue");
}
else {
$("#two").css("background-color","");
}
},0);
The scond one doesn't work because it's not inside the interval timer and that code only runs on page load therefore
Change to
setInterval(function () {
if ($("#one").is(":hover")) {
$("#one").css("background-color", "red");
} else {
$("#one").css("background-color", "");
}
if ($("#two").is(":hover")) {
$("#two").css("background-color", "blue");
} else {
$("#two").css("background-color", "");
}
}, 0);
I have no idea why you need this and don't just use hover events or hover css
DEMO
Good question! By putting your code in a setInterval you are essentially mirroring what the browser is doing in the background in the event loop.
This behavior should generally be avoided and instead replaced by an actual event.
in jQuery this would look like:
$('#element').on( 'hover', function (this, event) {
$element = this;
/*handle event*/
});
More here: https://api.jquery.com/on/
Edit: The code you are running would be best done in CSS using the :hover selector as such:
#element {
background-color: blue
}
#element:hover {
background-color: red
}
Instead of moving your code inside setInterval:
the reason why your second example 'doesnt work', is the fact that it will execute only once the page has loaded. setInterval on the other hand, executes every ~0s which 'works'.
However to achieve what you're trying to do, consider to use .hover() as it is listening for the actual event of moving the cursor in or out of the selector and will not execute your else block all of the time:
$(function() {
$("#two").hover(function() {
$("#two").css("background-color","blue");
}, function() {
$("#two").css("background-color","");
});
});
jsfiddle
I have one question about Jquery hidden fuction.
I have two different Demo from codepen.io
First DEMO css animation will working. but .wrap is not to be hidden when i click second time .note a.
Second DEMO .wrap is hidden but not with animation. I want when i click .note a for close .wrap then .wrap going to be a hidden with css animation like first DEMO.
how about this
is this what you wanted?
$(document).ready(function() {
var circle = $('.circle');
var wrap = $('.wrap');
$(".note a").click(function(e) {
e.preventDefault();
$('.wrap').is(':hidden') ? $('.wrap').show() : setTimeout(function(){$('.wrap').hide()},500);
if (wrap.hasClass('bounceInUp')) {
wrap.removeClass('bounceInUp').addClass('bounceOutDown');
}
else {
wrap.addClass('animated bounceOutDown');
wrap.removeClass('bounceOutDown').addClass('bounceInUp');
}
if (circle.hasClass('bounceInLeft')) {
circle.removeClass('bounceInLeft').addClass('bounceOutRight');
}
else {
$('.circle').addClass('animated bounceOutRight');
circle.removeClass('bounceOutRight').addClass('bounceInLeft');
}
});
});
Use a setTimeout function http://codepen.io/akshay-7/pen/gbgYvx
$('.wrap').is(':hidden') ? $('.wrap').show() : setTimeout(function(){
$('.wrap').hide();
},2000);
On hover functionality is not moving perfect. This is my code and when a mouse is placed over Details* text then whole div color changed to black. But the functionality is not working fine. I want whenever mouse is placed over details text then it should call the hover function but right now its not working fine. Any recommendations?
$('#disclaimer').hover(
function () {
$('#wrapper').addClass('hovered');
}, function () {
$('#wrapper').removeClass('hovered');
}
);
Try this :
script :
$('#disclaimer').hover(
function () {
$('#wrapper').addClass('hover');
}, function () {
$('#wrapper').removeClass('hover');
}
);
style :
.hover {
display : block;
background-color : black;
}
/* new css */
.hover #Image_Car { display: none; }
.hover #ctaBtn { display: none; }
.hover #Image_logo { display: none; }
.hover #headlineText { display: none; }
Fiddle : http://jsfiddle.net/U4EF8/7/
$("#searchput").hover(function() {
$('#wrapper').addClass("hover");
}, function() {
$('#wrapper').removeClass("hover");
});
Here is the Code :
$(document).ready(function(){
$( "#disclaimer" )
.mouseover(function() {
$('#wrapper').addClass('hovered');
})
.mouseout(function() {
$('#wrapper').removeClass('hovered');
});
});
and my html is :
<div id="wrapper"></div>
<div id="disclaimer" style="border:1px solid black;">
hello
</div>
Here is the working example : http://jsbin.com/heduqesu/2/edit , you can check in console that class is added and removed on mouse enter and mouse leave event . Hope this helps . Cheers!
did you already try this ?
$('#disclaimer').mouseenter(
function () {
$('#wrapper').addClass('hovered');
}
);
$('#disclaimer').mouseleave(
function () {
$('#wrapper').removeClass('hovered');
}
);
or with pure css
#disclaimer:hover {
//put any attribute on "hovered" class here
}
or maybe i don't understand your question enough.
I'll make some kind of filtr: replace some bad words and change background color with using JavaScript. I have this:
$(document).ready(function () {
$('body').html(function(i, v) {
return v.replace(/brzydkie/g, 'CENZURA');
});
});
but i don't know how to change background color there where I changed the bad words.
Check demo jsFiddle
jQuery
$(document).ready(function () {
$('body').html(function(i, v) {
return v.replace(/brzydkie/g, '<span style="background-color:yellow;">CENZURA</span>');
});
});
Try this one, just target with css() function
$(document).ready(function () {
$('body').html(function(i, v) {
$('body').css("background", "#eee");
return v.replace(/brzydkie/g, 'CENZURA');
});
});
Edit 1:
In this case, you don't have to change background through Javascript, but first you add a class in stylesheet, eg.
.hightlight{
background: #f00;
}
And then you add a span to the words with that class, the word will have a background automatically.
$(document).ready(function () {
$('body').html(function(i, v) {
return v.replace(/brzydkie/g, '<span class="highlight">CENZURA</span>');
});
});
Simply
document.body.style.background = COLOR_HERE;
$(document).ready(function () {
$('body').html(function(i, v) {
return v.replace(/brzydkie/g, 'CENZURA');
});
$('body').css('background','#ff0000')
});
Here you can see it working: http://jsfiddle.net/bKKu3/
CSS
.badwords { background-color:yellow; }
JS
var badwords='<span class="badwords">CENZURA</span>';
$('body').html(function(i, v) {
return v.replace(/brzydkie/g, badwords);
});
I think is what you are meaning .. ( ?) - to change the background colour of the text you have replaced ?
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.