Category Archives: Javascript

Improving Confluence with Greasemonkey

Here at GetConnected we are using Confluence and Jira since some months and I must admit that I’m really satisfied of both these products. They helped me to easily keep track of the documentation and activities’ progress.

Before adopting Confluence I’ve tried several wikis – most of which opensource – but none really fit our need. These are some of the features of Confluence which I considered important and that other wikis didn’t have or supported only partially:

  1. Pages can be moved to other page, that is a page can abandon its parent page and become child of another page: damn, this is so useful, I don’t know how many times I change my mind about how to organize pages. I don’t really understand why so few wikis support this… This is a must have for me now.
  2. Renaming a page causes links to that page from other pages to be adjusted as well
  3. Minimalist and simple syntax, you can learn it in few minutes and you won’t use the WYSIWYG editor anymore (but will type faster).
  4. That said, the WYSIWYG editor just works: not everyone in a company likes to play with codes just to edit a page.
  5. Confluence has tons of plugins, you can surely find the one that fits your needs.
  6. You can write your own macros and page templates.

Coming back to the topic of this post, only one things disappointed me a bit until now: the navigation bar with the Edit and Add menus are only at the top of the page, if you’re reviewing a long page and want to edit it you need to go up to the top of the page. Of course this is not a big problem actually, but it’s worth the effort of spending some time trying to improve the usability.

So today I wrote my first Greasemonkey script. It took me only few minutes to quickly read a small tutorial and the hack was done.

Greasemonkey is a Firefox plugin that lets you execute custom Javascript code in order to change the appearance and functionality of a certain web page. Many plugins exist that change the overall aspect of GMail and Google, for instance, you can find them here:

My script is very elementary, all it does is adding a new CSS rule that overrides the default settings thus making the navigation bar position fixed:

#navigation {

The Javascript code could be writte on one single line without losing readability:

    '#navigation { ' +
    '-moz-border-radius:5px 5px 5px 5px; ' +
    'background-color:#F1F1F1; ' +
    'display:inline; ' +
    'padding-bottom:10px; ' +
    'padding-right:10px; ' +
    'position:fixed; ' +
    'right:15px; ' +
    ' }', 0);

This is how Confluence looks when you open a page:

Confluence-Greasemonkey script 1

How the navigation bar appears when the page is opened

And this is how it looks when you scroll the page down:

Confluence-Greasemonkey script 2

How the navigation bar appears when you scroll the page down

Greasemonkey scripts are distributed through the site. If you think that the script I wrote can be useful, install it and drop a line of comment.