3 Replies - 759 Views - Last Post: 29 January 2013 - 03:36 PM

#1 rbflowers  Icon User is offline

  • New D.I.C Head

Reputation: 2
  • View blog
  • Posts: 48
  • Joined: 10-February 12

check if div id element has certain background-color

Posted 28 January 2013 - 06:29 PM

Having some trouble with some code... I want to see how many of my div id's have green, yellow, red or gray backgrounds.

Here's what I have, but it's not working properly:
var divTitleIds = new Array("#TKITitle", "#bugsTitle","#engTitle","#tEngTitle","#attTitle","#gtsTitle","#goalsTitle","#RISTitle","#RplSTTitle","#agileTitle",
        "#availTitle", "#scalTitle", "#perfTitle", "#tCostTitle", "#BIRTitle", "#TTMTitle", "#CTTitle", "#edwatbTitle", "#edwbatchTitle", "#edwbatchTitle", "#mrtzTitle");

summaryColors("#summaryTitle", divTitleIds);

function summaryColors(div, arrayOfDivs) {
    var green = 0; var yellow = 0; var red = 0; var grey = 0;
    for (var i = 0; i < arrayOfDivs.length; i++) {
        if ($(arrayOfDivs[i]).css('background-color') == 'rgb(52,128,23)')
            green++;
        else if ($(arrayOfDivs[i]).css('background-color') == 'rgb(255,227,3)')
            yellow++;
        else if ($(arrayOfDivs[i]).css('background-color') == 'rgb(228,34,23)')
            red++;
        else
            grey++;
    }
    if (green / arrayOfDivs.length > .75)
        $(div).css('background-color', '#348017'); //green
    else if (green / arrayOfDivs.length > .25 && red / arrayOfDivs.length < .33)
        $(div).css('background-color', '#FFE303'); //yellow
    else
        $(div).css('background-color', '#E42217'); //red
}



the code is saying they are all gray (the first else statement) and therefore returning a red background for div (the last else statement).

the rgb values in the forloop correspond to the # values in the second set of checks. I tried using the #values both places and that didn't work either.

Is This A Good Question/Topic? 0
  • +

Replies To: check if div id element has certain background-color

#2 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 3402
  • View blog
  • Posts: 9,617
  • Joined: 08-June 10

Re: check if div id element has certain background-color

Posted 29 January 2013 - 02:54 AM

well, obviously the CSS returned from the .css() call does not match any of the values given. it would be a good idea just to echo out all values to see what they actually contain.

This post has been edited by Dormilich: 29 January 2013 - 02:56 AM

Was This Post Helpful? 0
  • +
  • -

#3 andrewsw  Icon User is online

  • Fire giant boob nipple gun!
  • member icon

Reputation: 2890
  • View blog
  • Posts: 9,597
  • Joined: 12-December 12

Re: check if div id element has certain background-color

Posted 29 January 2013 - 04:27 AM

The value returned by background-color usually contains spaces between the numbers (depending on the browser), so it would be sensible to remove these before making your comparison:

var curr_colour = $(arrayOfDivs[i]).css('background-color');
curr_colour = curr_colour.replace(/\s/g, '');


Of course, you are still relying on an exact match for the three numbers. If you have control over the pages that you are inspecting then it would be better to use class-names and just use $('.class_1,.class_2,.class_etc') to refer to them all as a group.

This post has been edited by andrewsw: 29 January 2013 - 04:27 AM

Was This Post Helpful? 1
  • +
  • -

#4 rbflowers  Icon User is offline

  • New D.I.C Head

Reputation: 2
  • View blog
  • Posts: 48
  • Joined: 10-February 12

Re: check if div id element has certain background-color

Posted 29 January 2013 - 03:36 PM

View Postandrewsw, on 29 January 2013 - 04:27 AM, said:

The value returned by background-color usually contains spaces between the numbers (depending on the browser), so it would be sensible to remove these before making your comparison:

var curr_colour = $(arrayOfDivs[i]).css('background-color');
curr_colour = curr_colour.replace(/\s/g, '');


Of course, you are still relying on an exact match for the three numbers. If you have control over the pages that you are inspecting then it would be better to use class-names and just use $('.class_1,.class_2,.class_etc') to refer to them all as a group.



worked perfectly thanks.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1