I am using the below code and I am having trouble getting elements to collapse when there is no content in the dataset. Therefore, the webpage has a lot of large white spaces.
I want the code to check the dataset and collapse the gallery/strip if there is nothing found in the dataset.
Any help is much appreciated!
$w.onReady(() => { $w("#dynamicDataset").onReady(() => { const item = $w("#dynamicDataset").getCurrentItem(); !item.gallery ? $w("#gallery1").collapse() : $w("#gallery1").expand(); !item.stripImageLeft ? $w("#columnStrip13").collapse() : $w("#columnStrip13").expand(); !item.stripImageRight ? $w("#columnStrip13").collapse() : $w("#columnStrip13").expand(); !item.mainImage2 ? $w("#gallery2").collapse() : $w("#gallery2").expand(); !item.processGallery ? $w("#gallery3").collapse() : $w("#gallery3").expand(); !item.videoUrl ? $w("#videoPlayer1").collapse() : $w("#videoPlayer1").expand(); }); });
Try this link for the full thread. For me, just double clicking the footer handle fixed the issue.
https://www.wix.com/velo/forum/community-discussion/any-expand-collapse-white-space-resolution/p-1/dl-5ebceafc36e45e002d0b35e4
Hi everyone- I found the solution on another forum...
To remove an unwanted gap between the footer and the last element on the page, double-click the footer handle to remove the gap.
To learn more click here.
Hi Kristof - Any thoughts on why I am getting so much white space at the bottom of my page? I've reduced all the spacing between elements, and it still shows up. It is almost as if any empty element is pushing to the bottom instead of collapsing. The above code is what I am currently using.
Here is an example with all elements filled in, and it looks great.
https://www.jkaedesign.com/Projects/Yerba-Buena-HS---Student-Union-%26-Administration-Building
Here is an example with all the white space at the bottom:
https://www.jkaedesign.com/Projects/Donner-Lake
Thanks again Kristof! It's working with this code, but for some reason the very very bottom of the page has a ton of white space. It's almost like the white space is moving to the bottom instead of between everything. I checked the last element on the dynamic page, and there are no gaps between it and the footer.
I tested 2 scenarios:
Scenario 1: Every element has content to pull from the dataset. This results in no white space at bottom of page.
Scenario 2: Elements collapse accordingly due to no data in dataset, but a ton of white space appears at the very bottom of page.
$w.onReady(() => { $w("#dynamicDataset").onReady(() => { // Gets the current item properties and stores them in a variable called item const item = $w("#dynamicDataset").getCurrentItem(); if (!item.gallery){ $w("#gallery1").collapse() } else { $w("#gallery1").expand() } if (!item.mainImage2){ $w("#gallery2").collapse() } else { $w("#gallery2").expand() } if (!item.stripImageLeft){ $w("#columnStrip13").collapse() } else { $w("#columnStrip13").expand() } if (!item.processGallery){ $w("#gallery3").collapse() } else { $w("#gallery3").expand() } if (!item.processGallery){ $w("#columnStrip12").collapse() } else { $w("#gallery3").expand() } if (!item.videoUrl){ $w("#videoPlayer1").collapse() } else { $w("#videoPlayer1").expand() } }); });
This is my latest code...I think it is getting close. It doesn't show any errors, but there are still some white gaps on the page when I preview it.
$w.onReady(() => { $w("#dynamicDataset").onReady(() => { // Gets the current item properties and stores them in a variable called item const item = $w("#dynamicDataset").getCurrentItem(); if (!item.gallery){ $w("#gallery1").collapse() } else { $w("#gallery1").expand() } if (!item.mainImage2){ $w("#gallery2").collapse() } else { $w("#gallery2").expand() } if (!item.stripImageLeft){ $w("#columnStrip13").collapse() } else { $w("#columnStrip13").expand() } if (!item.processGallery){ $w("#gallery3").collapse() } else { $w("#gallery3").expand() } if (!item.videoUrl){ $w("#videoPlayer1").collapse() } else { $w("#videoPlayer1").expand() } }); });
Thanks for your help! I really appreciate it!
$w.onReady(() => { $w("#dynamicDataset").onReady(() => { // Gets the current item properties and stores them in a variable called item const item = $w("#dynamicDataset").getCurrentItem(); // Checks if the current item has a value in the "video" field if (!item.videoUrl) { // Collapses the video player if there is no value for "video" $w("#videoPlayer1").collapse(); } }); }); $w.onReady(() => { $w("#dynamicDataset").onReady(() => { const item = $w("#dynamicDataset").getCurrentItem(); if (!item.processGallery) { $w("#gallery3").collapse(); } }); }); $w.onReady(() => { $w("#dynamicDataset").onReady(() => { const item = $w("#dynamicDataset").getCurrentItem(); if (!item.mainImage2) { $w("#gallery2").collapse(); } }); }); $w.onReady(() => { $w("#dynamicDataset").onReady(() => { const item = $w("#dynamicDataset").getCurrentItem(); if (!item.gallery) { $w("#gallery1").collapse(); } }); });
Can you paste your new code here, and maybe a screenshot from the datasey collection.
Hmm... Tried another option and this works for collapsing my video, but it doesn't work for the galleries.
$w.onReady(() => { $w("#dynamicDataset").onReady(() => { const item = $w("#dynamicDataset").getCurrentItem(); if (!item.videoUrl) { $w("#videoPlayer1").collapse(); } }); });
Thanks Kristof!
It says that "item" is not defined. Any advice?
Hi Chelsea, I think what you should use an if statement. i don't think the way you are doing it works in javascript.
if (!item.gallery){
$w("#gallery1").collapse()
} else {
$w("#gallery1").expand()
} Do this for all the items you need. Kind regards, Kristof.