Dies ist ein Folgeartikel zu einem älteren [http://klumpp.net/blog/archives/106-Let-Confluence-Edit-and-Add-Page-buttons-float-in-your-view.html Artikel von mir]. Es geht darum, die Edit-Leiste von [http://www.atlassian.com Atlassian] [http://www.atlassian.com/confluence Confluence], dem [http://de.wikipedia.org/wiki/Wiki Wiki], mitscrollen zu lassen, wenn im Browser-Fenster gescrollt wird. Damit 'schwebt' die Leiste und ist immer schnell erreichbar. Jedoch war in der alten Lösung das Scrollen wegen unterschiedlicher //Document Object Models// (DOM) nicht in jedem Browser möglich.
Hier nun ein verbesserter Lösungsansatz.
Mir kam der Gedanke, dass man dem Problem ja mit [http://www.jquery.com jQuery] begegnen kann. Gerade jQuery, als führende JavaScript-Bibliothek, achtet besonders auf die heutige Browservielfalt. Es gibt einen guten Grund, weshalb jQuery auf immer mehr Webseiten eingesetzt wird. Das Mitbewegen von Objekten beim Scrollen habe ich mit jQuery also allgemeingültig gelöst.
Auch [http://www.atlassian.com Atlassian] setzt [http://www.jquery.com jQuery] in [http://www.atlassian.com/confluence Confluence] ein. Genau genommen hat Atlassian für Confluence eine eigene JavaScript-Bibliothek gebaut, die auf JQuery setzt. Sie nennen das ganz einfach //Atlassian JavaScript//, kurz //AJS//. Um mittels typischen [http://api.jquery.com/category/selectors/ jQuery-Selektoren] auf Objekte zuzugreifen, muss man einfach nur ein {{AJS.}} dem Selektor voransetzen. Möchte man also ein {{$("p.main-header")}} selektieren, sähe das im Kontext von Atlassian so aus: {{AJS.$("p.main-header")}}.
++ Der JavaScript-Code
Wie sieht die Scrolling-Lösung mit JQuery also unter Confluence aus?
Die Funktion, die das Scrolling ermöglicht, nenne ich {{myAffix();}} Sie greift auf das selektierte Objekt zu, nimmt sich die derzeitige Position, und setzt die Position frisch, sobald man das Browser-Fenster scrollt. Als Confluence-Admin nehme man den nachfolgenden Code und füge ihn im Admin-Menu "Custom HTML" in den Code-Block "At the end of the HEAD" ein:
Die Funktion ist damit bei allen Seitenaufrufen unter Confluence verfügbar.
++ Die Syntax
Die Syntax für den Aufruf der Funktion ist:
myAffix([JQuery-Selector],[distancefromtopinpx]);
- {{[JQuery-Selector]}}: Der JQuery-Selector. Um die Edit-Leiste - also das DIV-Element mit der ID "navigation" - zu selektieren, nimmt man den Selektor {{div#navigation}}.
- {{[distancefromtopinpx]}}: Der Parameter ist optional. Er gibt an, ab welchem Abstand vom oberen Seitenrand das Objekt mitbewegt werden soll. Wenn er nicht angegeben ist, dann werden {{40px}} angenommen. Der Standard von {{40px}} ist für Confluence passend.
Der passende Aufruf ist also: {{myAffix("#navigation");}}
++ Der Aufruf
Dann füge man also den nachfolgenden Aufruf auch in den Block "At the end of the HEAD" ein:
{{AJS.toInit(function() { ... });}} ist eine Funktion von Atlassian, die, genau wie bei [http://api.jquery.com/ready/ JQuery] {{$(document).ready(function() { ... });}} sicherstellt, dass das DOM vollständig geladen ist, bevor weitere Funktionen ausgeführt werden.
Nun sollte sich die Edit-Leiste beim Scrollen immer mitbewegen.
++ Besseres Aussehen für die Leiste
Die Leiste ist derzeit allerdings durchsichtig. Das sieht ein wenig unschön aus. Daher am besten gleich noch den folgenden Stil ebenfalls bei "At the end of the HEAD" einfügen.
Die Leiste sieht damit beim Scrollen auch noch //gut// aus!
Viel Spaß damit! Falls Dir dieses Howto geholfen hat, hinterlasse doch einen kleinen Kommentar.
