Beiträge von 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:

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

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.

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.

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:

    <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.

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.

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

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.

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:

        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);
        }

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

webseite += vw + audi + skoda + keys;

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

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

am Anfang des Skriptes.

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

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.

Sieh genau hin, ich habe, um es leicht testen zu können, das Eintragen in die HTML-Elemente auskommentiert und die Daten statt dessen in die Console geschrieben:

        function displayWeather() {
            console.log(weather);
            // iconElement.innerHTML = `<img src="icons/${weather.iconId}.png" />`;
            // tempElement.innerHTML = `${weather.temperature.value}°<span>C</span>`;
        }

Wenn Du das wieder rückgängig machst, sollte es funktionieren:

        function displayWeather() {
            iconElement.innerHTML = `<img src="icons/${weather.iconId}.png" />`;
            tempElement.innerHTML = `${weather.temperature.value}°<span>C</span>`;
        }

Ich habe dein Skript mal auf das notwendigste reduziert und dann funktioniert es einwandfrei:

    <script>
        // App data
        const weather = {};
        weather.temperature = {
            unit: "celsius"
        }
        // GET WEATHER FROM API PROVIDER
        function getWeather() {

            fetch(`http://api.openweathermap.org/data/2.5/weather?q=Recke,ger&appid=${"82005d27a116c2880c8f0fcb866998a0"}`)
                .then(function (response) {
                    let data = response.json();
                    return data;
                })
                .then(function (data) {
                    weather.temperature.value = Math.floor(data.main.temp - 273);
                    weather.description = data.weather[0].description;
                    weather.iconId = data.weather[0].icon;
                    weather.city = data.name;
                    weather.country = data.sys.country;
                })
                .then(function () {
                    displayWeather();
                });
        }
        // DISPLAY WEATHER TO UI
        function displayWeather() {
            console.log(weather);

            // iconElement.innerHTML = `<img src="icons/${weather.iconId}.png" />`;
            // tempElement.innerHTML = `${weather.temperature.value}°<span>C</span>`;
        }
        getWeather();
    </script>

In deinem Skript ist jedoch die Standortabfrage noch drin. Soll das jetzt die Version vor oder nach dem Umbau sein?

Zitat

bei mir bremmst der eine irgendwie etwas langsamer ab

Das nennt man "easing" und ist auch bei Cycle2 vielfältig variierbar, auch mit langsamem Abbremsen.

Ich habe mal einen Prototypen gemacht, um den roten Balken in das SVG einzufügen:

Die Parameter werden aus dem vorhandenen SVG ausgelesen. Ist kein Label "2019-2020" da, wird auch kein Balken erzeugt.

        const wRect = 10;
        const horizontalLines = $('svg').eq(0).children('g').eq(2).find('rect'),
            labels = $('svg').eq(0).children('g').eq(2).find('text');
        let x = -1;
        labels.each(function (idx, item) {
            if (item.textContent == '2019/2020') x = parseInt(item.getAttribute('x')) - wRect / 2;
        });
        if (x != -1) {
            const yTop = horizontalLines.eq(0).attr('y'),
                yBtm = horizontalLines.eq(horizontalLines.length - 1).attr('y'),
                height = yBtm - yTop;
            function makeSVG(tag, attrs) {
                var el = document.createElementNS('http://www.w3.org/2000/svg', tag);
                for (var k in attrs)
                    el.setAttribute(k, attrs[k]);
                return el;
            }
            theRect = makeSVG('rect', { x: x, y: yTop, width: wRect, height: height, fill: '#ff0000' });
            document.querySelectorAll('svg')[0].appendChild(theRect);
        }

Funktioniert auf meiner Testseite; es muss dann noch in die originale Seite integriert werden.

Zitat

allerdings find ich leider die smoothen Übergänge bei meinem etwas schöner.....

Verstehe nicht: Die zweite Demo von links auf der Startseite von Cycle2 hat genau denselben Slide-Effekt wie bei der Demo von Basti.

Du wirst hier mit einem Nachteil von Slidern, die auf CSS basieren, konfrontiert: Die Erweiterung ist eine Qual und sehr fehleranfällig.

Zitat

vielleicht hat ja jemand eine Idee oder Verbesserung.

Ja, habe ich: Einen bewährten Slider auf Javascript-Basis verwenden, wie z. B. Cycle2:

http://jquery.malsup.com/cycle2/

Zitat

vom Android her kenne ich die swipe-eigenschaften

Wenn ich mich richtig erinnere, ist Fancybox touch-ready und unterstützt swipe. Versuche es!

Was var, let und const betrifft, hast Du vollkommen Recht, ich hatte den Code von hier:

https://zellwk.com/blog/looping-through-js-objects/

und darauf nicht so geachtet.

Die Sache mit hasOwnProperty ist hier beschrieben:

https://wiki.selfhtml.org/wiki/JavaScrip…ung_in_Schleife