function fader(){
$('#numbers').animate({backgroundColor: '#FFFFFF'}, 900);
}
HTML
<div id="numbers" style="background-color: blue; width:200px;" onclick="fader()">1234567890</div>
The code above changes the background color of the div from blue to white on click event. But it works for the first click only.
How to change the color every time I click on the div?
You need to make it blue again!
function fader()
{
$('#numbers')
.css('background-color', '#FF0000')
.animate({
backgroundColor: '#FFFFFF'
}, 900);
}
Try setting the background-color using a separate CSS style rather than using inline CSS.
Related
I wanted to have one element highlight either when it gets hovered, or some other element is also hovered. Yet the code i've written to achieve this seems to override the hover pseudo-class whenever it gets run. I can't seem to see why -- minimal example in this fiddle: https://jsfiddle.net/mLynfz3x/
As soon as the second element gets hovered, the hover pseudo class for the first one is removed, and I'm not sure why. Is it intended that the jQuery .css() function override pseudo-classes? Or is the issue something else that I've missed entirely
Thank you!
The set Color for the Element Testlink doesnt disable the hover-pseudo class, the fixed color for that element is just, lets say "higher priority". So all you gotta do to fix it is add:
#testLink:hover {
color: olive !important;
}
and it should work with your existing JQuery.
This is what I did
$("#aTestItem").hover(() => {
$("#testLink").css("color", "olive");
}, () => {
$("#testLink").css("color", "black");
});
$("#testLink").hover(() => {
$("#testLink").css("color", "olive");
}, () => {
$("#testLink").css("color", "black");
});
Here is the image which says it all. I am trying to set the text color for the disabled button from #EEEEEE to black, but I cant seem to locate it via css. Any help will be greatly appriciated.
I added the line to color * to #EEEEEE, so I dont want to override that just change the color if the button is disabled.
Use CSS Cascading. Something like this:
.dijitButtonDisabled .dijitButtonNode .dijitButtonText{
color: #000;
}
With the assumption that memberDetailsBtnBar is root of the element tree shown in the image, the above rule will override your rule only if the button is in disabled state.
Use the following CSS
.dijitButtonDisabled .dijitButtonText{
color: black;
}
Live example: https://jsfiddle.net/Lzrzoor5/1/
require(["dijit/form/Button", "dojo/dom", "dojo/domReady!"], function(Button, dom){
// Create a button programmatically:
var myButton = new Button({
label: "Click me!",
disabled: true,
style: 'color: red'
}, "progButtonNode").startup();
});
I want to have a div that is set to transition in height when the button inside it has been clicked & transition back down when the button is clicked again.
It has a child div that has a delayed transition in height after the button has been clicked. I've tried it with hover but how can I accomplish that with the click event?
Also, after both divs are at their full height, how can I make the child div transition back down before the parent div does?
If you can do it with :hover, and want to do it with a click event, use the selector :active - its the proper CSS selector for click events.
If you want it to change actions based on a button click, you might have to use javascript, as I don't know any way to do this with pure css. I've included code in a fiddle I found and modified for you.
JS Fiddle demo
$(document).ready(function() {
var $dscr = $('.description'),
$switch = $('.toggle-link'),
$initHeight = 40; // Initial height
$dscr.each(function() {
$.data(this, "realHeight", $(this).height()); // Create new property realHeight
}).css({ overflow: "hidden", height: $initHeight + 'px' });
$switch.toggle(function() {
$dscr.animate({ height: $dscr.data("realHeight") }, 600);
$switch.html("<button>-</button>");
}, function() {
$dscr.animate({ height: $initHeight}, 600);
$switch.html("<button>+</button>");
});
});
Refer to this fiddle Please.
What I am trying to do is on hovering on a-tag inside #menu ul li, the background-color color of #header-bottom must also changed as of similar to background-color of the a-tag.
How can I achieve this?
UPDATE
Done this with CSS only yippie! :) Here is the fiddle
Here is a jQuery method (sorry too much effort to make this javascript only for me). It could be translated though.
http://jsfiddle.net/PCbVs/9/
$('.menu').hover(
function() {
var color = $(this).css('borderLeftColor');
console.log(color);
$('#header-bottom').css('backgroundColor', color);
}, function() {
});
Or with jQuery UI animated style transitions.
http://jsfiddle.net/PCbVs/10/
$('.menu').hover(
function() {
var color = $(this).css('borderLeftColor');
console.log(color);
$('#header-bottom').stop().animate({ backgroundColor: color }, 500);
}, function() {
});
i am using toggle buttons in my application, i would like to set the backgound-color when the button is pressed.
how can i know what is the proper attribute?
and in general is there any place that i can know which CSS attribute has which effect on the HTML element?
If you are using GWT ToggleButton, then you may
import com.google.gwt.user.client.ui.ToggleButton;
final ToggleButton tb = new ToggleButton( "my button text" );
if (tb.isDown()) {
tb.addStyleName("pressed"); // or tb.setStyleName("pressed");
}
and in your css file:
.pressed { background-color: blue; } /* any color you want */
Another way - to change just background of this given button:
tb.getElement().getStyle().setProperty("background", "green");
I know GWT is similar to jQuery, but I've never used it... with jQuery I'd do this (I wasn't sure what kind of button tag you were using, so I included both):
CSS
input, button {
background-color: #555;
color: #ddd;
}
.clicked {
background-color: #f80;
}
HTML
<button type="button">Click Me</button>
<input type="button" value="Click Me" />
Script
$(document).ready(function(){
$('button, :button')
.mousedown(function(){ $(this).addClass('clicked') })
.mouseup(function(){ $(this).removeClass('clicked') })
.mouseout(function(){ $(this).removeClass('clicked') });
})
and in general is there any place that i can know which css atribute has which effect on the HTML element?
Yes, http://www.w3schools.com/css/ has most of what you will probably need. Check the left column for the CSS-property you're looking for.
Regarding your first question, I you can just use the btn:active, btn:hover, btn:visited properties. (i.e. your button has the class/id 'btn'.)
Good luck