YouHue!

Welcome
To
jQuery
youHue
Plugin
Demo
Page
Above is a very quick example of what youHue does but see below for full explanations and demos!

There are options to have both of these methods target either the background of an element like this one:

Background

Or the foreground of the element, like this one:

Foreground

You will see throughout this demo youHue changing colours of different sections, you will also see that I have tried to make it as easy as possible for the user by not requiring them to mess around with the plug-in code. Everything can be done from your own js file by saying true to the options you want but this can be seen more below!

How do you use it?

First you need to include the js file into your project.

<script src="js/youHue.js"></script>

Once you have included the youHue.js file in your project directory you can get started with using the plugin. To do this you must call upon the plugin in your own script file i.e. script.js, it will look something like this:

$(".example").youHue({});
The code above, left like that will do nothing to your chosen element however, when you start adding options into the curly brackets you will see changes. Lets create some boxes as an example. At the moment they have no colour apart from default CSS colours.
Example 1
Example 2
Example 3

Options for Random Colours

We will start with looking at the options you have when you want to have completely random colours chosen for your elements. To have just the background of an element change simply say this for your chosen element:

$(".example1").youHue({ backgroundColor: true });
Example 1

For your font colour to be the only colour changed simply make your option:

foregroundColor: true
Example 2

If you have multiple elements you wish to be different colours but dont want to give them different classes youHue allows you to do this completely randomly by adding this to your options:

randomize: true
Example 3
Example 3
Example 3

The example above looks like this in a js file:

$(".example3").youHue({ backgroundColor: true, foregroundColor: true, randomize: true });

But they can be changed to be either background or foreground or as you can see both.

Now for your own colour pallettes!

The processes for this section are slightly different than the section above but that is because the way that it works is slightly different also. The functions of this section pick hex codes from an array and make sure that hex code cant be picked again for the same "box", this is to stop clashes of text with background. The easiest example to show you would be the "Hello World" boxes at the top of this page.

Your Options

First things first for your own colour pallette is to add an array of your colours. For this I will use 3 but you can use as many as you like! To add an array of your own colours it should look like this:

$(".myexample").youHue({ "colors": ['#000000','#FFFFFF','#CCCCCC'], });

Make sure to put the word colors in double quotes and each colour within the square brackets in single quotes seperated by a comma, this is because it is something as simple as a missed comma that can make a whole javascript file stop working.

Once you have your colour array set up and ready you can set whether you want foreground and/or background to be targetted by one colour from your array on each page load or multiple colours to be chosen for multiple elements, as mentioned above. Here are some examples of how that would look:

Example
$(".myexample").youHue({ "colors": ['#f1c40f','#000','#7F8C8D'], myBackground: true });
Example 2
$(".myexample2").youHue({ "colors": ['#f1c40f','#000','#7F8C8D'], myForeground: true });
Example 3
Example 3
Example 3
$(".myexample3").youHue({ "colors": ['#f1c40f','#000','#7F8C8D'], myRandom: true });

As you can see on the above example adding "myRandom" to the options it will do both foreground and background by default as opposed to the random colour option above. This default can be overidden by just adding "myBackground" or "myForeground" to the options to be more specific. See below:

$(".myexample4").youHue({ "colors": ['#f1c40f','#000','#7F8C8D'], myRandom: true, myForeground: true });
Example 4
Example 4
Example 4

↑ Back to top ↑