Css per JS updaten

[Klaus]

Hi,

meine neue Klasse wird dem Element leider nicht übergeben, ich sehe nicht, warum das so ist.

Fehlerkonsole hilft leider auch nicht weiter.

  
$('input[id=\"test123\"]').focus(function() {  
$( this ).addClass(\"ui-widget-content_neu\");  
}  

Klaus

[1UnitedPower]

Meine Herren!

meine neue Klasse wird dem Element leider nicht übergeben, ich sehe nicht, warum das so ist.

Fehlerkonsole hilft leider auch nicht weiter.

Und das Syntax-Highlighting des Forums?

Die Backslashes müssen raus, alle. Und am Ende fehlt eine schließende Klammer. Syntax-Fehler sollten eigentlich in der Fehlerkonsole auftauchen.

Für $('input[id=test123]') bietet sich der schönere id-Selektor an: $('#test123')

Insgesamt ergibt sich:

$('#test123').focus(function() {  
   $( this ).addClass('ui-widget-content_neu');  
});

[Klaus]

Hi,

Und das Syntax-Highlighting des Forums?

Was meinst Du damit genau?

Die Backslashes müssen raus, alle. Und am Ende fehlt eine schließende Klammer. Syntax-Fehler sollten eigentlich in der Fehlerkonsole auftauchen.

Sorry, ich hatte den Code aus meinem php script kopiert. Das gilt auch für die fehlende Klammer.
Im Grunde stand die komplette (und auch funktionierende) Funktion bereits und ich habe nur die "addClass-Zeile hinzugefügt.

Hier der korrekte Code:

  
$('input[id="test123"]').focus(function() {  
...  
$( this ).addClass("ui-widget-content_neu");  
});  

Leider wird aber nach wie vor die Klasse "ui-widget-content" genommen. Genau die wollte ich überschreiben.

Klaus

[1UnitedPower]

Meine Herren!

Und das Syntax-Highlighting des Forums?

Was meinst Du damit genau?

Durch Syntax-Highlight werden Syntax-Fehler offensichtlich. Aber es hat sich ja inzwischen rausgestellt, dass das nur Artefakte von einem Code waren, der in PHP stand.

Die Backslashes müssen raus, alle. Und am Ende fehlt eine schließende Klammer. Syntax-Fehler sollten eigentlich in der Fehlerkonsole auftauchen.

Sorry, ich hatte den Code aus meinem php script kopiert. Das gilt auch für die fehlende Klammer.

Passiert ;)

Leider wird aber nach wie vor die Klasse "ui-widget-content" genommen. Genau die wollte ich überschreiben.

Was meinst du damit? Schau dir mal das Element mit dem Element-Inspektor an, "Rechtsklick->Element Untersuchen" und schau dir genau an, welche Klassen das Element zu welchem Zeitpunkt hat.

Da du von "überschreiben" sprichst, kann ich nur mutmaßen, dass du die alte Klasse auch entfernen möchtest:

$( this ).removeClass('ui-widget-content');

[Klaus]

Hallo,

Da du von "überschreiben" sprichst, kann ich nur mutmaßen, dass du die alte Klasse auch entfernen möchtest:

$( this ).removeClass('ui-widget-content');

Aha, danke.

Das wußte ich nicht. Ich dachte, überschreiben enthielte zuvoriges überschreiben :-)

Nochmal bedankt, Klaus

[Gunnar Bittersmann]

@@Klaus:

nuqneH

Das wußte ich nicht. Ich dachte, überschreiben enthielte zuvoriges überschreiben :-)

Wenn die Methode Klassen überschreiben würde, hieße sie wohl overwriteClass(). Tut sie aber nicht, sie heißt addClass() und macht genau das, was sie verspricht. (Hätte man mit geringen Englischkenntnissen drauf kommen können.)

Du bist die Antwort schuldig geblieben, warum du bei focus die Klasse ändern willst. Mir erscheint das ebenso wie MudGuard unsinnig. Was ist dein Ziel?

Qapla'

[Klaus]

Wenn die Methode Klassen überschreiben würde, hieße sie wohl overwriteClass(). Tut sie aber nicht, sie heißt addClass() und macht genau das, was sie verspricht. (Hätte man mit geringen Englischkenntnissen drauf kommen können.)

Warum so ungehalten bis -freundlich? Habe ich Dir etwas getan?

Du bist die Antwort schuldig geblieben, warum du bei focus die Klasse ändern willst. Mir erscheint das ebenso wie MudGuard unsinnig. Was ist dein Ziel?

Habt beide recht. Es ist unsinnig, eigentlich hätte ich über die Selektion des Elements das erreichen sollen, was ich hier über den focus mache.
Es ging um ein ui-widget, das für diese Seite die falsche Hintergrundfarbe hat. Für andere Seiten hat das widget aber die korrekte Hintergrundfarbe. Und da ich keinen passenden Selektor finde, der für dieses Eingabefeld den Style des ui-widget definiert, dachte ich, ich ändere es einfach beim focus.

Klaus

[Gunnar Bittersmann]

@@Klaus:

nuqneH

Warum so ungehalten bis -freundlich? Habe ich Dir etwas getan?

Oh, da hab ich doch glatt den expliziten Smiley vergessen, der bei „Hätte man mit geringen Englischkenntnissen drauf kommen können“ schon implizit dabei ist.

… den Style des ui-widget definiert, dachte ich …

Wenn du das nächste bei Darstellung an JavaScript/jQuery denkst, denk nochmal! ;-)

Damit bist du i.a.R. auf der bösen Seite der Macht.

Qapla'

[Klaus]

Oh, da hab ich doch glatt den expliziten Smiley vergessen, der bei „Hätte man mit geringen Englischkenntnissen drauf kommen können“ schon implizit dabei ist.

Sicher, mein Fehler. Sehe ich ganz genau so.

… den Style des ui-widget definiert, dachte ich …

Wenn du das nächste bei Darstellung an JavaScript/jQuery denkst, denk nochmal! ;-)

Damit bist du i.a.R. auf der bösen Seite der Macht.

???

Klaus

[Gunnar Bittersmann]

@@Klaus:

nuqneH

Wenn du das nächste bei Darstellung an JavaScript/jQuery denkst, denk nochmal! ;-)

???

Darstellungsangaben sollten mit CSS gemacht werden – ohne JavaScript.

Wer meint, JavaScript dafür zu benötigen, weiß in vielen Fällen nicht, was mit CSS möglich ist. (Polyfills für ältere Browser ausgenommen.)

Qapla'

[Klaus]

Darstellungsangaben sollten mit CSS gemacht werden – ohne JavaScript.

Wer meint, JavaScript dafür zu benötigen, weiß in vielen Fällen nicht, was mit CSS möglich ist. (Polyfills für ältere Browser ausgenommen.)

Du bist also der Meinung, addClass, toggleClass, removeClass und Konsorten wären Unfug?
Das mag für viele Anwendungsfälle gelten, aber doch nicht so allgemein ausgedrückt...

Klaus

[Gunnar Bittersmann]

@@Klaus:

nuqneH

Darstellungsangaben sollten mit CSS gemacht werden – ohne JavaScript.

Du bist also der Meinung, addClass, toggleClass, removeClass und Konsorten wären Unfug?

Nein, bin ich nicht. Klassen im HTML/DOM sind keine Darstellungsangaben.

Es wäre aber Unfug, bei focus mit JavaScript Klassen zu ändern, wo es doch die Pseudoklasse :focus schon gibt. Es sei denn, die geänderte Klasse soll bei blur (d.h. wenn das Element nicht mehr fokussiert ist) weiterhin bestehen bleiben.

Wenn es allerdings um die Darstellung geht, sollte sich ein durch :focus geänderter Stil mit ewig laufender transition auch erhalten lassen.

Qapla'

[Klaus]

Es wäre aber Unfug, bei focus mit JavaScript Klassen zu ändern, wo es doch die Pseudoklasse :focus schon gibt. Es sei denn, die geänderte Klasse soll bei blur (d.h. wenn das Element nicht mehr fokussiert ist) weiterhin bestehen bleiben.

Na aber diesen Teil der Fragestellung haben wir doch hinlänglich besprochen.

Klaus

[Gunther]

Hi!

Hier der korrekte Code:

$('input[id="test123"]').focus(function() {
...
$( this ).addClass("ui-widget-content_neu");
});

>   
> Leider wird aber nach wie vor die Klasse "ui-widget-content" genommen. Genau die wollte ich überschreiben.  
  
Das Element hat also bereits ein Class-Attribut mit dem Wert "ui-widget-content"?  
Dann sollte es nach deinem Aufruf eigentlich beide Klassennamen enthalten.  
  
"Überschreiben" funktioniert in der Form (alt entfernen, neu hinzufügen):  
~~~javascript
$( "#test123" ).removeClass( "ui-widget-content" ).addClass( "ui-widget-content_neu" );  

Gruß Gunther

[Klaus]

Hallo,

Das Element hat also bereits ein Class-Attribut mit dem Wert "ui-widget-content"?

Ja genau. So ist es.

Dann sollte es nach deinem Aufruf eigentlich beide Klassennamen enthalten.

"Überschreiben" funktioniert in der Form (alt entfernen, neu hinzufügen):

Jups. Das habe ich nicht gewußt.

$( "#test123" ).removeClass( "ui-widget-content" ).addClass( "ui-widget-content_neu" );

>   
  
Dank Dir, Gunther  
  
Klaus  

[Gunther]

Hallo!

"Überschreiben" funktioniert in der Form (alt entfernen, neu hinzufügen):

Jups. Das habe ich nicht gewußt.

Dafür ist das Forum ja da ...! ;-)

Und dann gibt es noch .toggleClass().
Damit kannst du wechselweise eine oder mehrere Klassen hinzufügen, bzw. entfernen.

Gruß Gunther

[MudGuard]

Hi,

Insgesamt ergibt sich:

$('#test123').focus(function() {

$( this ).addClass('ui-widget-content_neu');
});

  
Und daraus ergibt sich die Frage: wozu wird die zusätzliche Klasse benötigt?  
  
#test123:focus  
  
sollte als Selektor doch schon reichen - es geht ja (laut subject) um CSS ...  
Warum also per Javascript?  
  
  
cu,  
Andreas

-- 
[Warum nennt sich Andreas hier MudGuard?](http://MudGuard.de/)  
[O o ostern ...](http://ostereier.andreas-waechter.de/)  
  
Fachfragen per Mail sind frech, werden ignoriert. Das Forum existiert.  

[Tobias Hahner]

Hallihallo!

Und daraus ergibt sich die Frage: wozu wird die zusätzliche Klasse benötigt?

Hier wird anscheinend schon JQuery UI inklusive aller dazugehörigen CSS-Ressourcen eingebunden, also warum nicht nutzen?

#test123:focus

sollte als Selektor doch schon reichen - es geht ja (laut subject) um CSS ...
Warum also per Javascript?

Um Redundazen im CSS zu vermeiden und das Erscheinungsbild konsistent zu halten, falls sich was ändert.
Hier soll anscheinend ein Element in ein Widget verwandelt werden, sobald es den Focus erhält. Das ganze Widget-Gedöns basiert auf JQuery UI, macht also (höchstwahrscheinlich) sowieso nur mit Javascript Sinn.
Also kann man auch die Transformation in ein Widget ruhig direkt mit JS machen.

Beste Grüsse,
    Tobias Hahner

[1UnitedPower]

Meine Herren!

Und daraus ergibt sich die Frage: wozu wird die zusätzliche Klasse benötigt?
Hier wird anscheinend schon JQuery UI inklusive aller dazugehörigen CSS-Ressourcen eingebunden, also warum nicht nutzen?

Die hinzuzufügende Klasse ui-widget-content_neu gehört nicht zu jQuery-UI. Erkennbar an dem Suffix _neu. Ich denke der Rest deiner Antwort erübrigt sich damit auch.

[Tobias Hahner]

Hallihallo!

Die hinzuzufügende Klasse ui-widget-content_neu gehört nicht zu jQuery-UI. Erkennbar an dem Suffix _neu. Ich denke der Rest deiner Antwort erübrigt sich damit auch.

Der Punkt geht an Dich, ich hätte genauer lesen sollen.

Beste Grüsse,
    Tobias Hahner