Klaus: Css per JS updaten

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

  1. 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');  
    });
    
    --
    “All right, then, I'll go to hell.” – Huck Finn
    1. 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

      1. 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');

        --
        “All right, then, I'll go to hell.” – Huck Finn
        1. 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

          1. @@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'

            --
            „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
            1. 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

              1. @@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'

                --
                „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
                1. 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

                  1. @@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'

                    --
                    „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
                    1. 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

                      1. @@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'

                        --
                        „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
                        1. 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

      2. 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

        1. 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  
          
          
          1. 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

    2. 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.  
      
      
      1. 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

        1. 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.

          --
          “All right, then, I'll go to hell.” – Huck Finn
          1. 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