I’m moving blue boxes from left to right (on the grid) after clicking Move Text Content! button. Here are the steps I follow:
Select one option from Select options dropdown.
Select a color from the dropdown.
Click Show Options button
Enter a row and column (For example A and 1) and then click calculate
Hit the Move Text Content! button to move blue boxes on the grid.
Here’s an Image showing an example with blue color move.
As can be seen, it’s very hard to read the text when it comes to blue color. Also, I have Black color in the dropdown list (which doesn’t work for some reason) but if it would have worked, it would have disappeared the text as background and text color are both black. Hence, I am wondering how can I handle the text color using CSS such that whatever color I select for the move, is readable by the user easily. Here’s my JSFiddle code:
I think you may have meant the buttons on the left as I see the text is missing there. I was only looking at the boxes on the right so you may need to be more specific.
I changed .words back to what it was before and then just added the id in front so that it only targets the grid on the right side as per my screenshot. The code won’t work on the left blue buttons as they are set up differently.
Thanks, I forgot to save the fiddle while testing, and now it’s showing what you showed. Here’s the JSFiddle. I think that change has broken one thing. It’s not showing the other background colors.
For example, in the screenshot below, I selected Blue when I filled in the cell A1, A2 and A3 and then selected Black color while selecting B1 and something is odd which I think I would need to investigate.:
So as I can understand that the color of words is inverted using the invert(1) and 1 specifies by how much amount we are inverting it. Is it going to pick random color based on the CSS property filter or is it happening because of mix-blend-mode:difference? Thanks!
By the way, Paul, I have a different question and wondering if you could share your thoughts on the following:
I will be eventually saving all the grid related details (I’ll have a save button somewhere on top of the grid which will achieve this) in a database table and I am yet to design the table. I am wondering if you have any suggestion on the same like what columns I should consider and what should I consider saving.
Here are some of my thoughts:
Since I’ll be saving the contents inside the grid, I will have to have a column for storing the values of the divs (blue text box content which goes on the grid) like Option#1, Option#2 etc.
Since I am also having different colors on the grid. I believe I should be storing the CSS for those specific divs as well. Not sure if saving CSS info sounds reasonable in terms of database design.
I might want to save the cell value which drives the pattern.
Is there anything you could think of that could be worth consider to save or something I should avoid and handle differently from the above mentioned points? Thanks!
And it’s not showing any background color. I’m planning on changing all color values to hexcodes. Here is the JSFiddle with this change showing white background instead of brown.
Unfortunately styling the <option> element is highly limited. Options don’t inherit the font set on the parent. In Firefox, only color and background-color can be set, however in Safari it’s not possible to set any properties. You can find more details about styling in our guide to advanced form styling .
Hmm. I guess the best option in this case would be to have a database table of color with 1 to 8 as values for each color and then retrieve the color value based on value and then add the color hex code on this line $('.color-'+selectedColor).css('background-color',selectedColor);. That would avoid retrieving the value from the option tag. Does this sound like a better option?