Randomizer

Newer Tutorial Available

Cloneable

Add to before </body> tag in page or project settings

<script>
// RANDOMIZER POWER-UP
window.addEventListener("DOMContentLoaded", (event) => {
  $("[tr-randomizer-element='component']").each(function (index) {
    let componentEl = $(this),
      listMainEl = componentEl.find("[tr-randomizer-element='list-main']"),
      listOtherEl = componentEl.find("[tr-randomizer-element='list-other']"),
      triggerClickEl = componentEl.find("[tr-randomizer-element='trigger-click']"),
      triggerHoverEl = componentEl.find("[tr-randomizer-element='trigger-hover']");
    function randomize() {
      listMainEl.children().each(function () {
        $(this).attr("tr-randomizer-index", $(this).index());
      });
      listOtherEl.children().each(function () {
        $(this).attr("tr-randomizer-index", $(this).index());
      });
      $.fn.shuffle = function () {
        var j;
        for (var i = 0; i < this.length; i++) {
          j = Math.floor(Math.random() * this.length);
          $(this[i]).before($(this[j]));
        }
        return this;
      };
      listMainEl.children().shuffle();
      listMainEl.children().each(function () {
        let sortingIndex = $(this).attr("tr-randomizer-index");
        listOtherEl.each(function () {
          $(this).find(`[tr-randomizer-index='${sortingIndex}']`).appendTo($(this));
        });
      });
    }
    randomize();
    triggerClickEl.on("click", function () {
      randomize();
    });
    triggerHoverEl.on("mouseenter", function () {
      randomize();
    });
  });
});
</script>

Copy Code

Apply the required attributes

Required Elements

This component contains all elements related to this instance

Name

tr-randomizer-element

Value

component

Optional settings for this element

Name

Value

Name

Value

Name

Value

Name

Value

Name

Value

Randomize items in this main cms list

Name

tr-randomizer-element

Value

list-main

Optional settings for this element

Name

Value

Name

Value

Name

Value

Name

Value

Name

Value

Optional Elements

Set items in these other cms lists to same order as main list

Name

tr-randomizer-element

Value

list-other

Optional settings for this element

Name

Value

Name

Value

Name

Value

Name

Value

Name

Value

Click on this click trigger to re-randomize lists

Name

tr-randomizer-element

Value

trigger-click

Optional settings for this element

Name

Value

Name

Value

Name

Value

Name

Value

Name

Value

Hover on this hover trigger to re-randomize lists

Name

tr-randomizer-element

Value

trigger-hover

Optional settings for this element

Name

Value

Name

Value

Name

Value

Name

Value

Name

Value

Optional Settings

No items found.

Project Cloneable

Original Website

Project Code

Starter File

Design File

Documentation

All Resources

No items found.