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/tabs/img/investinourfuture.jpg" alt="Invest in our Future" />
	<img class="full-width hide"
		src="../../demos/tabs/img/flytheskies.jpg" alt="Fly the Skies" />
	<img class="full-width hide"
		src="../../demos/tabs/img/protect-environment.jpg" alt="Protect Environment" />
</div>

Randomize tables rows

All five (5) table rows get shuffled on page load.

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

Data sample
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:: 2020-12-09