Solved

css style not changing. why?

Posted on 2014-04-01
1
382 Views
Last Modified: 2014-04-21
Hi;

I have the following css.

.aui-header .aui-nav .aui-buttons .aui-button-primary,
.aui-header .aui-nav .aui-buttons .aui-button-primary:link,
.aui-header .aui-nav .aui-buttons .aui-button-primary:visited {
    background: #336ea9;
    background-image: -moz-linear-gradient(top, #3b7fc4, #336ea9);
    background-image: -ms-linear-gradient(top,  #3b7fc4, #336ea9);
    background-image: -webkit-linear-gradient(top,  #3b7fc4, #336ea9);
    background-image: -o-linear-gradient(top,  #3b7fc4, #336ea9);
    background-image: linear-gradient(top,  #3b7fc4, #336ea9);
    height: 28px;
    border: 0;
    box-shadow: rgba(255, 255, 255, 0.1) 0 1px 0 0 inset, rgba(0, 0, 0, 0.2) 0 1px 1px 0;
    color: #fff;    
    text-shadow: 0 1px 0 #295989;
}

Open in new window


and following jquery

$('.aui-buttons').css({ 'background-color': '#FF6633', 'background-image': '-webkit-gradient(linear, left top, left bottom, from(#FF6633), to(#FF6633))',
'background-image': '-webkit-linear-gradient(top, #FF6633, #FF6633)',
'background-image': '-moz-linear-gradient(top, #FF6633, #FF6633)',
'background-image': '-ms-linear-gradient(top, #FF6633, #FF6633)',
'background-image': '-o-linear-gradient(top, #4ba614, #FF6633)',
'background-image': 'linear-gradient(to bottom, #FF6633, #FF6633)',
'background-color': '#FF6633',
'background': '#FF6633'
});

Open in new window


and background doesn't become from:
'background': '#336ea9'
to:
'background': '#FF6633'

Why?

Regards.
0
Comment
Question by:jazzIIIlove
1 Comment
 
LVL 42

Accepted Solution

by:
Chris Stanyon earned 500 total points
ID: 39969719
It's because your CSS is styling the .aui-button-primary element and your jQuery is applying the style to it's parent (.aui-buttons). You need to apply the jQuery CSS to the same child:

$('.aui-buttons .aui-button-primary').css({
   ...
}

Open in new window

0

Featured Post

Threat Intelligence Starter Resources

Integrating threat intelligence can be challenging, and not all companies are ready. These resources can help you build awareness and prepare for defense.

Join & Write a Comment

I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
Introduction JSON is an acronym for JavaScript Object Notation.  It is a text-string data transport mechanism, capable of representing simple or complex data structures in a consistent and easy-to-read manner.  Similar in concept to XML, but more e…
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

757 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

21 Experts available now in Live!

Get 1:1 Help Now