Hello everyone, this is my first post here in the Corvid Forum. I’m trying to learn a little bit more about coding to enhance a web page that I’m building.
I’m building a website for a Tour Agency. In their old site, they made a different page for each one of the tours they offer (they offer around 40 different types of tours). I decided to use a dynamic page instead and create a collection to avoid having too many pages and improve the loading time. Since you cannot add formats in a collection, I added several placeholder text boxes in order to add all paragraphs and list items, like this:
Each placeholder text box is connected to an entry in my collection:
In this example, the Paragraph 4 entry is empty because I want space between the first entries and the ones that come later.
I am having a problem, though. Not all tours have long itineraries and all the empty placeholder text boxes are just covering space, creating a white gap between the text and the footer:
What would you recommend? Is there some type of code that makes the text boxes disappear when their value is empty? Is there a better way to display text? The reason why I do not put all the text in just one entry es because I want to display it this way but without the white gap:
Thank you very much for your help!
Pablo
Just have your dynamic page setup with seperate text boxes that are connected to the dataset to the appropriate dataset fields, so you don’t have to worry about the blank dataset fields.
So basically…
Top text box for offered options.
#SPACE#
Middle text box for 1st Day.
#SPACE#
Bottom text box for 2nd day.
Add further text boxes if needed.
If you are wanting to keep them all to the same size on your page so that they don’t have to expand when one tour has more content than others, then you can look at using a show more option as shown in these following links.
https://support.wix.com/en/article/corvid-tutorial-creating-a-show-more-link
The above link will need to be the dynamic text option and not the static text option as you are using a dataset for your text and not having the full text simply added to that page.
https://www.vorbly.com/Vorbly-Code/WIX-CODE-EXPANDING-COLLAPSING-TEXT-BOX
https://codequeen.wixsite.com/double-collapse
https://www.totallycodable.com/wix/corvid/create-custom-faq-with-double-collapse-effect - Code for above link
https://www.youtube.com/watch?v=HmTkf5af0NE - Youtube video of tutorial for above link
Plus, an option for displaying all your tours on one page, have a look at using repeaters and limiting characters in a repeater using the link below.
https://support.wix.com/en/article/about-repeaters
https://support.totallycodable.com/en/article/limit-characters-in-a-repeater-using-wix-code
https://www.youtube.com/watch?v=bprVct9I8uw - Youtube video for tutorial above
As for code for if text box is empty, then simply use the search function in this forum as there are many previous forum posts on that subject that you can view with code examples like this one.
https://www.wix.com/corvid/forum/community-discussion/hide-an-empty-field
Thank you for all the suggestions!
The first thing that you mentioned is exactly what I’m doing: connecting the text boxes to their corresponding field and leaving the field empty in order to make space. My problem is that for some tours I won’t have to use as many text boxes and that just leaves a white gap between the text and the footer. For example:
As you can see, the text ends and there’s a big white gap. That is because there are several placeholder text boxes that have their entries empty. Is there a way to remove that white gap? Basically make those text boxes not cover space when their corresponding entries are empty.
I hope that what I’m saying makes sense.
You don’t need to have the multiple text boxes, just use three text boxes for above like in this picture here, simply have three text boxes and leave the same empty space as a text box would be between them.
If you then use the show more/show less toggle or the show more button from Wix tutorial or the other two links, so that the dynamic page is kept to the same size with the shown text and when the user clicks on the show more toggle or show more button, then the text box will expand and the footer will move down to accommodate the text box above being expanded to show the full text.
You just need to set them up so that they fit the smallest tour itinerary that you have and then have it set up for show more if they go above a certain character account above that shortest tour example.
Otherwise you can use rich text fields in the dataset itself so that you can format and style the text as one block and not have to do multiple text boxes as you are doing.
To display the rich text fields from your dataset on your page, simply have a look at the reply in this forum post from Yisrael (Wix Admin).
https://www.wix.com/corvid/forum/community-discussion/database-why-doesn-t-the-rich-text-formatting-hold
Finally, if you want to do something similar in code, then do something like this below, it is setup currently for image field in your dataset, so change image to the correct field that you need.
$w.onReady( () => {
$w("#myDataset").onReady( () => {
let item = $w("#myDataset").getCurrentItem();
if (item.image) {
$w("#imageElement").show();
} else {
$w("#imageElement").collapse();
$w("#imageElement").hide();
}
} );
} );
