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
Add a repeater to your page with a container, box and button. Create a database with fields such as color name, type, hex, rgb color code. Then add Wix Code to webpage.
Add a dropdown input to filter the repeater data.
When visitors select a color category, the repeater items will be updated.
Add a repeater to your page with a container, box and button. Create a database with fields such as color name, type, hex, rgb color code. Then add Wix Code to webpage.
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
