Random background and text color

[antonioprado]

Re: Random color background

Hello @arminunruh and @mariusjopen ! I'm trying to achieve this: random background and text color; example: when i load the page, i need to have a random background color, and be able to choose the text color as well, based on the background color (when the random background is black, the text is white, and the opposite). Is there any way to do this? I've tried to follow the code you gave but nothing...

Thank you very much guys!! Have a nice week! :D

[mariusjopen]

Hi antonioprado!

Did you already manage the normal random background color?

Can you post a link to the website?

If this works – then we can figure out how to make the opposite color for specific elements.

:-)

Keep me updated!

Marius

[antonioprado]

Hi @mariusjopen !! Thank you for your answer! I'm working on a local host, but i've created a page to show you the code i'm using! I already manage the normal random background color as you can see on this page:

http://antonio-prado.com/backgroundtest

In this page I have two different backgrounds, white and black, and what I need to do is change the text color based on the active background.

This is the code I'm using for the random background:

<script>
var colors = ["#fff", '#000', '#f0f', '#0ff', '#00f', '#ff0', '#0f0']
Frontend.GlobalEvents.on("newpageshown", function(layoutObj, type, obj){
if(obj.slug == "frontpage"){
var ix = getRandomInt(0, colors.length);
var color = colors[ix];
jQuery('body').css('background-color', color);
}
});

// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random
// Returns a random integer between min (included) and max (excluded)
// Using Math.round() will give you a non-uniform distribution!
function getRandomInt(min, max) {
    min = Math.ceil(min);
    max = Math.floor(max);
    return Math.floor(Math.random() * (max - min)) + min;
}

</script>

Thank you very much for your help!! :D Have a good day!

[mariusjopen]

Hey Antonio,

I will try to give you a direction:

This is your code:

<script>
var colors = ["#fff", '#000', '#f0f', '#0ff', '#00f', '#ff0', '#0f0']
Frontend.GlobalEvents.on("newpageshown", function(layoutObj, type, obj){
if(obj.slug == "frontpage"){
var ix = getRandomInt(0, colors.length);
var color = colors[ix];
jQuery('body').css('background-color', color);
}
});

// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random
// Returns a random integer between min (included) and max (excluded)
// Using Math.round() will give you a non-uniform distribution!
function getRandomInt(min, max) {
    min = Math.ceil(min);
    max = Math.floor(max);
    return Math.floor(Math.random() * (max - min)) + min;
}
</script>

I would create a second array of colours which have exactly the inverted colours.

To demonstrate I reduced your array of colours to two colours. You can keep your array with the many values.

var colors = ['black', 'white'];
var colors_invert = ['white', 'black']

And then I would make a new variable which gets exactly the same random number like your color variable.

var color = colors[ix];
var color_invert = colors_invert[ix];

Then I would assign that new variable to another object

jQuery('body').css('background-color', color);
jQuery('object').css('color', color_invert);

In total it will look like this:

<script>
var colors = ["#fff", '#000', '#f0f', '#0ff', '#00f', '#ff0', '#0f0']
var colors_invert = [HERE YOU HAVE THE INVERT VALUES IN THE SAME ORDER LIKE ABOVE]
Frontend.GlobalEvents.on("newpageshown", function(layoutObj, type, obj){
if(obj.slug == "frontpage"){
var ix = getRandomInt(0, colors.length);
var color = colors[ix];
var color_invert = color_invert[ix];
jQuery('body').css('background-color', color);
jQuery('NEW_OBJECT').css('color', colors_invert);
}
});

// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random
// Returns a random integer between min (included) and max (excluded)
// Using Math.round() will give you a non-uniform distribution!
function getRandomInt(min, max) {
    min = Math.ceil(min);
    max = Math.floor(max);
    return Math.floor(Math.random() * (max - min)) + min;
}
</script>

I hope that helped :-)

All the best!

Marius

[antonioprado]

Hi @mariusjopen !! Thank you very much for your time and for the answer! I just put the code you gave me, but nothing happens; only the background changes it's color. I have a question that I think is important and it's the reason why it's not working:

jQuery('NEW_OBJECT').css('color', colors_invert);

What do you mean with NEW OBJECT? Is something that I have to create? Or just put this word...?

Thank you very much!! All the best!! :D

[mariusjopen]

Hey antonioprado,

the code does not do anything because you need to adjust it to your needs first :-)

I really recommend to get first a bit into Javascript and jQuery.

On Codeacademy you can get a quick crashcourse which will teach you the basic.

What I showed you here is pretty basic.

The NEW_OBJECT is the object you want to apply the inverted colour to.

Once you get the basics, you will understand my explanation :-)

Good luck! I went through the same shit once. But it is surprisingly easy, once you got the basics.

Marius

[antonioprado]

@mariusjopen Hi !! Thank you very much for your time and the advice, I really appreciate it!! I already start the course on Code Academy! Hope to be able to understand it... :)
Thank you and have a nice week!!

[mariusjopen]

Hi antonioprado!

Great! Success!

Once you got it – you can do much more than random backgrounds ;-)

Best!

Marius