Apply CSS to disabled button - javascript

I want to view disabled button as:
The one marked with red is a disabled button and the green one is enabled.
I am trying to apply CSS to do the same as follows:
$(document).ready(function () {
$('#btnSearch').attr("disabled", true);
$("#btnSearch").css({ 'background': "#grey" });
});
But its not showing up as mentioned in the image.
Its looking for me like this:
Which CSS attribute do I need to use for disabled buttons as above (marked in red)?
JSFIDDLE:
http://jsfiddle.net/54qJx/

Try out with prop()
$(document).ready(function () {
$('#btnSearch').prop("disabled", true);
$("#btnSearch").css({ 'background': "gray" });
});
#BearGrylls
Check this updated fiddle demo, its working as per your requirement.

css function should be like this to work.
$(document).ready(function () {
$('#btnSearch').prop("disabled", true);
$("#btnSearch").css('background-color','grey');
});
You can also use attr, but I prefer prop
$(document).ready(function () {
$('#btnSearch').attr("disabled", true);
$("#btnSearch").css('background-color','#ccc');
});

you can simply disable a button by this
$('#btnSearch').prop('disabled', true);
also change the background color with
$('#btnSearch').css('background-color', 'gray');
check the .css() API for usage.
btw when using color name like gray, you don't need to put a '#' ahead of the name, that's why your setting of background color doesn't work.

You can use opacity css for graying out disabled button :
$('#btnSearch').prop('disabled',true).css('opacity','0.5');
Working Demo

You can use the CSS3 :disabled selector, if you want to style it with CSS instead of Javascript:
#btnSearch:disabled {
background-color: grey !important;
}
edit:
Your problem is, that your button is styled with an inline style-tag. It's generally a bad idea to use these, as it makes maintaining larger pages a nightmare. Read this article for more information: Best Practices: Avoid Inline Styles for CSS.
See this fiddle for an example of how to do it anyways. What I'm doing here is using this trick to override the inline style properties.

Setting the background color won't grey won't make the button look like the two you have circled, as it looks like there is more CSS at work then simply setting the background to grey.
you can use
$("#btnSearch").css({ "element": "new value" });
But you might need to call it 4 or 5 times to get the desired effect with different elements.
Otherwise you can use
$("#btnSearch").addClass("disabled")
where disabled is a CSS class you've created with the correct styling (background grey, text colour darker etc). At a guess the two red circled buttons have had a class added to them to make them look disabled, so you can just add that class to the button you want to disable.

if you want to use "#" with color. than you must use color HEX value not the name

Error in line $("#btnSearch").css({ 'background': "#gray" });
Try this
Your Button
<button id="btnSearch" onclick="TeacherData_OnSearch()" style="background-color: #249FDA; color: white; height: 22px; width: 45px; border-radius: 4px;">Search</button>
Script
$(document).ready(function () {
$('#btnSearch').attr("disabled", true);
$('#btnSearch').css("background-color", '');
$("#btnSearch").css({
'background-color': "grey"
});
})
DEMO

set a css class
.bg1 {background:#ddd}
then add it on button
$(document).ready(function () {
$('#btnSearch').attr("disabled", true);
$("#btnSearch").addClass("bg1");
});

Related

Animating the color of document's body using jQuery not working

I'm trying to animate the color of the body of the page using jQuery:
Here is the code I've tried but it doesn't work and nothing changes at all?!
$(document.body).animate({ backgroundColor: '#32a852' }, 1500);
Am I missing something?
I tried to just change the body like this and it works fine:
$(document.body).css("background-color", "yellow");
Quoting from https://api.jquery.com/animate/ :
"All animated properties should be animated to a single numeric value, except as noted below; most properties that are non-numeric cannot be animated using basic jQuery functionality (For example, width, height, or left can be animated but background-color cannot be, unless the jQuery.Color plugin is used)."
So seems like you need to use JQuery.Color plugin.
This works, I dont know what you are doing wrong
try this
$("body").animate({ backgroundColor: '#32a852' }, 1500);

use setattribute to change color (in chat)

I want to change the chat window fontcolor/fontsize of the page younow. I tried 2 'cssText' samples but I'm unable to change the font color to RED. How can I change the chat window font color to RED? I'm using Firefox and greasemonkey.
sample 1:
document.getElementById("chatcomments").style.cssText = 'font-size: 36px; color: red !important;'
sample 2:
document.querySelector(".chatcomments span").style.cssText = 'font-size: 36px; color: red !important;'
click to see the chatimage
you need to be specific with the attributes of the style object:
document.getElementById("chatcomments").style.color = "red";
document.getElementById("chatcomments").style.fontSize = "30px";
If you use JQuery, you can use the css function, like so:
$(".chatcomments > span").css("color", "red");
You do not need to set font-size again if it already has been set. Another issue is that .chatcomments span won't work as they're two different things; instead, > will work: .chatcomments > span.
It is also better to use RGB or hexadecimal values instead of colour names, for example:
$(".chatcomments > span").css("color", "#EE4B38"); //RGB
$(".chatcomments > span").css("color", "rgb(238, 75, 56)"); //Hex
In the case that you're trying to create a custom client-side script in Tampermonkey or Greasemonkey (it looks like you are), you must use // #require to import the JQuery source (as seen in this answer):
// #require http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js
el.style.setProperty('color', 'red'); seems more right

Grey out form button on touch start

I have a input of type 'button' with a background and was wondering how I would grey out the background through javascript. The css for it looks like this:
background:url(../img/cameraPic.png) no-repeat center;
When someone touches it I want it to respond by greying out while it's being held down. The skeleton for such a function would look like this but I'm not sure how to change the color when it has background.
$("#myButton").bind('touchstart', function(e){
//...What to put here?
});
Does anybody have any ideas? Should I use a grayscale() css property or just make a new image and replace the background with the new image every time its being pressed?
Something like this? Example
$("button").bind('touchstart', function(e){
e.preventDefault();
$(this).css({
'background-color':'grey',
opacity:0.3
});
});
$("button").bind('touchend', function(e){
$(this).css({
'background-color':'transparent',
opacity:1
});
});

jquery .hover() confusion

I am currently programming my portfolio page and I came across a strange behaviour off hover states that I don't understand.
I have some links in a navigation bar at the top of my page. The links are fully defined with :hover and everything. Now I also want the colour of the links to change when I hover the mouse over the different sections of the site that the links refer to.
So I wrote this:
/* Navlink colors */
$('#portfolio').hover(function() {
$('#portLink').css('color','#FF9900');
}, function() {
$('#portLink').css('color','inherit');
});
$('#about').hover(function() {
$('#aboLink').css('color','#FF9900');
}, function() {
$('#aboLink').css('color','inherit');
});
...
At first it seems to work, but when you scroll to the blog and then move the mouse over the navigation the css :hover doesn’t seem to work anymore. This is my test site:
http://www.henning-marxen.de/test/index.html (Don't laugh those are placeholders^^)
Do you know why it behaves like this? I am very confused. Thank you very much in advance.
You should use CSS for this, not jQuery:
#portLink:hover, #about:hover { color: #FF9900; }
Or (to more explicitly match your JS):
#portfolio:hover #portLink, #about:hover #aboLink { color: #FF9900; }
If your link elements are not descendent of those first selectors, use + to group them (as indicated in this fiddle): http://jsfiddle.net/B8Xuw/ *note this assumes they are siblings rather than parent>child
#portfolio:hover + #portLink, #about:hover + #aboLink { color: #FF9900; }
You need a mix of js and css for this. In your css you need to apply your styles with the hover state but also with a class which I'll call current for this example.
.nav-link:hover,
.nav-link.current{
color:#FF9900;
}
Then all you javascript needs to do is add or remove the class depending on which part of the site you have scrolled to:
var navLinks = $('.nav-link');
//each time the user scrolls, reset all links by removing class.
navLinks.removeClass('current');
//Then find the link that needs highlighting and add the class to it.
//There obviously needs to be some logic here to filter the correct link.
navLinks.filter('[href="#portfolio"]').addClass('current');
Try this:
/* Navlink colors */
$('#portfolio').hover(function() {
$('[href="#portfolio"]').css('color','#FF9900');
}, function() {
$('[href="#portfolio"]').css('color','inherit');
});
$('#about').hover(function() {
$('[href="#about"]').css('color','#FF9900');
}, function() {
$('[href="#about"]').css('color','inherit');
});

Jquery fade background on hover?

There is a link, with no background, and a css rule, which changes background on hover.
Parent bg is white, link on hover - blue.
How can I do a hover effect slowly, from white to blue?
Thanks.
li a {}
li a:hover { background: blue; }
jQuery('a#theLink').hover(function(){
$(this).stop().animate({backgroundColor: 'blue'});
}, function() {
$(this).stop().animate({backgroundColor: 'white'});
});
For this to work you need to download the "color plugin" for jQuery.
You don't need an extra color plugin. You just need jQuery UI on top of jQuery, which lets you do animations also on color. (Or if you don't want to use jQuery UI for some reason, I guess another plugin will do the trick. But I have successfully tried this with just including jQuery core and jQuery UI.)
Animation itself goes something like...
$("li").hover(function() {
$(this).animate({
backgroundColor: "#ffffff"
}, 'slow');
});
bgFade a very great and simple plugin that animates de background image:
http://www.isthatclear.com/jquery/bgFade/
In order to animate colors, you need the color plugin
You'll need to use a plugin as JQuery can't animate colours out of the box.
Try the Colour Animation plugin
Then it'll be something like:
$(this).animate({ backgroundColor: "blue" }, 'slow');

Categories

Resources