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


Was gerade in meinem Blog geschieht:

sammelsurium:dokuwiki:lange_seitennamen_navigation

Lange Seitennamen in der Navigation anzeigen

Die Navigation in diesem Wiki 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 :)

Template DokuWiki

CSS

In die Datei css/content.css einfügen (ab „Binky“ css/content.less):

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

JavaScript

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

Template Monobook

Einstellungen ändern und Code einfügen

Die Einstellung „tpl»monobook»monobook_loaduserjs“ (Datei 'monobook/user/user.js' laden?) muss aktiviert sein.

Der Code unterliegt der Public_domain.

Man muss Änderungen am CSS und am JavaScript machen…

CSS

Ans Ende von lib/tpl/monobook/user/screen.css anfügen:

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

JavaScript

Ans Ende von lib/tpl/monobook/user/user.js anfü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 = $('#p-x-navigation a.nodeFdUrl, #p-x-navigation a.nodeUrl, #p-x-navigation a.nodeSel, #p-x-navigation a.node, #p-x-navigation 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: 2015/11/26 18:21 von Natenom