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
> > > > > --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/

Reply via email to