How to hide the likes-and-labels-container using jQuery
Asked by 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}&lt;script&gt;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();});&lt;/script&gt;{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 ?


Answers:
author: JamieA
body: 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>.

comments: author: Pierre Hilson
body: 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 ;-)


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


author: Pierre Hilson
body: No. I use the one of Confluence. I checked and it is jQuery 1.6.4.


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


author: Pierre Hilson
body: 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.


author: JamieA
body: 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.


author: Pierre Hilson
body: 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}


author: Pierre Hilson
body: You mean a screenshot of the likes-and-labels-container ?


author: Nitram
body: can you add a screenshot