Good Morning,
I know you can collapsed text and text boxes, but is there a way to do this with elements that are side by side?
for example: I have texted positioned like this: Monday, Tuesday, when Monday is not selected. Tuesday will move to the left in Monday spot. When Monday is selected Tuesday will move back to it’s original spot.
You should be able to do this by using a Repeater and just refreshing the content of the Repeater items.
Hello Eb Simmons!
Another way would be changing the text of the text boxes using code based on which one you want to start with.
$w('#text1').text = 'Monday'
$w('#text2').text = 'Tuesday'
.
.
Or add the text boxes with smallest possible width, then using code set the text values and when Monday is not select it set the text to “” so it will go back to the original width. same concept as show more and show less example -here. this answer might help.
I hope this helps!
Massa
I am not sure how to accomplished this by using a repeater. Do you have a example?
Hello Messa,
I guess I don’t understand how setting the first example will allow my text to move into the missing text space.
@emsimmons77 Hello
You can’t move the element it self but you can change it text
- add a conditional statement (if clicked or if missing…)
- If yes set the texts to be :
$w('#text1').text = 'Monday'
$w('#text2').text = 'Tuesday'
.
.
- if not then set the texts shifted
$w('#text1').text = 'Tuesday'
$w('#text2').text = 'Wednesday'
.
.
Best
Massa
Hi Massa,
I appreciate your time and help. I just don’t think this code will work for me.
Massa,
I feel so stupid . I understand what your saying now… but where would I add this within my code?
import wixData from 'wix-data';
$w.onReady(function () {
$w("#noResText").hide();
$w("#Categorytext").hide();
$w("#CityStatetext").hide();
});
export function searchbutton_click_1(event, $w) {
$w("#dataset2").setFilter(wixData.filter()
.contains("category", $w('#vendordropdown').value)
.and(wixData.filter()
.contains("cityState", $w('#cityandstatedropdown').value)
)
).then((results) => {
let count = $w("#dataset2").getTotalCount();
if(count === 0){
$w("#noResText").show();
}
if (count >= 1) {
$w("#noResText").hide();
}
console.log("Dataset2 is now filtered");
let numberOfResults = $w("#dataset2").getTotalCount()
$w('#searchcount').text = String(numberOfResults);
console.log(numberOfResults);
}).catch((err) => {
console.log(err);
});
$w('#Vendorlist').expand();
}
export function vendordropdown_change(event) {
// update the label of '#Categorytext' to be the same as #vendordropdown
let dropdownlabel = $w("#vendordropdown").value
$w("#Categorytext").text = dropdownlabel
if ($w("#vendordropdown").value === "Categorytext") {
$w("#Categorytext").hide();
} else {
$w("#Categorytext").show();
}
console.log($w("#Categorytext").text);
( $w('#clearallbutton').show() )
}
export function cityandstatedropdown_change(event) {
// update the label of '#CityStatetext' to be the same as #cityandstatedropdown
let dropdownlabel = $w("#cityandstatedropdown").value
$w("#CityStatetext").text = dropdownlabel
if ($w("#cityandstatedropdown").value === "CityStatetext") {
$w("#CityStatetext").hide();
} else {
$w("#CityStatetext").show();
}
console.log($w("#CityStatetext").text);
( $w('#clearallbutton').show() )
}
export function clearallbutton_click(event) {
$w("#vendordropdown").value = "Select a Vendor Category:";
$w("#cityandstatedropdown").value = "Select a City & State:";
$w("#CityStatetext").hide();
$w("#Categorytext").hide();
$w('#clearallbutton').hide();
$w("#dataset2").setFilter(wixData.filter())
$w('#searchcount').text= "23"
}
Hey
Would you please provide your editor’s link.
Massa
@massasalah18 I just need to copy and paste the link correct?
@emsimmons77 Yes please
I can’t seem to find the boxes you want to apply this functionality on.
However to do it you need to follow some steps
-
Add text boxes.
-
Inside an event ( lets say on page ready, or on click ) set the text boxes to their values:
$w('#text1').text = 'Monday'
$w('#text2').text = 'Tuesday'
Based on the change you want change the values.
I believe this example will be helpfull: https://www.wix.com/code/home/example/Change-Site-Content
There’s more than one way to implement what your aiming for, that’s just one so feel free to look more and find what suits you better.
It’s pretty easy once you start implementing it.
Good Luck
Massa
The text boxes are there. Not sure why you cant see them. I just need to know where to add the code? My text boxes are not an on click event. They auto populate once the drop down box changes.
below is the code where I am using the text boxes. The text box that I would like to shifted as you suggested in " citystatetext and category text"
Thank you for your help.
export function cityandstatedropdown_change(event) {
// update the label of '#CityStatetext' to be the same as #cityandstatedropdown
let dropdownlabel = $w("#cityandstatedropdown").value
$w("#CityStatetext").text = dropdownlabel
if ($w("#cityandstatedropdown").value === "CityStatetext") {
$w("#CityStatetext").hide();
} else {
$w("#CityStatetext").show();
}
console.log($w("#CityStatetext").text);
( $w('#clearallbutton').show() )
}
export function vendordropdown_change(event) {
// update the label of '#Categorytext' to be the same as #vendordropdown
let dropdownlabel = $w("#vendordropdown").value
$w("#Categorytext").text = dropdownlabel
if ($w("#vendordropdown").value === "Categorytext") {
$w("#Categorytext").hide();
} else {
$w("#Categorytext").show();
}
console.log($w("#Categorytext").text);
( $w('#clearallbutton').show() )
}
Hello
I see your aim now. and the easiest way to do it is using sow and hide (as we only have two text boxes)
To do it you need to have to sets of text boxes:
set 1: it has the text boxes you have in the editor now :
set 2: it has another text box for City and state:
Those sets should be places on top of each other:
One of those sets be show and the other is hidden depending on the existence of the category.
Here’s how the code should end up looking like:
export function vendordropdown_change(event) {
// update the label of '#Categorytext' to be the same as #vendordropdown
let dropdownlabel = $w("#vendordropdown").value
$w("#Categorytext").text = dropdownlabel
if ($w("#vendordropdown").value === "Categorytext") {
$w("#Categorytext").hide();
$w('#CityStatetext').hide();
} else {
if ($w("#cityandstatedropdown").value.length > 0) { // city value
$w("#CityStatetext2").hide()
$w("#CityStatetext").show();
}
$w("#Categorytext").show();
}
console.log($w("#Categorytext").text);
($w('#clearallbutton').show())
}
export function cityandstatedropdown_change(event) {
// update the label of '#CityStatetext' to be the same as #cityandstatedropdown
let dropdownlabel = $w("#cityandstatedropdown").value
$w("#CityStatetext").text = dropdownlabel
$w("#CityStatetext2").text = dropdownlabel
if ($w("#cityandstatedropdown").value === "CityStatetext") {
$w("#CityStatetext").hide();
$w("#CityStatetext2").hide();
} else {
if ($w("#vendordropdown").value.length === 0) { // no category
$w("#CityStatetext").hide()
$w("#CityStatetext2").show();
}else{
$w("#CityStatetext").show()
$w("#CityStatetext2").hide();
}
}
console.log($w("#CityStatetext").text);
($w('#clearallbutton').show())
}
It will work perfectly this way!
Best Of Luck!
Massa