XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   (X)HTML (http://xhtmlforum.de/forumdisplay.php?f=72)
-   -   Wie kann ich die Schaltflächen positionieren (http://xhtmlforum.de/showthread.php?t=73255)

Sabine1 30.05.2017 18:17

Wie kann ich die Schaltflächen positionieren
 
neulich bin ich auf das folgende Beispiel aufmerksam geworden

https://codepen.io/dimsis/pen/MJLZKp

Meiner Meinung nach wäre es vor allem bei einem sehr langen Text besser, wenn die beiden Schaltflächen bzw. Buttons oberhalb des Textes angezeigt werden.
Aber wie macht man das?
Denn im html-Code sind die beiden Schaltflächen ja nicht hinterlegt.

cloned 31.05.2017 08:46

Dafür sind sie im JS hinterlegt. Irgendwo müssen sie ja angegeben sein, sie können ja nicht aus dem nichts erscheinen ;)
Im JS hast du einen Teil //play button und einen //pause button, da sieht man, dass die Elemente mit appendChild angehängt werden. Diese Zeile einfach so anpassen, dass die buttons dort eingefügt werden, wo du es wünscht.

Sabine1 31.05.2017 10:24

Zitat:

Zitat von cloned (Beitrag 551073)
Dafür sind sie im JS hinterlegt. Irgendwo müssen sie ja angegeben sein, sie können ja nicht aus dem nichts erscheinen ;)
Im JS hast du einen Teil //play button und einen //pause button, da sieht man, dass die Elemente mit appendChild angehängt werden. Diese Zeile einfach so anpassen, dass die buttons dort eingefügt werden, wo du es wünscht.

Danke für deine Antwort.
Natürlich war mir klar, dass die Buttons in der JS hinterlegt sind, aber ich habe eben keine Ahnung, wie ich diese positionieren kann.
Wie muss ich denn die eine bestimmte Zeile anpassen? Wo kann ich denn dafür ein Beispiel finden?
Es funktioniert also nicht, dass man die Schaltflächen im html-Code Ergänzt und dass man diese dann per CSS positionieren kann?

cloned 31.05.2017 12:52

Sicher kannst du diese per CSS positionieren, sie werden ja per JS in den DOM-Baum eingefügt.
Wie du den Code ändern musst kann ich dir nicht sagen, da es davon abhängt, wo die Buttons dann seien sollen. $buttons ist die Variable, in der der die <buttons> gespeichert sind (ein <p> mit <button>play und <button>Pause)
Das wird am Ende des JS-Codes mit document.body.appendChild($buttons); an den body angehängt. Natürlich kannst du das frei an jeder anderen Stelle im Code anhängen. https://www.w3schools.com/jsref/met_...ppendchild.asp

Du kannst natürlich auch den Code der Buttons direkt im HTML einfügen und dann mit JS Eventhandler auf diese buttons setzen.

Sabine1 31.05.2017 15:54

Zitat:

Zitat von cloned (Beitrag 551076)
Sicher kannst du diese per CSS positionieren, sie werden ja per JS in den DOM-Baum eingefügt.
Wie du den Code ändern musst kann ich dir nicht sagen, da es davon abhängt, wo die Buttons dann seien sollen. $buttons ist die Variable, in der der die <buttons> gespeichert sind (ein <p> mit <button>play und <button>Pause)
Das wird am Ende des JS-Codes mit document.body.appendChild($buttons); an den body angehängt. Natürlich kannst du das frei an jeder anderen Stelle im Code anhängen. https://www.w3schools.com/jsref/met_...ppendchild.asp

Du kannst natürlich auch den Code der Buttons direkt im HTML einfügen und dann mit JS Eventhandler auf diese buttons setzen.

Vielen Dank für deine Antwort!
Werde mich daran versuchen

DeltaLeo 02.06.2017 15:32

Genau mit CSS
 
Hier was man machen kann ...

Code:

button {
  min-width: 120px;
  color: black;
  padding: 4px 6px;
  background-color: orange;
  margin: 10px 10px 10px 0px;
  border: 1px solid black;
  border-radius: 10px;
  cursor: pointer;
  outline: none;
}
button:hover {
  color: white;
  background-color: brown;
}

gruß Roland

Sabine1 03.06.2017 11:14

Zitat:

Zitat von DeltaLeo (Beitrag 551078)
Hier was man machen kann ...

Code:

button {
  min-width: 120px;
  color: black;
  padding: 4px 6px;
  background-color: orange;
  margin: 10px 10px 10px 0px;
  border: 1px solid black;
  border-radius: 10px;
  cursor: pointer;
  outline: none;
}
button:hover {
  color: white;
  background-color: brown;
}

gruß Roland


Vielen Dank Roland!

DeltaLeo 03.06.2017 11:25

Zitat:

Zitat von Sabine1 (Beitrag 551079)
Vielen Dank Roland!


sehr gerne Sabine!


Alle Zeitangaben in WEZ +2. Es ist jetzt 02:57 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2017, vBulletin Solutions, Inc.
Search Engine Friendly URLs by vBSEO 3.6.0
© Dirk H. 2003 - 2017