Develop Reference

Error in parsing value for 'color' (jQuery UI)

I am trying to animate a color change (font) with jQuery UI when clicking the element.
I included the files of jQuery UI as descripted on their website.
<script type='text/javascript'>
$(document).ready(function() {
$('.benefits').click(function() {
$(this).animate({color:'#b22425'}, 200);
});
});
</script>
It doesn't work. Console says:
Error in parsing value for 'color'. Declaration dropped.
When I'm adding an animate width change, this works fine but the color error stays.
What am I doing wrong?
Thanks for the help :-)
EDIT
I'm figuring out what's the problem:
I'm include the navigation and the footer with PHP:
<?php
include('navigation.php');
?>
When I delete this block everything works fine. But when I'm including Navigation and Footer with PHP the parsing error occurs.
Has anybody a solution?
EDIT 2
The Navigation and Footer Documents were "Full-Document", this means they had their own html, head, style, body ... tags. I included this documents in the body-tag of my main-document and so there were 3 complete html-documents in one.
After deleting the unnecessary tags from the navigation and footer documents everything works fine.
I would have seen this earlier -.-'
Thanks anyway for the comments and answers :-)

Here is a simple way of doing it
I created a simple html only
I downloaded the jquery colors JQUERY COLORS
and added it to the html file include the jquery library
so it would be loaded like this
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.color.js"></script>
Here is a simple DEMO CREATED
Hope it helps.!

You cannot use animate to animate colors without jQuery UI.
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.)
and
The jQuery UI project extends the
.animate() method by allowing some
non-numeric styles such as colors to
be animated. The project also includes
mechanisms for specifying animations
through CSS classes rather than
individual attributes.
source: http://api.jquery.com/animate/

How to set css rules for combination of class?

I have a div tag as
<div class="one two three">foo<div>
<div class="one two four">bar</div>
i am setting the css by using javascript,I can set styles as
.one.two.three{color:red;}
.one.two.four{color:blue;}
But can any one tell me how can i use $(.class).css({"color":"blue"}); for combination of class

Make sure you have loaded jQuery, as the $(selector).css(...) function you say you'd like to use is jQuery-specific.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
Set the style – making sure to wait until the DOM is ready before you try manipulating the styles:
<script type="text/javascript">
$(document).ready(function() {
$(".one.two.four").css({"color":"blue"});
});
</script>
You can read all about everything I've described in the jQuery Getting Started guide.
Working demo: http://jsfiddle.net/4b2n97hq/
If something isn't working, open your browser's console and look for error messages that will help work out the problem.

same as with css selector:
$('.one.two.three').css({"color":"blue"});
will select all elements that have all 3 classes.
You can also select just by the classes they have in common:
$('.one.two').css({"color":"blue"});
check this fiddle.

Copy CSS class A to class B

Here's some code
<button id="test" class="ui-state-hover" value="Button">
Context:
I am using JQuery UI CSS class ui-state-hover on an HTML button (I want that button to always looks like its hover). But that class keep on disappearing when I mouseout another JQuery UI element, I guess this is normal behavior tought,
<button id="test" class="" value="Button">
so I figured that in that particular JQuery element there must be a line of code similar to this:
$('.ui-state-hover').on('mouseout', function(){$(this).removeClass('ui-state-hover');})
Which remove the class on every element that has the class. So I tough I'd only have to have a class of my own with the same CSS as ui-state-hover but different name. So I could just give that element the copy and POUF! problem solve!
MyCssClass = ui-state-hover
<butotn id="test" class="MyCssClass" value="Button">
So need a way to copy content of one CSS class to another. I would rather have a pure CSS answer but if none exist JQuery or Javascript would do.
I though using something like this but it just seems silly I it doesn't work.
$('.MyCssClass').css($('.ui-state-hover').css());
Thanks!
EDIT:
Here is a bit more on what a tried to do.
I put a sh*t tone of different JQuery Theme in a directory and depending on users choice I switch the .css file and reload the page. Since every theme or almost every theme has the same classes they are interchangeable. So ui-state-hover might in the ui-darkness JQuery UI Theme have a black background color but in the ui-lightness JQuery UI Theme background might be gray.
This is why I need to dynamically copy some of those on page load into my own class and I can't just copy/paste the content of the .css file.
EDIT:
here is a fiddle illustrating my problem:
http://jsfiddle.net/yr89tg9g/
see how when you hover test2 it loose the ui-state-hover class? To stop this I tough about cloning the class but it seems it can't be done...

Maybe this?
$("#myButton").on("mouseout blur", function(){
$(this).addClass("ui-state-hover");
});

Probably that solves the Q:
A css is just a tag and HTML. It can have an ID:
<style type="text/css" id="sourcecss">
/* your definition here */
</style>
and thus:
jQuery("head").append('<style type="text/css" id="targetcss"></style)');
jQuery("#targetcss").html( jQuery("#sourcecss").html() );
works like a charm in one of our apps.

Modify more than 1 css file with javascript

I'm trying to find a way for modify CSS while HTML is running, so far I find that is possible just with a little script like this next...
$("button").click(function(){
$("p").css("color","red");
});
As I can concern this is an effective way to modify the local CSS stylesheet refered to our HTML while webpage is running (i.e. pushing a div button).
What I'm trying to do is modify an specific .class from CSS stylesheet of an jQuery plugin for replacing the standard right-click context menu.
I didn't found any way in JS to call an specific stylesheet for modify any .class or #id
So my HTML had the following definitions:
<script src="jquery.contextmenu.js"></script>
<link rel="stylesheet" href="jquery.contextmenu.css">
<link rel="stylesheet" href="localstyle.css">
But when I try to update custom jQuery CSS with a script like this
$('#red').click(function(){
$('.contextMenuPlugin').css({'background-color': 'white'});
.contextMenuPlugin (native in jquery.contextmenu.css) isn't recognized, that script only work with a .class or a #id from my own stylesheet (localstyle.css).
I try things like using my local CSS embedded in HTML, and referencing jQuery CSS with an id but still nothing change. So there's the link of Github repo from jQuery plugin:
https://github.com/joewalnes/jquery-simple-context-menu
I try to make a live but JSfiddle dosn't work at all with this proyect, so if it helps or anyone want to check it, there's an pastebin of issue:
http://pastebin.com/u/27GRiS (4 files)
I hope someone help me clarify this, thanks in advance,
Federico.

The problem is that you think that
$('.contextMenuPlugin').css({'background-color': 'white'});
creates a stylesheet with
.contextMenuPlugin { background-color: white }
But it's not like this.
$('.contextMenuPlugin') gets all elements with class contextMenuPlugin in the moment you use it, and then, .css({'background-color': 'white'}) modifies the inline style of each element.
That means, if you create new elements with class contextMenuPlugin after that code, they won't be affected.
Then, you can:
Make sure that your target element exists when you use the code
Create a stylesheet with the desired CSS
Some time ago, I created a function which adds desired rules to an stylesheet, and allows you to reference and change/delete them. You can see it in this answer.

You should rethink your solution. Instead, add an additional class to your stylesheet that has the CSS changes you want.
Then, on clicking the button you can call addClass to add it to the appropriate elements.

Take your <script> code out of the <head> and put it at the end of the <body>.
Also you don't need this:
$(function() { ... })
if you already have this:
$(document).ready(function() { ... })
In other words, remove line 29 and line 27 (the $(function() { and });) from this file

Can I have a css div class mock a different css div class?

I just started using bootstrap for my site. I love the look and I want to make some changes to a ton of different blog post to include the bootstrap style. I don't want go through hundreds of post to change the div's class element. Can I do something like this:
<div class="important_note">
this is a old note that I want to use bootstrap styling on.
</div>
css:
<style>
.important_note{
mimick(.alert)
}
</style>
alert is a bootstrap styling.
I apologize if this is a simple question, but web dev isn't much my thing. I also couldn't find any similar questions. Thanks for your help!

with css you can do the following:
.important_note, .alert{
//styling
}
this will apply the same styling to important_note and alert classes

Without "upgrading" your CSS, if it's just about adding a class to each affected element, you can use a small script:
[].forEach.call(document.getElementsByClassName('important_note'), function(node) {
node.classList.add('alert');
});
jQuery equivalent:
$('.important_note').each(function() {
$(this).addClass('alert');
}