Andrin.Spitzer
Erfahrenes Mitglied
Funktioniert auch ned. :/ aber ohne fehler in der konsole
würde das von mir nicht auch funktionieren?
würde das von mir nicht auch funktionieren?
Float box design + script fehler suche.
- Themenstarter Andrin.Spitzer
- Beginndatum
Andrin.Spitzer
Erfahrenes Mitglied
haste ne idee wiso es nicht funktioniert?
Sempervivum
Erfahrenes Mitglied
Ja, warum es nicht funktioniert, weiß ich: Ich hatte angenommen, dass dies
das fragliche Menü ist, das durch Klick auf den Hamburger aufgeht. Inzwischen habe ich jedoch bemerkt, dass das Menü doppelt vorhanden ist, einmal mit dieser Klasse und einmal ohne, und das ohne ist das fragliche. Hier zeigt sich, dass es eine Fehlerquelle ist, wenn Code mehrfach vorhanden ist.
.pop-up-menudas fragliche Menü ist, das durch Klick auf den Hamburger aufgeht. Inzwischen habe ich jedoch bemerkt, dass das Menü doppelt vorhanden ist, einmal mit dieser Klasse und einmal ohne, und das ohne ist das fragliche. Hier zeigt sich, dass es eine Fehlerquelle ist, wenn Code mehrfach vorhanden ist.
Andrin.Spitzer
Erfahrenes Mitglied
ich habe das 2 mal drine weil wen ich das menu ohne der id nicht drin habe habe ich nicht einmal mehr die standart nav
Andrin.Spitzer
Erfahrenes Mitglied
Habes mal entfernt und hochgeladen schau es dir mal an
Andrin.Spitzer
Erfahrenes Mitglied
Hast du vlt ne lösung und dein kontak form gefunden
Sempervivum
Erfahrenes Mitglied
Tut mir Leid, wegen diverser anderer Aktivitäten ist dieser Thread bei mir etwas in Vergessenheit geraten. Ich habe mir die Navigation jetzt angesehen und zum Laufen gebracht. Das div um das ul herum habe ich heraus genommen. Dann funktionierte das JS aus #110 auf Anhieb:
Wegen des Kontaktformulars muss ich mal sehen, wann ich etwas mehr Muße habe. Das will wohl überlegt sein.
Code:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8" />
<title>Menu</title>
<style>
ul.pop-up-menu {
margin: 0 auto;
padding: 2em;
width: 60em;
background-color: black;
color: white;
}
ul {
margin: 0px auto;
padding: 0;
list-style: none;
display: flex;
justify-content: center;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
font-size: 1.5em;
}
li {
position: relative;
padding: 15px 0;
display: flex;
}
label.hamburger {
position: relative;
background: black;
width: 50px;
height: 50px;
margin-left: 0;
border-radius: 4px;
transition: border-radius .5s;
z-index: 500;
display: none;
}
input.hamburger {
display: none;
}
.line {
position: absolute;
left: 10px;
height: 4px;
width: 30px;
background: whitesmoke;
border-radius: 2px solid black;
display: block;
transition: 0.5s;
transform-origin: center;
}
.line:nth-child(1) {
top: 12px;
}
.line:nth-child(2) {
top: 24px;
}
.line:nth-child(3) {
top: 36px;
}
input.hamburger:checked~label.hamburger .line:nth-child(1) {
transform: translateY(12px) rotate(-45deg);
}
input.hamburger:checked+label.hamburger .line:nth-child(2) {
opacity: 0;
}
input.hamburger:checked+label.hamburger .line:nth-child(3) {
transform: translateY(-12px) rotate(45deg);
}
input.hamburger:checked~div.pop-up-menu {
display: block;
}
label.hamburger {
display: none;
}
a {
color: white;
text-decoration: none;
letter-spacing: 0.40em;
display: inline-block;
padding: 20px 20px;
}
a:after {
bottom: 0;
content: "";
display: block;
height: 2px;
left: 50%;
position: absolute;
background: white;
transition: width 0.3s ease 0s, left 0.3s ease 0s;
width: 0;
border-radius: 10px;
}
a:hover:after {
width: 100%;
left: 0;
}
@media screen and (max-width: 800px) {
nav {
background-color: black;
}
label.hamburger {
display: inline-block;
}
nav ul.pop-up-menu {
display: none;
flex-direction: column;
align-items: center;
width: auto;
}
input.hamburger:checked~ul {
display: flex;
}
</style>
</head>
<body>
<nav>
<input type="checkbox" class="hamburger" id="hamburger">
<label for="hamburger" class="hamburger">
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
</label>
<ul class="pop-up-menu">
<li>
<a href="#home">Home</a>
</li>
<li>
<a href="#team">Teilnehmer</a>
</li>
<li>
<a href="#register">Anmelden</a>
</li>
<li>
<a href="#sponsoren">Partner</a>
</li>
</ul>
</nav>
<script>
document.querySelectorAll('ul.pop-up-menu a').forEach((item, idx) => {
item.addEventListener('click', (event) => {
document.querySelector('input.hamburger').checked = false;
});
});
</script>
</body>
</html>
Zuletzt bearbeitet:
Andrin.Spitzer
Erfahrenes Mitglied
Oki dnke viel mal ivh probier es mal
Sempervivum
Erfahrenes Mitglied
So, ich habe jetzt auch das Kontaktformular heraus gesucht. Versuche, es zu verstehen, so dass Du es an deine Umgebung anpassen kannst.
PHPMailer kannst Du von Github herunter laden:
https://github.com/PHPMailer/PHPMailerDer grüne Button rechts "Clone or Download" und dann "Download ZIP". Wie aus dem Code des Kontatkformulars hervor geht, brauchst Du nur die PHP-Dateien Exception.php und PHPMailer.php. Wenn Fragen sind, dann melde dich.
PHPMailer kannst Du von Github herunter laden:
https://github.com/PHPMailer/PHPMailerDer grüne Button rechts "Clone or Download" und dann "Download ZIP". Wie aus dem Code des Kontatkformulars hervor geht, brauchst Du nur die PHP-Dateien Exception.php und PHPMailer.php. Wenn Fragen sind, dann melde dich.
PHP:
<?php
// PHP-Mailer hinzufügen
use PHPMailer\PHPMailer\PHPMailer;
require_once 'phpmailer/src/Exception.php';
require_once 'phpmailer/src/PHPMailer.php';
const HTML_ERROR_START = '<div class="alert alert-danger" role="alert"><p class="m-0">';
const HTML_ERROR_END = '</p></div>';
const HTML_SUCCESS_START = '<div class="alert alert-success" role="alert"><p class="m-0">';
const HTML_SUCCESS_END = '</p></div>';
/**
* 1. Überprüfung, ob das Formular abgesendet wurde, denn wir erhalten die Daten erst, wenn das Formular abgesendet wurde.
*/
if (isset($_POST['submit'])) {
/**
* 2. Alle Eingangsdaten filtern
* - Dazu verwenden wir die Funktion htmlspecialchars()
* - die Funktion trim() wird genutzt, um alle Leerzeichen am Anfang und Ende des Strings (Zeichenkette) zu entfernen
*/
$name = htmlspecialchars(trim($_POST['name']));
$email = htmlspecialchars(trim($_POST['email']));
$subject = htmlspecialchars(trim($_POST['subject']));
$message = htmlspecialchars(trim($_POST['message']));
// Empfänger, nur zum Testen
$receiver = htmlspecialchars(trim($_POST['receiver']));
/**
* 3. Kriterienprüfung
* - Kriterien, wie z.B., wie viele Zeichen müssen mindestens eingegeben werden, ...
*
* Was brauchen wir dafür?
* 1. Array, welches die ganzen Fehler zugeordnet bekommt
*
* Beachte:
* Alle Daten, welche durch das Formular abgesendet werden, sind erstmal Strings, dies heißt, dass man diese zuerst in deren gewünschten Typ umwandeln muss
*/
$errors = [];
$success = false;
/**
* input textfeld | name="name"
* Typ: string
* Kriterien: mindestens 3 Zeichen lang
*/
if (empty($name)) {
$errors[] = HTML_ERROR_START . 'Bitte geben Sie Ihren Namen an!' . HTML_ERROR_END;
} else if (strlen($name) < 3) {
$errors[] = HTML_ERROR_START . 'Der Name muss mindestens 3 Zeichen lang sein!' . HTML_ERROR_END;
}
/**
* input emailfeld | name="email"
* Typ: string
* Kriterien: mindestens 7 Zeichen lang
*/
if (empty($email)) {
$errors[] = HTML_ERROR_START . 'Bitte geben Sie Ihre E-Mail-Adresse an!' . HTML_ERROR_END;
} else if (strlen($email) < 7) {
$errors[] = HTML_ERROR_START . 'Die E-Mail-Adresse muss mindestens 7 Zeichen lang sein!' . HTML_ERROR_END;
} else if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
$errors[] = HTML_ERROR_START . 'Bitte geben Sie eine gültige E-Mail-Adresse an!' . HTML_ERROR_END;
}
/**
* input textfeld | name="subject"
* Typ: string
* Kriterien: mindestens 3 Zeichen lang, maximal 50 Zeichen lang
*/
if (empty($subject)) {
$errors[] = HTML_ERROR_START . 'Bitte geben Sie einen Betreff an!' . HTML_ERROR_END;
} else if (strlen($subject) < 3) {
$errors[] = HTML_ERROR_START . 'Der Betreff muss mindestens 3 Zeichen lang sein!' . HTML_ERROR_END;
} else if (strlen($subject) > 50) {
$errors[] = HTML_ERROR_START . 'Der Betreff darf maximal 50 Zeichen lang sein!' . HTML_ERROR_END;
}
/**
* textarea | name="message"
* Typ: string
* Kriterien: mindestens 10 Zeichen lang (man kann erwarten, dass eine Nachricht länger als 10 Zeichen lang ist)
*/
if (empty($message)) {
$errors[] = HTML_ERROR_START . 'Bitte geben Sie eine Nachricht an!' . HTML_ERROR_END;
} else if (strlen($message) < 10) {
$errors[] = HTML_ERROR_START . 'Die Nachricht muss mindestens 10 Zeichen lang sein!' . HTML_ERROR_END;
}
// nur zum Testen
if (empty($receiver)) {
$errors[] = HTML_ERROR_START . 'Bitte geben Sie die E-Mail des Empfängers an!' . HTML_ERROR_END;
}
/**
* 4. Überprüfung, ob Fehler vorhanden sind, wenn nicht, dann Mailversand ausführen
* - für den Mailversand verwenden wir den PHPMailer
*/
if (count($errors) === 0) {
$mailer = new PHPMailer();
$mailer->CharSet = 'UTF-8'; // Charset setzen (für richtige Darstellung von Sonderzeichen/Umlauten)
$mailer->setFrom($email, $name); // Absenderemail und -name setzen
$mailer->addAddress($receiver); // Empfängeradresse
$mailer->isHTML(true);
$mailer->Subject = 'Neue Nachricht vom Kontaktformular'; // Betreff der Email
$mailer->Body = '<h3>Neue Nachricht von: ' . $name . '</h3>
<h4>E-Mail-Adresse: ' . $email . '</h4>
<h2>Betreff: ' . $subject . '</h2>
<p>' . nl2br($message) . '</p>'; // Inhalt der Email
/**
* Überprüfung, ob Mail abgesendet wurde, wenn nicht: Fehlermeldung ausgeben, wenn ja: Erfolgsmeldung ausgeben
*/
if (!$mailer->send()) {
$errors[] = HTML_ERROR_START . 'Es ist ein Fehler aufgetreten. Bitte versuchen Sie es in ein paar Minuten nochmal!' . HTML_ERROR_END;
} else {
$success = HTML_SUCCESS_START . 'Ihre Nachricht wurde erfolgreich abgesendet!' . HTML_SUCCESS_END;
}
}
}
?>Andrin.Spitzer
Erfahrenes Mitglied
Funktioniert und sieht super gut aus danke. Könntest du mir nen gefhlen machen und gucken ob du auf dem smartphone auch aus irgendwelchen gründen nach rechts scrollen bzw schieben kannst wen ja. Fon wo kommt das?
Ich schaue es mir morgen an danke für alles.
Ich schaue es mir morgen an danke für alles.
