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 |
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.