Develop Reference

how to modify one section from another

I am trying to figure out how to modify some properties of a section (such as text color or visibility) when clicking one element of a grid that has multiple colors (see image_1). I have already done the function to get the color of the clicked element but now I want to send this color value to the other section of the page (which has its own id).
when i use getElementById() function it returns null and i do not know how to solve it...
IMAGE_1
function getColor(cell) {
var actual = document.getElementById(cell.id);
color = actual.style.background;
idWrap = actual.id.substr(0,3);
alert("#"+idWrap);
var element = document.getElementById("#"+idWrap)
element.style.backgroundColor = 'red';
}

The problem is that you are passing the # to the document.getElementById(...) function. Simply remove it and it should work:
var element = document.getElementById(idWrap)

Change the background color of any TD that already has a specific background color

I am trying to change some colors on a table that is generated for a calendar. Certain TD's in the table get a different color than others, this was coded by someone else and is done with inline CSS (meaning there is no class/ID assigned). I don't have access to the code they created to change it and can only try to overwrite the color.
What I am trying to do is use a short script to find any TD element that has the particular color, in this case LightSlateGray, and change it to a different background color.
Below is what I mostly recently tried but I know that I am doing something incorrectly and am hoping someone can point it out to me.
var tdColor = $("td");
if(tdColor.css('background-color') === 'LightSlateGray'){
tdColor.css('background-color', 'red');
}

You need to iterate over each element:
var tdColor = $("td");
tdColor.each(function() {
$this = $(this);
if($this.css('background-color') === 'LightSlateGray'){
$this.css('background-color', 'red');
}
}

Using variable as class name and editing it

I'm trying to simulate an Etch-a-Sketch and I want to let the user change the squares color using the [type=color] input. Until now I was only painting them black...
I've tried assigning a variable to the color hex code obtained from the form and creating unique classes using that value as class name, which seems ok, but then I cannot edit the css "background-value" for that class, since from what I've read, you can't edit variables' css.
Any help is appreciated.
The hover-color-applying javascript part is as follows:
//apply hover effect
$(document).on("mouseenter", ".gridSlot", function() {
var color = document.getElementById("myColor").value; //myColor = input
$(this).addClass(color); //what I want to do
$(this).addClass("color"); //what I'm doing
});
.color is a class with a fixed background-color, and if I change it by using $(".color").css("background-color"), it'll change both old and new squares colors.
Is there a way to let the already hovered ones be, for example, black, and draw new red ones?
JSFiddle: https://jsfiddle.net/0g3c6c0v/1/

Simply use .css Reference jQuery.css
Add a non existing class name to it to check if the square is already painted.
$(document).on("mouseenter", ".gridSlot", function() {
var color = document.getElementById("myColor").value;
if(!$(this).hasClass("painted")){
$(this).css("background-color",color);
$(this).addClass("painted");
}
});
Updated Fiddle

This might be a good place to use a global variable. At the top of your JS add line like this: window.color_picker = "#000000";
And then in your function simply use: $(this).css("background-color",window.color_picker);
Anytime that the color picker changes you'll need a js function that updates that global:
$('#myColor').on("change", function() {
window.color_picker = $('#myColor').val();
});

Can't highlight row for dynamically created GridView from JavaScript

It use to be easy to do this, but this was my first time generating the GridView dynamically. Each GridView cell has its own CSS Styling when created. In RowDataBound event I set up the highlighting as usual:
e.Row.Attributes.Add("onmouseover", "this.style.cursor='pointer';HilightRow(this);")
e.Row.Attributes.Add("onmouseout", "HilightRow(this);")
On the script side I have the following:
var curSelRow = null;
function HilightRow(row) {
var selRow = row;
var i;
.
.
if (selRow != null) {
curSelRow = selRow;
curSelRow.style.backgroundColor = '#FFEEC2';
}
}
I've traced this in the script and it works fine, there are no errors and when I do a watch on the row in question, it does correctly show the correct background color value (i.e. #FFEEC2), however, the hover does not change the color of the row. I'm puzzled. Not sure why this is happening and as I said, I've done this many times before without a problem but the gridviews were not dynamic in the past.

I'm not sure if you've shown all your code, but it appears that both the over and out function are setting the same bgcolor (#FFEEC2).
Both onmouseover and onmouseout are calling HilightRow(this). Does the initial onmouseover set the bgcolor?

A nicer solution I think is adding a class to the row.
Like class="Hilightrow".
And avoid script in the html-elements and separate structure from behaviour.
var hiliclass = "Hilightrow";
var trhilight = document.getElementById("mytable").getElementsByTagName("tr");
var len = trhilight.length;
for(var i=0;i<len;i++) {
if(trhilight[i].className == hiliclass) {
trhilight[i].onmouseover = function() {
trhilight[i].style.backgroundColor = "red";
}
....
}
}
And have the script inside a function and call it inside window.onload or
use a self-invoking function like this:
function highlightrows() {
..// my code
}();

I figured out the problem finally. What you have to do before you set the highlighting is to remove the currently applied Style to the row by setting the curSelRow.cells[i].style.backgroundColor = ''. Now you can highlight the row by using curSelRow.style.backgroundColor = '#FFEEC2', which will set the row to the highlight value.
In addition, you must save each cell's own style before you reset the values and restore each cells value when the cursor leaves that row. Otherwise you'll get white for each row that you hover over. Again, remember to reset the style for the highlighted row before you setting each cell's style to what it was originally.
What a pain!

Possible to "listen" to a CSS value for a DOM element and tell another DOM element to match it?

I'm trying to hack Drupal's colorpicker module so that as my user drags it around picking colors, he sees colors changing on the web site's in real-time.
Right now the colorpicker's js changes the color of the picker widget in real-time.
I want to hack the js so that the color of the picker widget AND a specific DOM element change background colors at once.
Is there a way I can write some code that "listens" to the background-color setting of the colorpicker input and then changes the background-color of ?
Here's the code where Drupal is applying settings from the colorpicker widget to its input:
Drupal.behaviors.colorpicker = function(context) {
$("input.colorpicker_textfield:not(.colorpicker-processed)", context).each(function() {
var index = $('body').find('input.colorpicker_textfield').index($(this));
Drupal.colorpickers[index] = new Drupal.colorpicker($(this).addClass('colorpicker-processed'));
Drupal.colorpickers[index].init();
});
What can I add to this to tell it to "listen" to the background color of "input.colorpicker_textfield" and then set that value to "body" in real time as it changes?

Try using change() to apply it to the bg.
$("input").change( function () {
//var below would obviously have to be correctly formatted.
var newColor$(this).val();
$(body).css({background-color: newColor});
});

Similar to Cole's answer with some improvements (assuming '#' is not included by the colorpicker):
$('input.colorpicker_textfield').live('change', function() {
var color = this.value;
if(color.search((/^[A-Fa-f0-9]{6}/) != -1) {
body.style.backgroundColor = '#'+this.value;
}
});
Uses more specific selector
uses the 'live' event handling method, ensuring the handler will be attached to any dynamically created colorpickers
It will not change the background color if the input is not a hex value
It uses the style attribute directly instead of wrapping in the jQuery object.