🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

youHue is a jQuery plugin that allows its users to add random colors to elements they decide on their page that change every time the page is loaded.

color

Documentation

youHue

A JQuery plug-in which creates random colours for elements on each page load

##Your First Step

For this plug-in you will need JQuery linked to your file as well as youHue's own js file.

###JQuery

To get started with JQuery, copy and paste the link below before the closing </body> tag all other javascript files must be linked to after your JQuery link in the file. If this is not done you may run into issues further along the way.

See link below:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

###Install youHue

To get started with youHue you must first download the youHue.js file and link it to your project, the file you use should be named youHue.js

Then following the advice above place it underneath your JQuery link before the closing </body> tag. The link should look like the one below:

<script type="text/javascript" src="youHue.js"></script>

Unless you have a seperate folder for your js files in which case do not forget to add the folder name before the file name, for example:

<script type="text/javascript" src="js/youHue.js"></script>

##Getting to use youHue

Now we have all of our files downloaded and linked we are ready to get started with using the plug-in! Let us say you wanted to use this on a blog or website that had a lot of titles. youHue can take those titles and have them change colour on every page load in two ways but to see a full explanation and demonstration please refer to the demo.

See Below for an example of what I mean:

<div class="post">   <div class="post-title"><h2>Just Another Post</h2></div>     <div class="post-content"> 		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.  		Aliquam pellentesque neque odio, et posuere quam egestas a.  		Nam euismod sed dui eu mattis. Fusce mollis elit euismod magna pharetra blandit. 		Duis semper leo turpis, vel sollicitudin purus sollicitudin id. Ut in interdum dolor...</p> 	</div> </div> 

To target the element you want (in this case the title) you would simply do this in your script file:

$(".post-title").youHue({ //This is where you would put your chosen options and colour arrays });

##Have some Fun!

There are a number of options you can use to change the way your chosen elements react to youHue and a full demonstration of those can be seen on the demo site, so please take a look!


You May Also Like