Randomize
Randomly picks one of the child elements.
Configuration
selector(jQuery selector)- Default undefined. When undefined it selects all the children. This attribute specifies the child elements to be displayed.
shuffle(boolean)- If true, it will shuffle the order of child components.
toggle(CSS class)- Class name that will be toggled in child components and it will toggle the specified class of child components to reveal.
number(number)- Optional and use with toggle. Number of child components to be displayed when toggled. Default is set to
1.
Show one random image
Below example shows one image out of three images randomly. Probability of 33% that a different image will be display on the next page refresh. The name of class that will be toggled is 'hide' in the following three imgs.
Source code
<div class="mrgn-bttm-md"" data-wb-randomize='{ "shuffle": true, "selector": "img", "toggle": "hide" }'> <img class="full-width hide" src="demos/img/investinourfuture.jpg" alt="Invest in our Future" /> <img class="full-width hide" src="demos/img/flytheskies.jpg" alt="Fly the Skies" /> <img class="full-width hide" src="demos/img/protect-environment.jpg" alt="Protect Environment" /> </div>Randomize tables rows
All five (5) table rows get shuffled on page load.
| Column A | Column B |
|---|---|
| Row 1, column A | Row 1, column B |
| Row 2, column A | Row 2, column B |
| Row 3, column A | Row 3, column B |
| Row 4, column A | Row 4, column B |
| Row 5, column A | Row 5, column B |
Source code
<table class="table table-bordered"> <caption>Data sample</caption> <thead> <tr> <th>Column A</th> <th>Column B</th> </tr> </thead> <tbody data-wb-randomize='{ "shuffle": true }'> <tr> <td>Row 1, column A</td> <td>Row 1, column B</td> </tr> <tr> <td>Row 2, column A</td> <td>Row 2, column B</td> </tr> <tr> <td>Row 3, column A</td> <td>Row 3, column B</td> </tr> <tr> <td>Row 4, column A</td> <td>Row 4, column B</td> </tr> <tr> <td>Row 5, column A</td> <td>Row 5, column B</td> </tr> </tbody> </table>Randomize tables rows and toggle 2 rows
All five (5) table rows get shuffled on page load and 2 of them get the CSS class warning.
| Column A | Column B |
|---|---|
| Row 1, column A | Row 1, column B |
| Row 2, column A | Row 2, column B |
| Row 3, column A | Row 3, column B |
| Row 4, column A | Row 4, column B |
| Row 5, column A | Row 5, column B |
Source code
<table class="table table-bordered"> <caption>Data sample</caption> <thead> <tr> <th>Column A</th> <th>Column B</th> </tr> </thead> <tbody data-wb-randomize='{ "shuffle": true, "toggle": "warning", "number": 2 }'> <tr> <td>Row 1, column A</td> <td>Row 1, column B</td> </tr> <tr> <td>Row 2, column A</td> <td>Row 2, column B</td> </tr> <tr> <td>Row 3, column A</td> <td>Row 3, column B</td> </tr> <tr> <td>Row 4, column A</td> <td>Row 4, column B</td> </tr> <tr> <td>Row 5, column A</td> <td>Row 5, column B</td> </tr> </tbody> </table>Randomize attribute value
Select a random option within a list of options and append it as the value to the defined attribute
Example 1
Heading
Paragraph
Source code
<div class="bg-cover well" data-wb-randomize='{ "attribute": "data-bgimg-srcset", "values": [ "https://placehold.co/1920x300/blue/white.jpg 1920w, https://placehold.co/1200x300/blue/white.jpg 1200w, https://placehold.co/992x300/blue/white.jpg 992w, https://placehold.co/768x300/blue/white.jpg 768w", "https://placehold.co/1920x300/green/white.jpg 1920w, https://placehold.co/1200x300/green/white.jpg 1200w, https://placehold.co/992x300/green/white.jpg 992w, https://placehold.co/768x300/green/white.jpg 768w", "https://placehold.co/1920x300/orange/white.jpg 1920w, https://placehold.co/1200x300/orange/white.jpg 1200w, https://placehold.co/992x300/orange/white.jpg 992w, https://placehold.co/768x300/orange/white.jpg 768w", "https://placehold.co/1920x300/purple/white.jpg 1920w, https://placehold.co/1200x300/purple/white.jpg 1200w, https://placehold.co/992x300/purple/white.jpg 992w, https://placehold.co/768x300/purple/white.jpg 768w" ] }'> <div class="well mrgn-tp-md mrgn-bttm-md"> <h4 class="mrgn-tp-md">Heading</h4> <p>Paragraph</p> </div> </div>Example 2
Source code
<div data-wb-randomize='{ "attribute": "data-ajax-replace", "values": [ "../data-ajax/ajax/data-ajax-extra-en.html", "../data-ajax/ajax/data-ajax-extra-2-en.html", "../data-ajax/ajax/data-ajax-filter-en.html#filter-id" ] }'></div>Example 3
Product name:
Source code
<p> Product name: <span data-wb-randomize='{ "attribute": "data-wb-json", "values": [ "{ \"url\": \"../wb-data-json/demo/data-en.json#/products/0\", \"type\": \"replacewith\" }", "{ \"url\": \"../wb-data-json/demo/data-en.json#/products/1\", \"type\": \"replacewith\" }", "{ \"url\": \"../wb-data-json/demo/data-en.json#/products/2\", \"type\": \"replacewith\" }" ] }'></span> </p>Page details
- Date modified: