Beiträge von JR Cologne

Jo, in manchen Fällen würde man am liebsten die HTML-Spezifikation in den Müll kloppen und manchmal einen oder mehrere Browser.

CSS ist wirklich ein Fall für sich. Irgendwas gibt es immer, worüber man sich aufregen könnte. Margin Collapsing ist da auch so ein Liebling von mir, wobei das wenigstens noch halbwegs zu handhaben ist, wenn man denn darüber Bescheid weiß und dann auch daran denkt. Gerade erst wieder passiert: Collapsing Margins kurz vergessen, ein margin gesetzt, was collapsed, und dann direkt wieder korrigiert. Bin mal gespannt, wann ich es schaffe, immer schon im Voraus daran zu denken.

Wenn man weiß, wie es geht!

Ja, kann ich eigentlich nur zustimmen. Flexbox ist schon genial, wobei es mich da teilweise ein wenig aufregt, dass es zwischen den verschiedenen Browsern da immer noch paar Unterschiede bzgl. der Interpretation gibt. Klar, das gibt es sonst auch, aber da ist mir das in letzter Zeit irgendwie besonders aufgefallen.

Das, was du ansprichst, wird denke ich mal mit der Facebook API möglich sein. Schau dich einfach mal hier um, vielleicht findest du was: https://developers.facebook.com

Ok, gut. Dann wünsche ich dir weiterhin noch viel Erfolg!

Ich meine sowas wie Parallax, Smooth Scrolling usw... Das geht leider nicht mit CSS.

Ich glaube, ich werde jetzt erstmal bei meinem eigenen JS und den zwei JS-Libraries bleiben. Aktuell läuft das nämlich ganz gut.

Vielleicht steige ich dann später mal in jQuery ein, um nicht mehr auf die Libraries angewiesen zu sein und komplett eigenen Code zu haben.

Dir auf jeden Fall nochmal vielen Dank. Hast mir sehr geholfen.

Na, davon bin ich aber noch weit entfernt.

Wie gesagt, würde es mir nur darum gehen, ein paar kleine Effekte umzusetzen, würde ich vermutlich sofort zu jQuery greifen. Da ich aber auch JS lernen möchte und man durch das Lernen von jQuery nicht unbedingt automatisch auch JS lernt, nutze ich halt erstmal JS.

Sorgst jetzt gerade dafür, dass ich doch wieder ins Grübeln komme, ob ich nicht doch für meine Website auf jQuery umsteigen sollte...

Welche Version von jQuery würde man denn am besten nutzen und wo kann man vernünftig den Browser-Support einsehen? Auf der offiziellen Seite steht ja nur, welche offiziell unterstützt werden. Ob es da letztendlich funktionieren wird, weiß man dadurch nicht...

Ja, ein wenig frage ich mich auch, warum ich mir das eigentlich antue. Aber da ich ja das Ziel habe, JS als solches zu lernen, wäre es meiner Meinung nicht der richtige Weg, direkt sowas wie jQuery einzusetzen, das einem alles erheblich einfacher macht und eigentlich nicht mehr so extrem viel mit der Sprache zu tun hat.

Wenn ich PHP lerne, fange ich ja auch nicht gleich mit Laravel an, sondern baue meine eigene Sachen und erst wenn ich etwas fortgeschrittener bin, schaue ich mir dann z.B. Laravel an und vereinfache so meinen Entwicklungsprozess.

Ansonsten könnte ich jetzt natürlich noch Performance und so ein Kram ansprechen, aber da möchte ich mich jetzt nicht hinbegeben, da ich ja noch ein Anfänger bin, was JS angeht, und das nicht so wirklich beurteilen kann.

Man könnte eigentlich mal einen Thread eröffnen, wo man JS- und jQuery-Lösungen gegenüberstellt und die Performance testet usw. Wäre sicher mal ganz interessant.

Muss allerdings auch zugeben, dass ich jetzt z.B. für meine Website auf eins, zwei JS-Scripts bzw. -Libraries setze. Von daher bin ich da auch nicht ganz konsequent, aber ich habe schlicht keine Lust mich Stunden mit JS zu beschäftigen, um einen kleinen Effekt auf die Beine zu stellen. Dann greife ich zumindest vorübergehend, bis ich in JS besser bin, doch erstmal auf sowas zurück.

Macht im Großen und Ganzen schon mal einen sehr guten Eindruck.

Sind halt so ein paar Kleinigkeiten, die stören, wie z.B. der Abstand zwischen deinem .contact Container und dem Footer. Des Weiteren ist es noch nicht wirklich responsive. Das sieht man besonders an der Navigation und auch die Schrift wird irgendwann abgeschnitten.

Nur so am Rande: Es würde mich interessieren, ob du das Meiste selbst gemacht hast. Es sieht mir nämlich aufgrund der Klassen im HTML/CSS und den Variablennamen im JS so aus, als hättest du doch einiges aus Tutorials o.Ä. von Unleashed Design abgekupfert. In dem Fall würde ich das dann lieber kennzeichnen.

Funktioniert perfekt. Danke dir!

Ich finde es leicht fragwürdig, dass man kaum um jQuery drum herum kommt. Ist echt mühselig, auf reines JS zu setzen.

So, habe es jetzt dahingehend korrigiert, dass ich nun eine Funktion zuweise und für die bessere Browserkompatibilität eine for-Schleife statt forEach nutze:

var skills = document.querySelectorAll('.skill');
var skill;

for (var i = 0; i < skills.length; i++) {
  skill = skills[i];

  document.addEventListener('scroll', function () {
    animate(skill, skill.clientHeight);
  } );
}

function inView(element, elementHeight) {
  var windowHeight = window.innerHeight;
  var scrollY = window.scrollY || window.pageYOffset;
  var scrollPosition = scrollY + windowHeight;
  var elementPosition = element.getBoundingClientRect().top + scrollY + elementHeight;

  if (scrollPosition > elementPosition) {
    return true;
  }

  return false;
}

function animate(element, elementHeight) {
  if (inView(element, elementHeight)) {
      element.classList.add('animate');
  }
}

Leider erzielt das immer noch nicht das gewünschte Ergebnis. Jetzt wird lediglich dem letzten Element die Klasse zugewiesen. Selbst wenn beim Aufruf der Seite schon alle im Viewport sind, bekommt nur das letzte Element die Klasse.

Ah, verstehe. Bisschen merkwürdig, dass man da keine Fehlermeldung bekommt...

Na ja, auf jeden Fall auch noch mal danke für den Hinweis. Habe das dezent übersehen.

Werde dann gleich mal schauen, ob ich es dann zum Laufen bekomme.

Hallo zusammen,

brauche mal wieder bisschen Hilfe mit JS.

Ich habe mehrere Elemente mit der Klasse .skill und würde diese gerne animieren, wenn sie im Viewport sind bzw. wenn man dorthin scrollt, sodass sie im Viewport sind.

Dafür habe ich bisher folgenden Code geschrieben:

var elements = document.querySelectorAll('.skill');

elements.forEach( function (element) {
  document.addEventListener('scroll', animate(element, element.clientHeight))
} );

function inView(element, elementHeight) {
  var windowHeight = window.innerHeight;
  var scrollY = window.scrollY || window.pageYOffset;

  var scrollPosition = scrollY + windowHeight;
  var elementPosition = element.getBoundingClientRect().top + scrollY + elementHeight;

  if (scrollPosition > elementPosition) {
    return true;
  }

  return false;
}

function animate(element, elementHeight) {
  if (inView(element, elementHeight)) {
      element.classList.add('animate');
  }
}

Das Problem dabei ist, dass nur am Anfang einmal abgefragt wird, ob die Elemente im Viewport sind und nur dann die Klasse hinzugefügt wird.

Wenn ich allerdings scrolle, sodass diese irgendwann in den Viewport gelangen, passiert nichts.

Verstehe nicht ganz, warum das so ist.

Wäre super, wenn jemand mir helfen könnte bzw. das erklären würde.

Schon mal vielen Dank!

Gruß

JR Cologne

PS: Ich würde gerne auf jQuery-Lösungen verzichten.

Du kannst es entweder in das root-Verzeichnis deines Servers, also htdocs, packen. Dies sorgt dann dafür, dass sozusagen alle Dateien, die sich auf deinem Server befinden, keine PHP-Fehler mehr anzeigen, außer es ist in den Dateien selber noch mal anders eingestellt.

Alternativ würde aber auch der Ordner ausreichen, wo alle Dateien deines Wikis drin sind. Das ist dann wahrscheinlich der Ordner wiki, denke ich mal. Dann hättest du nur die Fehlermeldungen innerhalb dieses Ordners deaktiviert und könntest z.B. statt dem Wiki noch weitere Projekte auf deinem Server haben, wo die Fehler dann angezeigt werden.

Außerdem brauchst du nur eine .htaccess-Datei in deinem Ordner der Wahl und auch die Unterordner brauchen dann keine eigene .htaccess mehr. Das wird automatisch auf die Unterordner übernommen.

Des Weiteren kann es sein, dass in deinem Wiki-Ordner vielleicht bereits eine .htaccess-Datei existiert. Den Inhalt davon könntest du dann mal hier posten.

Bei diesen "Links" handelt es sich um PHP-Fehlermeldungen.

Um genau zu sein ist es der Pfad zu der Datei, in der der Fehler auftritt.

Und der Fehler "mcrypt_create_iv() is deprecated" weist darauf hin, dass du bzw. die Software, die du nutzt, eine veraltete Funktion mit dem Namen mcrypt_create_iv() verwendest/verwendet. Der PHP-Dokumentation über die Funktion kannst du mehr Infos dazu entnehmen.

So steht dort z.B., dass sie erst seit PHP 7.1 als veraltet eingestuft wurde, was mich schon mal darauf schließen lässt, dass du PHP 7.1 auf deinem Server laufen hast.

Ebenfalls wird dort auf eine Alternative zu der veralteten Funktion verwiesen.

Soweit, so gut. Wie bekommst du die Fehlermeldung jetzt weg, schließlich handelt es sich vermutlich um Code, auf den du keinen Zugriff hast, richtig? Eine Änderung des PHP-Codes oder ähnliches kommt also nicht infrage.

Was du stattdessen machen kannst, ist die Fehlermeldungen zu unterdrücken. Dafür gibt es ein paar verschiedene Möglichkeiten, jedoch werde ich jetzt mal nur eine erklären und dann kannst du zu Not nochmal bei mir nachfragen und vielleicht noch ein paar mehr Infos über deine Rahmenbedingungen geben, damit ich dir situationsabhängig helfen kann.

Also, du bist offensichtlich auf deinem Rechner mit Xampp unterwegs. Daher bietet es sich an, die Ausgabe von den PHP-Fehlermeldungen mit einer sogenannten .htaccess-Datei zu verhindern bzw. deine diesbezügliche Server-Konfiguration damit zu überschreiben:

1. Öffne einen Texteditor (es reicht zu Not auch der normale Windows-Editor, einfach nach "Editor" suchen)

2. Schreibe in die Datei exakt Folgendes:

php_flag display_errors off

Dieser Befehl sorgt, wie man sich schon denken kann, dass Fehler nicht mehr ausgegeben werden.

3. Speichere die Datei als ".htaccess" in dem Ordner, wo dein Wiki drin ist, ab. Wichtig: Wähle als Dateityp "Alle Dateien" aus.

Anschließend sollte die Fehlermeldung verschwinden.

Viel Glück!

Ach so, sorry. Nicht weitergedacht. :last-child bezieht sich immer auf das Elternelement. Das Elternelement ist in dem Fall li und dort drin ist ja immer nur ein a. Deswegen ist also jedes a das letzte Kindelement.

Eine Lösung könnte so aussehen:

.main-navigation li:last-child a {
    margin-right: 0;
}

Nur das a anzusprechen, sollte funktionieren. Damit meine ich nämlich nicht, dass du nur a:last-child oder so als Selektor nehmen sollst, sondern so:

.main-navigation li a {
  color: red;
}

.main-navigation li:last-child a {
  color: green;
}

Und selbst so funktioniert es ebenfalls:

.main-navigation li a,
.main-navigation li a:focus,
.main-navigation li a:active {
  color: red;
}

.main-navigation li:last-child a {
  color: green;
}

Solange die Zustände :focus, :active, :hover und Co nicht anders gestaltet werden sollen, reicht es nur das a alleine anzusprechen und diesem die Styles zu zuweisen.

Aber du könntest das :last-child auch einfach hinter :focus oder :active hängen. Das ist möglich.

Sehr gut! Aber warum willst du die E-Mail auch noch verschlüsseln?

Das ist glaube ich etwas übertrieben und macht nicht wirklich viel Sinn.

Ok, dann stell das erstmal auf GET um...

Was mir noch aufgefallen ist:

Du nutzt zum Vergleichen des Hashes einfach die üblichen Vergleichsoperatoren. Versuch es stattdessen vielleicht mal mit hash_equals(). Näheres dazu findest du auf PHP.net.

Ich kann nicht so richtig nachvollziehen, wo dein Problem liegt.

Würdest du nochmals ausführlich mit Screenshots und Code das Problem beschreiben? Tut mir leid, aber ich wüsste aktuell nicht, was da schief läuft.

WTF?!

Mehr kann Spam/Werbung ja nicht daneben liegen!