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
> > > > --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
> --http://www.irie-inc.com/http://arrowwood.blogspot.com/
