jQuery Plugin To Randomize CSS Classes On Elements - randomClassJS
| File Size: | 4.03 KB |
|---|---|
| Views Total: | 561 |
| 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.











