Confluence Resizable Navigation Tree
What bugged me about Confluence a long time, was the navigation in big wiki spaces. A huge step forward is provided by the page tree navigation, which displays a tree of pages on every page. However, I wasn’t satisfied by that: In deeply nested page structures or with long page titles, the page tree either eats up a lot of space, or the page title have line breaks, which makes the page tree losing its clearness.
Ideally, the area which displays the page tree, was resizable and would not break the page titles in multiple lines. As Confluence includes jQuery out-of-the box, and me being a jQuery fan, I used this for practicing my jQuery skill. 
This is a screenshot of the resizable navigation tree:
In case you want to try it out, follow the page tree navigation documentation provided by Atlassian. The only difference: In step 3, where you modify the page layout, paste my code:
#if ($action.isPrintableVersion() == false)
<script src="/includes/js/jquery/jquery.ui-1.5a/jquery.js"></script>
<script src="/includes/js/jquery/jquery.ui-1.5a/jquery.dimensions.js"></script>
<script src="/includes/js/jquery/jquery.ui-1.5a/ui.mouse.js"></script>
<script src="/includes/js/jquery/jquery.ui-1.5a/ui.resizable.js"></script>
<style>
.spacetree * ul{
padding-left:0px;
margin-left: 0px;
}
.spacetree * li{
margin-left: 5px;
margin-right: 5px;
padding-left:5px;
}
div.spacetree {
overflow: hidden;
}
.spacetree * li a {
white-space:nowrap;
}
.spacetree * li {
white-space:nowrap;
}
.ui-resizable-handle.ui-resizable-e {
background-color: #DDDDDD !important;
width: 2px !important;
}
div.resizable {
overflow: hidden;
min-height: 400px;
}
</style>
<script>
AJS.toInit(function () {
var setNavHeight = function() {
jQuery("div.resizable").height(jQuery("td.treenav").height()-10);
};
jQuery("div.resizable").resizable({
handles: "e",
resize: setNavHeight
});
setNavHeight();
jQuery(".wiki-content img[title]").each(function(index, domElement) {
jQuery(domElement).after("<br/><b>Figure: " + jQuery(domElement).attr("title") + "<b>");
})
});
</script>
<table cellspacing="2">
<tr>
<td valign="top" align="left" bgcolor="#F9F9F9" class="noprint treenav">
<div class="resizable" style="padding: 5px;">
<div class="tabletitle">Table of Contents</div>
<div class="spacetree">
#includePage($helper.spaceKey "TreeNavigation")
</div>
</div>
</td>
<td valign="top" align="left" class="pagecontent" style="padding: 5px">
<div class="wiki-content">
$body
</div>
</td>
</tr>
</table>
#else
<div class="wiki-content">
$body
</div>
#end
Remaining issue IMO is to store the size of the page tree in a cookie, so that the user doesn’t have resize the page tree on every page. Unfortunately, as Confluence does not provide the jQuery Cookie library, it needs to be installed manually, and i decided to leave this out for now.
Hope this helps.
Update: Make sure that the script tags at the beginning actually match the context root of your confluence installation. The code above assumes that Confluence is installed at ‘/’. If it is installed at ‘/confluence/’ the script tags have to be changed to:
<script src="/confluence/includes/js/jquery/jquery.ui-1.5a/jquery.js"></script> <script src="/confluence/includes/js/jquery/jquery.ui-1.5a/jquery.dimensions.js"></script> <script src="/confluence/includes/js/jquery/jquery.ui-1.5a/ui.mouse.js"></script> <script src="/confluence/includes/js/jquery/jquery.ui-1.5a/ui.resizable.js"></script>
Dec 17, 2008 at 21:08 | Permalink
Read more...
- Endpoints,Service Units and Components - a quick intro to JBI terminology for JBI newbies.
- Externalizing Configuration with Spring shows how to create simple config files for Spring applications.
- Mike Spille on XA Transactions Short post by Mike Spille on XA transactions. Good read as an intro.
- XBeans Intro by Craig Walls
| M | T | W | T | F | S | S |
|---|---|---|---|---|---|---|
| « Oct | Jan » | |||||
| 1 | 2 | 3 | 4 | 5 | 6 | 7 |
| 8 | 9 | 10 | 11 | 12 | 13 | 14 |
| 15 | 16 | 17 | 18 | 19 | 20 | 21 |
| 22 | 23 | 24 | 25 | 26 | 27 | 28 |
| 29 | 30 | 31 | ||||
15 Comments
1. Arthur B. | December 31st, 2008 at 12:27 pm
Hi,
Thanks very much for this. Very good idea and implementation.
A quick question : I have Confluence 2.10 and once this implemented, I have a big “Page Not found” in red in the Table of content. Any idea what is going wrong ?
2. Stefan Kleineikenscheidt | December 31st, 2008 at 1:09 pm
Have you created a page called “TreeNavigation” which contains the page tree macro? This is included by this line:
3. Arthur B. | December 31st, 2008 at 1:22 pm
Perfect !
Thanks for your help.
Now I’m a very pleased user of your code.
Thanks for sharing !!!!
4. marxoo | March 10th, 2009 at 10:57 am
Hi,
Your code is great !! !!
But it didn’t allow to use the Expand all. This is an option of pageTree : {pagetree:root=@self|expandCollapseAll=true}.
Can you help me to resolve this ?
Thanks
5. Stefan Kleineikenscheidt | March 10th, 2009 at 11:31 pm
Marxoo,
I’m not sure, I understand your problem. You should be able to use the macro the way you need it (with the expandCollapseAll=true) on the TreeNavigation page.
Is that it?
6. Corey | March 24th, 2009 at 9:51 pm
I followed the Page Tree Navigation instructions from Atlassian and I had the same problem with it taking up a lot of space. I came across your solution and I tried it. However, I’m not able to resize the page tree navigation. I replaced step 3 from Atlassian with the code above but I am not getting the resizable arrow. Everything else looks correct and i double checked the code. Is there something else that needs to be done to resize the table of contents?
7. Stefan Kleineikenscheidt | March 28th, 2009 at 11:48 am
Corey, thanks for the hint. The problem is most probably that the jQuery scripts are not correctly referenced. Make sure that the src attributes in the script tags (at the beginning of my code) do actually match you context root.
The explanation in this article was actually making the assumption, that Confluence is installed at root.
8. Corey | March 31st, 2009 at 2:45 pm
Thanks Stefan! I figured it out after I had already submitted my question to you. But I’m sure it will help someone else. Thank you for your time and effort.
9. Corey | June 18th, 2009 at 4:17 pm
Stefan,
I’m interested in the jQuery Cookie library. Some users don’t like how the bar changes back to the original size. I would love to get this working for my users.
Do you know where I can find it?
10. Stefan Kleineikenscheidt | June 18th, 2009 at 4:23 pm
Corey,
try these links: http://plugins.jquery.com/project/Cookie and http://www.stilbuero.de/2006/09/17/cookie-plugin-for-jquery/
-Stefan
11. Corey | June 18th, 2009 at 5:13 pm
Do you know if something changed in Confluence version 3.0 that would affect the jQuery. My resizable navigation no longer works. We just did the upgrade last night. I can’t seem to figure out what happened.
12. Stefan Kleineikenscheidt | June 18th, 2009 at 7:25 pm
Corey, yeah looks like they have change it indeed. Will have a look at that tomorrow.
13. Uwe Voellger | July 23rd, 2009 at 6:36 pm
Hello,
any news about Confluence 3.0 and jQuery and resizable tree navigation? It seems jQuery is no longer bundled at all. Don’t know how to deploy it in the right manner…
Thanks,
Uwe
14. Administrator | July 24th, 2009 at 9:22 am
Hi Uwe, it shouldn’t we that hard fix the problem (jquery is bundled in confluence, but it needs to be referenced differently). However, I need to find some time for that. I will let you know.
-Stefan
15. Uwe Voellger | August 19th, 2009 at 1:25 pm
Hello,
what I did in the meantime is to extract the two files ui.mouse.js and ui.resizable.js from atlassian-confluence-eng\3.0.0_01\confluence\WEB-INF\classes\com\atlassian\confluence\setup\atlassian-bundled-plugins.zip (auiplugin-1.0.2.jar) and stored them into a sub-folder of atlassian-confluence-eng\3.0.0_01\confluence. Now the files are accessible.
I could not find any solution that works with requireResource like #requireResource(”com.atlassian.auiplugin:jquery”) since at least resizable is not provided. To provide it, one would have to write a plugin, but then the resources are only availabe for this new plugin…
Uwe
Leave a Comment
Some HTML allowed:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <code> <em> <i> <strike> <strong>
Trackback this post | Subscribe to the comments via RSS Feed