jQuery Plugin To Randomize CSS Classes On Elements - randomClassJS

File Size: 4.03 KB
Views Total: 554
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
jQuery Plugin To Randomize CSS Classes On Elements - randomClassJS

randomClassJS is a very small jQuery plugin that adds random CSS classes to html elements on each page refresh.

How to use it:

1. Download and place the jQuery randomClassJS plugin after you've loaded jQuery JavaScript library.

<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="jquery.randomClass.js"></script>

2. Create a set of html elements like this:

<div class="box">Element 1</div>
<div class="box">Element 2</div>
<div class="box">Element 3</div>

3. Call the function to assign random CSS classes (e.g. randomClass0, randomClass1, randomClass2, etc) to these elements.

$('.box').randomClass();

4. Add your custom CSS styles to the elements.

.randomClass0 { ... }

.randomClass1 { ... }

.randomClass2 { ... }

5. Configuration options with default values.

$('.box').randomClass({

  // the number of CSS classes
  count: 0,

  // allows repeat classes to be generated rather than only allowing each class once
  repeat: false,

  // custom CSS class prefix
  customClass: "randomClass",

  // uses an array of class names instead of random classes
  customArray: [],

  // callback
  after: function() {}
  
});

This awesome jQuery plugin is developed by cjthedizzy. For more Advanced Usages, please check the demo page or visit the official website.