Wenn ich das richtig verstehe, möchtest Du, dass das Bild mittig ist und die Tabellenzelle ganz ausfüllt. Und bist bereit zu akzeptieren, dass dann etwas abgeschnitten wird. Dann wäre es am einfachsten, wenn Du das Bild als Hintergrund anlegen würdest. Informiere dich hier und konzentriere dich auf background-size: cover;:
https://wiki.selfhtml.org/wiki…d_-bilder/background-size
Würde aber auch mit object-fit gehen, siehe hier:
Ein iFrame? Du scherzt!
ZitatEigentlich möchte ich kein Javascript oder CSS verwenden sondern nur HTML5.
Warum denn das?
Hallo Basti, da bin ich leider überfragt. X-Box und Playstation kenne ich nur dem Namen nach. Ich halte es aber für unwahrscheinlich, dass Javascript oder ein Plugin mit vertretbarem Aufwand Wurfbewegungen erkennen können.
Da wirst Du wohl an ein wenig Mathe nicht vorbei kommen:
// xCenter und yCenter sind die Koordinaten des Mittelpunktes der Darts-Scheibe
// x und y sind die Koordinaten des Mittelpunktes des Fadenkreuzes
var deltaX = x - xCenter, deltaY = y - yCenter;
var dist = hypot(deltaX, deltaY); // der Abstand
var angle = asin(deltaY / dist); // der Winkel im Bogenmass
var deg = angle / Math.PI * 180; // der Winkel in Grad(ungetestet). Aus dem Winkel und dem Abstand ist es dann kein Problem, das Feld zu berechnen.
BTW: Es hat mich interessiert und ich habe heraus gefunden, dass man mit getBoundingClientRect() problemlos die Koordinaten eines (SVG-)Elementes ermitteln kann, siehe hier:
Ja, bei SVG ist das schon anders. Ich sehe jedoch noch ein ganz anderes Problem:
Ich kenne die Spielregeln von Darts leider nicht, aber sicherlich musst Du doch prüfen, ob der Pfeil ein bestimmtes Feld getroffen hat bzw. ein bestimmtes Kreissegment. Da ein solches Kreissegment jedoch als Element gar nicht existiert, sondern nur der ganze Kreis, kannst Du, wenn Du die Koordinaten des ganzen Elementes prüfst, nur heraus bekommen, ob der ganze Kreis bzw. das umschließende Quadrat getroffen wurde und nicht ein einzelnes Segment.
Jedenfalls, wenn ich deinen Code richtig interpretiere, ich habe nicht bis ins letzte Detail hinein geschaut.
Mit jCanvas kannst Du ganz leicht Kreisbögen zeichnen:
https://projects.calebevans.me/jcanvas/docs/arcs/
gleich das erste Beispiel.
Ich finde jedoch nichts, wie man feststellen kann, ob ein Koordinatenpaar innerhalb eines solchen Kreisbogens liegt. Da ist wohl auch angesagt, es selbst auszurechnen. Wenn es ausreicht, die Farbe eines Feldes zu ermitteln, kann man das jedoch in Canvas sehr leicht, weil man Zugriff auf die RGB-Werte hat.
ZitatDa ist so wieso Ende für mich. Bin eigentlich ganz gut in Mathe , doch bei Kreis ,Dreieck und Winkel und co hört es leider auf bei mir.
Ich kann mich dunkel erinnern, dass Du mal irgend eine Aufgabe mit Winkelfunktionen selber gelöst hattest.
ZitatWäre es eigentlich einfacher die ganze Dartscheibe mit Canvas zu machen ?
Da bin ich mir gar nicht mal sicher. Ich habe früher mal mit jCanvas solche Kreissegmente gezeichnet und das wurde ganz gut unterstützt und war relativ einfach. Nicht jedoch die Prüfung, ob ein Koordinatenpaar in einer Form liegt. Außer bei Klick, aber das geht ja bei dem Fadenkreuz nicht.
Auf jeden Fall hat Canvas den Nachteil, dass es nicht verlustfrei skaliert werden kann.
PS: Ich sehe gerade, dass die Felder keine Elemente sind, sondern dass Du das mit Dasharray gelöst hat. Dann wird das mit checkIntersection wohl nicht gehen.
Man könne es aber sicherlich händisch berechnen: Zunächst den Abstand vom Mittelpunkt und dann den Winkel. Daraus könnte man dann sicher berechnen, welches Feld getroffen wurde.
Mit checkIntersection müsste es auch gehen, aber leider ... nicht von Firefox untersützt.
Die Lösung findest Du hier:
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) + ' ></p></div>';
// gItem += '<div class="itemTitle"><p>' + itemTitle + ' ></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?
ZitatBei 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.
ZitatKann 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.
Zitatich 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";
}ZitatUnd 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: