nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

After upgrade to 6.7 hiding certain selectors doesn't work

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

Accepted answers

All comments

Christo Mastoroudes [Adaptavist]

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();

Graeme Baker

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?

Graeme Baker

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?

Graeme Baker

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();

Christo Mastoroudes [Adaptavist]

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.

Christo Mastoroudes [Adaptavist]

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.

Graeme Baker

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

Welcome!

It looks like you're new here. Sign in or register to get started.

Quick Links

Find more posts tagged with

confluence

css

user-interface