Hi, basically i have a page on my site with boxes that slide to reveal a background color. I want this background color to be random on load of page by adding a class to the element, eg .blue, .green etc...
I have created this code and as you may notice this randomly sorts the color class and applies to the element, this works for the first 6 elements however this page in particular has 12 elements i wish this to apply to, so my question is how do i apply a random selection of the variable classes to all ".portfolio ul li a "? Would it need to have some form of a repeat?
This is my script ..
function randCol() {
return (Math.round(Math.random())*7); }
$(document).ready(function() {
var classes = [ 'blue', 'orange', 'green', 'pink', 'black', 'white'];
classes.sort( randCol );
$('.portfolio ul li a').each(function(i, val) {
$(this).addClass(classes[i]);
});
})
This is my source code structure
<div class="portfolio">
<ul>
<li>
<a href="#">
<img src="images/content/portfolio/sample1.png" height="175" width="294" alt="sample" class="front" />
Text for behind the image
</a>
</li>