XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   Javascript & Ajax (http://xhtmlforum.de/forumdisplay.php?f=83)
-   -   Ankerlink-Parameter in Adresszeile ausblenden? (http://xhtmlforum.de/showthread.php?t=73204)

GeneralMops 11.04.2017 15:46

Ankerlink-Parameter in Adresszeile ausblenden?
 
Hallo allerseits,

ich habe eine Frage, die sich ein Stück weit um Responsive Webdesign dreht aber im Kern vermutlich eher unabhängig davon ist. Nun zur Sache...

Prinzipiell möchte ich meine Website gern responsiv aufbauen. Zu diesem Zweck habe ich Bootstrap (3.3.7) verwendet. Das klappt auch gut. Außerdem verwende ich auch die DJ-MediaTools. Hierbei handelt es sich um ein Joomla-Plugin, um schicke Diashows, Galerien usw. darzustellen.

Und hier beginnen die Probleme: Eins von beiden funktioniert wunderbar - also entweder die MediaTools oder Bootstrap. Beides zusammen kommt sich in die Quere. Das Problem sind Javascriptressourcen. Ich habe eine ganze Weile daran herumprobiert, um einen "Scriptkonsens" zu finden. Doch kürzlich gab ich es auf und suchte stattdessen nach Alternativen. Soviel zur Vorgeschichte. ;)

Bei meinen Recherchen stieß ich auf den CSS-Klassen-Selektor :target, der mir wie gerufen schien, sollte man damit doch ein responsives Navigationsmenü ganz ohne Javascript realisieren können. Hierzu gibt es auch ein interessantes Beispiel (Link: https://dbushell.com/Responsive-Off-...enu/step1.html). Das funktioniert auch hervorragend. Mit einem deutlichen Haken in der MOBILE-Ansicht (bzw. schmalem Browserfenster): Sobald man das Menü aktiviert, löst man einen Ankerlink aus (der öffnet das Menü gleichzeitig). Und damit wird der Ankerlink als Parameter an die originale URL (siehe Adresszeile im Browser) angehängt.

Technisch gesehen ist das natürlich alles korrekt. Aber es ist unkomfortabel. Warum? Wenn jemand draufklickt oder "toucht" und anschließend ein Bookmark setzt, wird der Ankerparameter ebenfalls mit gebookmarked, was irgendwie doof ist.

Meine Frage an euch: Wie kann ich den Ankerlink (als Parameter) von der Anzeige in der Adresszeile (Browseranzeige: URL) ausschließen? Gehen muss das irgendwie, das habe ich hier (Nichols College) gesehen. Allem Anschein nach wird dort ein recht ähnliches Verfahren (mittels :target) verwendet. Wenn man dort aber auf das Menü klickt wird kein Ankerlinkparameter an die URL angefügt. Wie geht das? Ich durchforste die zuletzt verlinkte Website bereits, konnte es aber noch nicht herausfinden. Vielleicht habt Ihr ja eine Idee?

Cheers, Mops

hemfrie 11.04.2017 16:55

Hallo Mops

bei der :target Variante wirst Du es nicht verhindern können, da :target ohne Anker nicht funktioniert.

Das zweite Beispiel was Du verlinkt hast funktioniert mit Javascript. Sobald Du dort auf Menü klickst wird dem html-element eine CSS-Klasse namens "off-canvas--visible" angehängt. Mit Hilfe dieser Klasse wird im CSS dann das Menü angezeigt und der Body nach links verschoben.

Hier siehst Du was die per CSS ändern, sobald diese Klasse dem html-element zugeordent wird:

Code:

    html.off-canvas--enabled.off-canvas--visible {
        overflow: hidden;
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0
    }

    html.off-canvas--enabled.off-canvas--visible body {
        left: -275px;
        left: -17.1875rem;
        overflow: visible;
    }

    html.off-canvas--enabled.off-canvas--visible .nav {
        width: 100%;
    }

    html.off-canvas--enabled.off-canvas--visible .nav__closer {
        background: rgba(44,40,37,.7);
        display: block;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 0
    }


Hier siehst Du das Javascript, dass die Klasse hinzufügt und auch dafür sorgt, dass der Anker nicht angehängt wird. Siehe hierzu auch javascript - What's the difference between event.stopPropagation and event.preventDefault? - Stack Overflow

Code:

!function() {
        function c(b) {
            var f = a(b.target);
            f.is("a") && b.stopPropagation(),
            f.is(".nav-jump") && b.preventDefault(),
            d.toggleClass(h),
            d.hasClass(h) ? e.on("click", c) : e.off("click", c)
        }
        var d = a("html")
          , e = a("body")
          , f = "off-canvas"
          , g = f + "--enabled"
          , h = f + "--visible";
        b.watchResize(function() {
            var e = d.hasClass(g)
              , f = a.inArray(b.NC.activeMQ, ["tiny", "small", "medium"]) > -1;
            f && !e ? d.addClass(g).on("click", ".nav-jump", c) : !f && e && d.removeClass(g).off("click", ".nav-jump", c)
        })
    }(),


GeneralMops 11.04.2017 17:28

Aha! Vielen Dank für den Tipp. Du hast völlig recht. Wenn man Javascript deaktiviert, dann funktioniert das Menü wie erwartet - quasi als Fallback - einschließlich Anzeige des Ankerlinks in der URL.

Ich habe mal versucht mir den JS-Code anzuschauen, muss aber gestehen, nur wenig davon zu verstehen. :/ Mich irritieren die vielen einzelnen Buchstaben, wie b, f, d usw. ein wenig. Ich hege den Verdacht, dass eine solche Funktion für meinen Bedarf wesentlich übersichtlicher ausfallen könnte. Immerhin möchte ich diesen "Canvas-Verschieben-Effekt" gar nicht haben.

Mir würde es schon genügen wenn einerseits der Ankerlink entfernt wird (ich vermute mal das wird hiermit gemacht (f.is(".nav-jump") && b.preventDefault(),) und dann müsste eine Klasse - je nach Klickstatus hinzugefügt bzw. entfernt werden. Nur diese beiden Dinge. Auch müsste mein Menü nicht so kompliziert aufgebaut sein, mit mehreren Größen (tiny, small, medium).

Daher wäre ich mir jetzt nicht so ganz sicher was ich alles rauswerfen könnte... kannst du vielleicht helfen? ;)

Cheers,
Mops

hemfrie 11.04.2017 21:42

Hier mal ein quick and dirty Beispiel: https://jsfiddle.net/2gvntgbL/

Das Javascript ist https://jquery.com/, da es recht gut dokumentiert ist und gerade für Beginner recht einfach zu nutzen ist.

Im Grunde passiert hier etwas ähnliches wie bei dem zweiten Beispiel.
Bei Klick auf den Menü-Button bekommt das Wrapper-Element eine Klasse "menu_active" zugewiesen.

Klickt man nochmal auf den Button wird die Klasse wieder entfernt.
Genauso, wenn ein Menüpunkt geklickt wird. Da sollte sich das Menü ja ebenfalls wieder schließen.

Jetzt brauchst Du nur noch für die beiden Zustände Dein CSS anpassen.

Den Anker brauchst Du für diese einfache Lösung auch nicht mehr.

Hoffe es hilft Dir etwas weiter.

cloned 11.04.2017 21:43

Kurz etwas zur Aufklärung der Buchstaben: Dem Computer ist es herzlich egal, ob eine Variable nun "HansPeter", "anzahl", oder "a" heißt. Hier wurde der code automatisch minifiziert, wobei den Variablen fortlaufende Buchstaben vergeben wurden.

GeneralMops 12.04.2017 08:39

Zitat:

Zitat von cloned (Beitrag 550736)
Kurz etwas zur Aufklärung der Buchstaben: Dem Computer ist es herzlich egal, ob eine Variable nun "HansPeter", "anzahl", oder "a" heißt. Hier wurde der code automatisch minifiziert, wobei den Variablen fortlaufende Buchstaben vergeben wurden.

Danke für die Info.

GeneralMops 12.04.2017 09:50

Zitat:

Zitat von hemfrie (Beitrag 550735)
Hier mal ein quick and dirty Beispiel: https://jsfiddle.net/2gvntgbL/

Das Javascript ist https://jquery.com/, da es recht gut dokumentiert ist und gerade für Beginner recht einfach zu nutzen ist.

Im Grunde passiert hier etwas ähnliches wie bei dem zweiten Beispiel.
Bei Klick auf den Menü-Button bekommt das Wrapper-Element eine Klasse "menu_active" zugewiesen.

Klickt man nochmal auf den Button wird die Klasse wieder entfernt.
Genauso, wenn ein Menüpunkt geklickt wird. Da sollte sich das Menü ja ebenfalls wieder schließen.

Jetzt brauchst Du nur noch für die beiden Zustände Dein CSS anpassen.

Den Anker brauchst Du für diese einfache Lösung auch nicht mehr.

Hoffe es hilft Dir etwas weiter.

Danke schon mal für deine Hilfe. Sieht gut aus. Das müsste man ja sogar mit der target-Version verbinden können, um damit eine Fallbackversion zu kreieren, die auch dann noch funktioniert wenn JS deaktiviert ist.

Was ich nur gerade nicht verstehe, wenn ich die drei Codes (HTML, JS, CSS) kopiere und lokal ausführen will, klappt das nicht. Beim Klicken tut sich nix. Hatte auch schon vermutet, dass JSFiddle ggf. jQuery integriert haben könnte, also hab ich das auch mal geladen. Hilft aber nix.

Was habe ich übersehen?

Cheers,
Mops

cloned 12.04.2017 10:02

Zitat:

Zitat von GeneralMops (Beitrag 550738)
Was habe ich übersehen?

Cheers,
Mops

Das kann dir hier nur die Fehlerkonsole der Browser Entwicklertools sagen. Wird das JS ausgeführt? Fliegt ein Fehler? Wird überhaupt alles korrekt geladen? Gibt so viele Faktoren.

hemfrie 12.04.2017 10:04

Richtig, bei jsfiddle ist das jquery schon eingebunden.

Was Dir vermutlich fehlt ist die $( document ).ready() Funktion, die dafür sorgt, dass das Javascript erst ausgeführt wird, wenn das komplette Dokument geladen wurde.

Code:

$(document).ready(function() {

  $('.navbutton').click(function() {
    $(this).text($(this).text() == 'Menü' ? 'Schliessen' : 'Menü');
    $('#wrapper').toggleClass('menu_active');
  });

  // bei Klick auf einen Menüpunkt muss die menu_active Klasse wieder entfernt werden.
  $('.menu a').click(function() {
    $('#wrapper').removeClass('menu_active');
    $('.navbutton').text('Menü');
  });

});

Ohne diese Funktion würde das Skript z. B. versuchen dem .navbutton ein click event zuzuweisen obwohl der .navbutton im Browser noch gar nicht geladen wurde. (Empfänger unbekannt :) )

GeneralMops 12.04.2017 10:05

Hi,

Zitat:

Zitat von cloned (Beitrag 550739)
Das kann dir hier nur die Fehlerkonsole der Browser Entwicklertools sagen. Wird das JS ausgeführt? Fliegt ein Fehler? Wird überhaupt alles korrekt geladen? Gibt so viele Faktoren.

okay, also ich habe die Firefox DevTools mal angeworfen. Der Debugger zeigt, dass alle zwei Scripte geladen werden (also hemfries und jQuery).

Cheers,
Mops


Alle Zeitangaben in WEZ +2. Es ist jetzt 11:54 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2024, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2023