Develop Reference

Randomising Color Selection in Wordpress

I'm using the construct theme on Wordpress. I would like to make it such that the top_title class changes color everytime the page is refreshed. I am not sure whether to edit the stylesheet or to place it in some unknown php file, I have tried a lot of suggestions from this site but none seem to work, in the stylesheet, this is what appears for the top_title class:
.top_title {background: #hexval}
Any suggesitons are welcome, but please be thorough, I am rather new at this particular section.
P.S. Also if possible I would like to choose the colors myself.

I would definitely suggest picking your own colors.
Probably the easiest way to accomplish this is to create 1) an array of color codes, 2) choose your HTML element to target (in this case, .top_title), and 3) call a random position in that array.
So if you really want to use JS something like this in your header:
<script> var colorArray = ["ffffff", "cccccc"]; </script>
Then this in your HTML element:
<div class='top_title' style="background:<script>colorArray[Math.floor(Math.random() * colorArray.length)];</script>">
I think that is what you are looking to do?

Try this
jsfiddle http://jsfiddle.net/harshdand/f4p7dj3g/ everytime you run you will get a new color
var colors = ['ababab','cc66ff','fefefe','ff0000','ff9900']; //colors array
//randomly pick color
var random_color = colors[Math.floor((Math.random() * colors.length))];
//add color as background color
$('.top_title').css('background-color','#'+random_color);

How can I change css for every DOM object in the page in SAPUI5

I have a things inspector and this things inspector has two titles. I wan to be able to change the css on this titles and make their font size a bit smaller( default fontSize is 16px and I want to drop it to 12px). I tried to get these titles class and use this method to change their size:
var element = document
.getElementsByClassName("sapUiUx3TVTitleSecond")[1];
element.style.fontSize = '12px';
var element = document
.getElementsByClassName("sapUiUx3TVTitleFirst")[1];
element.style.fontSize = '12px';
it does work and I can see the change but as soon as the page finishes loading ( page loading takes couple of second because it needs to read a json object) title sizes go back to its default.
I dont even know this is a right way to access DOM elements and change their CSS.
Please point me to the right direction of how to change DOM object css in SAPUI5 in general

You could create a new CSS file which you include in your index.html.
Just add the needed selectors with the modified attributes in this custom CSS:
.sapUiUx3TVTitleSecond, .sapUiUx3TVTitleFirst {
font-size : 12px;
}
Edit: if you need to change it programmatically, you could use the addStyleClass("yourStyle") method which is available to every UI element

Execute the script after dom gets completely loaded. Try like this
$("document").ready(function()
{
var element = document
.getElementsByClassName("sapUiUx3TVTitleSecond")[1];
element.style.fontSize = '12px';
var element = document
.getElementsByClassName("sapUiUx3TVTitleFirst")[1];
element.style.fontSize = '12px';
})

$("document").ready(function()
{
$(".sapUiUx3TVTitleSecond").css("font-size","12px");
})

Override existing style declaration with jQuery

I have the following HTML code:
<style>
.thing { color: red }
</style>
<p class="thing">This is a nice thing</p>
I would like to change the ".thing"-style for all current content and all future content which comes to the page via AJAX.
$('.thing').css('color', 'blue');
This would work, but if new HTML code is added to the document via AJAX, all ".thing"-elements will still be colored red.
What I want is to change the whole style property ".thing" for the document and not only for the current elements (with a jQuery selector).
Thanks!

You could add a style rule in the header with the DOM
Demo: The Problem
Demo: DOM Mutation Solution
var newStyles = document.createElement("style");
newStyles.type="text/css";
newStyles.innerHTML = ".thing{color:blue}";
document.head.appendChild(newStyles);

You could use a call back function on your AJAX code to run the jquery css function.
$.ajax({
url: "test.html",
context: document.body,
success: function(){
$('.thing').css('color', 'blue');
}
});

If for some reason you are not able to use any of the techniques given in the duplicate question, you could modify the stylesheet itself, for example:
document.styleSheets[1].cssRules[0].style.color = "blue";
However, the above line is not cross browser (I don't think it will work in IE, which prefers rules instead of cssRules) but it's possible to make it cross-browser compatible with a bit more code.
All it does is change the actual stylesheet, so it's like you had color: blue in there all along. This will affect elements currently on the page, and any that are added in the future (see the fiddle for a working example).
Note that you'll have to modify the indexes to suit your page. The indexes used in the example are just what work for the given stylesheet on jsfiddle.net.
Edit an attempt at a cross-browser solution:
var cssRules = (document.styleSheets[1].cssRules) ? document.styleSheets[1].cssRules[0] : document.styleSheets[1].rules[0];
cssRules.style.color = "blue";

You could add a style rule for blue text
<style>
.thing { color: red }
.thing.blue { color: blue }
</style>
and add "blue" class via call back function on your AJAX
$('.thing').addClass('blue');

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.

How can I undo the setting of element.style properties?

I have an element in my document that has a background color and image set through a regular CSS rule.
When a certain event happens, I want to animate that item, highlighting it (I'm using Scriptaculous, but this question applies to any framework that'll do the same).
new Effect.Highlight(elHighlight, { startcolor: '#ffff99', endcolor: '#ffffff', afterFinish: fnEndOfFadeOut });
The problem i'm facing is that after the animation is done, the element is left with the following style (according to FireBug):
element.style {
background-color:transparent;
background-image:none;
}
Which overrides the CSS rule, since it's set at the element level, so I'm losing the background that the item used to have...
What I'm trying to do is, in the callback function I'm running after the animation is done, set the style properties to a value that'll make them "go away".
var fnEndOfFadeOut = function() {
elHighlight.style.backgroundColor = "xxxxx";
elHighlight.style.backgroundImage = "xxxxx";
}
What I'm trying to figure out is what to put in "xxxx" (or how to do the same thing in a different way).
I tried 'auto', 'inherit', and '' (blank string), and neither worked (I didn't really expect them to work, but I'm clueless here).
I also tried elHighlight.style = ""; which, expectably, threw an exception.
What can I do to overcome this?
I know I can put a span inside the element that I'm highlighting and highlight that span instead, but I'm hoping I'll be able to avoid the extra useless markup.

Chances are you're not setting the style on the correct element. It's probably being set somewhere up the line in a parent node.
elHighlight.style.backgroundColor = "";
elHighlight.style.backgroundImage = "";
You can also remove all the default styling by calling:
elHighlight.style.cssText = "";
In any case, you'll still have to do this on the specific element that is setting these properties, which means you may need to do a recursion on parentNode until you find it.

Try
elHighlight.style.removeProperty('background-color')
elHighlight.style.removeProperty('background-image')

have you tried elHightlight.style.background = "";?
I have a highlighter code on my site and this works
function highlight(id) {
var elements = getElementsByClass("softwareItem");
for (var ix in elements){
elements[ix].style.background = ""; //This clears any previous highlight
}
document.getElementById(id).style.background = "#E7F3FA";
}

An HTML element can have multiple CSS classes. Put your highlight information inside a CSS class. Add this class to your element to highlight it. Remove the class to undo the effect.