Vorbly <Code>

CODING MADE EASY WITH VORBLY

WIX CODE CHANGE REPEATER ITEM COLOR

Need dynamically change the color of a repeater item? This tutorial will show you how to use Wix Code to change repeater item with color code from your database. We will provide you with the webpage elements and sample codes required to implement this feature.

THE DEMO

1/4

THE ELEMENTS

The Page

Repeater: #repeater1

  • Button: #button1

  • Box: #box1

Dropdown: #dropdown1

The Database

Create a database Colors (#dataset1).

Recommended fields:

  • Color Name: name

  • Color Type: type

  • HEX Color Code: hex (e.g. #FFFFFF)

  • RGB Color Code: rgb (e.g. rgb(255,0,0))

THE CODE

Page Code

$w.onReady(function () {

$w("#dataset1").onReady(() => {

$w("#repeater1").forEachItem( ($w, itemData, index) => {

let color = itemData.hex;

$w("#box1").style.backgroundColor = color;

});

});

});

COMMENTS

I'm a paragraph. Click here to add your own text and edit me. It's easy.

Please complete all required fields.
No comments. Be the first to leave a comment.

Hello Good afternoon, could It be possible, from an input, click on color picker and choose the color, otherwise we need to create a huge database , we work with a lot of colours. Could be possible to click on a box and open the color picker?
thank you

Jose Manuel

Apr 19, 2021

0

WEB DESIGN & DEVELOPMENT SOLUTIONS

GET PROFESSIONAL HELP