Yes, it does look right on screen. Also the wired thing is that if I
use
Firebug console to manually get the color by
$("#category-list > li.division:eq(0) ul > li:eq(0)").css("background-
color");
it returns the correct one, rgb(255, 0, 0). Not sure why it does not
work programmatically.
Thanks,
John
On Jan 13, 2:37 pm, John Arrowwood <jarro...@gmail.com> wrote:
> But it LOOKS right on screen?
>
> On Wed, Jan 13, 2010 at 10:22 AM, John <john.jian.f...@gmail.com> wrote:
> > Sorry for the confusion. Actually, the getColor is a function called
> > by another function,
> > which first checks all different css, if the css is color related and
> > the value is transparent, then
> > passes in the dom element, not jquery object, to the getColor function
> > to get back the
> > actual color. I did trace in firebug and the getColor did walk up to
> > the body, all nodes
> > returned "transparent" if I put the css style in the head. If I use in-
> > line css style, it works
> > fine.
>
> > Thanks,
>
> > John
>
> > On Jan 13, 10:42 am, John Arrowwood <jarro...@gmail.com> wrote:
> > > Make sure you are passing in a document node and not a jQuery object.
>
> > > if ( elem instanceof jQuery ) elem = elem.get(0);
>
> > > If you were passing in a jQuery object, the 'parent = parent.parentNode'
> > > line would immediately set parent to null.
>
> > > Also, shouldn't your getColor function return the color if it is set on
> > > elem, too, instead of always looking up the chain? Doesn't it make more
> > > sense to have one call, rather than putting some of your logic in the
> > > function, and some outside of it?
>
> > > function getColor( of, what ) {
> > > var elem = of;
> > > if ( elem instanceof jQuery ) elem = elem.get(0);
> > > var color = null;
> > > while ( elem != null ) {
> > > color = $(elem).css(what);
> > > if ( color != '' && color != 'transparent' ||
> > > jQuery.nodeName(elem,'body') ) break;
> > > elem = elem.parentNode;
> > > }
> > > return color;
>
> > > }
> > > On Tue, Jan 12, 2010 at 11:12 AM, John <john.jian.f...@gmail.com> wrote:
> > > > Sorry, I have to come back for this question. I have really wired
> > > > problem.
>
> > > > I implemented the getColor similar to the jQuery color plugin as
> > > > follows,
>
> > > > function getColor(elem, cssName){
> > > > var color = null;
>
> > > > if (elem != null) {
> > > > var parent = elem.parentNode;
>
> > > > while (parent != null) {
> > > > color = $(parent).css(cssName);
> > > > //or
> > > > // color = jQuery.curCSS(parent, cssName);
> > > > if (color != '' && color != 'transparent' || jQuery.nodeName
> > > > (parent, "body"))
> > > > break;
> > > > parent = parent.parentNode;
> > > > }
> > > > }
>
> > > > return color;
> > > > };
>
> > > > If I use the background color inline such as
> > > > <html>
> > > > <head>
> > > > </head>
> > > > <body>
>
> > > > <div class="categories">
> > > > <div class="content">
> > > > <div class="body">
> > > > <ul id="category-list">
> > > > <li class="division">
> > > > <ul>
> > > > <li class="category selected" style="background-
> > > > color:red;">
> > > > <div class="title">
> > > > <a href="/suv" class="category-
> > > > suv">SUVs (6)</a>
> > > > </div>
>
> > > > </li>
>
> > > > <li class="category category_69564">
> > > > <div class="title">
> > > > <a href="/4by4" class="category-
> > > > general">4x4 (6)</a>
> > > > </div>
>
> > > > </li>
> > > > <li class="category category_73293">
> > > > <div class="title">
> > > > <a href="/hybrid"
> > > > class="category-hybrid">Hybrid</a>
> > > > </div>
> > > > </li>
> > > > </ul>
> > > > </li>
> > > > </ul>
> > > > </div>
> > > > </div>
> > > > </div>
>
> > > > </body>
> > > > </html>
>
> > > > I can get back the background color of the element "<li
> > > > class="category selected" > correctly, i.e.,
> > > > rgb(255,0,0). However, if I move the css style to the head as follows,
>
> > > > <html>
> > > > <head>
> > > > <style type="text/css">
> > > > .content .division .category.selected {
> > > > background-color: red;
> > > > }
> > > > </style>
> > > > </head>
>
> > > > I always get back the value "transparent" even with the getColor
> > > > method. I couldn't figure out
> > > > what was wrong and please help me with this. How can I get back the
> > > > background-color as
> > > > rgb(255,0,0) or "red" in the latter case.
>
> > > > Thanks in advance,
>
> > > > John
>
> > > > > On Jan 11, 2:31 pm, John Arrowwood <jarro...@gmail.com> wrote:
>
> > > > > > As a QA tester with a lot of test automation experience, a bit of
> > > > advice:
> > > > > > Ask if the product would not ship if it wasn't red. If the answer
> > is
> > > > no,
> > > > > > then you might not want to waste your time. Unless you have
> > automated
> > > > > > everything else about the functionality of the application, and are
> > > > looking
> > > > > > for things to automate, but I would be surprised if you had gotten
> > that
> > > > far
> > > > > > already! :)
>
> > > > > > There are some other things you can do, too, to make it easier or
> > > > faster.
> > > > > > If you want to discuss it off-list, email me at j...@irie-inc.com.
>
> > > > > > On Mon, Jan 11, 2010 at 9:54 AM, John <john.jian.f...@gmail.com>
> > > > wrote:
> > > > > > > Thanks for your reply. I will try to see if the background color
> > on
> > > > > > > the parent works or not.
>
> > > > > > > As for checking the "red" color, I need to do a UI test and check
> > if
> > > > > > > the background color
> > > > > > > is set correctly. That is to say, I am testing other people's
> > code
> > > > and
> > > > > > > web page.
>
> > > > > > > Thanks,
>
> > > > > > > John
>
> > > > > > > On Jan 11, 12:41 pm, John Arrowwood <jarro...@gmail.com> wrote:
> > > > > > > > The short answer is because the background color of the item
> > you
> > > > have
> > > > > > > > selected is in fact transparent.
>
> > > > > > > > Your style makes the <li> tag red. Then you query on a child
> > > > element
> > > > > > > that
> > > > > > > > has no color specified. The background color of the child
> > element
> > > > is
> > > > > > > > 'transparent' which means that the color of something up the
> > tree
> > > > is what
> > > > > > > > you will see.
>
> > > > > > > > You will never see 'red' by looking at the child element. But
> > what
> > > > you
> > > > > > > can
> > > > > > > > do (and jquery.color.js does this) is while you get
> > 'transparent'
> > > > then
> > > > > > > you
> > > > > > > > can look at the parent object. You can walk up the tree until
> > you
> > > > get
> > > > > > > what
> > > > > > > > you are looking for.
>
> > > > > > > > But before you go down that road, why are you looking to see
> > the
> > > > color of
> > > > > > > > the element? If you can describe what you are trying to do in
> > more
> > > > > > > general
> > > > > > > > terms, someone may be able to give a better suggestion on how
> > to
> > > > > > > accomplish
> > > > > > > > it.
>
> > > > > > > > On Mon, Jan 11, 2010 at 7:39 AM, John <
> > john.jian.f...@gmail.com>
> > > > wrote:
> > > > > > > > > Hi,
>
> > > > > > > > > I used jQuery 1.3.2 and Firefox for the following html
>
> > > > > > > > > <html>
> > > > > > > > > <head>
> > > > > > > > > <style type="text/css">
> > > > > > > > > .content .division .category.selected {
> > > > > > > > > background: red;
> > > > > > > > > }
>
> > > > > > > > > </style>
> > > > > > > > > </head>
> > > > > > > > > <body>
>
> > > > > > > > > <div class="categories">
> > > > > > > > > <div class="content">
> > > > > > > > > <div class="body">
> > > > > > > > > <ul id="category-list">
> > > > > > > > > <li class="division">
> > > > > > > > > <ul>
> > > > > > > > > <li class="category selected">
> > > > > > > > > <div class="title">
> > > > > > > > > <a href="/suv"
> > > > class="category-
> > > > > > > > > suv">SUVs (6)</a>
> > > > > > > > > </div>
>
> > > > > > > > > </li>
>
> > > > > > > > > <li class="category
> > category_69564">
> > > > > > > > > <div class="title">
> > > > > > > > > <a href="/4by4"
> > > > class="category-
> > > > > > > > > general">4x4 (6)</a>
> > > > > > > > > </div>
>
> > > > > > > > > </li>
> > > > > > > > > <li class="category category_73293">
> > > > > > > > > <div class="title">
> > > > > > > > > <a href="/hybrid"
> > > > > > > > > class="category-hybrid">Hybrid</a>
> > > > > > > > > </div>
> > > > > > > > > </li>
> > > > > > > > > </ul>
> > > > > > > > > </li>
> > > > > > > > > </ul>
> > > > > > > > > </div>
> > > > > > > > > </div>
> > > > > > > > > </div>
>
> > > > > > > > > </body>
> > > > > > > > > </html>
>
> > > > > > > > > I used the following css command to get back the background
> > > > color:
>
> > > > > > > > > $("#category-list > li.division:eq(0) ul > li:eq(0) a").css
> > > > > > > > > ("background-color");
>
> > > > > > > > > but it always returned the value "transparent" instead of the
> > > > "red"
> > > > > > > > > color rgb(255,0,0).
> > > > > > > > > I also tried "backgroundColor" and it did not work either
> > > > > > > > > ("transparent"). How to get back
> > > > > > > > > the correct background color?
>
> > > > > > > > > Thanks in advance,
>
> > > > > > > > > John
>
> > > > > > > > --
> > > > > > > > John Arrowwood
> > > > > > > > John (at) Irie (dash) Inc (dot) com
> > > > > > > > John (at) Arrowwood Photography (dot) com
> > > > > > > > John (at) Hanlons Razor (dot) com
> > > > > > > > --http://www.irie-inc.com/http://arrowwood.blogspot.com/
>
> > > > > > --
> > > > > > John Arrowwood
> > > > > > John (at) Irie (dash) Inc (dot) com
> > > > > > John (at) Arrowwood Photography (dot) com
> > > > > > John (at) Hanlons Razor (dot) com
>
> ...
>
> read more »
