0

I have been looking around at different ways of hiding a parent div if the child div is empty of content, I have got it working in some fiddles, but nothing seems to work on my actual site.

I am editing Wordpress plugin CPT Bootstrap carousel, I have added a new custom field for displaying testimonials, but currently have only got one testimonial from a client so therefore want to hide the button when the div is emtpy.

Here is a link to the page: http://rookdesigns.co.uk/portfolio/

and here is my html and jQuery:

<div class="test btn btn-primary">Testimonials>>
    <div class="carousel-quotes">
        <?php echo $image[ 'reff']; ?>
    </div>
</div>



jQuery(".carousel-quotes:empty").parent().hide();

I am also using this piece of jQuery to fadeToggle the child div on and off

jQuery(".test").click(function(){
jQuery('.carousel-quotes').fadeToggle();

Not sure if this could be effecting things.

Any help with this is very much appreciated,

Thanks in advance

All the best

Harry

Dhaval Marthak
  • 17,246
  • 6
  • 46
  • 68
Harry Rook
  • 1
  • 6

2 Answers2

1

:empty isn't working because there is a text node.

You can either change the PHP so that there's no whitespace inside the div when it's empty, or you can use filter:

jQuery(".carousel-quotes").filter(function() {
    return !$.trim($(this).text());
}).parent().hide();

Or actually, for your specific use case, we can avoid calling $() and text() in the filter function:

jQuery(".carousel-quotes").filter(function() {
    return !$.trim(this.innerHTML);
}).parent().hide();
T.J. Crowder
  • 1,031,962
  • 187
  • 1,923
  • 1,875
  • Thanks T.J. Crowder, just tried this unfortunately to no avail, but interesting to know about the whitesapce, maybe I should try and get rid of that instead – Harry Rook Dec 20 '13 at 13:15
  • @HarryRook: The above *does* work: http://jsbin.com/IpuMAxif/1 (That only uses `setTimeout` to give you achance to see what's being hidden; [here's a version without `setTimeout`](http://jsbin.com/IpuMAxif/2).) Perhaps you're running the code before the relevant elements exist? Put the script at the bottom of the HTML, just before the closing `

    ` tag, or (if you don't control where the script goes), use jQuery's `ready` to schedule a DOM ready callback.

     – T.J. Crowder Dec 20 '13 at 13:19
0

if JavaScript is a solution acceptable by you, this snippet should work :

Working DEMO

JS

        var ln = $.trim($('.carousel-quotes').text()); /* trim is important here to remove any white space inside the div */
        if (ln.length === 0) 
        {
            $('.test').hide();
        }

EDIT

there is a JS error in your page,which might be causing the problem :

'fadeSpeed'     : 2000,
'targetHeight'  : 100%
'effect'        : 'effect-6'
'direction'     : 'vertical'

, is missing in the above values,

'fadeSpeed'     : 2000,
'targetHeight'  : 100%,
'effect'        : 'effect-6',
'direction'     : 'vertical'

check if it works after correcting it!

NoobEditor
  • 15,563
  • 19
  • 81
  • 112
  • Nice one, but unfortunately it doesn't work on my site, and I cant see why both options work in the pastebin and fiddle but the moment they are added to my site, nothing. I might be because the content of the div is created by tinymce textarea, I'm not sure how this would effect things though. Thanks for all your help so far guys – Harry Rook Dec 21 '13 at 15:03
  • can you provide url to your site? – NoobEditor Dec 21 '13 at 15:10
  • Hi Mayank, I have now removed that entirely(as I wasn't using it anyway). But still to no avail, could it be the fact that I can't use '$' with wordpress as it causes conflictts, what could I replace this with? When I do jQuery I just replace '$' with 'jQuery', can I do this with javascript? – Harry Rook Dec 21 '13 at 17:36
  • console log says that `$` is not defined for the function,thats why its not working....please add the jquery lib(ver 1.10.2 that u r using) at the proper place.for conflict, consider using noconflict...see this thread => http://stackoverflow.com/questions/1391950/how-to-use-jquery-noconflict-property – NoobEditor Dec 21 '13 at 17:46
  • Hi Mayank, I don't think thats the issue as all other jQuery script is working fine, I have changed all the '$' to 'jQuery', and the console isn't throwing up any errors. I am at a loss now, your piece of javascript works perfect in the fiddle, but not on my website. So I have just added "testimonial coming soon" to all empty divs,a nd that will have to do for now. Thanks for all your help and effort you and Crowder. – Harry Rook Dec 22 '13 at 11:15
  • wish could have been of more help!! :( – NoobEditor Dec 22 '13 at 11:20