HTML +CSS+JS - Grafik in INPUT-Button manipulieren

cumulonimbus8 · 16. Dezember 2014

Hallo!

Man hat mir wieder mal ein Problem vor die Tür gewälzt und ich weiß nicht ob das überhaupt innerhalb der Zwänge derer ich unterliege zu lösen geht; wenigstens innerhalb vernünftigen Aufwands.

Vorher wurde einfach eine Grafik (die welche als Submit-Element fungierte) über eine Timer-function per JS getauscht (und reaktiviert). Das war einfach zu machen.

Jetzt habe ich keine Grafik sondern ein gewöhnliches INPUT das direkt von einer globalen CSS abhängt. Diese legt bescheiden nur Farben und den Eckenradius fest.
Merke: würde ich die hier nötigen Dinge in der globalen CSS ergänzen kommt garantiert die nächste Extrawurst die sich ebenso garantiert mit einer vorigen Extrawurst beißt. Wehret den Anfängen…

Meine Idee lautet, im HTML dieses INPUT mit anderen Farben auszustatten (OK, schon erledigt; dito der Text) und im Besonderen ein Grafik'chen einzubauen das ein Warten (während des Timers) optisch hervorhebt. Wenn der JS-Timer abgelaufen ist wäre es am schönsten einfach ›auf Null‹, also die CSS-Vorgaben, ›herunterzufallen‹; es sieht wohl so aus, dass ich diese einzeln (im der Timer-JS-Code) nachbilden muss - oder kann man Zuweisungen auf ›leer‹ setzen, sodass die CSS-Einstellungen greifen, ohne diese kennen zu müssen? (Mit Pech bekomme ich nämlich eine lokale CSS verordnet und wenn ich da globale Werte anbringen will - gar nicht dran denken.)

Ich spreche CSS nicht so gut um selbst mit «Tochterelementen» (Selektoren heißen die wohl?) zu hantieren mit denen das möglicherweise ganz einfach geht. Wenn ich die globalen CSS-Vorgaben einfach so, bzw. um solches, lokal erweitern kann wäre das natürlich praktisch.
Eine Grafik für den Button in CSS vorzugeben habe ich schon als Code für einen primitiven Test vorliegen; wie ich sie mit JS ändere, lösche, oder gar einfüge weiß ich nicht (wenigstens kenne ich den Code der das macht nicht). Ich bin zu blöd oder zu schlau Google mit dem zu füttern was es gerne hätte.
Frage bleibt, ob sich Aufwände rechnen.

CN8

Henni · 16. Dezember 2014

Es tut mir leid mir ist nicht ganz klar was du überhaupt haben willst. Wenn du so etwas wie einen Spinner im INPUT feld (beim nachladen odg.) haben willst wäre soetwas eine Möglichkeit http://stackoverflow.com/questions/12837335/how-to-display-loading-spinner-in-a-textbox-on-clicking-of-a-button Wenn es das nicht ist würden 'screenshots' (mockups) helfen um zu verstehen was du willst.

lg, Heli

Daaron · 16. Dezember 2014

cumulonimbus8 schrieb:
Jetzt habe ich keine Grafik sondern ein gewöhnliches INPUT das direkt von einer globalen CSS abhängt. Diese legt bescheiden nur Farben und den Eckenradius fest.
Merke: würde ich die hier nötigen Dinge in der globalen CSS ergänzen kommt garantiert die nächste Extrawurst die sich ebenso garantiert mit einer vorigen Extrawurst beißt. Wehret den Anfängen…

Aber genau dafür ist CSS da, und genau das soll man NICHT mit HTML machen.
HTML = pures semantisches Markup
CSS = Optik
JS = Interaktivität und die Teile der Optik, die reines CSS nicht kann.

Also gib dem Knopf eine zusätzliche Klasse mit, die ihn und ähnlich gelagerte Knöpfe spezifisch nach deinen Wünschen umgestaltet.

...und im Besonderen ein Grafik'chen einzubauen das ein Warten (während des Timers) optisch hervorhebt. Wenn der JS-Timer abgelaufen ist wäre es am schönsten einfach ›auf Null‹, also die CSS-Vorgaben, ›herunterzufallen‹; es sieht wohl so aus, dass ich diese einzeln (im der Timer-JS-Code) nachbilden muss - oder kann man Zuweisungen auf ›leer‹ setzen, sodass die CSS-Einstellungen greifen, ohne diese kennen zu müssen?

Nein, du kannst Werte nicht blind resetten. Sobald du über JavaScript an Styles herum pfuschst, landen diese als Inline-Styles im jeweiligen Element und müssen auch manuell auf den Ausgangswert zurück gesetzt werden.
Wenn z.B. im CSS eine Margin von 5px gesetzt ist, du per JS diese erst auf 10px erhöhst und dann zurück willst, dann kannst du weder "entferne Margin" sagen, noch auf margin:auto; zurück gehen. Du kannst evtl. auf Inherit setzen, das ist aber hochgradig unzuverlässig.

Was du aber machen kannst:
Du schreibst eine CSS-Klasse, in der du deine gestalterischen Wünsche verwirklichst. Jetzt fügst du per JS dem Element die Klasse hinzu oder entfernst sie. Wenn du halbwegs clever bist, dann verwendest du eines der gängigen Frameworks wie Mootools oder jQuery, und kannst Elementen Klassen kinderleicht hinzufügen, entfernen oder sie "togglen". Bist du hingegen wahlweise Purist oder schlicht nicht clever, dann darfst du selbst zäh über den Klassen-Array iterieren... Eine Qual.

Ich spreche CSS nicht so gut um selbst mit «Tochterelementen» (Selektoren heißen die wohl?) zu hantieren mit denen das möglicherweise ganz einfach geht.

Also ein paar Grundkenntnisse was den Aufbau und die Wertigkeit von Selektoren angeht solltest du dir schon aneignen, bevor du überhaupt irgend etwas in dem Bereich machst.
Ich kann mich auch düster daran erinnern, dir genau das schon mehrfach gesagt zu haben. Du siehst: ich hatte Recht. 99% deiner Probleme resultieren daraus, dass du einfach nicht auf mich hörst. Also mach die Ohren auf und stell dich nicht wieder quer.

Wenn ich die globalen CSS-Vorgaben einfach so, bzw. um solches, lokal erweitern kann wäre das natürlich praktisch.

Global/Lokal... da rollen sich mir die Fußnägel auf.
Lokal in diesem Kontext könnte bedeuten:
- die Seite, auf die sich das bezieht, bindet ein zusätzliches Stylesheet ein. Machbar, manchmal sinnvoll, üblicherweise aber ineffizient
- die Seite enthält im <head> zusätzlichen CSS-Code: ziemlich dämlich. Macht nur Ärger mit der Wertigkeit der Selektoren
- das Element ansich enhält Inline-Styles: verdammt bescheuert. Inline-Styles kann man quasi gar nicht mehr überlagern. Inline-Styles brechen dir das Genick.

Schnapp dir entweder ein zusätzliches CSS-Dokument, dass du im <head> mit referenzierst, oder schreib (der Ladezeit zuträglich) direkt in der Master-CSS herum. Füge nach deinen Bedürfnissen Selektoren (hier primär Klassen) und deren Styles hinzu.

Speedy. · 17. Dezember 2014

Daaron schrieb:
Bist du hingegen wahlweise Purist oder schlicht nicht clever, dann darfst du selbst zäh über den Klassen-Array iterieren... Eine Qual.

Tss... dafür gibt es doch das unheimlich gute classList, in welchem pures JavaScript (zumindest teilweise) wieder Spaß macht

(es gibt sogar ein Polyfill für IE9, für den Fall das man den noch unterstützen muss)

Daaron · 17. Dezember 2014

Oh, den kenn ich noch gar nicht. Aber im Endeffekt braucht man doch eh oftmals noch viel mehr Funktionen der üblichen Frameworks, z.B. die wirklich flexiblen Selektor-Engines, das deutlich vereinfachte DOM Traversal, anständige Array-Iterationen,...

cumulonimbus8 · 17. Dezember 2014

Aber genau dafür ist CSS da, und genau das soll man NICHT mit HTML machen.

Dann bau in einen Trabbi mal ABS und Airbags ein - samt NCAP 5-Sterne!

Was man soll, was du tätest und ließest, selbst was ich täte und ließe und das was ich vor die Tür gewäzlt bekommen habe sind 4 Paar Schuhe. Und nur diese 4. ist von Interesse.

Ich brauche für meine Probleme keinen Dalì der fleißig malt, keinen Foster der etwas entwirft sondern einen MacGyver der aus dem was er hat was zaubert.

Also gib dem Knopf eine zusätzliche Klasse mit, die ihn und ähnlich gelagerte Knöpfe spezifisch nach deinen Wünschen umgestaltet.

Hrgnchml - sage mir nicht was, sag mir wie! Ich hab nicht so mit dem Encoden, dafür habe ich zu viele Sprachen um mich rum.
Und wenn muss des lokal passieren, nicht global. Geht das nicht kann ich diese Idee knicken.

Nein, du kannst Werte nicht blind resetten

Mist… Das verkompliziert die Lage. Muss ich wohl zuerst die Werte auslesen, ändern, und zurückbringen. Das hatte ich schon mal, aber in einer lieblicheren Umgebung.

Du schreibst eine CSS-Klasse, in der du deine gestalterischen Wünsche verwirklichst.

Sage mir nicht was, sag mir wie!

99% deiner Probleme resultieren daraus, dass du einfach nicht auf mich hörst.

Sag meinem Chef er soll auf dich hören und alles umstellen und zig alte Dinge einzeln nachpflegen. Wenn du das dann noch bezahlst - dann darfst du solch Sprüche rausgeben!
Ich gebe mit meiner Frage die Spielregeln vor (die mir vorgegeben sind). Wenn eine Antwort «unmöglich» lautet dann lautet sie «unmöglich» und dieses ‹unmöglich› kann ich dann verkaufen. Ein «das muss ganz anders sein» kann ich nicht verkaufen.

Lokal in diesem Kontext könnte bedeuten:

Lokal ist in genau dieser einen Datei. → «Meine Idee lautet, im HTML». Lesen bildet.
- die Seite, auf die sich das bezieht, bindet ein zusätzliches Stylesheet ein. Machbar, manchmal sinnvoll, üblicherweise aber ineffizient → Zusätzliche Externa täte ich gern vermeiden…
- die Seite enthält im <head> zusätzlichen CSS-Code: ziemlich dämlich. Macht nur Ärger mit der Wertigkeit der Selektoren → da das andere Seiten nicht anficht ist es völlig wumpe wie genial oder dämlich das für eine große Website ist. Wichtig ist, dass es hier zum Ziel führt.
- das Element ansich enhält Inline-Styles: verdammt bescheuert. Inline-Styles kann man quasi gar nicht mehr überlagern. Inline-Styles brechen dir das Genick. → nicht unbedingt meine Entscheidung. Also per JS manipulieren = viel Aufwand für kleinen Effekt…
Beantworte du mir doch mal die Frage von Cheffe und Kollegen: „Aber das ging doch früher!“. Viel Spaß. Bie der Antwort und bei der Lösung.

Schnapp dir entweder ein zusätzliches CSS-Dokument, dass du im <head> mit referenzierst, oder schreib (der Ladezeit zuträglich) direkt in der Master-CSS herum. Füge nach deinen Bedürfnissen Selektoren (hier primär Klassen) und deren Styles hinzu.

Das würde das globale Prinzip sprengen - und ich könnte gleich auf eine lokale Kopie wechseln… Wäre mir auch lieber…
Nur wiederum - sage mir nicht was, sag mir wie!

@Henni
Bitte mit JQuery nicht noch komplizierter. CSS reicht mir da schon völlig um mich in den Möglichkeiten zu verlaufen.

Ein einfaches Beispiel mit Selektoren oder primären Klassen oder was-auch-immer, das eine (ich kann nicht dafür oder dagegen) <INPUT Type="submit" id="ContinueButton" Value="Text-auf-demButton" … > unter externer CSS-Vorgabe

Code:

input[type=submit]{
 border-radius:4px;
 border:0;
 min-width:20px;
	color:ffffff;
 height:25px;
 background:#0E0D8D;
}

(Ja, da fehlen die Dinge für ältere Browser wie ‹-moz-linear› usw.)
nach bekannter «setTimeout("FunktionWarten()",15000);» den Text ändert und während der Wartezeit von mir aus eine ausgegraute Taste mit schwarzer Schrift darstellt wäre Schritt 1.
Schritt 2 wäre eine Grafik der Taste zuzurodnen, und zwar im INPUT-Tag, die dann in FunktionWarten() - wo die Textänderung abliefe - entfernt würde.
Schritt 3, widerwillig, wäre noch eine JS die auf OnLoad reagiert, die o.g. ›Standards‹ des Buttons in Variablen liest, sie entsprechend ändert (Ausgrauen…) um dann in FunktionWarten() alles zurückzuschreiben.

Punkt ist, dass ich die benutzte CSS nicht kenne wenn ich das auf Standard zurückrudere, denn all dieser Code der hinzugefügt werden muss muss neutral sein. Mit anderne Worten: täte ich eine globale CSS ändern müsste ich dann auch den zurücksetzcode ändern, und solche Verdopplungen sind immer fehelranfälig.

CN8

Madman1209 · 17. Dezember 2014

Hi,

sage mir nicht was, sag mir wie!

Jetzt muss ich doch mal dreist fragen, nachdem das schon der x-te Thread von dir ist, in dem du so etwas schreibst: wieso kriegst du bitte immer solche Aufgaben, wenn du sie nicht lösen kannst? Wäre es nicht sinnvoller, das jemanden machen zu lassen, der weiß wie es geht?

Ist nicht böse gemeint oder so, aber in so gut wie jedem Thread von dir läuft es darauf raus, dass du im Job eine Aufgabe in der Webentwicklung kriegst, von der du absolut nicht weißt, wie man sie lösen kann. Bist du sicher der richtige Ansprechpartner bei euch in der Firma?

VG,
Mad

cumulonimbus8 · 17. Dezember 2014

Jetzt muss ich doch mal dreist fragen, nachdem das schon der x-te Thread von dir ist, in dem du so etwas schreibst: wieso kriegst du bitte immer solche Aufgaben, wenn du sie nicht lösen kannst? Wäre es nicht sinnvoller, das jemanden machen zu lassen, der weiß wie es geht?

Weil ich im Gegensatz zu externen Experten nichts koste.
Weil anderen plötzlich Ideen sprießen die an einem eingefahrenen Räderwerk nichts ändern dürfen, aber dafür immer neues fordern.

Weil man einfach in den Tag hinein fordert ohne Dinge mal ein wenig zu kapieren wie sie ticken, Warnungen und Mahnung wiederholt sehr erfolgreich verdrängen, aber dann muss es gestern funktionieren.
Und währen dich diese gestern anpacke kommt die nächste Abteilung und braucht dieses, die andere jenes (und ich was zu essen…)

Wenn es eine VHS-Kurs gäbe der mal ausführlich genug solche adaptiven und nicht starren CSS-Operationen lehrte würde ich den gerne besuchen. Dito JS. Aber den gibts nicht. Lehrbücher? Fehlanzege. Auch Google liefert Tonnen an Standardmüll [habe genau jetzt ein tolles Beispiel was mit meinem Fall zu tun hat vor mir drehe fast durch] der nicht passt.

Deswegen frage ich Menschen, ein Forum, nach Lösungen (und kurzfristige wenns geht) wie man das überhaupt mal anpacken kann. Erfahrungswerte, knappe Bespiele für den Praktiker an die der anknüpfen kann. →

#@Daaron
Erspare mir deine Vorträge wenn du nicht auch eine Codezeile, ein Sysntaxelement angeben willst das mir konkret hilft.
Mach ich, wenn die Kohle stimmt.... → was willst du dann noch ein Forum wenn du nicht helfen willst???
Wenn du also nicht gerade verdammt tiefe Taschen hast, dann wirst du mit "Was" leben müssen und dir das "Wie" selbst erarbeiten. → Du hast nicht kapiert was ein Forum ist. Was kommt vom Fragenden, Wie vom Antwortenden. Danke im Namen aller Fragenden für diese schallende Ohrfeige.

Sag mir nicht dass es in SelfHTML steht (das kann ich mir einigermaßen gut denken), sag mir wo das was du meinst steht. Dann kann ichs auch finden.

CN8

Midnight Sun · 17. Dezember 2014

Ein Forum ist dazu da, um anderen zu helfen!
Es steht aber nirgendwo geschrieben, dass man dem, der etwas fragt oder sucht, die Lösung direkt und ohne Umweg auf den Tisch legen muss.

Ciraxis · 17. Dezember 2014

Auf der ersten Seite bei Google mit Javascript add class
http://www.mzcart.com/javascript-how-to-addremove-css-class-from-a-dom-element/
mit dem link von henni kannste es dir dann auch zusammen reimen. Das ist jetzt kein Hexenwerk. Und sollte sogar als Neuling in maximal 15 Minuten gesucht sein.

http://stackoverflow.com/questions/22270664/remove-class-from-elements-in-pure-javascript
http://jaketrent.com/post/addremove-classes-raw-javascript/

Daaron · 17. Dezember 2014

cumulonimbus8 schrieb:
Wenn es eine VHS-Kurs gäbe der mal ausführlich genug solche adaptiven und nicht starren CSS-Operationen lehrte würde ich den gerne besuchen. Dito JS. Aber den gibts nicht. Lehrbücher? Fehlanzege. Auch Google liefert Tonnen an Standardmüll [habe genau jetzt ein tolles Beispiel was mit meinem Fall zu tun hat vor mir drehe fast durch] der nicht passt.

http://www.vhs-ssoe.de/index.php?id...nn+mehr+-+jQuery+AJAX+und+Co+richtig+anwenden <- aber es gibt ja keine VHS-Kurse zu dem Thema, hm?

http://www.amazon.de/s/ref=nb_sb_noss?__mk_de_DE=ÅMÅŽÕÑ&url=search-alias=aps&field-keywords=css <- Hm. Bücher gibts also auch nicht? Galileo Books sollen z.B. verdammt gut sein und sind zum Teil sogar als OpenBook kostenlos online verfügbar.

Und die Beispiele, die Google ausspuckt, passen nicht haarklein auf dein Problem? Dann lerne doch mal bitte, wie du Lösung adaptierst. Das ist Grundlage in allen Berufen, nicht nur in der Webentwicklung. EIn Schweißer lernt z.B. auch nicht direkt, wie er einen Auspuff schweißt. Er lernt, wie er 2 Bleche zusammen schweißt und adaptiert daraus, wie man dieses Wissen auf einen Auspuff anwendet.

Deswegen frage ich Menschen, ein Forum, nach Lösungen (und kurzfristige wenns geht) wie man das überhaupt mal anpacken kann. Erfahrungswerte, knappe Bespiele für den Praktiker an die der anknüpfen kann. →

Und du hast zig Antworten erhalten. Dass du mit diesen Antworten nichts anfangen kannst oder willst liegt an einigen Dingen...
1.) Deine Fragestellungen sind jedes Mal absolut krude formuliert. Du faselst teilweise etwas von Ziegelsteinen, du vermischst Technologien wild und ohne Konzept,...
2.) Du zeigst einfach keine Eigeninitiative. Stichworte, die man dir gibt, werden rotzfrech mit "erklärs mir haarklein" beantwortet. Selbstverantwortliches Handeln ist Fehlanzeige.
3.) Du erwartest keine Hilfe, du erwartest, dass andere für dich unentgeltlich deine Arbeit machen.

Erspare mir deine Vorträge wenn du nicht auch eine Codezeile, ein Sysntaxelement angeben willst das mir konkret hilft.

Ich stoße dich in die richtige Richtung und, sobald ich bei dir detaillierte Fragen statt allgemeines "Löst das mal für mich!" sehe, gebe ich auch detaillierte Antworten.
Fakt ist aber: Niemand hier kann und wird deine Arbeit für dich erledigen. Das ist nicht das Prinzip, nach dem Foren arbeiten.

Sag mir nicht dass es in SelfHTML steht (das kann ich mir einigermaßen gut denken), sag mir wo das was du meinst steht.

http://lmgtfy.com/?q=selfhtml+css+selektoren
Oder erwartest du, dass ich für dich SelfHTML komplett durcharbeite, dir jede passende Zeile heraussuche und dir dann ein schönes vorgekautes Dokument liefere? Und ja, darauf erwarte ich jetzt eine ehrliche Antwort von dir.

Aber hey, damit du nicht vollkommen leer ausgehst: http://wiki.selfhtml.org/wiki/CSS/Selektoren/Attributselektor <- Das hier dürfte dir einiges erklären und dir, wenn du jetzt etwas kreativ denkst, sogar gleich noch die Lösung deines Problem liefern. Denk daran, was ich zum Thema <input disabled="disabled" ...> gesagt habe.

Suche

HTML +CSS+JS - Grafik in INPUT-Button manipulieren

cumulonimbus8

Fleet Admiral

Henni

Cadet 4th Year

Daaron

Fleet Admiral

Speedy.

Gast

Daaron

Fleet Admiral

cumulonimbus8

Fleet Admiral

Madman1209

Fleet Admiral

cumulonimbus8

Fleet Admiral

Midnight Sun

Commander

Ciraxis

Lieutenant

Daaron

Fleet Admiral

Ähnliche Themen