Grow your CSS skills. Land your dream job.

How to hide parent div if custom_field is empty

  • # February 12, 2013 at 5:39 pm

    Hi guys,

    I am not familiar with js or jquery but I need that to finish my “work”. I want to hide parent div bubble if value of, let say, custom_field (**CC_STAUS**) is empty.

    Below code is only a part of the rest:

    CC_STATUS

    and css

    .bubble {
    overflow:hidden;
    margin:5px 0 0 0;
    }
    .bubble .speach {
    background-color:#333333;
    color:#FFFFFF;
    padding:5px;
    margin:0;
    font-size: 12px;
    font-family: Segoe UI;
    text-transform: lowercase;
    }
    .bubble .arrow {
    margin:0 0 0 15px;
    width:0;
    height:0;
    border-left: 0px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid #333333;
    border-top: 0;
    }

    To check the lenght of the **CC_STATUS** I have tried this code (which I simply adapted) but obviously it does not work. The bubble is always displaied no matter of it content.

    $(‘.bubble’).each(function() {
    if($(this).attr(‘CC_STATUS’) === ” || $(this).text() === ”) {
    $(this).parents(‘.bubble’).hide();
    }
    });

    See [jsfiddle](http://jsfiddle.net/9QayV/1/ “jsfiddle”)

    Thanks in advance for any (working) solution.

    # February 12, 2013 at 6:03 pm

    This? http://jsfiddle.net/9QayV/7/

    # February 12, 2013 at 6:13 pm

    No, it must be the same as my code, CC_STATUS is a tag that trigger value from external server.
    Your code is showing one bubble with text and another one below without text.
    I need to find something that will check walue of CC_STATUS tag and then hide div.bubble if this value is empty.

    # February 12, 2013 at 6:24 pm

    CrocoDillon has it, but out of curiosity, how are you setting the value of CC_STATUS? Is that dynamically inserted via JS or PHP or similar? Actually, what IS CC_STATUS supposed to represent? Text? An input? Not sure where that’s coming from . . .

    Anyway, this will check if there’s anything inside the .speach div, and if not, hide the .bubble: http://codepen.io/JoshBlackwood/pen/nmHyD

    It’s really just a slightly different way of doing what Croco already posted, because I’m not sure I’m understanding what exactly it is you’re wanting yet.

    # February 12, 2013 at 6:49 pm

    Why wouldn’t you just use PHP for this?

    # February 12, 2013 at 7:29 pm

    Hm… I’m creating template for instant messenger and **CC_STATUS** is used to get user description which I can display on contact list. So this tag, as many other like i.e. USER_NAME must be inserted in HTML code (not PHP) of the template.
    SO CC_STATUS is just constant element of the template. Is it possible that I could check with jquery that this tag has any value?

    # February 12, 2013 at 8:57 pm

    Okay, let me rephrase my question. What does the **CC_STATUS** tag _represent_? It’s obviously a stand-in for something that’s going to be pulled in from whatever templating engine you’re using . . . what will it be? A text string?

    I’m _guessing_ that when you say it’s a constant tag, you mean it’s in your HTML template as a special tag, that is recognized by your templating engine (which is what?) and thusly replaced by a string/value of some sort on the live site/application.

    If this _is_ the case, then it’s that string that JS is going to see, and the solutions that CrocoDillon and I have posted are exactly what you should need to check if there is text inside that bubble. Otherwise, presumably, the value of CC_STATUS would be null, and nothing would render in the bubble.

    We’d need a hell of a lot better explanation, or at least a look at a live site, to be able to help you any further.

    # February 13, 2013 at 3:32 am

    nevermind

    # February 13, 2013 at 6:38 am

    IM (like Miranda or Trilian) is a program (so no live website) that is skinned almost the same way as HTML website. It is using IE engin to render themplate.
    To get some information about users we need to use some special tags – like CC_STATUS (for statuses), CC_NAME (for nicknames), CC_AVATAR (for avatars). There is a lot of other tags without template will not work. It looks probably the same as we creating website with PHP (in this case all information we take from database).
    Below is example of code displaing user table on contact list

    CC_USER_AVATAR

    CC_JID_PREFIX

    CC_STATUS

    including that part I am talkin about.

    I know that it is possible to write script that would check if CC_STATUS has any value – I mean if user in theyr messenger set any status (it can be just text, digit or url link or contain both).

    # February 13, 2013 at 11:54 am

    Okay, now that’s much better.

    I feel like the already posted solutions should work here, unless there is a default status generated by that tag in the case that the user hasn’t input anything. Have you given it a try to see?

    # February 13, 2013 at 7:20 pm

    Yes, I have… And te result is:

    http://i47.tinypic.com/2ppkfm8.jpg

    I would like to get this (but without empty bubble if CC_STATUS has no value)

    http://i46.tinypic.com/2uyrggh.jpg

    And your code could look like this http://codepen.io/MadaHo/pen/GHAIa

    # February 13, 2013 at 8:58 pm

    I’m really at a loss as to how to help you any further, not knowing how the theming engine for Miranda or Trillian works. I would suggest that you keep experimenting, and you’ll probably figure it out through much trial and error.

    Are there any communities out there for skinning IM clients like this? Maybe Google around and give them a try.

    # February 14, 2013 at 4:29 am

    I don’t know why my code doesn’t work. Looking at the first screenshot, it appears there is something in some of the ‘empty’ bubbles (else the inner height would remain 0), but even then, some of the bubbles appear to be really empty and even they are still there.

    Are you sure JavaScript works? Did you include jQuery? Test this to be sure, with something simple like:

    $(function() {
    $(‘.speach’).css(‘background-color’, ‘cyan’);
    });

    Should look something like http://jsfiddle.net/9QayV/9/

Viewing 13 posts - 1 through 13 (of 13 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".