2

As stated in the title; Is it possible to put a color "on top of" the div's background? What I need to do is change the displayed color of the div without changing 'background-color' value.

The reason for keeping background-color is because I'm using it to compare the clicked divs:

var pick1 = false;
var pick2 = false;
var id1;
var id2;

$('.card').click(function(){

    if(pick1) {
        pick2 = $(this).css('background-color');
        id2 = $(this).attr('id');
        if(pick1 == pick2 && id1!=id2) alert('Correct');
        else alert('Incorrect');

        pick1 = false;
        pick2 = false;
    } else {
        pick1 = $(this).css('background-color');
        id1 = $(this).attr('id');   
    }
});

The goal is to conceal the divs with for example grey color until they are clicked: http://jsfiddle.net/94jerdaw/WJQkA/4/

EDIT:

How do I remove the grey when clicking a div? Check: http://jsfiddle.net/94jerdaw/29TCZ/3/

Dave
  • 285
  • 4
  • 6
  • 16
  • You can always use another attribute to compare with and use the primary function of colors: colorizing.. – scones Mar 23 '13 at 19:19

3 Answers3

3

Not sure if I understand what you are going for... but would using :after work?

.card {
    position: relative;
}
.card:after {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: black;
}
.card:hover:after {
    display: none;
}

Example: http://jsfiddle.net/29TCZ/

You could replace :hover with a class and toggle it as required.

Ryan Holdren
  • 358
  • 2
  • 11
1

firstly, you cannot change div's background-color, without changing its CSS background-color property. How could you?

Guessing what you want is to maintain last background-color (for some action or to swap it back), then save it in some hidden input variables.

And then, you can use it to display anywhere you want.

Also, if you want to grab the background-color property and show it as a text on the div, you can do that very easily.

var color = $('#selector').css('backgroundColor');

, but it will return you RGB value. if you want hex,

use this handy methods:

var hexDigits = new Array
        ("0","1","2","3","4","5","6","7","8","9","a","b","c","d","e","f"); 

//Function to convert hex format to a rgb color
function rgb2hex(rgb) {
 rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
 return "#" + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]);
}

function hex(x) {
  return isNaN(x) ? "00" : hexDigits[(x - x % 16) / 16] + hexDigits[x % 16];
 }

taken from here

Update,

currently your divs are like this:

<div id="a1" class="card"></div>
<div id="a2" class="card"></div>
<div id="a3" class="card"></div>
..
..

and since you want to assign a secret color to each of these divs update them through javascript, inside your while loop, to make them like this:

 <div id="a1" class="card" data-color-index="1"></div>
 <div id="a2" class="card" data-color-index="2"></div>
 <div id="a3" class="card" data-color-index="3"></div>

now, you when you click on a particular div, grab its index and choose that item from the colors array of yours. since, you are splicing your original array, i had to make a copy of it, to use it later.

you can grab any element's attribute data-color-index through jquery like this:

   $('#selector').data('color-index');

see this fiddle. it does what you want to do

Community
  • 1
  • 1
Manish Mishra
  • 12,163
  • 5
  • 35
  • 59
  • So there is no way to have another color on top of the background-color? Kind of like an img simply filling a div, and not replacing the background-color. – Dave Mar 23 '13 at 19:18
  • what do you mean, 'on top of the background-color'?? do you want another color section at the top of your div? – Manish Mishra Mar 23 '13 at 19:19
  • pretty much, some way of concealing the divs true color with a grey fill. – Dave Mar 23 '13 at 19:23
  • This is smart and simple solution. Other solution might be to append to colored div (with relative position) some new div with absolute position, gray color, bigger z-index... you got point. – Miljan Puzović Mar 23 '13 at 19:26
  • then why don't you simply, change the color of div to gray, and then again swap it to true color, at your will, and since you assigned that true color, you always know what you have to swap with! – Manish Mishra Mar 23 '13 at 19:26
  • look at the linked jsfiddle. My goal is to have all boxed in grey and as i click on them, their color is revealed. If a correct pair is chosen, they will stay up. If not, they will turn grey again. – Dave Mar 23 '13 at 19:26
  • @Dave, hidden inputs will do that job. +1 for Mishra – Miljan Puzović Mar 23 '13 at 19:28
  • How do I swap the div color to gray without breaking my compare check? Won't $(this).css('background-color'); return a grey color now instead? – Dave Mar 23 '13 at 19:36
  • yes, see, you need to keep your original color somewhere associated with the given div. see my answer and the link i've attached now – Manish Mishra Mar 23 '13 at 19:42
0

As Manish said, you cannot change the appearance of the div without changing the CSS property - but there are several hacky ways of doing the same thing. One example is to create a child div in each of the coloured squares that covers the entire area and then set the colour of that div to grey. You can then use the CSS display property to show and hide the overlay divs.

However, I would recommend having a copy of the colours in JavaScript and just referring to the value associated with each square when it is clicked instead of checking the DOM every time as this keeps the logic separate from the appearance :)

Joe F
  • 642
  • 4
  • 12