nicht angemeldet
MudGuard
Rolf B
Gunnar Bittersmann
MudGuard
Rolf B
Tabellenkalk
MudGuard
Rolf B
Der Martin
Hi,
ich nutze auf einer "nur für mich" Seite (also muß nix Barrierefreies sein, Maus ist vorhanden) viele Popovers a la
Auge<button popovertarget="special33">Zeigen</button>
<figure id="special33" popover="auto">
<img src="/img/sonder/23/2014_1.webp" alt="Sonder 2014-1">
<figcaption>
<p>Sonder, Jahr 2014, Nr. 1<p>
<p>Das Besondere des Besonderen</p>
</figcaption>
</figure>
Das funktioniert auch wunderbar (im Firefox erst, nachdem ich das Feature enabled hab, aber auch das ist kein Problem, ist ja nur für mich).
Ach ja, vielen Dank an denjenigen (ich find's grad nicht mehr), der das popover-Zeug hier vor ein paar Wochen mal erwähnt hat!
So, funktionieren tut's. Auch, daß das Popover geschlossen wird, wenn ich auf einen anderen "Zeigen"-Button klicke. Derzeit sind's so um die 600 solche Buttons.
Ich hätte gerne (zusätzlich?), daß sich das Popover nicht erst bei Klick auf den Button öffnet, sondern bereits, wenn die Maus über dem Button schwebt.
Ist das mit kleinem Aufwand möglich? Gibt's da evtl. ein Attribut a la popoveractivation="hover" oder so?
Kiloweise Javascript würde ich eher ungern einbauen.
Danke,
Andreas a/k/a MudGuard
Hallo MudGuard,
bedank Dich beim Chef.
Im Wiki steht zwas was, aber (noch) nicht, was Du suchst. MDN sagt:
Popover elements are hidden via display: none until opened via an invoking/control element (i.e. a <button> or <input type="button"> with a popovertarget attribute) or a HTMLElement.showPopover() call.
D.h. du müsstest diesen Effekt wohl scripten. Aber das kann übel enden, wenn das Popover seinen Hover-Trigger überdeckt und gerade da die Schubsratte rumlungert. Dann flackert es.
Generell sind Sofortpopups beim hovern eine nervige Sache. Die kommen viel zu oft, frag die Wikipedia oder auch den nervigen „Navigator“ von Amazon Prime Video. Ich kann mir vorstellen, warum die WHATWG das nicht wollte.
Rolf
Hi,
bedank Dich beim Chef.
werd ich machen, sobald ich meinen Chef treffe (vermutlich morgen im Büro). Der wird sich zwar wundern, wofür ich mich bedanke, aber was soll's ;-)
Popover elements are hidden via display: none until opened via an invoking/control element (i.e. a <button> or <input type="button"> with a popovertarget attribute) or a HTMLElement.showPopover() call.
D.h. du müsstest diesen Effekt wohl scripten. Aber das kann übel enden, wenn das Popover seinen Hover-Trigger überdeckt und gerade da die Schubsratte rumlungert. Dann flackert es.
ja, eben, deswegen hatte ich da ja auf eine kleine, fertige Lösung gehofft, die all das berücksichtigt …
Generell sind Sofortpopups beim hovern eine nervige Sache.
Dem stimme ich durchaus zu - aber auf meiner kleinen eigenen Seite, an die niemand sonst rankommt, würde ich das gerne mal haben - wenn's mir zu nervig würde, könnte ich's ja wieder wegnehmen.
cu,
Andreas a/k/a MudGuard
Hallo MudGuard,
Eigene kleine Seite mit 600 Buttons. Ahem
Aber du brauchst Javascript nicht kiloweise dafür. Dank Event Bubbling reichen ein paar Gramm.
Rolf
Hi,
Eigene kleine Seite mit 600 Buttons. Ahem
naja, 7 KB PHP-Code. Und die 600 Buttons werden so wie die gesamte Tabelle per Schleife erzeugt …
Aber du brauchst Javascript nicht kiloweise dafür. Dank Event Bubbling reichen ein paar Gramm.
JS war noch nie meine Stärke, da haun mich auch schnell mal ein paar Gramm davon vom Hocker …
cu,
Andreas a/k/a MudGuard
@@MudGuard
ich nutze auf einer "nur für mich" Seite (also muß nix Barrierefreies sein, Maus ist vorhanden)
Das Gute an HTML-Standards ist, dass man, wenn man sie einhält, Barrierefreies gleich frei Haus geliefert bekommt (sofern die bei Nutzern eingesetzte Technik die neuen HTML-Features schon unterstützt).
Ich hätte gerne (zusätzlich?), daß sich das Popover nicht erst bei Klick auf den Button öffnet, sondern bereits, wenn die Maus über dem Button schwebt. […] Gibt's da evtl. ein Attribut a la popoveractivation="hover" oder so?
Nichts dergleichen gefunden. Ich kann mir auch kaum vorstellen, dass irgendwas in den HTML-Standard aufgenommen wird, dass Buttons eine Aktion auslösen lässt, ohne dass sie geclickt werden.
Ist das mit kleinem Aufwand möglich?
Ja, mit etwas JavaScript.
Kiloweise Javascript würde ich eher ungern einbauen.
Ist auch nicht nötig; eine Prise genügt. (Es ist kaum möglich, in diesem Forum irgendetwas zu antworten, was @Rolf B nicht schon sagte. 🤨)
Event delegation:
document.documentElement.addEventListener('mouseover', event => {
const popoverControlButton = event.target.closest('button[popovertarget]');
if (popoverControlButton) {
// todo
}
]);
was du dann bei todo tun musst, ist einfach nur
popoverControlButton.popoverTargetElement.showPopover();
aufzurufen. [MDN: popoverTargetElement, showPopover]
Und mit optional chaining operator hast du das als Einzeiler:
document.documentElement.addEventListener('mouseover', event => {
event.target.closest('button[popovertarget]')?.popoverTargetElement?.showPopover();
});
☞ Beispiel
Kwakoni Yiquan
Hi,
ich nutze auf einer "nur für mich" Seite (also muß nix Barrierefreies sein, Maus ist vorhanden)
Das Gute an HTML-Standards ist, dass man, wenn man sie einhält, Barrierefreies gleich frei Haus geliefert bekommt (sofern die bei Nutzern eingesetzte Technik die neuen HTML-Features schon unterstützt).
ich meinte hier damit, daß nicht extra eine Alternative für mauslose Geräte gebaut werden muß.
Ist das mit kleinem Aufwand möglich?
Ja, mit etwas JavaScript.
Kiloweise Javascript würde ich eher ungern einbauen.
Ist auch nicht nötig; eine Prise genügt.
Und mit optional chaining operator hast du das als Einzeiler:
document.documentElement.addEventListener('mouseover', event => { event.target.closest('button[popovertarget]')?.popoverTargetElement?.showPopover(); });
Wow, daß das mit so wenig Script geht, hätte ich nicht erwartet. Und dieses ?. kannte ich auch noch nicht. Das macht solche Verkettungen natürlich viel einfacher …
Ganz lieben Dank!
Das Einbauen in meine Seite hat mir jetzt fast so viel Freude gemacht wie die Nachricht eben am Telephon - meine Patentochter (Nichte) hat heute kurz nach Mittag ihren zweiten Sohn (und damit meinen zweiten Großneffen) zur Welt gebracht 😂😂😂😂😂 - 57cm, 4,4kg, Mama und Zwerg sind wohlauf, aber müde.
cu,
Andreas a/k/a MudGuard
Hallo MudGuard,
meine Patentochter hat heute kurz nach Mittag ihren zweiten Sohn zur Welt gebracht
na dann, herzliches Selfglück an die junge Familie 😀. Auch wenn ich nicht weiß, was eine Ochter ist und wie man sie patentieren kann 😕
Und dieses ?. kannte ich auch noch nicht.
Och menno, da schreibt man sich für den Adventskalender die Finger wund, und einen Monat später ist alles wieder vergessen. Am 12.12. war's!
Ich würde auch noch
JavaScript ist wie Kartoffelchips. Ein paar Gramm reichen einem nie!
Rolf
Hallo,
Auch wenn ich nicht weiß, was eine Ochter ist und wie man sie patentieren kann 😕
Vermutlich so was Ähnliches wie eine Ante. Meine war damals sehr patent...
Gruß
Kalk
Hi,
Auch wenn ich nicht weiß, was eine Ochter ist und wie man sie patentieren kann 😕 Vermutlich so was Ähnliches wie eine Ante. Meine war damals sehr patent...
ja, so eine hatte ich auch. Die konnte wohl gut reiten, immer wieder kaufte sie Pferde - von der Sorte Blumento …
cu,
Andreas a/k/a MudGuard
@@MudGuard
Auch wenn ich nicht weiß, was eine Ochter ist und wie man sie patentieren kann 😕 Vermutlich so was Ähnliches wie eine Ante. Meine war damals sehr patent...
ja, so eine hatte ich auch. Die konnte wohl gut reiten, immer wieder kaufte sie Pferde - von der Sorte Blumento …
Meine hatte es eher mit gärtnern. Sie hatte da so eine fruchtbare Erde – Sorte Appaloosapf.
Kwakoni Yiquan
Hi,
Und dieses ?. kannte ich auch noch nicht.
Och menno, da schreibt man sich für den Adventskalender die Finger wund, und einen Monat später ist alles wieder vergessen. Am 12.12. war's!
Mangels Anwendungsfall ist das halt nicht vom Ultrakurz- ins Kurz-Zeit-Gedächtnis und daher von dort nicht weiter ins Langzeit- oder gar ins Ultra-Langzeit-Gedächtnis gewandert.
Und 1 Monat ist ja wohl eher Ultra-Lang 😉
cu,
Andreas a/k/a MudGuard
Hallo Andreas,
Mangels Anwendungsfall
Na, dann ist's ja cool, dass Du nun einen hast und Gunnar Dich draufgestupst hat.
Rolf
Hallo,
Das Einbauen in meine Seite hat mir jetzt fast so viel Freude gemacht wie die Nachricht eben am Telephon - meine Patentochter (Nichte) hat heute kurz nach Mittag ihren zweiten Sohn (und damit meinen zweiten Großneffen) zur Welt gebracht 😂😂😂😂😂
na dann allen direkt und indirekt Beteiligten meine besten Glückwünsche!
57cm, 4,4kg, Mama und Zwerg sind wohlauf, aber müde.
Bei der Größe und dem Gewicht würde ich nicht mehr von einem Zwerg reden! Das ist schon ein Anwärter für einen Schwergewichtsboxer!
Einen schönen Tag noch
Martin
Hi,
Das Einbauen in meine Seite hat mir jetzt fast so viel Freude gemacht wie die Nachricht eben am Telephon - meine Patentochter (Nichte) hat heute kurz nach Mittag ihren zweiten Sohn (und damit meinen zweiten Großneffen) zur Welt gebracht 😂😂😂😂😂
na dann allen direkt und indirekt Beteiligten meine besten Glückwünsche!
Danke ...
57cm, 4,4kg, Mama und Zwerg sind wohlauf, aber müde.
Bei der Größe und dem Gewicht würde ich nicht mehr von einem Zwerg reden!
Der größte Zwerg der Welt! 😉
Das ist schon ein Anwärter für einen Schwergewichtsboxer!
Angesichts des Bauchumfangs war mehrfach auf eine Zwillings-Schwangerschaft getippt worden ...
cu,
Andreas a/k/a MudGuard
Hallo
Herzlichen Glückwunsch.
57cm, 4,4kg, Mama und Zwerg sind wohlauf, aber müde.
Bei der Größe und dem Gewicht würde ich nicht mehr von einem Zwerg reden!
Der größte Zwerg der Welt! 😉
War das nicht der Herr Karotte Eisengießersohn von der Stadtwache?
Tschö, Auge
Hallo Auge,
vielleicht auf der Scheibenwelt. Hierzuplanete ist es dieser mit 5,41 m.
Rolf
Ach ja, Karotte … Paß aber auf, Sie ist doch bestimmt in der Nähe — und gelegentlich doch ein wenig unangenehm! Ok, gerade haben wir ja keinen Vollmond …
Aber: vor einigen Jahren (ungefähr Anfang der 80er) gab es im Einkaufszentrum „drei bis vier Ecken weiter“ eine Ausstellung. AFAIR wegen diesem Guinness (das sich zu der Zeit noch so verkaufte und nicht über „will ’nen Eintrag“ finanziert hat. Egal: jedenfalls gab es ein paar Exponate. U. a. Haushaltsgegenstände von, wenn ich mich recht erinnere, Robert Wadlow. Auf alle Fälle: > 2,5m und (schon damals) nicht mehr am Leben.
Ich muß schon sagen: allein neben seinem Küchenstuhl zu stehen hat etwas Beunruhigendes, ja fast Beängstigendes … Und das liegt nicht an der Frage, wie man denn da selber Platz nehmen könnte.
Das müssen aber kleine Schwergewichte sein. Denn: ich habe damals 5,2㎏ mitgebracht. Aber die Sportwelt hat mich nicht groß wahrgenommen.
Ach ja: das Startgewicht ist nur bedingt von Aussagekraft. Durchschnittsgröße, BMI knapp über 20 … also: nicht überbewerten. Wenn, dann lieber „beim Lege vorbeischauen“ und (danach?) gezielt die Zuckerrüben in ihren Erscheinungsformen gut dosieren.
Mal sehen, ob das, so etwas, passen könnte:
<div> <!-- ein div, damit es ein Element wird -->
<button type=button popovertarget=KnowMe>
<p>If you don’t know …</p>
<div id=KnowMe popover>
… the solution, every riddle might be a mysterium …
</div>
</button>
</div>
Fehlt noch die Steuerung:
button[popovertarget] {
position: relative; /* nötig? */
&:hover {
& > div[popover] {
display: block;
}
}
}
[popover] {
position: absolute; /* nötig? */
/* „Eine Portion Skeuomorphie bitte!“ */
&::backdrop {
backdrop-filter: blur(2em);
}
}
Hab’ das „mal eben“ aus meiner kleinen Baustelle herauskopiert und denke (hoffe), nichts übersehen zu haben. Hier funktioniert das in Safari und Firefox. — Wenn es so nicht klappt, kann nur irgend eine Kleinigkeit fehlen.
Und: „/* nötig */“? Bin mir da nicht im Klaren: diese Popovers geben sich ja recht eigenständig. Man versuche z. B. mal, ihr Ein- und Ausblend-Verhalten zu manipulieren. Aber: es gibt ja auch noch andere Dinge. Sprich: hier brauche ich die Dinger.
Skeuomorphie? Es gab da mal eine Ecke, in der das Tugen war. Heute gibt es da auch nur konturlose Kacheln und man weiß oft nicht, was man da gerade machen könnte, machen soll … oder besser bleiben lassen sollte. — Will man da endlich mal Redmond kopieren. Incl. dem Scheitern? Oder soll das abschreckend wirken, vielleicht auf Leute mit „ich brauche eine Klickstrecken-Landkarte“ Bedürfnissen?