Hide and Show Strips

Ask the community
,
1

Hi i’m trying to get a button on click to show a strip.
This this the code i’ve used so far. The code that i’ve put in bold is the final piece to the puzzle.

export function uploadButton2_change(event) {
$w(‘#uploadButton2’).hide();
$w(‘#viewPhoto’).expand();
$w(‘#viewPhoto’).show();
}

export function viewPhoto_click(event) {
$w(“#viewImageStrip”).expand();
$w(“#uploadImageStrip”).hide();
$w(“#viewImageStrip”).show();

}
export function editPhoto_click(event) {
$w(‘#uploadImageStrip’).show();
$w(‘#viewImageStrip’).hide();

}

Thanks and Regards
Adam

2

Check your code for starters.

See the difference between show and hide and expand and collapse.
https://www.wix.com/corvid/reference/$w.HiddenMixin.html
https://www.wix.com/corvid/reference/$w.CollapsedMixin.html

Show and hide are different to expand and collapse.

Show and hide basically just show or hide an element on the page, however it is still taking up room on your page.

Expand and collapse will either expand an element on your page so that it is shown and any element below that will move down the page accordingly, whilst when collapsed the element will not be visible on your page and it will also not be taking up any space on your page either and elements moved down for expand will then be moved back up when it is collapsed.

You can’t have the same element doing two different functions.

export function uploadButton2_change(event) {
$w(‘#uploadButton2’).hide();
$w(‘#viewPhoto’).expand();
$w(‘#viewPhoto’).show();
}
// #viewPhoto you have got twice with expand and show.

export function viewPhoto_click(event) {
$w(“#viewImageStrip”).expand();
$w(“#uploadImageStrip”).hide();
$w(“#viewImageStrip”).show();
}
// #viewImageStrip you have got twice with expand and show.

export function editPhoto_click(event) {
$w(‘#uploadImageStrip’).show();
$w(‘#viewImageStrip’).hide();
}
// #viewImageStrip you had got twice before with expand and show, so it needs to be either hide or collapse.

3

Thanks i will try again.

This functionality is all in aide of showing a user the photo that they have uploaded, similar to the functionality that exists on this forum. For example if a select an image now, once i confirm that image it will show the user that the image chosen is correct and has loaded successfully

4

That’s brilliant i now have this working. The last thing to do with this is add a loading gif. This should load on a timeout, do you know what and where i should add this code please?

export function uploadButton2_change(event) {
$w(‘#uploadButton2’).hide();
$w(‘#viewPhoto’).expand();
}

export function viewPhoto_click(event) {
$w(“#viewImageStrip”).show();
$w(‘#viewImageStrip’).scrollTo()
}

export function editPhoto_click(event) {
$w(‘#uploadImageStrip’).scrollTo()
$w(‘#uploadButton2’).show();
$w(‘#viewPhoto’).collapse();

}

I have a spinner, spinning away on the strip that displays the photo currently

Thanks and Regards
Adam