• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
Locked
0

Hiding/removing empty web app fields in <div>

Explorer ,
Feb 15, 2017 Feb 15, 2017

Copy link to clipboard

Copied

Hi,

I'm currently building a website directory.

I need to display some web app results wrapped in a styled <div> container. However not all web app fields will be relevant to all web app items in the detailed layout... So, if a field in the web app is left blank, I need the styled <div> associated with that web app field tag to be hidden.

I believe this is possible with jquery and/or Javascript but I literally have no idea!

So, if the code currently looks like this, how can I hide it if the web app tag is empty?

<div class="wiltshire"> {tag_listing region(s)} </div>

<style>

    div.wiltshire {

        height: 35px;

        width: 250px;

        background-color: black;

        font-family: comfortaa;

        font-size: 12px;

        color: white;

    }

</style>

Thanks!

TOPICS
Web apps

Views

1.1K

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Feb 15, 2017 Feb 15, 2017

Copy link to clipboard

Copied

Which software are you using?

Nancy

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Feb 15, 2017 Feb 15, 2017

Copy link to clipboard

Copied

I'm building the main website template in Muse and then copying this over and editing the web app detailed list code.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Feb 15, 2017 Feb 15, 2017

Copy link to clipboard

Copied

Muse does not support fully being able to do the custom server template code Liquid Markup but you would normally do it with that.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Feb 16, 2017 Feb 16, 2017

Copy link to clipboard

Copied

Thanks Liam. This was my concern. Is there a way I can activate liquid? What would the actual code be if liquid was activated on the site?

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
Feb 16, 2017 Feb 16, 2017

Copy link to clipboard

Copied

Translation:

You can suppress the output of empty webapp fields in the detailed webapp layout view with liquid  'if' or 'unless' checks:

Example (for a text field):

{% if this.['webapp field name'] !='' -%}

       {tag_webapp field name}

{% endif -%}

Hope it helps

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Feb 16, 2017 Feb 16, 2017

Copy link to clipboard

Copied

Thank you! How would this work with a <div> element with the tag element inside?

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Feb 17, 2017 Feb 17, 2017

Copy link to clipboard

Copied

I am not sure why you would use old tags with new tags, that is a bit odd.

The below is what you would be doing Craig:

{% if this['webapp field name'] != '' -%}

     <div> {{this['webapp field name']}}</div>

{% endif -%}

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
Feb 17, 2017 Feb 17, 2017

Copy link to clipboard

Copied

There's nothing odd about it.

You can use both tags (the liquid tag and the traditional BC tags) syntaxes interchangeably to display a webapp field. If in your detail layout all webapp fields are displayed through the traditional BC webapp tags it is probably more consistent to always use them. It does not make a difference. It's personal view.

But if you decide to use the liquid tags you should use the correct syntax:

{{this.['webapp field name']}}

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Feb 17, 2017 Feb 17, 2017

Copy link to clipboard

Copied

You can use both tags because BC supports legacy and needed to do that. The first version of liquid was all in Liquid and I was actually one of the people that told BC that will cause issues for a number of partners. I was not fussed.

But like in the other thread it is about programming and how you do that and what is the right way to do things. Using old should only be when you have too, if your going to use a language you use it.

IF your using liquid DEFIANTLY not just using tags is the way to go. The liquid object outputs a bit more, you can view the exact output of all your fields easily and you can use them and utilise them within liquid more efficiently, cleanly and so on. Understanding how a system passes both modules, tags and liquid also leads you to - Not using legacy.

If BC take some key decisions and in future look to further improve the system performance they will actually ditch the old tags and remove them from the system. With that, even now, if you are sticking to old tags you are actually limiting yourself in a lot of areas as certain and new additional values etc are ONLY in the liquid object output.

Same with you thinking without the . will not work and not understanding why that is the good way to use it and it does work as well.

Feel free to keep doing as you do, but when I post on forums to advise people or correct its for their benefit, not mine.

Up to you who's advise you take Craig of course, but I know what I am talking about here.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
Feb 18, 2017 Feb 18, 2017

Copy link to clipboard

Copied

Again, nobody doubts that you think you know what you are talking about.

It is totally irrelevant what yo might have, or not, told a BC engineer, the fact is that both versions of the tags are working and no official BC statement has been issued saying that the traditional BC tags should not be used anymore if liquid is enabled, nor they would be ditched in the future. Just have a look at the BC documentation, they are all over the place.

In some cases the traditional tags are more concise and consistent (see the 'this.' reference), they are used by all major BC template providers for example, in other cases specific liquid tags will provide the output you need. 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Feb 20, 2017 Feb 20, 2017

Copy link to clipboard

Copied

I will be getting the docs all updated, same as how %} was updated to -%}

Do as you want, but if someone suggests better code that is working you do not correct them if you are not across that it does or not and why.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Guest
Feb 18, 2017 Feb 18, 2017

Copy link to clipboard

Copied

Hi Mayan,

You can use jquery to do this.

Add an id in the div tag.

<div class="wiltshire" id="hiddenDiv"> {tag_listing region(s)} </div>

Then use the below script :

if ( $('#hiddenDiv').html().length == 0 ) {

           $('#hiddenDiv').hide();

}

I hope this helps you.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Feb 20, 2017 Feb 20, 2017

Copy link to clipboard

Copied

As indicated if you can do it server side you do it server side as it will be better.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Feb 22, 2017 Feb 22, 2017

Copy link to clipboard

Copied

Thanks Himanshu!

How would this work if I wanted to hide an image? Guess i wouldn't need to use a div? Just assign the <img> tag an id? and use the same script? So i have to include any other code here to direct the script in the header?

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Feb 22, 2017 Feb 22, 2017

Copy link to clipboard

Copied

{% if this['my image path'] != '' -%}

     <div> <img src="{{this['my image path']}}" alt="{{name}}"/></div>

{% endif -%}

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Feb 22, 2017 Feb 22, 2017

Copy link to clipboard

Copied

Thanks Liam but I can't use Liquid as i'm laying out the site with Muse. I need to resolve this using Jquery.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Guest
Feb 22, 2017 Feb 22, 2017

Copy link to clipboard

Copied

You can simply do this by adding a line to set display property to none in your CSS for that image element.

If image has an id of img, then in your css:

#img{

display:none;

}

Hope this helps.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Feb 22, 2017 Feb 22, 2017

Copy link to clipboard

Copied

Thanks but could you give me the whole code as i'm not sure how this relates to the image itself?

To clarify, the image would have a URL defined by a web app field. If the URL isn't specified in the web app, I need the image to be hidden.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Guest
Feb 23, 2017 Feb 23, 2017

Copy link to clipboard

Copied

Please provide the code for the image element.

You can use the previous jquery code to check if the html element of image is empty and if true then hide it.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Feb 23, 2017 Feb 23, 2017

Copy link to clipboard

Copied

<td width="300px" class="smediatable">

<a href="{tag_twitter handle}" target="_blank"><img class="smicon" src="/images/twitter-blue.png" alt="twitter" height="30px" width="30px"></a>

<a href="{tag_instagram handle}" target="_blank"><img class="smicon" src="/images/instagram_icon.png" alt="twitter" height="30px" width="30px"></a>

<a href="{tag_pinterest handle}" target="_blank"><img class="smicon" src="/images/pinterest-blue.png" alt="twitter" height="30px" width="30px"></a>

<a href="{tag_youtube handle}" target="_blank"><img class="smicon" src="/images/yt-blue.png" alt="twitter" height="30px" width="30px"></a>

</td>

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Feb 23, 2017 Feb 23, 2017

Copy link to clipboard

Copied

I managed to figure this out! I added a class to the <a> and referenced it back in CSS to display: block as below.

<a class="smlink" href="{tag_twitter handle}" target="_blank"><img class="smicon" src="/images/twitter-blue.png" alt="twitter" height="30px" width="30px"></a>

<style>

    a.smlink[href=''] {

        display:none;

    }

</style>

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Guest
Feb 23, 2017 Feb 23, 2017

Copy link to clipboard

Copied

LATEST

This will also do.

Please mark this question as answered.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines