The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Implementing an SVG Icon System" Nov 30 - 6:00 PM Eastern

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:


    and css

    .bubble {
    margin:5px 0 0 0;
    .bubble .speach {
    font-size: 12px;
    font-family: Segoe UI;
    text-transform: lowercase;
    .bubble .arrow {
    margin:0 0 0 15px;
    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() === ”) {

    See [jsfiddle]( “jsfiddle”)

    Thanks in advance for any (working) solution.

    # February 12, 2013 at 6:03 pm


    # 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

    This reply has been reported for inappropriate content.

    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:

    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

    This reply has been reported for inappropriate content.

    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


    # 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




    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

    This reply has been reported for inappropriate content.

    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:

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

    And your code could look like this

    # February 13, 2013 at 8:58 pm

    This reply has been reported for inappropriate content.

    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

    This reply has been reported for inappropriate content.

    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

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

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed