I’ve been working with Databases setting up one for case studies. My problem is that some case studies have 12 images, others 8 and some even less. The problem is the ones that have less than the max still have the blank space there without code, and with code I’m encountering all kinds of problems. Now I understand from searching the forum the basic principle, but cannot seem to get any code to work.
For reference my image placement holder IDs go as follows: #img1#img2#img3 etc…
and the dataset I am using is called CaseStudies with the ID being #dynamicDataset.
The code’s I have tried are as follows, with problems that I have encountered:
/This leaves the element there still but white. When I highlight the page I can see it clearly there and does not collapse the page
$w.onReady(function () {
$w(" #dynamicDataset ").onReady(function () {
const imageValue = $w(’ #img 5’).src;
if (imageValue === ‘’) {
$w(’ #img 5’).collapse();
}
});
});
/This gives the same result as above
I have ripped these from other forum posts, and cannot seem to understand why it is not working. I am still learning coding and Java, so please try explain it as thoroughly as possible if you have an answer.
In addition to the articles that Yisrael sent you, there’s also this tutorial. I wrote it about hiding the Video Player but the principle of checking to see if a field in your collection is blank for a given item is the same.
Also, you don’t need to both collapse and hide an element. In fact, that might be part of your problem: collapsing elements means they don’t take up any room on you page. Hidden elements don’t appear on your page, but they still take up space.
I am trying to make a dynamic page which can show the casestudy collection one page at a time with links going to each individual page. I have made a search function which brings back a table of results depending on what you are looking for, then the aim is that when you click on one of the results it takes you to a page that displays that particular case study in full. Each indidivudal case study row in the database consists of 4 or more images which all need to be displayed.
There is no code on the page currently, it is set up with text that automatically fills out at the top from the database and then I have placed images in a grid pattern 2 wide by 6 long. I want these images to automatically fill in from the database (this has been done and completed successfully), the problem lies in that when a case study from the Datasbase doesn’t have as many images as the template (which has 12) there are boxes that leave the page with a lot of blank space. I’d like to get rid of these unused boxes and make the page collapse.
I took a look at the repeaters and because I have more than one image per row in my database it only seems to let me connect one image to it. I’m not after displaying one image per case study, but one case study with all images per page.
Hello Sharon,
I have tried this option now too. The problem I’m finding is that although he database has an image present in the field it is still hiding the content in the image placement on the dynamic page. Here’s your code that I have edited to meet my needs that doesn’t seem to respond:
To further the information I have: each row consists of a set of images in the database as well as text and information about the case study. Some rows have 12 images, others have 4 and so on. The max one row has is 12 images, so I have built a template to allow for this and use across all of the database, but it means that when there are only 4 images on the page because the case study only has 4 images in the row, the page seems to be super long as the other placement holders are no filled in but they haven’t collapsed.
hi Sharon, great help! Many thanks. 1 request. How do you write the code if you have multiple items that you want to collapse/hide? Thanks much for your time!
Do you repeat and copy the same javascript shown in the tutorial each time for every item you want to hide? Or is there more syntactically correct way to do it?
Hi Sharon, Nathan, still waiting… would greatly appreciate a response re how to rephrase the code for multiple items as shown in the example tutorial. If instead of the video player these are images. And there are more than 1 image that needs to be collapsed in some instances. Thank you!
In my case here is the code that works for one image collapse but I have more images that need to be collapsed on some dynamic pages:
$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 “slide1” field
if (!item.slide1) {
// Collapses the image space if there is no value for “slide1”
$w(“#image17”).collapse();
}
});
});
Now how do I change the code above so I can collapse spaces for : !item.slide2 corresponding to #image18, !item.slide3 corresponding to #image19 and so on and so forth…
For anyone else with the same problem, this works:
$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 “slide1” field
if (!item.slide1) if (!item.slide2) if (!item.slide3) {
// Collapses the image space if there is no value for “slide1”
$w(“#image17”).collapse(); $w(“#image16”).collapse(); $w(“#image15”).collapse();
}
});
});
I’ve been struggling with this when using a repeater. If the dataset returns a number of records, the above code only checks the first item.
For example: I have a dataset called “newsDataset” with 7 records, 3 of which have a URL set for video and 4 which don’t. I want to hide or collapse the video if the URL is not set.
My code reads:
$w.onReady(() => {
$w(“#newsDataset”).onReady(() => {
// Gets the current item properties and stores them in a variable called item
const item = $w(“#newsDataset”).getCurrentItem();
// Checks if the current item has a value in the “videoUrl” field
if (!item.videoUrl) {
// Hides the video if there is no value for “videoUrl”
console.log(“Hiding”);
$w(“#video1”).hide();
}
else {
console.log(“Showing”);
$w(“#video1”).show();
}
});
});
When I preview this I only see “Showing” once in the console log. So it seems to only check 1 record - not each of them. Do I need to create a loop? Any help much appreciated.
Hello @sharond-wix coudl you pleaes help me with my code.
all the versions i have tried are not working. I need to do two things, hide an image if it isn’t present in the field cell and hide a button if there is no url connected to it.
Here is what i have so far for the image hiding.
It just seems to hide the image on the page no matter if the field is empty or not.
Here is the code i’ve tried for hiding the button, to no avail. I tried with my #dynamicDataset and with just a smaller #menudataset that references the #dynamicDataset neither work.
$w.onReady( function () {
$w(‘#dynamicDataset’).onReady( () => {
let url= $w(‘#dynamicDataset’).getCurrentItem().cafeonline;
console.log(“url=” + url);
if (url) {
console.log(“inside if = true”);
$w(‘#button51’).expand();
} else {
$w(‘#button51’).collapse();
}
});
})
This just hides the button on every page even if url is present. it comes back as url undefined.
I tried the code above for the image and still hides it on every page
I am able to collapse videos and images using the code, but not an ‘image gallery’. Can you help with that? Or is it not possible to collapse a gallery?
Hi @sharond-wix , I’ve tried your piece of code to hide a html iframe which contains a 360 picture player, and has its src URL linked to a Database URL field, but it didn’t work… Any idea if it doesn’t work with iframes? Also tried with a gallery linked to an image field, also once again, nothing happens… Have you ever tried with other items other than video or URL?
