Develop Reference

Changing text color onclick doesn't work in some texts

I used the following code in my website:
<a href="#"
onclick="javascript:document.body.style.backgroundColor='#000000';
document.body.style.backgroundImage='none';
document.body.style.color='#F8F8F8';
document.body.style.fontColor='#FFFFFF';"><img src="image.jpg"/></a>
When i click in the image, the background of the site changes to black and the color of the text changes to white. The problem is, some text doesn't change. Titles and menus remind unchanged. Any ideas?
Here you can check my blog and see for yourself the problem.

The problem is that you are setting de color in body, but the components which the color isn't changing already have color, and by the CSS logic, the lower prevails. So you have two options, remove the pre-existing color or change the JS to change the color from the specifics components.

how to change the md-menu background color fro:m CSS

i am using the angular materiel and i used the md-menu, but i want to change the background color of md-menu from a css file. is there a way to access the md-menu background from the css?
Thank you

The .mdl-menu gets its color from the .mdl-menu__outline class.
Therefore adding this to your css will change the color
.mdl-menu__outline {
background-color: <YOUR-COLOR>;
}
Also, note that a "material-design-lite" Tag also exists. Makes it faster and easier to get help.

How to style data-icons dynamically in jquery mobile 1.4.2?

I have just updated my jquery mobile code from 1.3.1 to 1.4.2 in my Framework.
The challenge I am facing is to style my data-icons conditionally based on developer's parameters.
code for 1.3.1,
myButton.find('.ui-icon').css('background-color',iconColor);
in 1.4.2 jQuery uses pseudo class :after for the icons and since its not a part of the DOM it is inaccessible by JavaScript.
I can achieve it(but don't want to do it for the performance) by changing the DOM of the icon element?
Is there any other way?

If you use case allows you to select from a pre-determined list of icon background colors, you can set classes for each color and then switch them out in code.
Given a button with an icon:
<button id="btnIcon" class="ui-btn ui-icon-delete ui-btn-icon-left ">Button</button>
Here are 3 classes that set the background color to red, green , and blue respectively:
.redIcon:after {
background-color: #97080E;
}
.greenIcon:after {
background-color: #488C13;
}
.blueIcon:after {
background-color: #1B55C0;
}
Then in script, you remove all color classes and then add the one you want to take effect:
$("#btnIcon").removeClass("redIcon greenIcon blueIcon").addClass(className);
Here is a working DEMO
Click the buttons marked red, green, and blue to see the icon update.

Basic JavaScript Issue: Targeting a Specific Div in DOM and Changing Properties

I am not great with JavaScript, and I am thinking this is a fairly easy answer.
Link to project:
http://dl.dropbox.com/u/4132989/example02/example02/index.html
What I'm trying to do:
Make the draggable cell turn red, and the text turn white, when it's dropped to it's correct location.
When I drag the green or orange cell to their correct locations, I have inserted this as a test to make sure I am able to target only when the drag is correct.
document.body.style.background="red"
If you look at the code, on drop, the border changes on the cell from solid, to dotted. What I am trying to do is be able to change any property on drop. I want to make the background of the cell red on drop and I'd like the text to turn white. I tried this:
REDIPS.drag.style.background="red"
However, this did not work and it made everything non-draggable.
To download the code use this link:
http://dl.dropbox.com/u/4132989/example02.zip
Thanks in advance for any help.
*Oh, the change I made is in the file redips-drag-min.js

You're close, but the object you really want to change is rd.target_cell, the cell that just received the drop action. Add the following inside the if (rd.target_cell.className ... conditional (line 31 of script.js):
rd.target_cell.style.background= 'red';

Change background color on elements with the same color

I'm trying to create a simple theme system here. I have few elements with red background color. I also have a button that will change the elements background color to green.
I'm trying to code but I couldn't figure out how can I select and change the bg color of all red elements to green!
For example, I have 4 divs. Two of these have a red header, and when I click the button these headers background color must be changed to green. It's Ok here, but the problem is that the divs are dynamically generated, so do I have do loop all the page to find the red bg color? Could someone enlight me? =)
Thanks a lot! =)

I think the best solution would be to use different stylesheet for each theme and keep the current theme value in SESSION or COOKIE or just pass it as URL argument. But that would be a server side solution.
On Client side, you can just use different classes for each theme and toggle them on the button push event using .toggleClass()
$('.green').toggleClass('red green');

The easiest way to do this would be to have a specific CSS class for each background color you're using. ex:
.color-red{ background-color: #FF0000; }
.color-green{ background-color: #00FF00; }
Once you do that you can select on the CSS class as well as set the CSS class:
$('#button-togreen').click(function(){
$('.color-red').removeClass('color-red').addClass('color-green');
}
It's kind of a round-about way of doing it, however there is no easy way to select on a CSS attribute (to do that you'd have to select all elements of the page and then check each one of them for the background color attribute which would be scarily inefficient...)

I don't know what you mean by headers, but I think this should do what you want:
$('.myDivs').filter(function(index){
return $(this).css('color') == 'red';
}).css('color', 'green');