I’m trying to modify certain containers of repeater and I was told it’s not possible.
each repeater container has an image in it, I want to change the height of every 5th image.
is this possible to achieve using velo?
Yes, this is possible!
$w.onReady(function () {
let myData = [
{ _id: '1', value1: "apple", value2: 'whatever', value3: true },
{ _id: '2', value1: "chair", value2: "wooden", value3: 4 },
{ _id: '3', value1: "book", value2: "hardcover", value3: 150 },
{ _id: '4', value1: "pen", value2: "blue", value3: 0.5 },
{ _id: '5', value1: "lamp", value2: "desk", value3: "LED" },
{ _id: '6', value1: "shoes", value2: "running", value3: "size 10" },
{ _id: '7', value1: "phone", value2: "smartphone", value3: "Android" },
{ _id: '8', value1: "table", value2: "rectangular", value3: "wood" },
{ _id: '9', value1: "notebook", value2: "spiral-bound", value3: "college-ruled" },
{ _id: '10', value1: "camera", value2: "digital", value3: "20 megapixels" }
];
$w('#repeater1').data = myData;
$w('#repeater1').onItemReady(($item, itemData, index)=>{
$item('#txtTitle').text = itemData.value1;
$item('#txtSubtitle').text = itemData.value2;
$item('#btn1').onClick(()=>{console.log('Item-Data: ', itemData);
$w('#repeater1').forEachItem(($item, itemData, index)=>{
if (index % 4 === 0) {$item('#txtTitle').text = 'xxxx';}
});
});
});
});
Use this example for your purposes!
After a click onto one of the buttons inside repeater, every x-item will be changed.
In this example → every 4th. one will change it’s value1…
2 Likes
this is the way I want it to be displayed, every 4th of 5th image to be taller. and to take images and texts from cms.
this is one of the options chatGPT offered me but it doesn’t work
$w.onReady(function () {
const repeaterID = '#repeater6';
const containerID = '#container6';
const imageID = '#image3';
$w(repeaterID).forEachItem(($item, index) => {
// Check if it's the 5th container (indexes start from 0)
if ((index + 1) % 5 === 0) {
// Access the image in the current container
const currentImage = $item(containerID + '_' + index).$w(imageID);
// Set the image height to be 2 times more
currentImage.height *= 2;
}
});
});
It is possible to get every x-element to change it’s parameters, but only the parameters, which are given by wix.
Regarding the rezising of an image, there are no real possibilities given.
All what is given is…
Thanks a lot <3
is there any way to achieve the result I want with using anything else but repeater? and also to have pagination in the end (I guess connected to cms, showing certain number of items on a page)
The most common and used elements in wix are…
-REPEATER
-MSB (Multistate-Box)
-HTML-Component
-Custom-Element
These are your options.
In your case the last 2-options are the most promissing, because using them, you are able to create your own REPEATER → but this will need absolute professional skills to do so.
I do not think there is a chance to solve your problem with MSB.
An simple example of how to generate your own —> REPEATER …
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
margin: 0;
display: flex;
align-items: center;
justify-content: center;
width: 100vw;
height: 100vh;
background-color: #ffffff; /* Set a background color for better visibility */
}
.container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100vw;
height: 100vh;
}
.mainDiv {
width: calc(100% - 40px); /* 20px margin on each side */
background-color: red;
border-radius: 10px; /* Optional: Add rounded corners */
padding: 20px;
box-sizing: border-box;
margin-bottom: 20px; /* Add margin between the two mainDivs */
}
.itemDiv {
margin: 5px;
padding: 10px;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<div class="container">
<div class="mainDiv" id="mainDiv"></div>
</div>
<script>
const dataArray = [
{ _id: 123, name: 'Anna', age: 30, city: 'ExampleCity', isActive: true },
{ _id: 456, name: 'John', age: 25, city: 'SampleVille', isActive: false },
{ _id: 789, name: 'Alice', age: 35, city: 'Testburg', isActive: true },
{ _id: 101, name: 'Bob', age: 28, city: 'DemoCity', isActive: false },
{ _id: 202, name: 'Eve', age: 40, city: 'PrototypeTown', isActive: true },
{ _id: 303, name: 'Charlie', age: 32, city: 'ModelCity', isActive: false },
{ _id: 404, name: 'Mia', age: 27, city: 'ExampleVillage', isActive: true },
{ _id: 505, name: 'David', age: 45, city: 'TrialCity', isActive: false },
{ _id: 606, name: 'Sophie', age: 31, city: 'Sampleton', isActive: true },
{ _id: 707, name: 'Oliver', age: 29, city: 'Testington', isActive: false }
];
const createDivsInsideDiv = (parentDivId, dataArray) => {
const parentDiv = document.getElementById(parentDivId);
// Check if the parentDiv exists before manipulating it
if (parentDiv) {
// Loop through the array and create a div for each item
dataArray.forEach((item, index) => {
const newItemDiv = document.createElement('div');
newItemDiv.classList.add('itemDiv');
newItemDiv.textContent = `Item ${index + 1}: ${JSON.stringify(item)}`;
parentDiv.appendChild(newItemDiv);
});
}
};
// Example usage
createDivsInsideDiv('mainDiv', dataArray);
</script>
</body>
</html>
Here you can see the very first steps of generating your own repeater.
How your repeater should work?
We imagine that we send data from our page to our HTML-Component (how to do so, you will find in the VELO-APIS). What do we send over to the HTML-Component?
Sending an Array-Object …
const dataArray = [
{ _id: 123, name: 'Anna', age: 30, city: 'ExampleCity', isActive: true },
{ _id: 456, name: 'John', age: 25, city: 'SampleVille', isActive: false },
{ _id: 789, name: 'Alice', age: 35, city: 'Testburg', isActive: true },
{ _id: 101, name: 'Bob', age: 28, city: 'DemoCity', isActive: false },
{ _id: 202, name: 'Eve', age: 40, city: 'PrototypeTown', isActive: true },
{ _id: 303, name: 'Charlie', age: 32, city: 'ModelCity', isActive: false },
{ _id: 404, name: 'Mia', age: 27, city: 'ExampleVillage', isActive: true },
{ _id: 505, name: 'David', age: 45, city: 'TrialCity', isActive: false },
{ _id: 606, name: 'Sophie', age: 31, city: 'Sampleton', isActive: true },
{ _id: 707, name: 'Oliver', age: 29, city: 'Testington', isActive: false }
];
…including everything needed.
Now you need to generate a complex code, which will be able to do the following…
-capable to read the incomming Array-Object
-capable to analyze the object
-capable to create new Divs (Blocks) inside your HTML-component (this already done)
-capable to handle DRAG&DROP-behaviour
-capable to recognize all different elements and add them dynamically to the objects
- and so on…
So as you can see, this task can get very quickly very difficult.
The last option, is to find out, if Editor-X gives you already the options you are searching for. Out of my knowledge the repeater in Editor-X is already much more flexible and gives you a little bit more space to modify and play around.
An working example of what was described above, you will find here…
Working tweaking and upgrating the code a little bit, et voila…
Your ‘Mini-Repeater’ already is capable to recognize …
-STRING-values
-BOOLEAN-values
-& NUMBERS
Everything is all about your imagination and willingness to create somethign 
Additional…
This way you can improve your own REPATER…
Here in my last EXAMPLE-VERSION, our new created ‘Mini-Repeater’ is able to …
-recognize IDs as ID (now it doesn’t matter if the ID is a STRING or a NUMBER)
-also we see a new generated ID-element on our screen.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
margin: 0;
display: flex;
align-items: center;
justify-content: center;
width: 100vw;
height: 100vh;
background-color: #ffffff; /* Set a background color for better visibility */
}
.container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100vw;
height: 100vh;
}
.mainDiv {
width: calc(100% - 40px); /* 20px margin on each side */
background-color: blue;
border-radius: 10px; /* Optional: Add rounded corners */
padding: 20px;
box-sizing: border-box;
margin-bottom: 20px; /* Add margin between the two mainDivs */
}
.itemDiv {
margin: 5px;
padding: 10px;
border: 1px solid #ccc;
position: relative;
}
.title {
font-weight: bold;
color: white;
}
.idString {
position: absolute;
top: 0;
right: 0;
background-color: #f0f0f0;
padding: 5px;
border-radius: 5px;
}
</style>
</head>
<body>
<div class="container">
<div class="mainDiv" id="mainDiv"></div>
</div>
<script>
const dataArray = [
{ _id: '123', name: 'Anna', age: 30, city: 'ExampleCity', isActive: true },
{ _id: 456, name: 'John', age: 25, city: 'SampleVille', isActive: false },
{ _id: 789, name: 'Alice', age: 35, city: 'Testburg', isActive: true },
{ _id: 101, name: 'Bob', age: 28, city: 'DemoCity', isActive: false },
{ _id: '202', name: 'Eve', age: 40, city: 'PrototypeTown', isActive: true },
{ _id: 303, name: 'Charlie', age: 32, city: 'ModelCity', isActive: false },
{ _id: 404, name: 'Mia', age: 27, city: 'ExampleVillage', isActive: true },
{ _id: 505, name: 'David', age: 45, city: 'TrialCity', isActive: false },
{ _id: 606, name: 'Sophie', age: 31, city: 'Sampleton', isActive: true },
{ _id: 707, name: 'Oliver', age: 29, city: 'Testington', isActive: false }
];
const createDivsInsideDiv = (parentDivId, dataArray) => {
const parentDiv = document.getElementById(parentDivId);
// Check if the parentDiv exists before manipulating it
if (parentDiv) {
// Loop through the array and create a div for each item
dataArray.forEach((item, index) => {
const newItemDiv = document.createElement('div');
newItemDiv.classList.add('itemDiv');
// Analyze each item and place titles for all value types
for (const key in item) {
const title = document.createElement('div');
title.classList.add('title');
if (typeof item[key] === 'string' && key !== '_id') {
title.textContent = `${key}: ${item[key]}`;
newItemDiv.appendChild(title);
}
if (typeof item[key] === 'number' && key !== '_id') {
title.textContent = `${key}: ${item[key]}`;
newItemDiv.appendChild(title);
}
if (typeof item[key] === 'boolean') {
title.textContent = `${key}: ${item[key]}`;
newItemDiv.appendChild(title);
}
}
// Convert _id to string and place it in the top right corner
const idStringDiv = document.createElement('div');
idStringDiv.classList.add('idString');
idStringDiv.textContent = `ID: ${String(item._id)}`;
newItemDiv.appendChild(idStringDiv);
// Place the item's content
parentDiv.appendChild(newItemDiv);
});
}
};
// Example usage
createDivsInsideDiv('mainDiv', dataArray);
</script>
</body>
</html>
Forgot to implement the looping-counter to find every x-element on the ‘Mini-Repeater’,
here it is…
…ok last ugrades… (let us add some interactivity to our ‘Mini-Rpeater’)…
Click onto one of the items…
…and what about some more visuality …???
What kind of functionality do → YOU ← want to add to this ‘Mini-Repeater’ ???
…CONTINUE…
A little bit simplified code for your purposes…(starting point for your project)
Hey, are you using Wix Studio (or Editor X with CSS editor)?
Using for what? To generate my HTML-CODES ? → Am just using Js-Fiddle for this purposes…
body { margin: 0; display: flex; align-items: center; justify-content: center; width: 100vw; height: 100vh; background-color: #ffffff; } .container {
display: flex;
align-items: center;
justify-content: center;
width: 95vw;
height: 100vh;
}
.mainDiv {
width: calc(100% - 40px);
background: grey;
border: 2px solid #FFF;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
box-shadow: 1px 2px 4px rgba(0,0,0,.4);
padding: 50px 10px 10px 10px;
box-sizing: border-box;
margin-bottom: 20px;
position: relative; /* Add relative positioning to the mainDiv */
}
.mainTitle {
color: white;
font-size: 22px;
text-align: center;
position: absolute;
top: 10px;
left: 50%;
transform: translateX(-50%);
}
.itemDiv {
margin: 5px;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
position: relative;
background: blue;
transition: background-color 0.5s, color 0.8s;
cursor: pointer;
display: flex; /* Add display flex for aligning image and text */
align-items: center; /* Center items vertically */
flex-wrap: wrap; /* Allow flex items to wrap to the next line */
position: relative; /* Add relative positioning to the item div */
}
.itemDiv:hover {
background-color: orange;
color: black;
}
.thumbnail {
width: 150px;
height: 150px;
background: lightgrey;
object-fit: cover;
border-radius: 10%;
margin-right: 10px;
padding: 3px;
}
.keyValue {
margin: 5px;
}
.idString {
position: absolute;
top: 0;
right: 0;
color: white;
margin: 3px;
padding: 3px;
border-radius: 1%;
}
.orangeDiv {
width: 250px;
height: 150px;
background: transparent;
border-radius: 5%;
padding: 3px;
margin: 3px;
color: white;
}
.orangeDiv:hover {
width: 250px;
height: 150px;
background: transparent;
border-radius: 5%;
padding: 3px;
margin: 3px;
}
</style>
MINI-REPEATER
<script>
const dataArray = [
{ _id: '123', Name: 'Anna', age: 30, City: 'ExampleCity', isActive: true, imageSrc: 'https://wallpapers.com/images/featured/funny-monkey-pictures-gapupnyhalncb5nx.jpg' },
{ _id: 456, Name: 'John', age: 25, City: 'SampleVille', isActive: false, imageSrc: 'https://i.pinimg.com/564x/cb/dc/38/cbdc38861144e29b9d923d92846339f0.jpg' },
{ _id: 789, Name: 'Alice', age: 35, City: 'Testburg', isActive: true, imageSrc: 'https://t4.ftcdn.net/jpg/05/73/29/83/360_F_573298394_aSZmtISYIo9cGLoXwCx4lWOzDjDpO8mp.jpg' },
{ _id: 606, Name: 'Sophie', age: 31, City: 'Sampleton', isActive: true, imageSrc: 'https://news.vanderbilt.edu/manage/wp-content/uploads/Chimpanzee_smiling.jpg' },
{ _id: 707, Name: 'Oliver', age: 29, City: 'Testington', isActive: false, imageSrc: 'https://t3.ftcdn.net/jpg/05/32/26/32/360_F_532263218_oxFJyvZiVPOj04lTGfAod8tcIAAbeep8.jpg' }
];
const createDivsInsideDiv = (parentDivId, dataArray) => {
const parentDiv = document.getElementById(parentDivId);
if (parentDiv) {
dataArray.forEach((item, index) => {
const newItemDiv = document.createElement('div');
newItemDiv.classList.add('itemDiv');
const thumbnail = document.createElement('img');
thumbnail.classList.add('thumbnail');
thumbnail.src = item.imageSrc || 'default-image.jpg';
newItemDiv.appendChild(thumbnail);
const orangeDiv = document.createElement('div');
orangeDiv.classList.add('orangeDiv');
for (const key in item) {
if (typeof item[key] === 'string') {
const detail = document.createElement('div');
detail.textContent = `${key}: ${item[key]}`;
orangeDiv.appendChild(detail);
}
}
const idStringDiv = document.createElement('div');
idStringDiv.classList.add('idString');
idStringDiv.textContent = `ID: ${String(item._id)}`;
newItemDiv.appendChild(idStringDiv);
newItemDiv.appendChild(orangeDiv);
parentDiv.appendChild(newItemDiv);
});
}
};
createDivsInsideDiv('mainDiv', dataArray);
</script>
…and light version… for better understandings…
So, when you put enough of effort to generate your own REPEATER, at the end it could look like something like the following…
Including a lot of functionalities…like…
-automatic ID-RECOGNITION (no matter if STRING or NUMBER)
-automatic OWNER-RECOGNITION (at moment STRINGS only)
-automatic EMAIL-RECOGNITION (not yet included)
-automatic ITEM-COUNTER
-automatic STRING-RECOGNITION
-automatic NUMBER-RECOGNITION
-automatic BOOLEAN-VALUES-RECOGNITION (not yet included)
-integrated ITEM-POP-UP-WINDOW
-CSS-styled DESIGN
-ZOOM & RESPONSIVE friendly
What is still missing?
-Wix-Website-Interface (easy connection to Wix-Websites and Wix-Website’s data)
-integration of different Style-Modes of repeater
-drag & dropable elements
-options?
-and so on and so on…
---------> !!! Unleash your fantasy !!! <-----------------
Hi, I’m using regular editor
Thanks a lot for your time 
Then I don’t have an easy solution unfortunately 
1 Like
You already gave it up ?
Or found another solution ? If so, which one, just curious.
In the meanwhile, if you still did not find any other solution, you can test this already improved (mini-repeater) sending it some data and see the result inside the HTML-Component.
What & how to do exactly???
STEP-1: Add a HTML-Component to your page.
STEP-2: Add the following CODE → into your HTML-Component…
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
margin: 0;
display: flex;
align-items: center;
justify-content: center;
width: 100vw;
height: 100vh;
background-color: white;
}
.divMainContainer {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 98vw;
height: 90vh;
overflow: auto;
background-color: rgba(200, 120, 220, 0.8);
margin-top: 1%;
margin-bottom: 1%;
border-radius: 15px;
padding: 25px 0px 25px 0px;
}
.divImage {}
.divOwner {}
.divBoolean {
display: flex;
align-items: center;
justify-content: center;
border-radius: 5px;
font-weight: bold;
text-align: center;
color: #ffffff; /* Text color */
}
.containerItem {
width: 90vw;
min-height: 8vh;
margin: auto;
margin-top: 0.5%;
padding: 10px;
border: 2px solid #ccc;
border-radius: 5px;
position: relative;
background: rgba(175, 165, 155, 0.5);
transition: background-color 0.5s, color 0.8s;
display: flex;
align-items: center;
flex-wrap: wrap;
position: relative;
}
.containerItem:hover .divBoolean{
background: rgba(255, 155, 155, 0.5);
border-radius: 5px;
font-weight: bold;
text-align: center;
}
.containerItem .divImage {transition: transform 0.4s ease, border-radius 0.7s ease !important;}
.containerItem:hover .divImage {
transform: scale(1.5) translate(0px, -5px);
border: 3px solid lightgrey;
animation: glow 1s infinite alternate;
box-shadow: 0 0 20px rgba(20, 20, 200, 0.9);
border-radius: 40px !important;
}
.containerItem:hover {
background-color: rgba(100, 150, 250, 0.3);
}
.containerItem:hover .divID {
color: black !important;
background-color: rgba(100, 150, 250, 0.5) !important;
border: 2px solid white !important;
}
.containerItem:hover .divOwner {
color: black !important;
background-color: rgba(100, 150, 250, 0.5) !important;
border: 2px solid white !important;
}
.containerItem:after {
content: '';
background-color: rgba(255, 255, 255, 0.8);
border: 1px solid lightgrey;
position: absolute;
bottom: 0;
left: 0;
width: 10vw;
height: 9vh;
border-radius: 0 50px 0 0;
transform: scale(100%);
transform-origin: bottom left;
transition: transform 0.5s, color 1.5s;
}
.containerItem:hover .containerString {transform: translateX(+19%);}
.containerItem:hover .containerNumber {transform: translateX(+20%);}
.containerItem:hover .containerBoolean {transform: translateX(+20%);}
.containerItem:hover .divKey {color: black; background: rgba(255, 200, 155, 0.7);}
.containerItem:hover .divValue {color: black; background: rgba(255, 255, 255, 0.8);}
.containerItem:hover:after {
transform: scale(40%);
color: red;
background: rgba(255, 255, 255, 0.4);
}
.containerString:hover {background: rgba(155, 175, 255, 0.8) !important; cursor: pointer;}
.containerNumber:hover {background: rgba(155, 175, 255, 0.8) !important; cursor: pointer;}
.containerBoolean:hover {background: rgba(155, 175, 255, 0.8) !important; cursor: pointer;}
.divDataHolder {
width: 100%;
display: flex;
justify-content: space-between;
background: transparent;
margin-bottom: 1px;
}
.divKey{
color: white;
background: rgba(255, 255, 255, 0.1);
border-radius: 3%;
margin:1px;
padding: 1px;
background: rgba(200, 175, 155, 0.5);;
}
.divValue{
color: white;
background: rgba(255, 255, 255, 0.1);
border-radius: 3%;
margin:1px;
padding: 1px;
}
.divModalWindow {
width: 60%;
height: 50%;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
overflow-y: auto;
padding: 10px;
background-color: rgba(120, 100, 150, 0.9);
z-index: 9998;
border-radius: 5%;
}
.divModalWindow div {
margin-bottom: 10px;
}
.closeButton {
position: absolute;
bottom: 5px;
left: 50%;
transform: translateX(-50%);
background-color: rgba(120, 100, 150, 0.9);
color: white;
padding: 10px;
border: 1px solid black;
border-radius: 5px;
cursor: pointer;
}
.divCounter {
position: absolute;
bottom: 0;
left: 0;
color: black;
margin: auto;
padding: 1%;
font-size: 20px;
border-radius: 0% 0% 20% 0%;
width: 50px;
height: 10px;
z-index: 9999;
}
.closeButton:hover {background-color: rgba(250, 150, 150, 0.9);}
</style>
<script>
function init() {
// when a message is received from the page code
window.onmessage = (event)=> {
let repData = event.data
if (repData) {console.log("HTML Code Element received a message!");
create_Repeater(divMainContainer, repData);
}
}
}
function create_Repeater(container, data){console.log('create-repeater running...');
let counter = 1;
const divMain = document.createElement('div');
divMain.id = 'divMain';
container.appendChild(divMain);
if (divMain) {
data.forEach((item, index) => {
let containerString;
let containerNumber;
let containerBoolean;
//--------------------------------
let containerStringCreated = false;
let containerNumberCreated = false;
let containerBooleanCreated = false;
//-----------------------------------
const containerItem = document.createElement('div');
containerItem.classList.add('containerItem');
//-----------------------------------
const divCounter = document.createElement('div');
divCounter.textContent = `#${counter}`;
divCounter.classList.add('divCounter');
containerItem.appendChild(divCounter);
//-----------------------------------
const divImage = document.createElement('img');
divImage.classList.add('divImage');
divImage.src = item.imgSrc || 'default-image.jpg';
divImage.style.width = '150px';
divImage.style.height = '125px';
divImage.style.backgroundColor = 'white';
divImage.style.objectFit = 'cover';
divImage.style.borderRadius = '10%';
divImage.style.marginRight = '10px';
divImage.style.padding = '3px';
divImage.style.transition = 'transform 0.5s ease';
divImage.style.cursor = 'pointer';
containerItem.appendChild(divImage);
//-----------------------------------
const divID = document.createElement('div');
divID.classList.add('divID');
divID.textContent = `ID: ${item._id}`;
divID.style.backgroundColor = 'rgba(255, 255, 255, 0.5)';
divID.style.border = '1px solid lightgrey';
divID.style.position = 'absolute';
divID.style.top = 0;
divID.style.right = 0;
divID.style.maxHeight = '10px';
divID.style.color = 'grey';
divID.style.margin = 'auto';
divID.style.padding = '1%';
divID.style.borderRadius = '0% 0% 0% 20%';
containerItem.appendChild(divID);
//-----------------------------------
const divOwner = document.createElement('div');
divOwner.classList.add('divOwner');
divOwner.textContent = `Owner: ${item._owner}`;
divOwner.style.backgroundColor = 'rgba(255, 255, 255, 0.5)';
divOwner.style.border = '1px solid lightgrey';
divOwner.style.position = 'absolute';
divOwner.style.bottom = 0;
divOwner.style.right = 0;
divOwner.style.maxHeight = '10px';
divOwner.style.color = 'grey';
divOwner.style.margin = 'auto';
divOwner.style.padding = '1%';
divOwner.style.borderRadius = '20% 0% 0% 0%';
containerItem.appendChild(divOwner);
//-----------------------------------
for (const key in item) {
//-------------------------------------
const divDataHolder = document.createElement('div');
divDataHolder.classList.add('divDataHolder');
const divKey = document.createElement('div');
divKey.classList.add('divKey');
divKey.style.width = '35%';
divKey.style.padding = '0.7%';
divKey.style.overflow = 'hidden';
const divValue = document.createElement('div');
divValue.classList.add('divValue');
divValue.style.width = '65%';
divValue.style.padding = '0.7%';
divValue.style.display = 'flex';
divValue.style.overflow = 'hidden';
divValue.style.justifyContent = 'center';
//-------------------------------------
if (key !== '_owner' && key !== '_id' && key !== 'imgSrc') {
divKey.textContent = key;
divValue.textContent = item[key];
divDataHolder.appendChild(divKey);
divDataHolder.appendChild(divValue);
//----------[ CONTAINER-STRING ]--------------------------------------------------------------------------------------
if (typeof item[key] === 'string') {
if (!containerStringCreated) {//console.log('Generieren eines CONTAINERS für --> NUMBER-WERTE wenn nötig.');
containerString = document.createElement('div');
containerStringCreated = true;
containerString.classList.add('containerString');
containerString.id = 'containerString';
containerString.style.width = '22vw';
containerString.style.minHeight = '100px';
containerString.style.backgroundColor = 'rgba(200, 200, 200, 0.2)';
containerString.style.borderRadius = '1%';
containerString.style.padding = '0.5%';
containerString.style.margin = '0.5%';
containerString.style.transition = 'transform 0.7s ease';
containerString.style.color = 'white';
containerString.style.display = 'flex';
containerString.style.flexDirection = 'column';
} containerString.appendChild(divDataHolder);
}
//----------[ CONTAINER-NUMBER ]--------------------------------------------------------------------------------------
else if (typeof item[key] === 'number') {
if (!containerNumberCreated) {//console.log('Generieren eines CONTAINERS für --> NUMBER-WERTE wenn nötig.');
containerNumber = document.createElement('div');
containerNumber.classList.add('containerNumber');
containerNumber.id = 'containerNumber';
containerNumberCreated = true;
containerNumber.style.width = '20vw';
containerNumber.style.minHeight = '100px';
containerNumber.style.backgroundColor = 'rgba(220, 200, 200, 0.2)';
containerNumber.style.borderRadius = '1%';
containerNumber.style.padding = '0.5%';
containerNumber.style.margin = '0.5%';
containerNumber.style.transition = 'transform 0.7s ease';
//center_dataHolder();
} containerNumber.appendChild(divDataHolder);
}
if (typeof item[key] === 'boolean') {
if (!containerBooleanCreated) {//console.log('Generieren eines CONTAINERS für --> NUMBER-WERTE wenn nötig.');
containerBoolean = document.createElement('div');
containerBooleanCreated = true;
containerBoolean.classList.add('containerBoolean');
containerBoolean.id = 'containerBoolean';
containerBoolean.style.width = '20vw';
containerBoolean.style.minHeight = '100px';
containerBoolean.style.backgroundColor = 'rgba(220, 200, 200, 0.2)';
containerBoolean.style.borderRadius = '1%';
containerBoolean.style.padding = '0.5%';
containerBoolean.style.margin = '0.5%';
containerBoolean.style.transition = 'transform 0.7s ease';
containerBoolean.style.color = 'white';
//center_dataHolder();
} containerBoolean.appendChild(divDataHolder);
}
/*
//----------[ CONTAINER-BOOLEAN ]------------------------------------------------------------------
else if (typeof item[key] === 'boolean') {
if (!containerBooleanCreated) {//console.log('Generieren eines CONTAINERS für --> BOOLEAN-WERTE wenn nötig.');
containerBoolean = document.createElement('div');
containerBoolean.classList.add('containerBoolean');
containerBoolean.id = 'containerBoolean';
containerBoolean.style.width = '10vw';
containerBoolean.style.minHeight = '100px';
containerBoolean.style.backgroundColor = 'rgba(240, 200, 200, 0.2)';
containerBoolean.style.padding = '0.5%';
containerBoolean.style.margin = '0.5%';
containerBoolean.style.transition = 'transform 0.7s ease';
containerItem.appendChild(containerBoolean);
containerBooleanCreated = true;
//--------------------
divKey.style.width = '60%';
divValue.style.width = '40%';
center_dataHolder();
} containerBoolean.appendChild(divDataHolder);
const divBoolean = document.createElement('div');
divBoolean.classList.add('divBoolean');
divBoolean.id = 'divBoolean';
divBoolean.innerHTML = `<div class="icon">${item[key] ? '✓' : '✗'}</div>`;
divBoolean.style.padding = '0 10px 0 10px';
divBoolean.style.margin = '0.5%';
//---------------------
if(item.isActive===true) {divBoolean.style.background = 'rgba(155, 255, 155, 0.5)';}
else {divBoolean.style.background = "rgba(255, 155, 155, 0.5)";}
//divBoolean.style.background = "rgba(155, 255, 155, 0.5)";
//-------------------------------------
divDataHolder.appendChild(divBoolean);
containerItem.appendChild(containerBoolean);
}
*/
//----------[ ELSE ]--------------------------------------------------------------------------------------
else {}
}
function center_dataHolder() {
divValue.style.display = 'flex';
divValue.style.justifyContent = 'center';
divKey.style.display = 'flex';
divKey.style.justifyContent = 'center';
}
}
containerItem.addEventListener('click', () => showPopup(item));
divMain.appendChild(containerItem);
counter++;
containerItem.appendChild(containerString);
containerItem.appendChild(containerNumber);
containerItem.appendChild(containerBoolean);
});
}
const showPopup = (item) => {
// Close existing modal, if any
const existingModal = document.getElementById('myModalWindow');
if (existingModal) {
existingModal.remove();
}
// Create new modal
let modalDiv = document.createElement('div');
modalDiv.id = 'myModalWindow';
modalDiv.classList.add('modalDiv');
modalDiv.style.position = 'absolute';
modalDiv.style.display = 'block';
document.body.appendChild(modalDiv);
let modalContent = document.createElement('div');
modalContent.classList.add('divModalWindow');
// Add content to the modal
for (const key in item) {
const detail = document.createElement('div');
detail.textContent = `${key}: ${item[key]}`;
modalContent.appendChild(detail);
}
// Add close button
const closeButton = document.createElement('button');
closeButton.classList.add('closeButton');
closeButton.id = 'btnClose';
closeButton.textContent = 'Close';
closeButton.addEventListener('click', () => {
modalDiv.remove();
});
modalDiv.appendChild(modalContent);
modalContent.appendChild(closeButton);
};
};
</script>
</head>
<body onload="init();" style="background-color:lightgray;">
<div class="divMainContainer" id="divMainContainer"></div>
</body>
</html>
STEP-3: Save your HTML-Component-Setup.
STEP-4: Add the following code to your wix-page…
//-------- [ USER-INTERFACE ]----------------------------
const repData = [
{_owner: 'Monkey-Lord', _id: '123', Firstname: 'George', Lastname: 'Banana', _online: false, age: 30, City: 'ExampleCity', imgSrc: 'https://img.freepik.com/free-photo/view-funny-monkey-human-clothing_23-2150758496.jpg', email: 'george.banana@monkeymail.com', isActive: false, height: 1.2},
{_owner: 'Gorilla-Kong', _id: 456, Firstname: 'Bob', Lastname: 'Jungle', age: 25, City: 'SampleVille', isActive: false, imgSrc: 'https://img.freepik.com/premium-photo/funny-monkey-wearing-glasses_818056-2904.jpg', email: 'bob.jungle@monkeymail.com', height: 1.5},
{_owner: 'Baby-Chimp', _id: 789, Firstname: 'Alice', Lastname: 'Chatter', age: 35, City: 'Testburg', isActive: true, imgSrc: 'https://t4.ftcdn.net/jpg/05/73/29/83/360_F_573298394_aSZmtISYIo9cGLoXwCx4lWOzDjDpO8mp.jpg', email: 'alice.chatter@monkeymail.com', height: 1.0},
{_owner: 'Gorilla-Kong', _id: 606, Firstname: 'Sophie', Lastname: 'abc, age: 31, City: 'Sampleton', isActive: true, imgSrc: 'https://news.vanderbilt.edu/manage/wp-content/uploads/Chimpanzee_smiling.jpg', email: 'sophie.abc@monkeymail.com', height: 1.3},
{_owner: 'Orangu-Chimp', _id: 707, Firstname: 'Oliver', Lastname: 'Orange', age: 29, City: 'Testington', isActive: false, imgSrc: 'https://img.freepik.com/free-photo/view-funny-monkey-human-clothing_23-2150758510.jpg', email: 'oliver.orange@monkeymail.com', height: 1.1},
{_owner: 'Monkey-Lord', _id: '123', Firstname: 'Anna', Lastname: 'Banana', age: 30, City: 'ExampleCity', isActive: true, imgSrc: 'https://wallpapers.com/images/featured/funny-monkey-pictures-gapupnyhalncb5nx.jpg', email: 'anna.banana@monkeymail.com', height: 1.4},
{_owner: 'Gorilla-Kong', _id: 456, Firstname: 'John', Lastname: 'Jungle', age: 25, City: 'SampleVille', isActive: false, imgSrc: 'https://i.pinimg.com/564x/cb/dc/38/cbdc38861144e29b9d923d92846339f0.jpg', email: 'john.jungle@monkeymail.com', height: 1.6},
{owner: 'Baby-Chimp', _id: 789, Firstname: 'Alice', Lastname: 'Chatter', age: 35, City: 'Testburg', isActive: true, imgSrc: 'https://img.freepik.com/free-photo/view-funny-monkey-human-clothing_23-2150758498.jpg?size=626&ext=jpg&ga=GA1.1.386372595.1698537600&semt=ais', email: 'alice.chatter@monkeymail.com', height: 1.2},
{_owner: 'Gorilla-Kong', _id: 606, Firstname: 'Sophie', Lastname: 'abc', age: 31, City: 'Sampleton', isActive: true, imgSrc: 'https://news.vanderbilt.edu/manage/wp-content/uploads/Chimpanzee_smiling.jpg', email: 'sophie.abc@monkeymail.com', height: 1.3},
{_owner: 'Orangu-Chimp', _id: 707, Firstname: 'Oliver', Lastname: 'Orange', age: 29, City: 'Testington', isActive: false, imgSrc: 'https://t3.ftcdn.net/jpg/05/32/26/32/360_F_532263218_oxFJyvZiVPOj04lTGfAod8tcIAAbeep8.jpg', email: 'oliver.orange@monkeymail.com', height: 1.1},
];
//-------- [ USER-INTERFACE ]----------------------------
$w.onReady(()=>{
// ----------[ RECIEVING FROM HTML ] ----------
$w("#html1").onMessage((event)=>{let recievedData = event.data;
console.log("RECIEVED-DATA: " , recievedData);
});
//--------------------------------------------
$w('#yourButtonIDhere').onClick(()=>{send_data(repData);});
});
// ----------[ SENDING TO HTML ] ----------
function send_data(data) {console.log('recieving-data...');
$w("#html1").postMessage(data);
}
STEP-5: Don’t forget to create (add) a button onto your page and also editing all element-IDs ↔ $w(‘#yourButtonIDhere’).onClick(()=>{send_data(repData);});
STEP-6: Change the DATA inside the USER-INTERFACE-DATA-CODE.
STEP-7: PUBLISH your website again.
STEP-8: Check the changes inside the Mini-REPEATER.
NOTE: The example should look like the following…
New integrated FEATURES:
-automatic BOOLEAN-VALUES-RECOGNITION
-Wix-Website-Interface (easy connection to Wix-Websites and Wix-Website’s data)
1 Like