Dies ist ein Folgeartikel zu einem älteren Artikel von mir. Es geht darum, die Edit-Leiste von Atlassian Confluence, dem 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 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 Atlassian setzt jQuery in 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 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:
<script type="text/javascript">
function myAffix(p_selected, p_top) {
// Parameter checks:
if (!p_selected) {
alert("myAffix(): first param needs to be a jQuery-Style object selector");
}
if (!p_top) var p_top = 40;
// init the objects .. and save old position
var
$theselected = AJS.$(p_selected),
$window = AJS.$(window),
old_position_css = $theselected.css("position"),
old_position = $theselected.position(), // relative to objects
old_offset = $theselected.offset(); // absolute to document
// function to set a fixed floating position:
function myAffixFloat() {
$theselected.css("position", "fixed");
$theselected.css("top", p_top); // set absolute
$theselected.css("left", old_offset.left); // set absolute
}
// function to set old original positions:
function myAffixSetDefaults() {
$theselected.css("position", old_position_css);
$theselected.css("top", old_position.top); // set relative
$theselected.css("left", old_position.left); // set relative
}
// when scrolling, then:
$window.scroll(function() {
if ($window.scrollTop() > old_offset.top - p_top + 1) {
myAffixFloat();
} else {
myAffixSetDefaults();
}
}).scroll(); // $window.scroll now has function and after doing the function, it's doing a .scroll()
// when resizing, set floater, else, stay on original position defaults
$window.resize(function() {
// find new offset for floater
myAffixSetDefaults();
old_offset = $theselected.offset(); // absolute to document
if ($window.scrollTop() > old_offset.top - p_top + 1) {
myAffixFloat();
}
});
}
</script>
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],[distance_from_top_in_px]);
- [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.
- [distance_from_top_in_px]: 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:
<script type="text/javascript">
AJS.toInit(function () {
myAffix("div#navigation");
});
</script>
AJS.toInit(function() { ... }); ist eine Funktion von Atlassian, die, genau wie bei 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.
<style>
div.content-navigation > ul.ajs-menu-bar {
border: 1px solid;
border-color: #c1c1c1;
border-radius: 6px;
background: #fff;
opacity: 0.9;
}
div.content-navigation {
z-index: 12;
}
</style>
Die Leiste sieht damit beim Scrollen auch noch gut aus!
Viel Spaß damit! Falls Dir dieses Howto geholfen hat, hinterlasse doch einen kleinen Kommentar.
Andere Kommentare