Beiträge von Sempervivum

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.

Sempervivum

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:

Code

        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:

Code

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

Sempervivum

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

Code

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

Alles anzeigen

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

Sempervivum

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.

Sempervivum

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.

Code

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

Alles anzeigen

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

Sempervivum

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.

Sempervivum

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/

Sempervivum

Zitat

vom Android her kenne ich die swipe-eigenschaften

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

Sempervivum

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

Sempervivum

PS: Jetzt getestet und war noch fehlerhaft. Die Funktion muss so aussehen:

Code

            function statsValue(pos) {
                //nameValue[pos];
                var obj = nameValue[pos + 'value'];
                for (var property in obj) {
                    if (obj.hasOwnProperty(property)) {
                        document.getElementById(property).innerText = obj[property];
                    }
                }
                console.log('2');
                console.log(pos);
            };

Alles anzeigen

Sempervivum

Der Kern der Sache scheint mir dieses zu sein:

Code

            function statsValue(pos) {

                nameValue[pos];
                console.log('2');
                console.log(pos);

            };

Ich vermute, Du willst die Einträge aus nameValue in die Felder unten übertragen. nameValue ist jedoch keine Funktion und die Anweisungen, die darin stehen, werden nicht ausgeführt durch nameValue[pos], sondern nur ein Mal, wenn Du diese Struktur definierst. Vermutlich würde dies tun, was Du vor hast:

Code

             const nameValue = {
                knightsvalue: {
                    hp: 1520472,
                    Atk: 17632,
                    // ebenso alle weiteren Eintraege aendern
                    document.getElementById('P_Def').innerText = 7832,
                    document.getElementById('M_Def').innerText = 6096,
                    document.getElementById('Mp_Recovery_Atk').innerText = 210,
                    document.getElementById('Crit').innerText = 150,
                    document.getElementById('Acc').innerText = 100,
                    document.getElementById('Cc_Resist').innerText = 150,
                    document.getElementById('Penetration').innerText = 150,
                    document.getElementById('P_Dodge').innerText = 250,
                    document.getElementById('M_Dodge').innerText = 250,
                    document.getElementById('Atk_Speed').innerText = 1000
                },
                warriorsvalue: {
                    // alle Elemente wie oben aendern
                    document.getElementById('Hp').innerText = 1291376,
                    document.getElementById('Atk').innerText = 20032,
                    document.getElementById('P_Def').innerText = 6528,
                    document.getElementById('M_Def').innerText = 7832,
                    document.getElementById('Mp_Recovery_Atk').innerText = 235,
                    document.getElementById('Acc').innerText = 100,
                    document.getElementById('Crit').innerText = 150,
                    document.getElementById('Penetration').innerText = 150,
                    document.getElementById('P_Dodge').innerText = 100,
                    document.getElementById('M_Dodge').innerText = 100,
                    document.getElementById('Atk_Speed').innerText = 1000,
                    document.getElementById('Cc_Resist').innerText = 150
                },
            };

Alles anzeigen

Und dann in der Funktion:

Code

            function statsValue(pos) {

                //nameValue[pos];
                var obj = nameValue[pos]
                for (var property in obj) {
                    if (obj.hasOwnProperty(property)) {
                        document.getElementById(property).innerText = obj[property];
                    }
                }
                console.log('2');
                console.log(pos);

            };

Alles anzeigen

Ungetestet, versuche es mal so.

Sempervivum

Möglicher Weise bindest Du irgend welche Dateien ein, CSS oder JS oder PHP durch include und die Pfade passen dann nicht mehr. Wenn Du es online hast, dann poste die URL. Möglicher Weise gibt auch die Console Hinweise, was falsch läuft.

Sempervivum

Ob und wo die Console in Sublime zu finden ist, weiß ich leider nicht. In jedem Fall findest Du sie aber in deinem Browser: F12 in IE und Edge, Strg+Umsch+I in den anderen.

Zitat

Bzw weiß nicht, ob es ratsam ist, auf eine externe Lösung zurückzugreifen.

Was meinst Du damit?

Sempervivum

Die Console zeigt dir an, wo das Problem liegt: Zeile 2 des Javascript sieht so aus:

const totalQuestionSpan==document.querySelector(".total-question");

Da hast Du ein doppeltes statt einem einfachen Gleichheitszeichen.

Beiträge von Sempervivum

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

Wetter Widget ohne Standort-Abfrage

Wetter Widget ohne Standort-Abfrage

Bilder zu ImageSlider dazufügen

Code Erweiterung

Bilder zu ImageSlider dazufügen

Bilder zu ImageSlider dazufügen

sticky header funktioniert bei effekten nicht

Ladet immer letzte werte,warum?

Ladet immer letzte werte,warum?

Ladet immer letzte werte,warum?

sticky header funktioniert bei effekten nicht

Elemente aus Liste abrufen

Elemente aus Liste abrufen