Beiträge von Sempervivum

Sempervivum

Zitat

Ich habe das Gefühl, dass das JavaScript dauerhaft dieses Abfrage macht und nicht stoppt, sofern eine Auswahl getroffen wurde.

Genau das tut es: Du hast bei dem img einen Eventhandler für load registriert. Triggert dieser, weist Du dem Bild das src-Attribut zu und das Bild wird geladen. Ist es fertig geladen, triggert wieder der Eventhandler und weist das src-Attribut zu. Bild wird erneut geladen. Ist es fertig geladen, triggert ...

Wenn ich das richtig sehe, brauchst Du gar keinen Eventhandler sondern musst nur einmal das src-Attribut zuweisen. Dann wird das Bild geladen und alles ist gut.

Sempervivum

Auch kein Problem:

HTML

<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <title>Demo Flexlayout</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">

    <style>
        body {
            height: 100vh;
            margin: 0;
            display: flex;
            flex-direction: column;
            font-family: arial;
        }

        body>*:not(.scroll) {
            flex-shrink: 0;
        }

        .scroll {
            overflow-y: scroll;
            flex: 1;
        }

        header,
        footer {
            font-size: 1.5em;
            align-self: center;
        }

        main {
            text-align: justify;
            display: flex;
            flex-direction: column;
        }

        main>section {
            flex: 1;
        }

        /* Nav */

        nav input {
            display: none;
        }

        nav ul {
            list-style: none;
            display: flex;
            flex-direction: row;
        }

        nav #nav-icon-open,
        nav #nav-icon-close {
            display: none;
        }

        @media screen and (max-width: 600px) {
            header {
                align-self: flex-start;
            }

            nav {
                display: flex;
                align-items: flex-start;
            }

            nav ul {
                display: none;
            }

            nav input:checked~ul {
                display: flex;
                flex-direction: column;
            }

            nav #nav-icon-open {
                display: inline-block;
            }

            nav #nav-icon-close {
                display: none;
            }

            nav input:checked~label #nav-icon-open {
                display: none;
            }

            nav input:checked~label #nav-icon-close {
                display: inline-block;
            }

        }
    </style>
</head>

<body>
    <header>
        <nav>
            <input type="checkbox" id="cbnav">
            <label for="cbnav">
                <i id="nav-icon-open" class="fa fa-bars" aria-hidden="true"></i>
                <i id="nav-icon-close" class="fa fa-times" aria-hidden="true"></i>
            </label>
            <ul>
                <li>
                    <a href="index.html">Home</a>
                </li>
                <li>
                    <a href="page1.html">Page 1</a>
                </li>
                <li>
                    <a href="page1.html">Page 2</a>
                </li>
                <li>
                    <a href="page1.html">Page 3</a>
                </li>
            </ul>
        </nav>
    </header>
    <main class="scroll" id="content">
        <section>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
            tempor invidunt ut labore et dolore magna
            tempor 
            ... gekürzt
        </section>
        <footer>This is the footer</footer>
    </main>
</body>

</html>

Alles anzeigen

Bei wenig Content hängt der Footer am unteren Ende. Bei viel Content verschwindet er nach unten und wird erst beim Scrollen sichtbar.

Sempervivum

Diese Aufgabe tritt häufig auf, ebenso solche Probleme mit der althergebrachten Lösung mit position: fixed;. Statt dessen möchte ich diese Alternative vorstellen:

https://webentwicklung.ulrichbangert.de/flex-scrollable-nav.html

Vorteil: Kein Gefummel mit margin oder padding und das Layout passt sich automatisch an, wenn sich die Höhe der Navigation ändert.

Sempervivum

Glücklicher Weise brauchst Du dieses CSS nicht von Hand umzuschreiben, sondern es gibt Compiler dafür, die das automatisch tun. Einfacher als solch einen Compiler zu installieren, ist für dich wahrscheinlich, einfach Codepen zu verwenden: CSS im CSS-Fenster eintragen, links beim Zahnradsymbol den Präprozessor auswählen, in diesem Fall offenbar LESS, rechts unter dem Pfeil nach unten "View compiled CSS" auswählen, dann wird das CSS kompiliert und heraus kommt dieses:

Code

.glitch {
  font-size: 130px;
  line-height: 1;
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  text-decoration: none;
  color: #fff;
}
.glitch:before,
.glitch:after {
  display: block;
  content: "17";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  opacity: 0.8;
}
.glitch:after {
  color: #f0f;
  z-index: -2;
}
.glitch:before {
  color: #0ff;
  z-index: -1;
}
.glitch:hover:before {
  animation: glitch 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) both infinite;
}
.glitch:hover:after {
  animation: glitch 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) reverse both infinite;
}
@keyframes glitch {
  0% {
    -webkit-transform: translate(0);
    transform: translate(0);
  }
  20% {
    -webkit-transform: translate(-5px, 5px);
    transform: translate(-5px, 5px);
  }
  40% {
    -webkit-transform: translate(-5px, -5px);
    transform: translate(-5px, -5px);
  }
  60% {
    -webkit-transform: translate(5px, 5px);
    transform: translate(5px, 5px);
  }
  80% {
    -webkit-transform: translate(5px, -5px);
    transform: translate(5px, -5px);
  }
  to {
    -webkit-transform: translate(0);
    transform: translate(0);
  }
}

Alles anzeigen

Sempervivum

Das ist ein bekanntes Problem und lässt sich durch eine Reloadsperre verhindern. Wird z. B. bei Selfhtml beschrieben:

https://wiki.selfhtml.org/wiki/PHP/Tutorials/Reloadsperre

Sempervivum

Hast Du dem Submit-Button auch den Namen gegeben?

Schalte mal die Fehleranzeige ein:

Code

ini_set('display_errors', '1');
error_reporting(E_ALL);

Sempervivum

Und was hat jetzt das Problem gelöst?

Sempervivum

ja, aller Anfang ist schwer und ein Formular, das Daten in die Datenbank einträgt, ist schon eine etwas anspruchsvollere Aufgabe.

Sempervivum

Wie ich schon vermutet hatte, handelt es sich um ein sogenanntes Affenformular, d. h. das PHP für die Verarbeitung befindet sich auf der selben Seite wie das Formular selber. In dem Fall wird das PHP auch beim ersten Aufruf der Seite ausgeführt, wenn der Benutzer noch gar nichts eingegeben und auch nicht Submit betätigt hat.

Gängige Lösung: Gib dem Submit-Button einen Namen, z. B. name="submit" , dann kannst Du diesen im PHP prüfen und die Prüfung und Verarbeitung nur ausführen, wenn der entspr. POST-/GET-Parameter gesetzt ist:

Code

if (isset($_GET['submit'])) {
    // das Formular wurde abgeschickt
    // pruefen und verarbeiten
}

Sempervivum

In dem Fall vermute ich, dass es da noch mehr CSS gibt, das das Problem verursacht. Am besten wäre es, wenn Du die Seite online hättest und die URL posten würdest.

Sempervivum

Zitat

bin mir nicht sicher welche Infos noch helfen würden.

Am besten den Quelltext der ganzen Seite posten, wenn dieser nicht zu umfangreich ist. Und dabei Codetags benutzen, das </> in der Werkzeugleiste oben.

Sempervivum

Verstehe. Dein Code, so wie er ist, wird bei mir im Opera so dargestellt, wie Du es vorhast: Beide Texte links ausgerichtet. Es kann aber sein, dass andere Browser es anders machen.

Ich schlage vor, das p-Element in das li hinein zu nehmen, so:

Code

    <ul class="red-triangle">
        <li><strong>Automatic Built-In Die-Cutting</strong>
            <p>You never need to order custom die-cut media again. Just print and cut labels on your own, with one
                printer!
            </p>
        </li>
    </ul>

Dann ist es valide und wird wahrscheinlich so dargestellt, wie Du es möchtest.

Sempervivum

Zunächst mal ist dieses HTML nicht valide. Der Validator sagt dazu:

Zitat

Error: Element p not allowed as child of element ul in this context. (Suppressing further errors from this subtree.)

Als Kindelemente von ul sind nur li zulässig.

Dann verstehe ich nicht richtig, was deine Absicht ist, wenn Du schreibst:

Zitat

Ich würde es gerne so machen, dass der Text unter dem Aufzählungspunkt, also "You never need to..." auf einer Linie mit dem Text hinter dem Aufzählungspunkt anfängt.

Sempervivum

Denke auch, dass es nur ein Missverständnis beim TO ist und es in Wirklichkeit um einen FTP-Client geht.

Sempervivum

Hast Du die Seite schon online? Das Problem mit Fancybox würde mich interessieren.

Alternativ könntest Du die Bilder alle nebeneinander in einem Container anordnen und für diesen das Scrollen einschalten durch overflow-x: auto;. Dann würde ich erwarten, dass am Smartphone das Durchwischen funktioniert, allerdings ohne Einrasten.

Sempervivum

PS: Ich hätte das gleich testen sollen: Die verketteten += sind nicht das Problem, sondern die Variablen sind undefiniert, wenn die Checkbox nicht gecheckt ist. Und bei den keys ist das führende & überflüssig, weil die Parameter aus den Checkboxen es schon haben. Dieses liefert die gewünschte URL:

Code

        function openUrl() {
            //Formulardaten auslesen und in Variablen speichern
            var webseite = "https://www.example.de/suche?";
            var keys = "dealerid=TEST";

            var vw = '', audi = '', skoda = '';
            if (document.FORM.vw.checked) {
                var vw = document.FORM.vw.value;
            }
            if (document.FORM.audi.checked) {
                var audi = document.FORM.audi.value;
            }
            if (document.FORM.skoda.checked) {
                var skoda = document.FORM.skoda.value;
            }


            //Suchdienst URL und Suchbegriff zusammen bringen
            webseite += vw += audi += skoda += keys;

            //Such URL aufrufen
            // window.location = webseite;
            console.log(webseite);
        }

Alles anzeigen

Sempervivum

Ich vermute mal, dass diese verketteten += nicht so funktionieren, wie man es erwartet. Versuche es statt dessen so:

webseite += vw + audi + skoda + keys;

Sempervivum

Ich denke, ich sehe wo es noch hakt: Du brauchst noch die Elemente für die Anzeige, d. h. dieses:

Code

// SELECT ELEMENTS
const iconElement = document.querySelector(".weather-icon");
const tempElement = document.querySelector(".temperature-value p");

am Anfang des Skriptes.

Sempervivum

CSS ist wahrscheinlich nicht notwendig, aber HTML könnte helfen. Und vor alles das Javascript, das Du zuletzt verwendet hast.

Sempervivum

PS: Ich vermute mal, dass Du einfach die Standortabfrage gelöscht hast. Dann kann es nicht mehr funktionieren, denn die Funktion getWeather wird in setPosition aufgerufen und diese ist wieder ein Callback bei der Standortabfrage in Zeile 15. D. h. das einzige, was Du tun musst, ist die Funktion getWeather() am Ende des Skripts aufzurufen.

Beiträge von Sempervivum

Webpage lädt dauerhaft nach implementierung von JS

Sticky header und Footer

Sticky header und Footer

Umschreiben von SASS / SCSS in CSS Code

zwei Fragen Formular und GET/POST

zwei Fragen Formular und GET/POST

Aufzählungspunkte Tabulator

zwei Fragen Formular und GET/POST

zwei Fragen Formular und GET/POST

Aufzählungspunkte Tabulator

zwei Fragen Formular und GET/POST

Aufzählungspunkte Tabulator

Aufzählungspunkte Tabulator

FTP-Server erstellen

sticky header funktioniert bei effekten nicht

Übergabe von Values aus Formular

Übergabe von Values aus Formular

Wetter Widget ohne Standort-Abfrage

Wetter Widget ohne Standort-Abfrage

Wetter Widget ohne Standort-Abfrage