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

Hallo hemfrie,

Zitat:
Zitat von hemfrie Beitrag anzeigen
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 )
okay, das war es. Damit lässt sich das Script nutzen. Danke schon einmal.
Jetzt stellte ich allerdings eine andere komische Sache fest. Wenn ich das Script mittels Notepad schreibe, kann ich es speichern und via Filezilla auf den FTP-Server hochladen und dort ausführen.
Wenn ich das Script aber nachträglich bearbeiten will, meckert Windows mit folgender Meldung:

Windows Script Host
Skript: ***hier steht ein temporärer Pfad***
Zeile: 1
Zeichen: 1
Fehler: 'document' ist undefiniert
Code: 800A1391
Quelle: Laufzeitfehler in Microsoft JScript

Ich wollte das Script ja gar nicht unter Windows ausführen sondern nur öffnen (zum Bearbeiten)
Testweise habe ich es auch noch einmal in Dreamweaver CC geschrieben, dort erhalten ich ebenfalls mehrere Fehlermeldungen zum JS-Code:

Zeil 1, Spalte 1: Fehlerinfo $-Zeichen
Zeile 3, Spalte 3: Missing "use strict" statement
Zeile 4, Spalte 35: Expected '===' and instead saw '=='

Uff...


Cheers,
Mops

Geändert von GeneralMops (12.04.2017 um 10:20 Uhr)
Mit Zitat antworten
Sponsored Links
  #12 (permalink)  
Alt 12.04.2017, 10:45
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

Man sollte Fehlermeldungen nicht nur lesen, sondern auch interpretieren können.

Auf deinem Windows (bzw. im FTP Programm) wurde für .js Dateien eine Standardmäßige Zuordnung vorgenommen (also so, dass zB .docx Dateien immer mit Word geöffnet werden, etc.) Du musst in deinem FTP-Programm einstellen, dass er .js Dateien mit einem Editor öffnen soll.

Bezüglich der Fehlermeldungen:
use strict: https://developer.mozilla.org/de/doc...ce/Strict_mode
https://wiki.selfhtml.org/wiki/JavaS...ls/strict_mode

Fehlerinfo $-Zeichen kommt wohl daher, dass Dreamweaver nicht weiß, dass jquery eingebunden ist. Dort wird das $-Zeichen verwendet.
=== statt ==
Which equals operator (== vs ===) should be used in JavaScript comparisons? - Stack Overflow
Mit Zitat antworten
Sponsored Links
  #13 (permalink)  
Alt 12.04.2017, 10:56
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

Der Dreamweaver und einige andere Editoren haben Validatoren wie z. B. jslint oder jshint eingebaut, die dann automatisch prüfen, ob der Code valide ist.

In Deinem Fall möchte der Dreamweaver, dass Du strict Javascript schreibst.
https://www.w3schools.com/js/js_strict.asp

Das er das $ Zeichen bemängelt liegt wahrscheinlich daran, dass der Dreamweaver das Dokument validiert, ohne aber das dafür benötigte jQuery zu laden. Diese "Meldungen" kannst Du im Grunde ignorieren, da die keinen Einfluss auf die Funktion des Skripts haben.

[edit]
Da war cloned schneller
[/edit]
Mit Zitat antworten
  #14 (permalink)  
Alt 12.04.2017, 11:24
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
Man sollte Fehlermeldungen nicht nur lesen, sondern auch interpretieren können.

Auf deinem Windows (bzw. im FTP Programm) wurde für .js Dateien eine Standardmäßige Zuordnung vorgenommen (also so, dass zB .docx Dateien immer mit Word geöffnet werden, etc.) Du musst in deinem FTP-Programm einstellen, dass er .js Dateien mit einem Editor öffnen soll.
Oops, sorry. Da hatte ich wirklich etwas übersehen. Ich habe alle möglichen Dateitypen (in Filezilla) meinem Editor zugewiesen. Ausgerechnet .js hatte ich vergessen.

Zitat:
Zitat von cloned Beitrag anzeigen
Bezüglich der Fehlermeldungen:
use strict: https://developer.mozilla.org/de/doc...ce/Strict_mode
https://wiki.selfhtml.org/wiki/JavaS...ls/strict_mode

Fehlerinfo $-Zeichen kommt wohl daher, dass Dreamweaver nicht weiß, dass jquery eingebunden ist. Dort wird das $-Zeichen verwendet.
=== statt ==
Which equals operator (== vs ===) should be used in JavaScript comparisons? - Stack Overflow
Danke für die Lesetipps. Ein bisschen was davon kapiere ich sogar, glaube ich.

Dennoch mag ich noch einmal nachfragen, ob ich das Script richtig interpretiere. Der erste Teil des Scripts prüft ob die Klasse navbutton ein Klickevent auslöst und verpasst dem Objekt (in dem Fall button) den Text "Menü" oder "Schliessen". Wenn das Klickevent in .navbutton ausgelöst wurde, wird dem Element mit der ID #wrapper mittels toggleClass eine neue CSS-Klasse hinzugefügt, nämlich menu_active.

Der zweite Teil des Scripts soll, laut Kommentar, die CSS-Klasse wieder entfernen, damit das Menü wieder ausgeblendet wird. Zuerst wird also mittels 'menu a' jedes a-Element in der Liste ul (menu) gecheckt ob wieder ein Klickevent ausgelöst wurde. Falls ja, wird das Element mit der ID #wrapper mittels removeClass wieder um die CSS-Klasse erleichtert, die im ersten Teil des Scripts eingefügt wurde und schließlich wird dem Element mit der Klasse .navbutton wieder der Text 'Menü' verpasst.

Habe ich das soweit verstanden?
Bleiben folgende Fragen:

1. Dass das Menü wieder geschlossen wird, wenn ein a-Element angeklickt wird, kann ich nachvollziehen (siehe meine Beschreibung). Aber wie funktioniert das normale "wieder Schließen", samt Rück-Umbenennung von Schliessen in Menü wenn man einfach nur so auf den Menütitel "Schliessen" klickt? Erfolgt dies durch die Schachtelung von $(this).text($(this).text() usw?

2. Damit ich die eingangs erwähnte ":target"-Variante als Fallbacklösung einbauen kann, habe ich mich an folgendem Codefragment versucht:

Code:
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)
        }
Das wollte ich gern anpassen und mit unserem Code verbinden, um damit eine Fallbackvariante zu ermöglichen. Hierfür habe ich zunächst einmal den HTML-Code wie folgt geändert:

HTML-Code:
<div id="wrapper">
  <a class="navbutton" id="nav" href="#oben">Menü</a>
  <ul class="menu">
    <li><a href="#">link 1</a></li>
    <li><a href="#">link 2</a></li>
    <li><a href="#">link 3</a></li>
    <li><a href="#">link 4</a></li>
  </ul>
</div>
Also aus dem Button ein a-Element gemacht und noch eine ID hinzugefügt. Den o.g. Javascript-Code habe ich zunächst so angepasst:

Code:
function fallback(check) {
   var f = a(check.target);
   f.is("a") && check.stopPropagation(),
   f.is(".navbutton") && check.preventDefault()
}
Damit funktioniert zwar das Auf- und Zuklappen noch immer - aber dafür definitiv mit Anzeige des Anker-Parameters in der URL. Hier komme ich gerade nicht weiter...

Cheers,
Mops
Mit Zitat antworten
  #15 (permalink)  
Alt 12.04.2017, 11:46
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
Hi,


Dennoch mag ich noch einmal nachfragen, ob ich das Script richtig interpretiere. Der erste Teil des Scripts prüft ob die Klasse navbutton ein Klickevent auslöst
Nein, diesen Teil hast du nicht korrekt interpretiert.
Ich habe das Gefühl, dass dir die Grundlegende Funktionsweise von JS noch fehlt und es wohl hilfreich ist, dich in dem Bereich Schlau zu machen:
Eine Klasse kann niemals ein Klickevent auslösen. Ein Klickevent kann immer nur von einem Gerät mit Klickfunktion (wie einer Maus) kommen.
Ich denke, du hast hier den "verkehrten" Denkweg was JS angeht.
Javascript-Events funktionieren folgendermaßen:
Du, als Programmierer, legst fest, bindest ein "click" (oder "scroll", etc.) Event "irgendwohin". zB sagst du, immer wenn "Element X" geklickt wurde, soll folgendes passieren. Du brauchst dich aber nicht darum zu kümmern, dass das Event auch aufgerufen wird, das macht der Browser selbstständig. Jeder Browser unterstützt, grob gesagt, seine eigenen Events. Hast du einen mobilen Browser, so haben diese kein klick-Event.
Bzw. sie haben schon eines (man könnte ja eine Maus ans Handy anschließen), aber sie mappen das "klick" auf "touch", also bei klick und touch passiert dann das selbe.
Um diese Details brauchst du dich aber wie gesagt nicht zu kümmern, wichtig ist nur: Klassen lösen keine Events aus, das macht immer der User. Der Browser führt dann die gewünschte Aktion aus. Deshalb ist es auch wichtig, nicht zu viele Events zu definieren, der Browser muss für jedes Event aufpassen und Ressourcen dafür bereit stellen.

Sorry auch für die vielen " ..", aber ich hoffe, damit ist klarer was ich meine


Zitat:
Zitat von GeneralMops Beitrag anzeigen
und verpasst dem Objekt (in dem Fall button) den Text "Menü" oder "Schliessen". Wenn das Klickevent in .navbutton ausgelöst wurde, wird dem Element mit der ID #wrapper mittels toggleClass eine neue CSS-Klasse hinzugefügt, nämlich menu_active.
jQuery hat eine wirklich gute Dokumentation, da kannst du, wenn du dir nicht sicher bist, was eine Funktion macht, nachsehen:
ToggleClass fügt nämlich keine Klasse hinzu (das wäre dann addClass() )




Zitat:
Zitat von GeneralMops Beitrag anzeigen
Der zweite Teil des Scripts soll, laut Kommentar, die CSS-Klasse wieder entfernen, damit das Menü wieder ausgeblendet wird. Zuerst wird also mittels 'menu a' jedes a-Element in der Liste ul (menu) gecheckt
Auch hier wieder der Verständnisfehler zu events. Es wird nicht jedes Event gecheckt ob ein Klickevent ausgelöst wurde, es wird lediglich ein Event an diese Elemente gebunden.
Hier gibt es auch die alternative Schreibweise, bzw. alternative Funktion von jQuery .on, die das ganze eventuell verständlicher macht:
Code:
$(".mein-element").on("click", function() { ... } );
das macht exakt das Selbe wie die .click() function, ist aber meiner Meinung nach verständlicher. Es sagt, immer wenn auf ( = on) ein Element geklickt wird, mach folgendes...

Zitat:
Zitat von GeneralMops Beitrag anzeigen
ob wieder ein Klickevent ausgelöst wurde. Falls ja, wird das Element mit der ID #wrapper mittels removeClass wieder um die CSS-Klasse erleichtert, die im ersten Teil des Scripts eingefügt wurde und schließlich wird dem Element mit der Klasse .navbutton wieder der Text 'Menü' verpasst.

Zitat:
Zitat von GeneralMops Beitrag anzeigen
1. Dass das Menü wieder geschlossen wird, wenn ein a-Element angeklickt wird, kann ich nachvollziehen (siehe meine Beschreibung). Aber wie funktioniert das normale "wieder Schließen", samt Rück-Umbenennung von Schliessen in Menü wenn man einfach nur so auf den Menütitel "Schliessen" klickt? Erfolgt dies durch die Schachtelung von $(this).text($(this).text() usw?
Das passiert mittels der toggleClass (siehe oben) und einer verkürzten Schreibweise von if mit Javascript
https://www.sitepoint.com/shorthand-...pt-techniques/ (Seite hat leider ein nerviges newsletter Popup, das wegklicken)
Hier nochmal die Doku zu .text() von jquery.
Das schöne bei jquery ist auch, dass man dinge aneinanderreihen kann und sie der Reihe nach durchgegangen werden.

$("header").parent().next(); wählt zB zuerst den header aus, geht dann eins nach oben zum parent und dann zum nächsten Element.

Edit:
Teil 2 habe ich mal ausgelassen, das muss ich mir erst genauer ansehen.
Was mir auffällt: Du verwendest die Variable "a" ohne sie zu definieren... Verwendest du denn die Fehlerkonsole der Webdeveloper Tools, da solltest du so etwas auf einen Blick sehen?

Geändert von cloned (12.04.2017 um 11:49 Uhr)
Mit Zitat antworten
  #16 (permalink)  
Alt 12.04.2017, 12:03
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
Nein, diesen Teil hast du nicht korrekt interpretiert.
Ich habe das Gefühl, dass dir die Grundlegende Funktionsweise von JS noch fehlt
Ach, wo denkst du hin?
Nee, im Ernst, ich habe das letzte Mal ernsthaft programmiert als es noch sowas wie Turbo Pascal gab. Also zu Zeiten, zu denen C++ noch als magisches Mysterium betrachtet wurde, vom dem man sagte "Ach was, viel zu viel Overhead und so..." Inzwischen haben sich die Zeiten geändert und ich bin eigentlich seit Jahren nur mehr Designer. Das einzige, was ich mit "Coden" zu tun habe, ist HTML und CSS. Bisher kam ich damit auch gut zurecht, weil sich viele Funktionen (ich verwende Joomla) mittels Plugin nachrüsten lassen. So kommt man gut drumrum. Naja... jedenfalls bis es Probleme gibt. Aber das erklärt dir vielleicht warum ich so dussliges Zeug quatsche. Mir fehlen echt die Grundlagen. *schäm* Ich hatte gehofft, eine schnelle Lösung zu finden.

Eins ist aber fakt, die Kurzschreibweise von JS, die du verlinkt hast, ist echt krass. Das birgt sogar eine gewisse Logik, wenn man das einmal weiß.

Rückblickend, war meine Idee den besagten Anti-Target-Code meines letzten Beitrags, einzufügen grober Unfug. Das muss ganz anders gehen. Da muss ich wohl noch bisserl probieren... oder hast du gleich 'ne einfache Lösung dafür parat?

Cheers,
Mops
Mit Zitat antworten
  #17 (permalink)  
Alt 12.04.2017, 12:29
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

Zitat:
Zitat von GeneralMops Beitrag anzeigen
Rückblickend, war meine Idee den besagten Anti-Target-Code meines letzten Beitrags, einzufügen grober Unfug. Das muss ganz anders gehen. Da muss ich wohl noch bisserl probieren... oder hast du gleich 'ne einfache Lösung dafür parat?
Das click-event existiert ja bereits. Das kannst Du nutzen und brauchst keine extra Funktion.

Das e steht für event

$('.navbutton').click(function(e) {
$(this).text($(this).text() === 'Menü' ? 'Schliessen' : 'Menü');
$('#wrapper').toggleClass('menu_active');
e.preventDefault();
});
Mit Zitat antworten
  #18 (permalink)  
Alt 12.04.2017, 12: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 hemfrie Beitrag anzeigen
Das click-event existiert ja bereits. Das kannst Du nutzen und brauchst keine extra Funktion.

Das e steht für event

$('.navbutton').click(function(e) {
$(this).text($(this).text() === 'Menü' ? 'Schliessen' : 'Menü');
$('#wrapper').toggleClass('menu_active');
e.preventDefault();
});
Ui... das ging ja fast ein bisschen zu einfach. Nur so wenig Code? Da fragt man sich unweigerlich warum manch anderer so irre viel schreibt...

Habt vielen Dank, hemfrie und cloned. Ihr seid sehr hilfsbereit und hilfreich!
Deshalb spendiere ich mal 'nen


Cheers,
Mops
Mit Zitat antworten
  #19 (permalink)  
Alt 12.04.2017, 12:50
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

Danke für den

Das ist reine Faulheit, warum Code möglichst kurz gehalten wird

Man darf natürlich auch nicht jedes jQuery Skript mit anderen Skripten vergleichen.

Schließlich steckt schon eine Menge Code in jQuery selber, der es dann erlaubt, gewisse Dinge schön einfach und kurz zu schreiben.
Mit Zitat antworten
Sponsored Links
  #20 (permalink)  
Alt 12.04.2017, 13:00
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
Danke für den

Das ist reine Faulheit, warum Code möglichst kurz gehalten wird

Man darf natürlich auch nicht jedes jQuery Skript mit anderen Skripten vergleichen.

Schließlich steckt schon eine Menge Code in jQuery selber, der es dann erlaubt, gewisse Dinge schön einfach und kurz zu schreiben.
So... habe das Script soeben in meinen Code integriert, CSS korrekt referenziert, HTML angepasst und: passt super!

Also danke nochmal. Ich komme bestimmt mal wieder auf euch zurück.
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 04:08 Uhr.