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');
});
});
});
Related
How can I store events triggered in DOM. Suppose I have one div. I want to change the color of div when I mouseover on it. Again change the color of div to previous color after mouseout. Again, change color when I click on div showing as active.
My code are as follows:
$(document).on("mouseover", ".imgpayment", function(){
$(this).parent().css("background","#89C4F4");
});
$(document).on("mouseout", ".imgpayment", function(){
$(this).parent().css("background","none");
});
$(document).on("click", ".imgpayment", function(){
$(this).parent().css("background","#59ABE3");
$(this).parent().find(".the-terms").prop('checked', true);
$("#submitBtn").removeAttr("disabled");
});
The problem is that:
How can I know that click events has already been triggered in div so that mouseout events doesn't trigger because it changes the color to default and I can't show that div is clicked and active.
You should not use css method for style manipulation. You can see why - it's very inconvenient in inflexible. There will be no problem if you toggle classes.
$(document).on("mouseover", ".imgpayment", function () {
$(this).parent().addClass('active');
});
$(document).on("mouseout", ".imgpayment", function () {
$(this).parent().removeClass('active');
});
$(document).on("click", ".imgpayment", function () {
$(this).parent().toggleClass('selected');
$(this).parent().find(".the-terms").prop('checked', true);
$("#submitBtn").removeAttr("disabled");
});
.active {
background: #89C4F4;
}
.selected {
background: #59ABE3;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<div class="imgpayment">TEST <small>Hover to highlight, click to select</small></div>
</div>
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.
I would like to add/remove a new div when the corresponding checkbox is checked/unchecked with jQuery. Here's my attempt:
<script type="text/javascript">
$(function() {
$("#form1 :checkbox#checkbox1").click(function() {
var d = document.createElement('div');
if ($(this).is(":checked")) {
$(d).addClass("newdiv")
.html("This is a new div")
.appendTo($("#mydiv"))
.hide()
.fadeIn(1000);
}
else {
//$(".newdiv").fadeOut(1000);
$(d).fadeOut(1000);
}
});
});
</script>
The fadeIn process comes out smoothly. But when I tried to fadeOut $(d) using the same methodology, it didn't work: the new generated div remained on the page. I did some research and get a work around, with $(".newdiv").fadeOut(1000); (commented in the code above), but that's not the best solution for me I think. And also I really want to know why my first attempt didn't work. Any suggestions? Thanks.
There are few changes you can make
1. No need for the selector #form1 :checkbox#checkbox1 since you have an id for the checkbox, you can just use #checkbox1
2. Create the div using jQuery instead of using createElement $('<div/>')
3. After fading out the div you need to remove it from the dom
$(function() {
$("#checkbox1").click(function() {
if ($(this).is(":checked")) {
$('<div/>').addClass("newdiv")
.html("This is a new div")
.appendTo($("#mydiv"))
.hide()
.fadeIn(1000);
}
else {
$('#mydiv .newdiv').fadeOut(function(){
$(this).remove()
})
}
});
});
Demo: Fiddle
Another solution is to have a static div which will be shown and hidden
$(function() {
var div = $('<div/>').addClass("newdiv")
.html("This is a new div")
.appendTo($("#mydiv"))
.hide();
$("#checkbox1").click(function() {
if ($(this).is(":checked")) {
div.fadeIn(1000);
} else {
div.fadeOut(1000)
}
});
});
Demo: Fiddle
jsFiddle Demo
Every time your click handler runs, you're creating a new variable d with a new element. Instead, do that before the click handler, so each instance will reference the same element. I have included other optional improvements below.
A change event is more appropriate for checkboxes. Also, notice I made your selector just #checkbox1, since that is already unambiguous and maximally specific.
To get a better visual effect, don't add the element, hide it, then fade it in. In most browsers that will show the element flicker before it appears. Instead, use a class to hide it with css: .hidden {display: none;}. You can also use fadeToggle to toggle the visibility, instead of doing if/else. clearQueue removes extra events for multiple clicks during a transition, and makes transitions appear smoother.
Finally, use jQuery to create the element:
$(function () {
var $d = $('<div>', {
"class": "hidden",
text: "This is a new div"
}).appendTo("#mydiv");
$("#checkbox1").change(function () {
$d.clearQueue()
.stop()
.fadeToggle(1000);
});
});
You better make d a jQuery object.
<script type="text/javascript">
$(function() {
$("#checkbox1").click(function() {
var d = $('<div class="newdiv"></div>');
if ($(this).is(":checked")) {
d.html("This is a new div")
.appendTo($("#mydiv"))
.hide()
.fadeIn(1000);
}
else {
d.fadeOut(1000);
}
});
});
</script>
i have look around this forum a lot and can only find the opposite to my question, in other words i am looking to find how to change the parent div's background when the child div is hovered over, i can only find how to change the child div, when the parent is hovered over.
I have 1 parent div with an inner submit button:
<div class="ugd_ele_normal_base">
<input name="ugd_1" type="submit" class="ugd_ele_normal"/>
</div><!--end ugd_ele_normal_base-->
What i want is for when the submit button is hovered over, the parent css changes background.
I have tried a few things, but nothing seems to work.
Thanks for the help
I would use jQuery & CSS for this:
CSS
.black {
background-color: #000000;
}
jQuery
$(function() {
$('.ugd_ele_normal').hover( function(){
$(this).parent().addClass("black");
},
function(){
$(this).parent().removeClass("black");
});
});
$('input.ugd_ele_normal').on({
mouseenter: function() {
$(this).parent().css('background', 'url(/folder/image1.jpg)');
},
mouseleave: function() {
$(this).parent().css('background', 'url(/folder/image2.jpg)');
}
});
or short(er) version:
$('input.ugd_ele_normal').on('mouseenter mouseleave', function(e) {
$(this).parent()
.css('background-color', e.type=='mouseenter'?'url(/folder/image1.jpg)':'url(/folder/image2.jpg)');
});
and to retrieve the old image:
var bgImg = $('input.ugd_ele_normal').css('background-image'),
hvImg = 'url(/folder/image2.jpg)';
$('input.ugd_ele_normal').on('mouseenter mouseleave', function(e) {
$(this).parent()
.css('background-image', e.type=='mouseenter'?hvImg:bgImg);
});
or use classes:
.hoverClass {background: url(/folder/image2.jpg);}
-
$('input.ugd_ele_normal').on('mouseenter mouseleave', function() {
$(this).toggleClass('hoverClass');
});
You can do this way.
$("#ugd_1").hover(function(){
$(this).parent().css("background","red");
},
function(){
$(this).parent().css("background","none");
});
Live Demo :
http://jsfiddle.net/Z4QDC/2/
i would define some jquery to do this, and use a custom class.
//when the document is loaded, execute the following code
$(document).read(function(){
//on this elements hover, ...
$('.ugd_ele_normal').hover( function(){
//we add the class black to the parent on hover
$(this).parent().addClass("black");
},
function(){
//and remove it on exit hover.
$(this).parent().removeClass("black");
});
});
can be seen in action here:
http://jsfiddle.net/xBuyC/
Try:
$('input[name="ugd_1"]').hover(function() {
$(this).parent().css('background-color', 'COLOR');
});
Hope it helps.
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'); });