Beiträge von Sempervivum

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.

Sempervivum

Du willst doch zwei Dateien haben, in denen das HTML für body steht, body.php und body_mobile.php. Dann bindest Du in body.php die header_web und in body_mobile.php die header_mobile ein.

Sempervivum

Denke schon, dass Du das richtig verstehst. querySelectorAll liefert eine Nodelist, das ist im wesentlichen ein Array und im Clickhandler liefert this das geklickte Element. Und innerText dann den Text des div.

Sempervivum

Wenn ich mir dein HTML ansehe, liegen beide Klassen auf dem selben Element. Dann musst Du es so notieren:

Code

.epct_button.epct_product_compare_button {
    background: #FDD247 ;
}

Sempervivum

Dein Code sieht ja so aus:

Code

var btnClick = function(){
  const output = document.getElementById('ausgabe');
  
  //let nodeItem = elem.item(index)
  
  const test = document.querySelector('.btn')
  output.innerText = 'Klick: ' +  this.innerText;
  
};

document.querySelectorAll('.btn').forEach( function (elem, index) {
  elem.addEventListener('click', btnClick);
});

Alles anzeigen

Wenn Du elem und index an die Funktion btnClick übergeben willst, kannst Du diese Funktion nicht als Referenz übergeben sondern musst die Parameter explizit übergeben:

Code

var btnClick = function(elem, index){
  const output = document.getElementById('ausgabe');
  
  //let nodeItem = elem.item(index)
  
  //const test = document.querySelector('.btn')
  output.innerText = 'Klick: ' +  elem.innerText;
  
};

document.querySelectorAll('.btn').forEach( function (elem, index) {
  elem.addEventListener('click', function() {
    btnClick(elem, index);
  });
});

Alles anzeigen

Wenn Du die Funktion als Referenz übergibst, hast Du jedoch Zugriff auf den geklickten button über this :

Code

var btnClick = function(){
  const output = document.getElementById('ausgabe');
  
  //let nodeItem = elem.item(index)
  
  //const test = document.querySelector('.btn')
  //Unter this hast Du Zugriff auf den Button, der geklickt wurde:
  output.innerText = 'Klick: ' +  this.innerText;
  
};

document.querySelectorAll('.btn').forEach( function (elem, index) {
  elem.addEventListener('click', btnClick);
});

Alles anzeigen

Sempervivum

Der Validator beanstandet es nicht, wenn Leerzeichen um die Tilde herum sind und auch meinen Browser (Opera) stört es nicht.

Sempervivum

Zitat

dass das Feld NAME doch Zahlen durchgehen lässt, obwohl ich mit preg_matsch nur Buchstaben zulasse

"/^[a-zA-Z äöüßáéíóú]/"

Das liegt daran, dass Du nicht bis zum Stringende prüfst, so wird nur das erste Zeichen gecheckt. Dies sollte funktionieren: "/^[a-zA-Z äöüßáéíóú]+$/"

Sempervivum

Zitat

kannst du den Pfad mittels PHP auslesen und an dein JavaScript Script senden lassen.

Keine Ahnung, wie das funktionieren soll. Der Code im Eingangsposting liest die Datei lokal und speichert sie auch lokal.

Sempervivum

Zitat

Dies geht dann so : #firstelement:hover .braun{

background-color: red;

}

Leider funktioniert dies jedoch nicht

Das hängt vom HTML ab. Ich nehme mal an, dass die .braun nachfolgende Geschwisterelemente sind. Dann muss man statt eines Leerzeichens eine Tilde im Selektor verwenden:

Code

#firstelement:hover~.braun {
   background-color: red;
}

Sempervivum

Wenn ich das richtig sehe, wird das PHP ja auch geparst, wenn Du die Dateien mit Ajax lädst. Also einfach die Includes in body.php und body_mobile.php drin lassen und es sollte funktionieren.

Beiträge von Sempervivum

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

sticky header funktioniert bei effekten nicht

Mehrere btn, weniger code, tipps?

Elemente der gleichen Klasse unterschiedlich stylen

Mehrere btn, weniger code, tipps?

Meine Navi geht hinter dem content auf!

Absender bekommt keine Kopie

HTML Datei auslesen, bearbeiten und Speichern

Meine Navi geht hinter dem content auf!

sticky header funktioniert bei effekten nicht