Beiträge von Sempervivum

Es funktioniert, wenn ich statt der CSS-Eigenschaft das Attribut ändere:

document.getElementById('g').setAttribute('width', '200');

Zunächst mal: Ich kann nur davor warnen, auf solch einen externen Service zu bauen. Ich unterstütze da einen Webmaster, der sich ebenfalls mit solchen Newsfeeds befasst und wir hatten schon zwei Mal die Situation, dass solch ein Dienst eingestellt wurde und wir auf einen anderen umstellen mussten.

Der Grund, warum das bei dir nicht funktioniert ist, dass Du mit der Initialisierung des Owlcarousel warten musst, bis beide Feeds geladen sind. So funktioniert es:

        var urls = [
            'feed1.xml',
            'feed2.xml'
        ];
        var feedReady = [];
        for (var i = 0; i < urls.length; i++) {
            $.ajax({
                type: "GET",
                url: 'https://api.rss2json.com/v1/api.json?rss_url=' + encodeURIComponent(urls[i]),
                dataType: 'json',
                error: function () {
                    $("<div class='errorXml'></div>").html('Fehler beim Laden des XML Files.').prependTo(".results");
                },
                success: function (data) {

                    console.log(data);
                    var gItem = '';
                    data.items.forEach(item => {

                        // var itemTitle = item.title.text;
                        var itemTitle = item.title;
                        var itemLink = item.link;
                        var itemImage = item.enclosure.link;
                        gItem += '<div class="item">';
                        gItem += '<a href="' + itemLink + '" class="itemLink" target="_blank">';
                        gItem += '<div class="itemImage" style="background-image:url(' + itemImage + ');"></div>';
                        gItem += '<div class="itemBalken">';
                        gItem += '<div class="itemTxt">';
                        // gItem += '<div class="itemTitle"><p>' + cropTitle(itemTitle) + ' &gt;</p></div>';
                        // gItem += '<div class="itemTitle"><p>' + itemTitle + ' &gt;</p></div>';
                        gItem += '<div class="itemTitle"><p>' + itemTitle + '</p></div>';
                        gItem += '</div>';
                        gItem += '</div>';
                        gItem += '</a>';
                        gItem += '</div>';
                    });
                    $('.owl-carousel').append(gItem);
                    feedReady.push(true);
                    if (feedReady.length == urls.length) {
                        var owl = $('.owl-carousel');
                        owl.owlCarousel(
                            {
                                // margin: 0,
                                nav: true,
                                // navText: ["<i class='material-icons'>keyboard_arrow_left</i>", "<i class='material-icons'>keyboard_arrow_right</i>"],
                                // loop: true,
                                // autoplay: true,
                                // autoplayTimeout: 3000,
                                // autoplayHoverPause: true,
                                // smartSpeed: 500,
                                // responsive: {
                                //     0: {
                                //         items: 1
                                //     },
                                //     600: {
                                //         items: 1
                                //     },
                                //     1000: {
                                //         items: 1
                                //     }
                                // }
                            }
                        );
                        // $('.owl-prev').attr("onclick", "javascript:var img=new Image();img.src='';return true;");
                        // $('.owl-next').attr("onclick", "javascript:var img=new Image();img.src='';return true;");
                    }
                },
            });
        };

Mein Vorschlag: Das selbe Verfahren wie beim Button anwenden: Prüfen, ob die Klasse, die das Dragging anzeigt, nicht vorhanden ist und abhängig davon das Wechseln der Container durchführen:

containers.on('mouseup', function() {
//Get current element and next sibling
let elem = $(this);
let next = elem.next('.trip');
if (!elem.parent().hasClass('ui-draggable-dragging')) {
//Does sibling exist?
if (next.length) {
next.show();
} else {
firstContainer.show();
}
elem.hide();
}
});

https://codepen.io/Sempervivum/pen/rXYzba

BTW: Elegant, das Wechseln der Elemente. Hast Du das selber entwickelt?

Zitat

Bei der alten Version geht die Drehung auch auf dem Smartphone ... wenn man auf das Logo tippt, dreht es sich wie ein Propeller, solange bis man auf einen anderen Platz tippt.

Tatsächlich, ich bin überrascht! Geht mit der neuen Version genau so gut:

http://webentwicklung.ulrichbangert.de/spinner.html

Getestet mit Samsung-Browser und Chrome auf Android.

Die Browserentwickler haben da eine brauchbare Übersetzung des hover nach touch gefunden.

Zitat

Kann man mit Flex-direction auch die Anzeige für Smartphone Landscape anderst gestalten wie für Portrait?

Ja, Du brauchst dazu eine geeignete Mediaquery, die Orientierung des Bildschirms kannst Du abfragen und entsprechend flex-direction festlegen:

https://wiki.selfhtml.org/wiki/CSS/Media_Queries#orientation

Browsersupport scheint aber nicht so gut zu sein, für Apple-Geräte gar nicht, vielleicht besser mit Javascript abfragen.

Zitat

ich habe es jetzt mit flex versucht, aber das kommt auf dem Smartphone nicht so richtig (die icones kommen in einer Spalte neben dem Logo und diese Spalte ist dann höher wie das Logo).

Deshalb habe ich die icones mal vorläufig unter das Logo gesetzt ... das sieht eigentlich ganz gut aus und ist auch auf dem Smartphone ok.

Das ist ein gängiges Problem, dass die Desktop-Ansicht auf dem Smartphone weniger gut aussieht. Du kannst jedoch mit einer Mediaquery abhängig von der Fensterbreite problemlos zwischen beiden Darstellungen umschalten indem Du flex-direction änderst.

Was die Drehung betrifft, so findet sie ja nur beim Hover statt und das gibt es auf dem Smartphone nicht.

Das Problem kenne ich, ich hatte es mal bei einem mehrstufigen Menü, das ich mit dem selben Verfahren gebaut hatte.

Lösung, indem Du, wenn das Kind-Akkordeon aufgeklappt wird, die Höhe des Eltern-Akkordeons korrigierst:

      panel.style.maxHeight = panel.scrollHeight + "px";
      var parent = this.parentNode;
      if (parent.classList.contains("panel")) {
        parent.style.maxHeight = (parent.scrollHeight + panel.scrollHeight) + "px";
      }

https://jsfiddle.net/Sempervivum/gkzqvmf7/16/

Zitat

Und zum anderen macht es überhaupt keinen Sinn

Das denke ich mir auch häufig, wenn ich die Vorgänge in den Computerforen so beobachte. Man stelle zum Beispiel mal Bastis Posting #18 dem Posting #10 in diesem Thread gegenüber:

Chronologische Darstellung realisieren

Zitat

das der Kasten mit den Sprachen will einfach nicht neben dem Logo erscheinen, sondern die Ikones kommen immer in der nächsten Zeile

Das liegt daran, dass das Div, in dem der Spinner liegt, ein Blockelement ist und dies nimmt immer eine Zeile für sich ein.

Lösung durch Flexlayout, dadurch kann man die Elemente problemlos nebeneinander anordnen:

https://jsfiddle.net/Sempervivum/6bczg3n9/9/

Mit addEventListener kannst Du eine Aktion beim Klick durchführen.

Mit querySelektorAll kannst Du eine Nodelist, so eine Art Array, der drei Divs erzeugen.

Dann eine Variable führen, die den Index des Elementes in der Nodelist angibt.

diesen Index von Klick zu Klick um eins erhöhen und das alte Element unsichtbar und das neue sichtbar machen.

Zum Nachschlagen empfehle ich Selfhtml.

Mit "nicht animiert" meinst Du wahrscheinlich, dass die Elemente abrupt, ohne Überblenden, wechseln sollen? Und mit "Bei Klick auf ein div", dass der Wechsel nicht automatisch erfolgen soll, sondern eben durch Klick?

Ich hatte mir vorgestellt, die SVGs in den selben Container .icon zu legen und absolut zu positionieren, so dass sie übereinander liegen. Da es drei Bilder sind, musst Du jedes für 1/3 der Zeit, d. h. 33.33% anzeigen. Und wenn Du statt gezielter Klassen alle Pfade ändern willst, brauchst Du ebenfalls querySelectorAll und eine Schleife, denn es sind ja mehrere Pfade. Und musst den Punkt vor dem "path" weg lassen.

Ausgehend von deiner ersten Version habe ich dies gemacht:

https://codepen.io/Sempervivum/pen/RXoBmm

BTW: Wenn wir bei Opacity sind, kann man mit wenigen Änderungen am Timing einen netten Übergangseffekt erzielen:

https://codepen.io/Sempervivum/pen/oKYJRX

PS: Außerdem liefert document.querySelector nur das erste Element. Da dein Selektor mehrere Elemente liefert, musst Du document.querySelectorAll benutzen und die Element in einer Schleife abarbeiten.

Offenbar kann man die Elemente eines SVGs als Hintergrundbild nicht mit CSS gestalten:

https://stackoverflow.com/questions/1336…ackground-image

Zitat

Because as a background img, it isn't part of the DOM and you can't manipulate it.

Du kannst jedoch den selben Effekt erzielen, indem Du die Grafiken normal einbettest und z. B. die opacity animierst um zwischen den drei Grafiken umzuschalten.

var_dump ist nur für die Ausgabe von Variablen geeignet. Lass es weg, dann wird es funktionieren.

Was das bedeutet, kann man nur beurteilen, wenn man weiß, in welchem Zusammenhang bzw. an welcher Stelle in deinem Code das steht.

var_dump() kann auch ein zweidimensionales Array ausgeben.

Was in_array betrifft, so hängt die Auswertung davon ab, was Du haben willst. Du hattest ja den Wunsch, dass die $carray der Module für jede Kategorie getrennt gespeichert werden.

PS: Ich sehe gerade, dass da ein Fehler ist:

$carray[$categoryname] = $arrayst; muss lauten: $carray[$categoryname] = [$arrayst];

soll ja ein zweidimensionales Array werden.

Jetzt musst Du natürlich auch die Auswertung anpassen, in_array wird bei einem zweidimensionalen nicht funktionieren. Und überprüfen, ob das Array richtig aufgebaut wird, z. B. durch ein var_dump().

Inzwischen glaube ich, dass ich deine Aussage aus Posting #1 jetzt besser verstehe:

Zitat

Es soll jedoch praktisch für jede Kategorie ein individueller Array erstellt werden. Wie ist das möglich? Danke schonmal!

Lösung: Ein zweidimensionales Array, wie früher schon angeregt:

require 'inclusions/action/preview/checkcategory.php';
if (issset($carray[$categoryname])) $carray[$categoryname][]= $arrayst;
else $carray[$categoryname] = [$arrayst];

Schau mal, ob dir das weiter hilft.