Teknikaj detaloj de la paĝaro de ESN kaj GEA-Landa Asocio, skriptoj

Propraj Jquery-skriptoj

Submenuo kun fokuso

Ekde 2014 ni havas sur nia paĝaro skripton, kiu ĉe fokuso sur submenuero aldonas la klason focus al la rilata ĉefa menuero. Per tio ebliĝas, ke la submenuo restas malfaldata.

Fontoteksto Javaskripto + 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'); });
});
}

Ekde la 5-a de oktobro 2016 la skripto estas pli longa, ĉar ĝi subtenas submenuerojn en teknikaj paĝoj:

Fontoteksto Javaskripto + 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'); });
});
}

La 12-an de marto 2018 li denove aldonis plian trajton. Kaj la 3-an de aprilo 2018 li iomete korektis la aldonaĵon, ĉar ĉe sinsekvaj ligiloj kun helpiloj ĉe fokuso sur la dua ligilo ankaŭ la unua helpilo ekvideblis..

Fontoteksto Javaskripto + 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'); });
});
}

Ĉar ne ĉiuj foliumiloj subtenas la novan :focus-within-pseŭdoklason de CSS, la skripto aranĝas tion per aldono de la klaso focus.

Ekde la 14-a de junio 2018 :focus-within en la kaplinio estas imitata en iom pli malnovaj foliumiloj per helpo de plia skripto. La tuto do nun jenas:

Fontoteksto Javaskripto + 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');
                });
                }
}

Sed por tio necesis aldoneto en la kaplinio de ĉiuj HTML-dosieroj:

Fontoteksto HTML

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

Senligiligilo

Ekde 2014 nia paĝaro havas skripton, kiu senligiligas la aktualan menueron kaj ĉe tio anstataŭigas <a> per <b>. La 12-an kaj 13-an de marto 2018 la skripto ricevis aldoneton kaj estis iomete korektita.

Fontoteksto Javaskripto + 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;
            });
        }
    });
    }
}

Fantoma <span>-etikedo

Jquery kreas senenhavan <span>-etikedon por subteni la trian varianton de la ŝpruchelpiloj jene:

Fontoteksto Javaskripto + Jquery

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

Tria ŝpruchelpilo en IE7

La 29-an de julio 2016 RP aldonis skripton por ebligi la trian varianton de ŝpruchelpiloj ankaŭ en la malnova Interreta Esplorilo 7. Ĝi ne subtenas :after nek :before kaj tial bezonas alian manieron.

Fontoteksto Javaskripto + 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);
  }
}

La supra skripto kopias la enhavon de la atributo data-helpilo en la "fantoman" <span>-etikedon kaj aldonas la atributon class="helpilo" al la reala etikedo, tiel ke la formatoj por la unua varianto de ŝpruchelpiloj bone funkcias.

La 30-an de aŭgusto 2016 RP kreis iomete pli bonan skripton, tiel ke eĉ pli ol unu ŝpruchelpilo devus funkcii.

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

Ligilo al alia lingva versio

Ekde la 2-a de septembro 2016 kelkaj el niaj paĝoj havas ligilon al la alilingva versio. Por ke ĝi aperu supre apud la serĉujo, la jena skripto estas uzata:

Fontoteksto Javaskripto + 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') );
}

Simboloj el tiparoj ankaŭ per IE7

Ekde la 13-a de septembro 2016 eĉ funkcias simboloj el tiparoj per la malnova Interreta Esplorilo 7.

Por tio ekzistas nun sufiĉe kompleksa skripto:

Fontoteksto Javaskripto + 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");
   }
}

La 12-an de marto 2018 la skripto estis iomete ŝanĝita al la jeno:

Fontoteksto Javaskripto + 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");
   }
}

Krom tio ekzistas du apartaj CSS-paĝoj por tiu foliumiloj, nome:

Pliaj Jquery-skriptoj

Ekde aŭgusto 2016 ni uzas Lightbox por niaj bildogalerioj. Ĝi ebligas, ke post klako sur unuopan bildon aperas la granda bildo kaj ligilo al antaŭa kaj sekva bildoj kaj por malaperigi la grandan bildon denove.

La skripto troviĝas en la reto sub http://lokeshdhakar.com/projects/lightbox2/. Informoj pri la permesilo legeblas sur aparta paĝo.

Kolorĉena skripto

La kolorĉena skripto povas esti enplektata je malsama maniero. Ĉe tio la unua parametro ĉiam difinas la tekston, kiu ricevu kolorĉenon kaj la dua la varianton.

Fontoteksto HTML

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

La unuaj tri variantoj havas antaŭdifinitajn kolorojn, dum ke la kvara estas pli varia.

Varianto 1: rainbow("Saluton Maks'!",1) redonas
Varianto 2: rainbow("Saluton Maks'!",2) redonas
Varianto 3: rainbow("Saluton Maks'!",3) redonas
Varianto 4: rainbow("Saluton Maks'!",4,"00CC00 CC0000") redonas

Fontoteksto HTML

 <script>
 <!--
 rainbow2("-->Saluton Maks'!<!--",2)
 //-->
 </script>

redonas

Por foliumiloj sen Ĝavaskripto aŭ kun malaktivigita Ĝavaskripto la sama teksto estu metata inter <noscript> kaj </noscript>.

Alie neniu ajn teksto estas montrata.

Sed tiu skripto ne plu estas uzataj sur nia paĝaro.

Esperanto en Meklenburgio-Antaŭpomerio

Internacia lingvo

Pri skriptoj

Propraj Jquery-skriptoj

Submenuo kun fokuso

Senligiligilo

Fantoma <span>-etikedo

Tria ŝpruchelpilo en IE7

Ligilo al alia lingva versio

Simboloj el tiparoj ankaŭ per IE7

Pliaj Jquery-skriptoj

Kolorĉena skripto