How to hide the likes-and-labels-container using jQuery

[Pierre Hilson]

I would like to hide the likes-and-labels-container from my wiki homepage only.

To do this, I use the following in my theme footer:

{html}
<script>
AJS.$(document).ready(function() {
     if(AJS.$('#title-text a').text() == 'Support Knowledge Base')  {
         AJS.$('.page-metadata').hide();
         AJS.$('#likes-and-labels-container').hide();
         AJS.$('#comments-section').hide();
     }
     else {
         AJS.$('#title-text a').before('[KB' +AJS.$('#pageId').text() + '] ');
     }
     AJS.$('#children-section').hide();
});
</script>
{html}

It works fine for all elements except for the likes-and-labels-container.

I suspect the <script type="text/x-template" title="labels-dialog-div"> to be causing this.

Am I right ?

[JamieA · Accepted solution]

Some elements are added by javascript, themselves on the onLoad event. I have had a similar problem, and it turned out to be a timing issue - haven't tested but possibly the issue in your case.

To test the theory you could paste in the likes-and-labels line after the page has fully loaded in to the F12 tools console. If that hides it, then it's a timing issue.

Possibly you could use a timer (nasty) or http://docs.jquery.com/Plugins/livequery.

[Pierre Hilson]

Thanks... I've been trying yesterday with livequery but did not succeed.
I'm pretty new to jQuery and will continue searching.
I'm running jQuery 1.6.4. That may be the problem.

As a last ressort, I might fallback on a timer but will try harder first.

I'll try harder and if I get livequery working, I'll mark the answer as The one ;-)

[JamieA]

Are you importing your own jquery? You don't need to... confluence provides it.

[Pierre Hilson]

No. I use the one of Confluence. I checked and it is jQuery 1.6.4.

[JamieA]

OK. What was the result of pasting in the line into the console, did that work?

[Pierre Hilson]

Oh yes. Sorry, I forgot to mention that the following line played in the console hides correctly the likes-and-labels-container :

$('#likes-and-labels-container').hide();

So, as you suggested, this is probably because the content of that block is modified by a script that is not completed yet when the page is ready and threated by my jQuery block.

I tried changing

AJS.$('#likes-and-labels-container').hide();

by

AJS.$('#likes-and-labels-container').livequery(function() {
AJS.$(this).hide();
});

But it did not work (I mean that even the other lines of my jQuery block were not executed anymore so there must be a syntax issue) and I did not find time yet to debug it.

[JamieA]

livequery is unfortunately an add-on you will need to include. There probably is a way to do it natively with jquery, but I don't know it.

[Pierre Hilson]

Thanks, I got it working with this code:

{html}
<script type="text/javascript" src="http://brandonaaron.net/javascripts/plugins/livequery.js"></script>
<script>
AJS.$(document).ready(function() {
AJS.$('.page-metadata').hide();
AJS.$('#likes-and-labels-container').livequery(function() {
AJS.$(this).hide();
AJS.log("SKB.jQuery : Change event handled.");
});
});
</script>
{html}

[Pierre Hilson]

You mean a screenshot of the likes-and-labels-container ?

[Nitram]

can you add a screenshot