Technische Details zur Seite von EVN und DEB-Landesverband, Skripte

Eigene Jquery-Skripte

Untermenü mit Fokus

Seit 2014 haben wir auf unseren Seiten ein Skript, welches bei Fokus auf einem Untermenüeintrag dem zugehörigen Hauptmenüeintrag die Klasse focus zuweist. Damit wird es möglich, daß das Untermenü aufgeklappt bleibt.

Quelltext Javascript + Jquery

// Inspiriert von http://www.php.de/html-usability-und-barrierefreiheit/79348-erledigt-css-sub-menue-funktioniert-ff-chrome-nicht-aber-ie.html
function submenuo() {
$("nav#chefa li ul a").each (function () {
  var that = this;
  var link = $(that).parent('li').parent('ul').prev(''); // prev('a') geht nicht, weil die Funktion SetNavigation ja "a" durch "b" ersetzt
  $(this)
    .focusin(function () { link.addClass('focus'); })
    .focusout(function () { link.removeClass('focus'); });
});
}

Seit dem 5. Oktober 2016 ist das Skript etwas länger, weil es auch Untermenüs auf den Technikseiten unterstützt:

Quelltext Javascript + Jquery

// Inspiriert von http://www.php.de/html-usability-und-barrierefreiheit/79348-erledigt-css-sub-menue-funktioniert-ff-chrome-nicht-aber-ie.html
function submenuo() {
$("nav#chefa li ul a").each (function () {
  var that = this;
  var link = $(that).parent('li').parent('ul').prev(''); // prev('a') geht nicht, weil die Funktion SetNavigation ja "a" durch "b" ersetzt
  $(this)
    .focusin(function () { link.addClass('focus'); })
    .focusout(function () { link.removeClass('focus'); });
});
$("#enhavo div#malchefa_t li a").each (function () {
  var that = this;
  var link = $(that).parent('li').parent('ul').prev(''); // prev('a') geht nicht, weil die Funktion SetNavigation ja "a" durch "b" ersetzt
  $(this)
    .focusin(function () { link.addClass('focus'); })
    .focusout(function () { link.removeClass('focus'); });
});
$("#enhavo footer div#malchefa_t2 li a").each (function () {
  var that = this;
  var link = $(that).parent('li').parent('ul').prev(''); // prev('a') geht nicht, weil die Funktion SetNavigation ja "a" durch "b" ersetzt
  $(this)
    .focusin(function () { link.addClass('focus'); })
    .focusout(function () { link.removeClass('focus'); });
});
}

Am 12. März 2018 hat er eine weitere Funktionalität ergänzt. Und am 3. April 2018 hat er die Ergänzung etwas korrigiert, weil bei aufeinander folgenden Links mit Tooltip beim Fokus auf dem zweiten Link auch das erste Tooltip aufklappte.

Quelltext Javascript + Jquery

// Inspiriert von http://www.php.de/html-usability-und-barrierefreiheit/79348-erledigt-css-sub-menue-funktioniert-ff-chrome-nicht-aber-ie.html
function submenuo() {
$("nav#chefa li ul a").each (function () {
  var that = this;
  var link = $(that).parent('li').parent('ul').prev(''); // prev('a') geht nicht, weil die Funktion SetNavigation ja "a" durch "b" ersetzt
  $(this)
    .focusin(function () { link.addClass('focus'); })
    .focusout(function () { link.removeClass('focus'); });
});
$("#enhavo div#malchefa_t li a").each (function () {
  var that = this;
  var link = $(that).parent('li').parent('ul').prev(''); // prev('a') geht nicht, weil die Funktion SetNavigation ja "a" durch "b" ersetzt
  $(this)
    .focusin(function () { link.addClass('focus'); })
    .focusout(function () { link.removeClass('focus'); });
});
$("#enhavo footer div#malchefa_t2 li a").each (function () {
  var that = this;
  var link = $(that).parent('li').parent('ul').prev(''); // prev('a') geht nicht, weil die Funktion SetNavigation ja "a" durch "b" ersetzt
  $(this)
    .focusin(function () { link.addClass('focus'); })
    .focusout(function () { link.removeClass('focus'); });
});
// Fuer die Tooltips
$(".helpilo2 a").each (function () {
  var that = this;
  var link = $(that).parent('span').prev('a');   // a musz hier stehen, damit aufeinander folgende Links mit Tooltip beim Fokus nicht komisch gleichzeitig aufklappen.
  $(this)
    .focusin(function () { link.addClass('focus'); })
    .focusout(function () { link.removeClass('focus'); });
});
}

Weil nicht alle Browser die neue :focus-within-Pseudoklasse von CSS unterstützen, ermöglicht dies das Skript durch Hinzufügen der Klasse focus.

Seit dem 14. Juni 2018 wird :focus-within in der Kopfzeile in etwas älteren Browsern mit Hilfe eines weiteren Skripts nachgebildet. Das Ganze sieht also nun so aus:

Quelltext Javascript + Jquery

// Inspiriert von http://www.php.de/html-usability-und-barrierefreiheit/79348-erledigt-css-sub-menue-funktioniert-ff-chrome-nicht-aber-ie.html
function submenuo() {
$("nav#chefa li ul a").each (function () {
  var that = this;
  var link = $(that).parent('li').parent('ul').prev(''); // prev('a') geht nicht, weil die Funktion SetNavigation ja "a" durch "b" ersetzt
  $(this)
    .focusin(function () { link.addClass('focus'); })
    .focusout(function () { link.removeClass('focus'); });
});
$("#enhavo div#malchefa_t li a").each (function () {
  var that = this;
  var link = $(that).parent('li').parent('ul').prev(''); // prev('a') geht nicht, weil die Funktion SetNavigation ja "a" durch "b" ersetzt
  $(this)
    .focusin(function () { link.addClass('focus'); })
    .focusout(function () { link.removeClass('focus'); });
});
$("#enhavo footer div#malchefa_t2 li a").each (function () {
  var that = this;
  var link = $(that).parent('li').parent('ul').prev(''); // prev('a') geht nicht, weil die Funktion SetNavigation ja "a" durch "b" ersetzt
  $(this)
    .focusin(function () { link.addClass('focus'); })
    .focusout(function () { link.removeClass('focus'); });
});
// Fuer die Tooltips
$(".helpilo2 a").each (function () {
  var that = this;
  var link = $(that).parent('span').prev('a');   // a musz hier stehen, damit aufeinander folgende Links mit Tooltip beim Fokus nicht komisch gleichzeitig aufklappen.
  $(this)
    .focusin(function () { link.addClass('focus'); })
    .focusout(function () { link.removeClass('focus'); });
});
// Fuer :focus-within, 20180614
if (!Modernizr.focuswithin) {
/* nach https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_event_focusout */
                $("#search").focusin(function(){
                        //$(this).css("background-color", "#FFFFCC");
                        $(this).addClass('focus');
                });
                $("#search").focusout(function(){
                        //$(this).css("background-color", "#FFFFFF");
                        $(this).removeClass('focus');
                });
                }
}

Aber dafür war eine Ergänzung in der Kopfzeile jeder HTML-Datei erforderlich:

Quelltext HTML

<script src="js/modernizr-custom.js"></script>

Entlinker

Seit 2014 haben unsere Seiten ein Skript, welches den aktuellen Menüpunkt entlinkt und dabei <a> durch <b> ersetzt. Am 12. und 13. März 2018 wurde das Skript etwas ergänzt bzw. korrigiert.

Quelltext Javascript + Jquery

// Inspiriert von http://www.itworld.com/article/2832973/development/setting-an-active-menu-item-based-on-the-current-url-with-jquery.html
// und http://jsfiddle.net/DDZNz/
// Ersetzungen nach http://stackoverflow.com/questions/7093417/using-jquery-to-replace-one-tag-with-another
function setNavigation() {
    var path = window.location.pathname;
    path = path.replace(/\/$/, "");
    path = decodeURIComponent(path);
    // Bei Offline-Test den komischen Pfad entfernen, falls vorhanden
    if (path.match("/I:/retpaghoj/societo")) {
    path=path.replace("/I:/retpaghoj/societo","");
    }
        // Bei PHP-Version den Teil /evn entfernen
        if (path.match("/evn")) {
                path=path.replace("/evn","");
        }
    // Abfrage, ob path leer ist, denn das passiert online bei der deutschen Startseite
    if (path == "") {
       path = "/index.html";
    }
    //alert(path);

    // Variabeln fuer die unterschiedlichen Links
    var links = new Array();
    links[0] = "nav#chefa a";
    links[1] = "#informiloj a";
    links[2] = "html#imp .icon-mail a";
    links[3] = "#malchefa a";
    //links[4] = "#malchefa2 a";
    links[4] = "footer[role=contentinfo] address a";
    links[5] = ".piedo .icon-search a";
    links[6] = "#kalnav ul a";

    for (var i in links) {
    // $("nav#chefa a").each(function () {
    $(links[i]).each(function () {
        var href = $(this).attr('href');
        // wenn href mit ../ beginnt, diese entfernen - aber nur das erste Auftreten
        if (href.match("../")) {
        href=href.replace("../","");
        }
        // Korrektur des href fuer die Informiloj im entsprechenden Verzeichnis
        if (href.match("informiloj") && i == 1)  {
        href=href.replace("informiloj","informiloj/informiloj");
        }
        // Korrektur des href fuer die einzelnen Informiloj nach Jahren
        if (href.match("verda_informilo") && i == 3) {
        var jahr = href.slice(15,19);
        href="informiloj/" + jahr + "/" + href;
        }

        // Korrektur des href fuer die einzelnen Technikseiten in Deutsch
        if (href.match("technik") && (i == 3 || i == 4)) {
        href="tekniko/" + href;
        }
        // Korrektur des href fuer die einzelnen Technikseiten in Esperanto
        else if (href.match("tekniko") && (i == 3 || i == 4)) {
        href="tekniko/" + href;
        }

        // Korrekur des href fuer die Kalenderseiten
        if (href.match("20") && (i == 6)) {
        href="kalendaroj/" + href;
        }
        else if (href.match("jam") && (i == 6)) {
        href="kalendaroj/" + href;
        }
        else if (href.match("jhus") && (i == 6)) {
        href="kalendaroj/" + href;
        }

        //alert(href);
        // / vor href stetzen, damit der folgende Vergleich passt
        href="/" + href;
        if (path.substring(0, href.length) === href) {
            $(this).closest('li').addClass('active');
            // Link a durch Element b ersetzen, ohne dass der Text verschwindet
            $(this).replaceWith(function(){
              // IE 7 und wohl auch aeltere brauchen eine Extrawurst.
              if (document.all && !document.querySelector) {
                 return $("<b />", {html: $(this).html()});
              }
              var replacement = $('<b>').html($(this).html());
              for (var i = 0; i < this.attributes.length; i++) {
              // Attribut href durch data-href ersetzen, weil in b kein href zulaessig ist
                 if (this.attributes[i].name == "href") {
                 replacement.attr("data-href", this.attributes[i].value);
                 }
                 else {
                 replacement.attr(this.attributes[i].name, this.attributes[i].value);
                 }
              }
              return replacement;
            });
        }
    });
    }
}

Unsichtbares <span>-Tag

Jquery erzeugt ein <span>-Tag ohne Inhalt um die dritte Variante des Tooltips wie folgt zu unterstützen:

Quelltext Javascript + Jquery

function span() {
  var elem = "<span class=\"io\"></span>";
  $("abbr[data-helpilo]").append(elem);
}

Drittes Tooltip im IE7

Am 29. Juli 2016 hat RP ein Skript ergänzt um die dritte Variante der Tooltips auch im alten Internet Explorer 7 zu ermöglichen. Er unterstützt weder :after noch :before und braucht deswegen eine andere Art und Weise.

Quelltext Javackript + Jquery

function tooltip() {
  //aus http://stackoverflow.com/questions/15755459/how-to-detect-ie7-and-lower-using-jquery-support
  //check for IE7
  if(navigator.appVersion.indexOf("MSIE 7.")!=-1) {
         //alert("Saluton, IE7");
         var tooltiptext = $("[data-helpilo]").attr('data-helpilo');
         //var elem='<span class="ie">' + tooltiptext + "</span>";
         //$("[data-helpilo]").append(elem).attr("class","helpilo");
         var klasse= $("[data-helpilo]").attr('class');
         var klasseneu=klasse + " helpilo";
         $("[data-helpilo]").attr("class",klasseneu);
         $("[data-helpilo] span.io").html(tooltiptext);
  }
}

Das obige Skript kopiert den Inhalt des Attributes data-helpilo in das unsichtbare <span>-Tag und fügt das Attribut class="helpilo" zum echten Tag hinzu, so daß die Formate für die erste Variante der Tooltips gut funktionieren.

Am 30. August 2016 hat RP ein etwas besseres Skript erstellt, so daß sogar mehr als ein Tooltip funktionieren dürfte.

Quelltext Javaskripto + Jquery

function tooltip_neu() {
  //aus http://stackoverflow.com/questions/15755459/how-to-detect-ie7-and-lower-using-jquery-support
  //check for IE7
  if(navigator.appVersion.indexOf("MSIE 7.")!=-1) {
         //alert("Saluton, IE7");
        $("[data-helpilo]").each(function(){
         var tooltiptext = $(this).attr('data-helpilo');
         //var elem='<span class="ie">' + tooltiptext + "</span>";
         //$("[data-helpilo]").append(elem).attr("class","helpilo");
         var klasse= $(this).attr('class');
         var klasseneu=klasse + " helpilo";
         $(this).attr("class",klasseneu);
         $(this).children("span.io").html(tooltiptext);  // nach https://api.jquery.com/children/
        });
  }
}

Link auf die andere Sprachversion

Seit dem 2. September 2016 haben einige unserer Seiten einen Link auf die anderssprachige Version. Damit dieser oben neben dem Suchfeld erscheint, wird folgendes Skript benutzt:

Quelltext Javascript + Jquery

function alie() {
         // Link verschieben
        // $('#search').append( $('p:has(>a#alilingve)') );
        // $('#search').insertAfter( $('p:has(>a#alilingve)') );
        // nach http://stackoverflow.com/questions/1279957/how-to-move-an-element-into-another-element 2 Antworten passen
          $('p:has(>a#alilingve)').insertAfter( $('#search') );
}

Zeichen aus Symbolschriftarten auch im IE7

Seit dem 13. September 2016 funktionieren sogar Zeichen aus Symbolschriftarten im alten Internet-Explorer 7.

Dafür gibt es nun ein ziemlich komplexes Skript:

Quelltext Javascript + Jquery

function icons() {
  //aus http://stackoverflow.com/questions/15755459/how-to-detect-ie7-and-lower-using-jquery-support
  //check for IE7
  if(navigator.appVersion.indexOf("MSIE 7.")!=-1) {
         $('[class^="icon-"]').each(function(){
              var klasse = $(this).attr('class');
              var klasseneu = klasse.replace("icon-","icon2-");
              //alert(klasse);
              var elem = "<span class=\"" + klasseneu + "\"></span>";
              //alert(elem);
              //$(elem).insertBefore($(this));
              $(this).prepend(elem);
              $(this).attr("class","");
              //@import url(../tiparoj/fontello/css/fontello-ie7.css);
              if (klasseneu=="icon2-css3" || klasseneu=="icon2-html5") {
                 $(this).css("background-image","none");
                 $(this).css("padding-left","0.5em");
              }
         });
         $('li:has(> .ui-icon)').css("padding-left","0.5em");
         $('footer[role="contentinfo"] figure + figure').css("width","49%");
         $('footer[role="contentinfo"] figure + figure a').css("padding-left","0.5em");
         $('[class^="ui-icon"]').each(function(){
                 var elem2 = "<b class=\"after\"></b>";
                 $(this).append(elem2);
                 //$(this).children("b.after").css("height","1.8em").css("line-height","1.8");
                 $(this).css("top","25%");
         });
         $('footer[role="contentinfo"] figure + figure li + li + li').css("background-image","none");
   }
}

Am 12. März 2018 wurde das Skript wie folgt geändert:

Quelltext Javascript + Jquery

function icons() {
  //aus http://stackoverflow.com/questions/15755459/how-to-detect-ie7-and-lower-using-jquery-support
  //check for IE7
  if(navigator.appVersion.indexOf("MSIE 7.")!=-1) {
         $('[class^="icon-"]').each(function(){
              var klasse = $(this).attr('class');
              var klasseneu = klasse.replace("icon-","icon2-");
              //alert(klasse);
              var elem = "";
              //alert(elem);
              //$(elem).insertBefore($(this));
              $(this).prepend(elem);
              $(this).attr("class","");
              //@import url(../tiparoj/fontello/css/fontello-ie7.css);
              if (klasseneu=="icon2-css3" || klasseneu=="icon2-html5") {
                 $(this).css("background-image","none");
                 $(this).css("padding-left","0.5em");
              }
         });
         $('footer[role="contentinfo"] figure + figure li + li + li').css("background-image","none");
   }
}

Außerdem gibt es zwei separate CSS-Seiten für diesen Browser, und zwar:

Weitere Jquery-Scripts

Seit August 2016 nutzen wir Lightbox für unsere Bildergalerien. Es ermöglicht, daß nach einem Klick auf ein einzelnes Bild das große Bild und Links zum vorigen und nächsten Bild erscheinen und um das große Bild erneut auszublenden.

Das Script ist im Netz unter http://lokeshdhakar.com/projects/lightbox2/ zu finden. Informationen über die Lizenz sind auf einer anderen Seite zu lesen.

Farbverlaufsskript

Das Farbverlaufsskript kann auf unterschiedliche Weise eingebunden werden. Hierbei definiert der erste Parameter immer den Text, der einen Farbverlauf bekommen soll und der zweite die Variante.

Quelltext HTML

 <script>
 <!--
 rainbow("Text",1);
 //-->
 </script>

Die ersten drei Varianten haben vordefiniert Farben, während die vierte variabler ist.

Variante 1: rainbow("Hallo Maxe!",1) ergibt
Variante 2: rainbow("Hallo Maxe!",2) ergibt
Variante 3: rainbow("Hallo Maxe!",3) ergibt
Variante 4: rainbow("Hallo Maxe!",4,"00CC00 CC0000") ergibt

Quelltext HTML

 <script>
 <!--
 rainbow2("-->Hallo Maxe!<!--",2)
 //-->
 </script>

ergibt

Für Browser ohne Javascript oder mit deaktiviertem Javascript sollte derselbe Text zwischen <noscript> und </noscript> gesetzt werden.

Sonst wird nämlich überhaupt kein Text angezeigt.

Allerdings wird dieses Skript seit einiger Zeit nicht mehr auf unseren Seiten benutzt.

Esperanto in Mecklenburg-Vorpommern

Internationale Sprache

Über Skripte

Eigene Jquery-Skripte

Untermenü mit Fokus

Entlinker

Unsichtbares <span>-Tag

Drittes Tooltip im IE7

Link auf die andere Sprachversion

Zeichen aus Symbolschriftarten auch im IE7

Weitere Jquery-Scripts

Farbverlaufsskript