After upgrade to 6.7 hiding certain selectors doesn't work
Asked by Graeme Baker:

Hi,

I'm trying to create a slimmed down UI for a few spaces we want to expose to external users. Everything was working ok until the upgrade to 6.7.

Basically, I want all users to have everything, except these external ones. I'm adding this in to the main layout of a single space before the \</head\> tag.  

```
#if ($userAccessor.hasMembership('confluence-users', $helper.action.remoteUser.name))#else    <script type="text/javascript">    AJS.toInit(function(){ 		AJS.$('#space-menu-link').hide(); // Nav-bar Spaces menu
		AJS.$('#people-directory-link').hide(); // Nav-bar People directory
		AJS.$('#help-menu-link').hide(); // Nav-bar Help menu
		AJS.$('#notifications-anchor').hide(); // Nav-bar notifications tray
		AJS.$('#user-menu-link').hide(); // Nav-bar User profile menu
		AJS.$('#page-favourite').hide(); // Page header Favourite button
		AJS.$('#watch-content-button').hide(); // Page header Watch page button
		AJS.$('#shareContentLink').hide(); // Page header Share content button
		AJS.$('#action-menu-link').hide(); // Page header Action menu
		AJS.$('.page-metadata-modification-info').hide(); // Page Metadata information
		AJS.$('#comments-section').hide();    });</script>#end
```

For some reason, the inclusion of the #help-menu-link breaks the entire script, and the rest are ignored. If I remove it it works.

Additionally, the following lines have no effect at all, which is confusing, as using CSS and the selector names does work.

```
#likes-section
#labels-section
```

Anyone got any ideas why, or suggestions?

I'd also like to hide the fav star in the side bar but I wasn't sure how.

Thanks  
Graeme


Answers:
author: Graeme Baker
body: I've just tried this out on a clean install, with a brand new space and have found the following:

```
AJS.$('#help-menu-link').hide();
```

is being turned into:

```
AJS.$('<a title="Help" href="    ${context.docLinker.getLink($key)}" target="_blank"

   href="    ${context.docLinker.getLink($key)}" data-help-link-key="$key" class="ual-help-link help-link ">

    <span class="aui-icon aui-icon-small aui-iconfont-help">Help</span>

</a>

-menu-link').hide();
```

and

```
AJS.$(?#labels-menu-link').hide();
```

is being turned into

```
?AJS.$('         (None) -section').hide();
```

comments: author: Christo Mastoroudes _Adaptavist_
body: You can do a small test. Disable or remove your custom code. Load the page, open the developer console and paste the line you would like to test in the console. If you paste

```
AJS.$('#help-menu-link').hide();
```

then the help menu link should be hidden. I tried this locally v6.7.0 and it is working. I don't think the problem is with your code between the \<script\> tags but maybe the code elsewhere in that layout template.

There are alternative ways of doing what you want, but they do require javascript knowledge and it won't be as clean as yours. Probably it is best to try fix what you have first.


author: Christo Mastoroudes _Adaptavist_
body: I have tried your code at the top of the page on a local test instance v6.7.0 and it all seems to work except for the labels section which is not hidden. However if I try just hiding the labels section after the page loads with the same line of code it works. I can only assume that the labels section is hidden by your code but then shown again. It happens so fast that it seems to not be hidden.

As for the help icon, if you paste your code after the \</html\> tag it should work.


author: Graeme Baker
body: Thanks. The weird part is though, is that I haven't touched anything else in that layout...it's out of the box!


author: Christo Mastoroudes _Adaptavist_
body: I think you hit the nail on the head.

The real problem is that

```
AJS.$(?#labels-section').hide();
```

is turned into

```
AJS.$('         (None) -section').hide();
```

More specifically "#labels " is being converted in to "(None)".

I think a work around here is to not use JQUERY for hiding the labels section.

Try this instead

```
document.getElementById("labels-section").style.display = "none";
```

If this answers your question, please mark it as answered.


author: Graeme Baker
body: I'll give it a go. Forgive the obvious question, but should this be added to the layout itself in the head?


author: Christo Mastoroudes _Adaptavist_
body: Hi, [@Graeme Baker](/t5/user/viewprofilepage/user-id/42515),

I was away for a week.

To answer your question you can simply replace

```
AJS.$(?#labels-section').hide();
```

with

```
document.getElementById("labels-section").style.display = "none";
```

within the script tags and within the AJS.toInit function. As to where you place the script tags, I found an interesting post:

<https://stackoverflow.com/questions/4315982/are-scripts-not-in-head-ok>


author: Christo Mastoroudes _Adaptavist_
body: Hi,

I had a quick look and the selector names have not changed, so it must be some other factor.

I would suggest opening the development editor of chrome and have a look at the console section for any javascript errors. This might give you a clue as to the reason.

As for hiding the fav star you could try: AJS.$('#space-favourite-add').hide();

comments: author: Graeme Baker
body: I can see various warnings. There is one POST error:

This was the link:

```
http://knowledge2.revenuewire.com/synchrony-proxy/v1/data/Synchrony-75f76f32-05ed-3cff-911c-c13f938676e2/confluence-32866354?state-at=@head&state-format=type-tagged&rewrite-request=true&cached=true
```

and the response

```
{"type":"unauthorized-access","message":"Not authorized to access this resource."}
```

Would that account for it?


author: Graeme Baker
body: Just found another actually:

Uncaught SyntaxError: Invalid or unexpected token

http://.../display/DOC2/Doc_Test2+Home

This line is 100% causing it, as its gone if removed

```
AJS.$('#help-menu-link').hide(); // Nav-bar Help menu
```

Likes and Labels removal doesnt work this way either at all, and does not throw this error.

Is there a better way to hide these elements based on group membership?


Tags: css

user-interface