Natenoms Wiki

Weil Teilen Spaß macht :)

Benutzer-Werkzeuge

Webseiten-Werkzeuge


Seitenleiste

Übersetzungen dieser Seite:

Navigation


Lizenz dieses Wikis
Über dieses Wiki
Feed des Wikis
Impressum
Datenschutz


Was gerade in meinem Blog geschieht:

sammelsurium:dokuwiki:lange_seitennamen_navigation

Lange Seitennamen in der Navigation anzeigen

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 Seien namen „on top“ angezeigt werden.

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

Template DokuWiki

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);
});

Ergebnis

Siehe links :)

sammelsurium/dokuwiki/lange_seitennamen_navigation.txt · Zuletzt geändert: 2018/10/22 17:10 von Natenom