nicht angemeldet
transition über Text-Link steuern?
2 
Auge
0 
marctrix
1 
Matthias Scharwies
0 0 marctrix
transition über Text-Link steuern?
Gunnar Bittersmann
Der MartinHallo zusammen.
Ich habe mal eine Frage. Ich probiere gerade mal ein bisschen mit css transition und habe folgendes gebastelt, um ein Bild von rechts ins Fenster gleiten zu lassen.
.Bildlink{
position:absolute;
z-index:100;
border:solid thin red;
width: 600px;
height:400px;
right:-605px;
transition: right 1.5s ease;
}
input[type="checkbox"].myCheckbox {
width: 100px;
height: 100px;
z-index: 100;
cursor: pointer;
}
input[type="checkbox"]:checked.myCheckbox ~ .Bildlink {
right:600px;
}
<body>
<input type="checkbox" class="myCheckbox" />
<div class="Bildlink">
<img src="images/bild.jpg" width="15" height="10">
</div>
</body>
</html>
Das funktioniert auch soweit. Ich würde das ganze aber gern über einen Klick auf einen Text-Link auslösen und nicht über einen Klick auf eine Checkbox. Hat jemand eine Idee, wie ich das mache?
-
Hallo
Ich würde das ganze aber gern über einen Klick auf einen Text-Link auslösen und nicht über einen Klick auf eine Checkbox. Hat jemand eine Idee, wie ich das mache?
Ein Link ist hier ungeeignet, denn er soll das Laden einer Ressource auslösen. Du hast aber schon alles da. Du könntest, wie es sich gehört, der Checkbox ein Label verpassen, was dazu führt, dass du anklickbaren Text hast, der den Status der Checkbox umschalten kann. Die Checkbox selbst könntest du dann ausblenden. Ihr Status ist auch im ausgeblendeten Zustand verfügbar.
<label for="toggleMe">Blende das Bild ein</label><input type="checkbox" id="toggleMe" class="myCheckbox" />Tschö, Auge
--
Wo wir Mängel selbst aufdecken, kann sich kein Gegner einnisten.
Wolfgang Schneidewind *prust*-
Moin moin.
Vielen Dank für die Antwort!
Ja, darüber hatte ich auch schon nachgedacht, aber ich hätte den Link gern im Text-Flow. Also, er soll hinter/über einem bestimmten Wort sein und bleiben, auch wenn jmd bspw. eine größere Schriftart verwendet oder seinen Text größer anzeigen lässt. Gibt es da eine Möglichkeit Checkbox und Label irgendwie an dieses Wort zur "heften"?
VG und einen schönen Tag!
Hallo
Ich würde das ganze aber gern über einen Klick auf einen Text-Link auslösen und nicht über einen Klick auf eine Checkbox. Hat jemand eine Idee, wie ich das mache?
Ein Link ist hier ungeeignet, denn er soll das Laden einer Ressource auslösen. Du hast aber schon alles da. Du könntest, wie es sich gehört, der Checkbox ein Label verpassen, was dazu führt, dass du anklickbaren Text hast, der den Status der Checkbox umschalten kann. Die Checkbox selbst könntest du dann ausblenden. Ihr Status ist auch im ausgeblendeten Zustand verfügbar.
<label for="toggleMe">Blende das Bild ein</label><input type="checkbox" id="toggleMe" class="myCheckbox" />Tschö, Auge
--
> Wo wir Mängel selbst aufdecken, kann sich kein Gegner einnisten.
> Wolfgang Schneidewind *prust*-
Hallo
Ja, darüber hatte ich auch schon nachgedacht, aber ich hätte den Link gern im Text-Flow. Also, er soll hinter/über einem bestimmten Wort sein und bleiben, auch wenn jmd bspw. eine größere Schriftart verwendet oder seinen Text größer anzeigen lässt. Gibt es da eine Möglichkeit Checkbox und Label irgendwie an dieses Wort zur "heften"?
Mein Beispiel zeigt zwar das Label direkt vor dem Formularelement (der Checkbox), da im Attribut
foraber die ID der Checkbox – die ist ja, wenn du nichts falsch machst, dokumentweit eindeutig – referenziert wird, kann das Label auch irgendwo im Dokument notiert werden. Es ist also solches ein Inlineelement und kann irgendwo im Inhalt, also auch mitten in einem Text stehen. Nur sollte es so gestaltet sein, dass der Benutzer auch erkennt, dass da ein interaktives Element ist.Ob die Funktion dem Benutzer so auch in jedem Fall vermittelbar ist, steht auf einem anderen Blatt. Die damit auszulösende Funktion (das Hereinschieben eines Bildes) funktioniert ja nicht in jedem Anwendungsszenario. Das muss es ja auch nicht, wenn das Bild z.B. ohne CSS eh im Dokumentfluss angezeigt wird.
<p>Und dann sagte ich <label for="toggleMe">„Blende das Bild ein“</label>. Das tat sie dann auch.</p> <!-- Irgendwo ganz anders im HTML-Quelltext --> <input type="checkbox" id="toggleMe" class="myCheckbox" />Tschö, Auge
--
Wo wir Mängel selbst aufdecken, kann sich kein Gegner einnisten.
Wolfgang Schneidewind *prust*-
Oooohhh ... ich glaube, ich habe deinen ersten Post nicht genau genug gelesen. Tut mir leid und danke, dass du noch mal drauf eingegangen bist. Genau so sollte es ja gehen! :-) Vielen Dank!
-
-
@@kyan
Du könntest, wie es sich gehört, der Checkbox ein Label verpassen, […] Die Checkbox selbst könntest du dann ausblenden.
Ja, darüber hatte ich auch schon nachgedacht, aber ich hätte den Link gern im Text-Flow.
Ja, und?
labelwird per Default inline dargestellt.Das einzublendende Bild muss freilich ein Geschwisterelement des
inputs sein; sich also im selbenpbefinden. Dann darf es keindivaußenrum haben; das braucht es auch nicht.LLAP 🖖
PS: Bitte kein TOFU hier im Forum!
--
“I love to go to JS conferences to speak about how to avoid using JavaScript. Please learn CSS & HTML to reduce your JS code bloat.” —Estelle Weyl-
@@Gunnar Bittersmann
Das einzublendende Bild muss freilich ein Geschwisterelement des
inputs sein;So weit, so gut.
sich also im selben
pbefinden.Das ist Quatsch. Das
input-Element muss sich ja gar nicht dort befinden, wo dasinput-Element ist.Auges Antwort hat mir die Augen geöffnet.
[
divaußenrum] braucht es auch nicht.Das stimmt allerdings wieder.
LLAP 🖖
--
“I love to go to JS conferences to speak about how to avoid using JavaScript. Please learn CSS & HTML to reduce your JS code bloat.” —Estelle Weyl-
Hallo
sich also im selben
pbefinden.Das ist Quatsch. Das
input-Element muss sich ja gar nicht dort befinden, wo dasinput-Element ist.Öhhm, das Input muss nicht da sein, wo das Input ist? Soso. Hol dir mal 'nen Kaffee. :-)
Vermutlich war das Label gemeint, das nicht direkt beim Input sein muss.
Tschö, Auge
--
Wo wir Mängel selbst aufdecken, kann sich kein Gegner einnisten.
Wolfgang Schneidewind *prust*-
@@Auge
Hol dir mal 'nen Kaffee. :-)
Ja. ☕️
Vermutlich war das Label gemeint, das nicht direkt beim Input sein muss.
Und ja.
LLAP 🖖
--
“I love to go to JS conferences to speak about how to avoid using JavaScript. Please learn CSS & HTML to reduce your JS code bloat.” —Estelle Weyl
-
-
-
TOFU? ... eye eye!
Wurde beim "antworten" reingemacht, hab ich drin gelassen, dacht sollte so. Ist nicht ganz übersichtlich, wenn man das erste mal hier ist, muss mich erst ein bisschen zurecht finden ;-)
-
Hallo,
TOFU? ... eye eye!
gut, danke. Solche Komplett-Zitate sind halt lästig.
Wurde beim "antworten" reingemacht, hab ich drin gelassen, dacht sollte so.
Eigentlich nicht. Das ist eher als Komfort-Merkmal gedacht, so dass man einzelne Passagen stehen lässt und sich dann direkt darauf bezieht, während man Überflüssiges rauswirft.
Ist nicht ganz übersichtlich, wenn man das erste mal hier ist
Ich glaube, das ist einfach nur Gewöhnungssache. Ich habe auch Mühe, mich in manchen anderen Foren zurechtzufinden.
So long,
Martin--
Es gibt eine Theorie, die besagt, dass das Universum augenblicklich durch etwas noch Komplizierteres und Verrücktes ersetzt wird, sobald jemand herausfindet, wie es wirklich funktioniert. Es gibt eine weitere Theorie, derzufolge das bereits geschehen ist.
- (frei übersetzt nach Douglas Adams) -
Hallo
... eye eye!
Nicht „Auge, Auge“ sondern ja ja. Also: „aye“
Wikipedia dazu auf der Übersichtsseite zu „Aye“: „ja (altenglisch, legislativ oder in der Seemannsprache) (to be, or not to be, aye there's the point) Hamlet, 1st edition“
Wurde beim "antworten" reingemacht, hab ich drin gelassen, dacht sollte so.
Nimm zukünftig bitte alle jene Teile aus dem Zitat heraus, auf die du nicht eingehen willst und alles wird gut. :-)
Tschö, Auge
PS: Ahem, ich liebe dieses Tag. :-)
--
Wo wir Mängel selbst aufdecken, kann sich kein Gegner einnisten.
Wolfgang Schneidewind *prust*-
HAHA! :-D Stimmt. Habe ich auch nur auf die schnell gegooglet und mir die Ergebnisse aber nicht richtig angeschaut, denn er findet da tasächlich was: Linkbeschreibung
... hab mich aber schon auch gewundert, dass das so geschrieben wird. So ist das, wenn mans immer eilig hat und nicht richitg hin guckt.
-
-
-
-
-
-
Hej kyan,
Du möchtest den Checkbox-Hack...
Marc
-
Servus!
Hej kyan,
Du möchtest den Checkbox-Hack...
Im Wiki: Checkbox-Hack
Herzliche Grüße
Matthias Scharwies
--
Es gibt viel zu tun: ToDo-Liste-
Hi!
Passend wäre doch
https://wiki.selfhtml.org/wiki/HTML/Interaktiv/details
https://wiki.selfhtml.org/wiki/JavaScript/Anwendung_und_Praxis/zug%C3%A4ngliches_Akkordeon
Warum sollte man Checkboxen "hacken" und zweckentfremden wenn es in HTML5 etwas passendes gibt.
Markupper
-
Hej Markupper,
https://wiki.selfhtml.org/wiki/HTML/Interaktiv/details
https://wiki.selfhtml.org/wiki/JavaScript/Anwendung_und_Praxis/zug%C3%A4ngliches_Akkordeon
Warum sollte man Checkboxen "hacken" und zweckentfremden wenn es in HTML5 etwas passendes gibt.
Wenn es ein Akkordeon werden soll, ist das auf jeden Fall zu bevorzugen. Weil die Browser-Unterstützung noch nicht perfekt ist, an das Polyfill denken...
Die Browser, die das noch nicht unterstützen, müssen leider noch händisch mit WAI-ARIA gefüttert werden.
Marc
-
Wenn es ein Akkordeon werden soll, ist das auf jeden Fall zu bevorzugen.
Wenn ich kyan richtig verstehe soll es kein Akkordeon werden. Scheidet 'details' damit aus? Ich finde nicht. kyan's Problem sollte sich mit 'details/summary' lösen lassen, oder? Etwas Styling ist nötig. Wahrscheinlich sogar weniger als beim "Checkbox Hack".
Weil die Browser-Unterstützung noch nicht perfekt ist, an das Polyfill denken...
Ja. Auf Github gibt es die neueste Version: https://github.com/mathiasbynens/jquery-details
Die Browser, die das noch nicht unterstützen, müssen leider noch händisch mit WAI-ARIA gefüttert werden.
Das sollte ein guter Polyfill mitbringen. Dann ist es auch barrierefrei, im Gegensatz zum "Checkbox Hack".
Markupper
-
-
-
-