Lange Seitennamen in der Navigation anzeigen

Alle Anpassungen für dieses Wiki sind jetzt an einem Ort gebündelt. Updates gibt es nur noch dort im Repo, nicht mehr hier.

Die Navigation, die durch das Plugins IndexMenu in diesem Wiki realisiert wird, ist mittels (JavaScript und) CSS erweitert, damit zu lange Seitennamen beim Überfahren mit der Maus komplett angezeigt werden.

Vielen Dank an Deltachaos, der das technisch umgesetzt hat :)

Falls die Änderungen nicht aktiv werden, dann muss man den Cache löschen, siehe hier.

Wichtige Option für Indexmenu

Es muss die Option “noscroll” verwendet werden, damit die Seitennamen “on top” angezeigt werden.

Auch muss die Option useheading aktiviert sein, damit die erste Überschrift einer Seite als Eintrag in der Navigation landet statt nur der Name der Seite.

Einige Vorschläge für IndexMenu Themes gibt es hier: Indexmenu Themes.

Template DokuWiki

So wie es scheint, funktioniert diese Lösung nicht (mehr?), wenn man den CSS Code in die hier genannten Dateien einfügt. Stattdessen muss der CSS Code hierher: https://www.dokuwiki.org/devel:css#user_styles

CSS

Zuerst erstellt man eine neue CSS-Datei extra_local.css im Verzeichnis lib/tpl/dokuwiki/css/, sofern man das Standard-Template verwendet. Dann fügt man die folgenden Zeilen in diese Datei ein:

div.dtree a.nodeFdUrl:hover, div.dtree a.nodeFdUrl:focus, div.dtree a.nodeFdUrl.hover,
div.dtree a.nodeUrl:hover, div.dtree a.nodeUrl:focus, div.dtree a.nodeUrl.hover,
div.dtree a.nodeSel:hover, div.dtree a.nodeSel:focus, div.dtree a.nodeSel.hover,
div.dtree a.node:hover, div.dtree a.node:focus, div.dtree a.node.hover,
div.dtree a.navSel:hover, div.dtree a.navSel:focus, div.dtree a.navSel.hover{
  position:absolute;
  z-index: 2;
  background-color: #fff;
  background-color: rgba(230, 227, 250, 0.99) !important;
  padding: 3px;
  border: 1px solid black !important;
  margin-top: -3px;
  font-weight: none;
}

Damit die neue CSS-Datei auch wirksam wird, fügt man in die style.ini im Bereich [stylesheets] die folgende Zeile irgendwo hinzu:

css/extra_local.css       = screen

JavaScript

Es scheint so, als brauche man das JavaScript nicht mehr; in meinem lokalen Test-Wiki funktioniert es auch nur mit CSS. Ich erinnere mich dunkel, dass es früher auch nur notwendig war, um irgendeinen Anzeigebug zu fixen. Fall das CSS bei jemandem nicht ausreicht, dann bitte noch den folgenden Code in die Datei script.js einfügen:

jQuery(function() {
  (function($, undefined) {
 
    function bindElements() {
      /* Fix for (fucking) Webkit which dose not allow to change position to absolute on hover in CSS */
      function IndexMenuHoverIn() {
        $(this).addClass('hover');
      }   
      function IndexMenuHoverOut() {
        $(this).removeClass('hover');
      }   
 
      var elements = $('a.nodeFdUrl, a.nodeUrl, a.nodeSel, a.node, a.navSel');
      elements.unbind('mouseenter', IndexMenuHoverIn).bind('mouseenter', IndexMenuHoverIn);
      elements.unbind('mouseleave', IndexMenuHoverOut).bind('mouseleave', IndexMenuHoverOut);
    }   
    for(var obj in window) {
      if(window[obj] instanceof dTree) {
        var dtreeObj = window[obj];
        var oldFuction = dtreeObj.o;
        dtreeObj.o = function() {
          var args = Array.prototype.slice.call(arguments);
          oldFuction.apply(this, args);
          bindElements();
        }   
      }   
    }   
    setTimeout(bindElements, 100);
  })(jQuery);
});