zurück zur Startseite
  


Zurück XHTMLforum > Webentwicklung (außer XHTML und CSS) > Javascript & Ajax
Seite neu laden Ankerlink-Parameter in Adresszeile ausblenden?

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 11.04.2017, 15:46
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 11.04.2017
Beiträge: 12
GeneralMops befindet sich auf einem aufstrebenden Ast
Standard 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

Geändert von GeneralMops (11.04.2017 um 15:49 Uhr)
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 11.04.2017, 16:55
Benutzerbild von hemfrie
Administrator
XHTMLforum-Kenner
 
Registriert seit: 18.12.2003
Ort: Düsseldorf
Beiträge: 2.777
hemfrie ist jedem bekannthemfrie ist jedem bekannthemfrie ist jedem bekannthemfrie ist jedem bekannthemfrie ist jedem bekannthemfrie ist jedem bekannt
Standard

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)
        })
    }(),
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 11.04.2017, 17:28
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 11.04.2017
Beiträge: 12
GeneralMops befindet sich auf einem aufstrebenden Ast
Standard

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
Mit Zitat antworten
  #4 (permalink)  
Alt 11.04.2017, 21:42
Benutzerbild von hemfrie
Administrator
XHTMLforum-Kenner
 
Registriert seit: 18.12.2003
Ort: Düsseldorf
Beiträge: 2.777
hemfrie ist jedem bekannthemfrie ist jedem bekannthemfrie ist jedem bekannthemfrie ist jedem bekannthemfrie ist jedem bekannthemfrie ist jedem bekannt
Standard

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.
Mit Zitat antworten
  #5 (permalink)  
Alt 11.04.2017, 21:43
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.247
cloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblick
Standard

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.
Mit Zitat antworten
  #6 (permalink)  
Alt 12.04.2017, 08:39
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 11.04.2017
Beiträge: 12
GeneralMops befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von cloned Beitrag anzeigen
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.
Mit Zitat antworten
  #7 (permalink)  
Alt 12.04.2017, 09:50
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 11.04.2017
Beiträge: 12
GeneralMops befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von hemfrie Beitrag anzeigen
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
Mit Zitat antworten
  #8 (permalink)  
Alt 12.04.2017, 10:02
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.247
cloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblick
Standard

Zitat:
Zitat von GeneralMops Beitrag anzeigen
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.
Mit Zitat antworten
  #9 (permalink)  
Alt 12.04.2017, 10:04
Benutzerbild von hemfrie
Administrator
XHTMLforum-Kenner
 
Registriert seit: 18.12.2003
Ort: Düsseldorf
Beiträge: 2.777
hemfrie ist jedem bekannthemfrie ist jedem bekannthemfrie ist jedem bekannthemfrie ist jedem bekannthemfrie ist jedem bekannthemfrie ist jedem bekannt
Standard

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 )
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 12.04.2017, 10:05
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 11.04.2017
Beiträge: 12
GeneralMops befindet sich auf einem aufstrebenden Ast
Standard

Hi,

Zitat:
Zitat von cloned Beitrag anzeigen
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
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
mit jquery div ein- und ausblenden Marco_997 Javascript & Ajax 3 12.11.2011 14:27
elemente in der sidebar ausblenden broski CSS 3 23.06.2011 00:01
Probleme mit Parameter... webseite_freaky Serveradministration und serverseitige Scripte 2 20.02.2009 16:00
[JS] Undefinierten Parameter aufrufen markuskoehler Javascript & Ajax 11 27.11.2008 09:45
direkte Weiterleitung auf Domain bei Namenseingabe in Adresszeile crazy_mazy Serveradministration und serverseitige Scripte 6 24.07.2008 22:52


Alle Zeitangaben in WEZ +2. Es ist jetzt 17:26 Uhr.