How can I hide the left sidebar on some pages when using the Documentation theme?

[Rian Rian]

I am trying to customize the Documentaiton theme so that the left sidebar does not show up on some pages when it loads, not just after the user clicks the "show/hide sidebar" button. one thing I tried is using the \{style\} macro to put something like the following at the top of the page:

#splitter-sidebar \{

display:none

\}

This hides the sidebar for the page all right, but it also hides it for all pages, even in different spaces, until I click that show/hide button again. Deos anyone know a way to do this for only one page?

Thanks, R. Murphy

[Malik]

This is actually a 2 step process because by removing the sidebar, you will also remove the only option to access the "Space Tools". So we will need to add this link somewhere else, on your profile home page for instance.

So first, the link to the "Space Tools" is /spaces/spacetools.action?key= , so you will have to include this to your home page profile

Then you will remove the sidebar by going to Administration > Look and Feel > Layouts > Page layout and then remove the following lines:

if( ($mode != "edit" && $mode != "edit-preview" ))

#foreach ($webPanel in $webInterfaceManager.getDisplayableWebPanels("atl.page.left.sidebar", {"page": $confPage, "context": $context})) $!webPanel.getHtml($action.context) #end

end

[Normann P_ Nielsen _Netic_]

Hi Murphy,

The solution of Oct 18 '11 at 01:15 PM works fine, but what is the opposite - eg. show the sidebar, I have used:

## @noparams

<script>

// Click the button

if (AJS.$("div#splitter-sidebar").width() != 300) {
AJS.$("#splitter-button").click();

};

// Then delete the local cookie

jQuery.cookie("showsidebar", null);

});
</script>

But that seems to be insufficient

[David at David Simpson Apps]

Create a user macro called hide-navigation with the following content:

<script>
  var selectors = ['#splitter-sidebar','.vsplitbar', '#splitter-button']; 
  AJS.$.each(selectors, function(){ 
    AJS.$(''+this).hide(); 
  });
  AJS.$('#splitter-content').css({'width':'100%', 'left':'0'});
</script> 

Add the {hide-navigation} user macro to the relevant pages.

[Rian Rian]

david,

thanks for the script, which I only noticed today. Unfortunately, it doesn't fix the problem: when I add the script to a page, the sidebar disappears all right, but it disappers for all pages until I click the splitter button again. Any more ideas? Thanks, R.M.

[Jonathan Simonoff]

David, I think that is great. It works best with the documentation theme, since that moves some functions from the sidebar to a menu.

[Jonathan Simonoff]

That code works great in an HTML block on a page, but when I try it in a user macro, it fails with "Error rendering template content". We're using 5.1.3.

There apparently is something about the code that Confluence doesn't like when in a macro -- I thought maybe there was a problem with using scripts in user macros, but when I replace the script with a simple document.write, it works fine.

Any clues what is going on?

[CharlesH]

I got this to work in a user macro by "fixing" the line with the call to .each as so:

AJS.$(selectors).each(function(){
    AJS.$(''+this).hide();
  });

Before doing this I was also getting the "Error rendering template content" message (Confluence 4.2.1). This error was recording in the log:

Caused by: org.apache.velocity.exception.ParseErrorException: Encountered "," at getRenderedContent[line 15, column 23]
Was expecting one of:
    <EOF> 
    "(" ...
    <RPAREN> ...
    <ESCAPE_DIRECTIVE> ...
    <SET_DIRECTIVE> ...
    "##" ...
    "\\\\" ...
    "\\" ...
    <TEXT> ...
    "*#" ...
    "*#" ...
    <STRING_LITERAL> ...
    <IF_DIRECTIVE> ...
    <STOP_DIRECTIVE> ...
    <INTEGER_LITERAL> ...
    <FLOATING_POINT_LITERAL> ...
    <WORD> ...
    <BRACKETED_WORD> ...
    <IDENTIFIER> ...
    <DOT> ...
    "{" ...
    "}" ...

All good now though. Thanks David.

[SLM]

Go to other macros and select Hide Sidebar. This will only hide the sidebar in that specific page.

[Philipp Göllner (Scandio)]

There is a plugin for that: https://marketplace.atlassian.com/plugins/de.scandio.confluence.plugins.hideelements-macro 

[Peter Vojtech]

THIS. Thankyou Philipp!

[Gerald MURIEL]

This is great! Thanks !

[Patrick van der Rijst]

Fixed for Confluence 5.9:

## @noparams
<script>
AJS.toInit(function () {
  // 55 px is collapsed state
  if (AJS.$("div.ia-fixed-sidebar").width() != 55) {
    AJS.$("a.expand-collapse-trigger").click();
  }
});
</script>

[Mark Berry]

I've just tested Alexander's modification on our test servers (Confluence 5.1.3).

From my testing, the splitter-button (which toggles the display of the sidebar) is not restored after I leave a page containing this macro. With my code that button is disabled on a page containing the user macro and restored when the user leaves the page, whereas with Alexander's code the button is not restored when the user leaves the page (in my testing on Confluence 5.1.3, at least). That seems to be the case in Firefox, Internet Explorer and Chrome: in all of them, I'm finding that the button is not restored when I leave the page. It remains missing even after I log out of Confluence and log back in again, on all pages in Confluence and in all major browsers. It's possible that this is caused by a few glitches on our test server - some of our plugins are not licensed on the test server at present and there are a few other inconsistencies that we need to iron out, so I don't know whether that's the cause - it might work fine on other versions of Confluence.

Other than that issue, it still works fine on Firefox, as it did before.

In Chrome, Alexander's code fixes a bug in my code whereby the sidebar is not restored when the user leaves the page. With Alexander's code, the sidebar is now restored when the user leaves the page.

In Internet Explorer, however, I'm finding that with Alexander's code the sidebar is no longer restored when the user leaves the page. This used to work (at least, most of the time) with my code but doesn't work for me with Alexander's version. My testing was with Internet Explorer 9 on Windows 7 (on Confluence 5.1.3).

Of course it would be very helpful if anybody else who is experimenting with this could post their findings here - and a working fix that works in all browsers (hiding the button and the sidebar on a page, and restoring it all when the user leaves the page) would be great...if I figure out a workaround that works in all major browsers I'll post it here.

[Alexander Botor]

I have modified the code of @Mark Berry. Works in FF, Chrome, IE with Confluence 5.6.6:

<script>
AJS.toInit(function () {
jQuery.cookie("showsidebar",AJS.$("div#splitter-sidebar").width(), {path:'/' });
jQuery.cookie("resetsidebar",jQuery.cookie("doc-sidebar"), {path:'/' });
if (AJS.$("div#splitter-sidebar").width() > 0) {
AJS.$(".vsplitbar").hide();
AJS.$("div#splitter-sidebar").width(0);
AJS.$('#splitter-content').css({'width':'100%', 'left':'0'});
};
AJS.$("#splitter-button").parent().hide();
jQuery(window).bind('beforeunload', function() {
var origstate = jQuery.cookie("showsidebar");
if (AJS.$("div#splitter-sidebar").width() != origstate) {
AJS.$(".vsplitbar").show();
AJS.$("div#splitter-sidebar").width(origstate);
AJS.$('#splitter-content').css({'width':'100%', 'left':'"+origstate+"'});
};
jQuery.cookie("doc-sidebar",jQuery.cookie("resetsidebar"), {path:'/'});
jQuery.cookie("showsidebar", null, {path:'/'});
jQuery.cookie("resetsidebar", null, {path:'/'});
});
});
</script>

[Deleted user]

Based on my findings the unload

jQuery(window).unload(function() {

will not work in Chrome, any thoughts on this? using

$(window).bind('beforeunload', function() {

works but the sidebar is opened on the current page before moving to the next page.

[Davin Studer]

Pretty much the same as my other answer on your other question but in reverse.

Macro Name:
closenav

Macro Ttle:
Close Nav

Description:
Close the nav on page access.

Macro Body Processing:
No macro body

Template:
## Macro title: Close Nav
## Macro has a body: N
## Developed by: Davin Studer
## Date created: 09/26/2013
## Close the nav on page access.

## @noparams

<ac:macro ac:name="html">
<ac:plain-text-body><![CDATA[<script type="text/javascript">
AJS.toInit(function () {
var splitPos = AJS.$('#splitter .vsplitbar').css('left')
if(splitPos != '0px') {
AJS.$('#splitter-button').click();
}
});
</script>]]></ac:plain-text-body>
</ac:macro>

[Mark Berry]

Armon, the couple of lines of code I added as described in my previous comment above should address this issue with the side bar staying hidden when you navigate to other pages. Works for me in Confluence 5.1 - have you tried it with my version of the code?

[Armon Tiongco]

Hi Mark. sorry i wasnt able to read this in advance - but hey somebody did offer some help.

Can be found here.

https://answers.atlassian.com/questions/216345/how-can-i-always-show-the-left-sidebar-on-some-pages-when-using-the-documentation-theme

So i use the code above to hide it - then i use the code from the link i just post to show it from the page from another space.

[Mark Berry]

Perhaps easier to read without the comments... :)

<script>

jQuery.cookie("showsidebar",AJS.$("div#splitter-sidebar").width(), {expires:5});

jQuery.cookie("resetsidebar",jQuery("doc-sidebar"), {expires:5});

if (AJS.$("div#splitter-sidebar").width() > 0) {

AJS.$(".vsplitbar").hide();

AJS.$("div#splitter-sidebar").width(0);

AJS.$('#splitter-content').css({'width':'100%', 'left':'0'});

};

AJS.$("#splitter-button").hide();

jQuery(window).unload(function() {

var origstate = jQuery.cookie("showsidebar");

if (AJS.$("div#splitter-sidebar").width() != 300 && origstate == 300) {

AJS.$("#splitter-button").click();

};

jQuery.cookie("doc-sidebar",jQuery("resetsidebar"));

jQuery.cookie("showsidebar", null);

jQuery.cookie("resetsidebar", null);

});

</script>

[Armon Tiongco]

Hey, I'm using this but whenever i try to go to another space - the side bar is hidden. I want it to default to a shown side bar when i transfer to another space / page than to reset the sidebar.

[Mark Berry]

rmurphy's code didn't quite work for me in C5.1.3: the sidebar was hidden, but stayed hidden when I navigated to other pages in the space, apparently because of a cookie 'doc-sidebar' which seems to remember the sidebar state. I added a couple of lines to remember that cookie and reset it on page unload, and also included Dave's line to hide the sidebar button. The code below now works fine for me in a user macro.

Also, I found the same as Jonathon, Dave's code wasn't working for me in a user macro in C5.1.3, but when I split out the 'each, selectors, function' construct into 3 separate lines, it worked fine.

<script>

// Find out the initial state of the sidebar and set cookies to remember it

jQuery.cookie("showsidebar",AJS.$("div#splitter-sidebar").width(), {expires:5});

jQuery.cookie("resetsidebar",jQuery("doc-sidebar"), {expires:5});

//If the sidebar is visible, hide it and the split bar...

if (AJS.$("div#splitter-sidebar").width() > 0) {

AJS.$(".vsplitbar").hide();

AJS.$("div#splitter-sidebar").width(0);

// ...then change the width and position of the content...

AJS.$('#splitter-content').css({'width':'100%', 'left':'0'});

};

// ...and hide the sidebar button

AJS.$("#splitter-button").hide();

// The unload function runs when the user navigates away from the page

jQuery(window).unload(function() {

// Read the cookie to find out where the sidebar was originally

var origstate = jQuery.cookie("showsidebar");

// If the sidebar is now hidden and it wasn't originally, Click the button

if (AJS.$("div#splitter-sidebar").width() != 300 && origstate == 300) {

AJS.$("#splitter-button").click();

};

// Restore the original value for the doc-sidebar cookie

jQuery.cookie("doc-sidebar",jQuery("resetsidebar"));

// Delete the temporary cookies

jQuery.cookie("showsidebar", null);

jQuery.cookie("resetsidebar", null);

});

</script>

[Rian Rian]

Update:

I wrote a script that does the basic stuff -- here it is:

{html}
<script>

// Find out the initial state of the sidebar and set a cookie

jQuery.cookie("showsidebar",AJS.$("div#splitter-sidebar").width(), {expires:5});

//If the sidebar is visible, hide it and the split bar...
if (AJS.$("div#splitter-sidebar").width() > 0) {
AJS.$(".vsplitbar").hide();

AJS.$("div#splitter-sidebar").width(0);

// ...then change the width and position of the content

AJS.$('#splitter-content').css({'width':'100%', 'left':'0'});
};

// The unload function runs when the user navigates away from the page

jQuery(window).unload(function() {

// Read the cookie to find out where the sidebar was originally

var origstate = jQuery.cookie("showsidebar");
// If the sidebar is now hidden and it wasn't originally,

// Click the button

if (AJS.$("div#splitter-sidebar").width() != 300 && origstate == 300) {
AJS.$("#splitter-button").click();

};

// Then delete the local cookie

jQuery.cookie("showsidebar", null);

});
</script>
{html}

This works within the same space, but if you go to a page outside the space it shows up without the sidebar.

Somehow the status of the sidebar is reset within the same space, but not outside that space.

Any ideas, anybody? This would be a great addition to the Documentation theme if we could get it to work.

Thanks, R. Murphy

[Rian Rian]

For anybody interested in this, there's a pointer toward a better solution in the old Atlassian forum, at: http://forums.atlassian.com/thread.jspa?messageID=257354252&#257354252

Involves writing jQuery and Javascript and setting a cookie. I will post again if I can get it to work.

[justindowning]

You can use the HTML Plugin to include that CSS snipet on the page(s) in question.

[Rian Rian]

How, specifically? "splitter-sidebar" is the ID of a <div> a few steps above the content in the page hierarchy. How could I override this div's display setting using an inline style? The only way I can think of to use {html} is to code the entire page in html, which would be a lot of work at this point.