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();
});
});
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.
Thanks Kristof!
It says that “item” is not defined. Any advice?
Wel i tought that if the item whas undefined it would have been false.
Does it also says noy defined if it shoukd get a value?
If it works if it should have a value you could do
If (item.gallery === undefined){
$w( " #gallery1 " ).expand()
} else {
$w( " #gallery1 " ).collapse
}
I’m off to bed now.
But if it aint working yet i will take a look at it in a few hours 
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();
}
});
});
Can you paste your new code here, and maybe a screenshot from the datasey collection.
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();
}
});
});
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()
}
});
});
I’ll take a closer look at it tomorrow.
I’m sorry i hadden’t had the time to reply today but it has been a very busy day.
In around 10h i’ll be able to help furter.
In the meantime if anyone else sees a solution feel free to respond
1 question
In your previous post i sa alot of $w.onReady
This can only be used once on the page.
Code inside it wil run when the page is loaded.
About the last post.
Collapsing and expanding should take away gaps except when the elements are to far away from eachother.
Try to move them a bit and be sure there are no unwanted elements behind it. Or that they don’t overlap eachother.
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()
}
});
});
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
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 Chelsea, your second link goes to a 404, is it correct? Thanks!! Been following this thread.
Try this link for the full thread. For me, just double clicking the footer handle fixed the issue.
