Karl: jQuery .css

Hallo,
ich möchte mit jQuery die Position mehrerer divs gleichzeitig ändern, so geht das, aber kann ich nicht mehrere Objekten in einem den gleichen Stil (z.B. 4px) zuweisen?

  
  
function changePos(){  
		$("#sline").css("left","auto");  
		$("#sline").css("right","4px");  
		$("#copyright").css("left","auto");	  
		$("#copyright").css("right","4px");  
		$("#navbutgroup").css("right","auto");			  
		$("#navbutgroup").css("left","4px");  
}	  
  

Karl

  1. Hi,

    ich möchte mit jQuery die Position mehrerer divs gleichzeitig ändern, so geht das, aber kann ich nicht mehrere Objekten in einem den gleichen Stil (z.B. 4px) zuweisen?

    Du kannst mehrere Elemente auf einmal *selektieren* …

    MfG ChrisB

    --
    RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?
    1. Du kannst mehrere Elemente auf einmal *selektieren* …

      und mehrere css-eigenschaften gleichzeitig setzen (oder chainen)

      also statt

      $('#foo').css('bar', 'baz');  
      $('#foo').css('qux', 'quux');
      

      notiert man

      $('#foo').css('bar', 'baz')  
               .css('qux', 'quux');
      

      oder

      $('#foo').css({  
        'bar' : 'baz',)  
        'qux' : 'quux'  
      });
      
  2. Hallo,
    ich möchte mit jQuery die Position mehrerer divs gleichzeitig ändern, so geht das, aber kann ich nicht mehrere Objekten in einem den gleichen Stil (z.B. 4px) zuweisen?

    function changePos(){
    $("#sline").css("left","auto");
    $("#sline").css("right","4px");
    $("#copyright").css("left","auto");
    $("#copyright").css("right","4px");
    $("#navbutgroup").css("right","auto");
    $("#navbutgroup").css("left","4px");
    }

    
    >   
    > Karl  
      
    $("#sline, #copyright, #navbutgroup").css("left","auto");
    
  3. @@Karl:

    nuqneH

    ich möchte mit jQuery die Position mehrerer divs gleichzeitig ändern

    Das Vernünftigste ist meist, mit JavaScript überhaupt keine CSS-Eigenschaften zu ändern; auch wenn das „schwer ist, ist in die Köpfe der Menschen zu bringen“.

    Vergiss, dass es sowas wie css() oder show() oder hide() in jQuery gibt!

    Eine Klasse für ein Elternelement – bspw. body – gesetzt oder weggenommen (hier leistet jQuery mit addClass() und removeClass() oder einfach mit toggleClass() gute Dienste), und im Stylesheet steht

    .~~~css changed-layout #sline,
    .changed-layout #copyright
    {
      left: auto;
      right: 4px;
    }

    .changed-layout #navbutgroup
    {
      right: auto;
      left: 4px;
    }

      
    Wobei für 'changed-layout' eine sinnvollere Bezeichnung zu wählen ist.  
      
    Qapla'
    
    -- 
    Wer möchte nicht lieber durch Glück dümmer als durch Schaden klüger werden? (Salvador Dalí)
    
    1. Das Vernünftigste ist meist, mit JavaScript überhaupt keine CSS-Eigenschaften zu ändern; auch wenn das „schwer ist, ist in die Köpfe der Menschen zu bringen“.

      Vergiss, dass es sowas wie css() oder show() oder hide() in jQuery gibt!

      show/hide oder slideUp/slideDown und Konsorten ändern aber CSS-Eigenschaften :)

      Mit Bordmitteln lassen sich Animationen mit Klassen in jQuery nicht umsetzen - aber mit jQuery UI lässt sich auch addClass oder removeClass animieren - oder aber man nutzt das animateToClass-Plugin.

      1. @@suit:

        nuqneH

        show/hide oder slideUp/slideDown und Konsorten ändern aber CSS-Eigenschaften :)

        Eben. Deshalb: considered harmful.

        Mit Bordmitteln lassen sich Animationen mit Klassen in jQuery nicht umsetzen

        ?? Natürlich. Klasse geändert, fertig. Die Transition erledigt CSS.

        Qapla'

        --
        Wer möchte nicht lieber durch Glück dümmer als durch Schaden klüger werden? (Salvador Dalí)
        1. Hi,

          Mit Bordmitteln lassen sich Animationen mit Klassen in jQuery nicht umsetzen

          ?? Natürlich. Klasse geändert, fertig. Die Transition erledigt CSS.

          ?? Natürlich nicht. Wie machst du eine Transition von heigh: 0; auf height: auto;?

          ~dave

          1. @@dave:

            nuqneH

            ?? Natürlich nicht. Wie machst du eine Transition von heigh: 0; auf height: auto;?

            Nicht. Ich mache eine von max-height: 0 auf max-height: 9999px.

            Qapla'

            --
            Wer möchte nicht lieber durch Glück dümmer als durch Schaden klüger werden? (Salvador Dalí)
            1. Hi,

              ?? Natürlich nicht. Wie machst du eine Transition von heigh: 0; auf height: auto;?

              Nicht. Ich mache eine von max-height: 0 auf max-height: 9999px.

              Angenommen der Inhalt ist tatsächlich 100px hoch und du setzt die Dauer der Transition auf 1s.
              Dann dauert's nicht 1s bis es ausgeklappt ist sondern nur ~0.01s.
              Beim einklappen würde die ersten ~0.99 Sekunden nichts passieren.

              Und das auch nur falls du die timing-function auf linear setzt. Was anderes als linear funktioniert nämlich dann überhaupt nicht mehr wie gedacht.

              Der max-height-Trick ist wohl eher eine schlechte Krücke als eine Lösung.

              ~dave

              1. @@dave:

                nuqneH

                Nicht. Ich mache eine von max-height: 0 auf max-height: 9999px.

                Angenommen der Inhalt ist tatsächlich 100px hoch und du setzt die Dauer der Transition auf 1s.

                Tu ich nicht. Ich würde schon eine für 9999 Pixel passende Zeit wählen.

                Dann dauert's nicht 1s bis es ausgeklappt ist sondern nur ~0.01s.

                Dann hat der Aufklappeffekt auch eine angemessene Dauer. Bei verschieden hohen Bereichen dauert der Effekt verschieden lange, läuft aber bei allen mit derselben Geschwindigkeit, was ich nicht als Nachteil erachte.

                Beim einklappen würde die ersten ~0.99 Sekunden nichts passieren.

                Das ist das Problem. Die „Krücke“, wie du’s nennst, taugt fürs Aufklappen, aber nicht fürs Einklappen.

                Fürs Einklappen müsste der max-height-Anfangswert nah an der wirklichen Höhe des Bereichs liegen (aber nicht kleiner als die benötigte Höhe sein). Man mag das für den bestehenden Inhalt einigermaßen abschätzen können (was auch schon Gefahren in sich birg), aber wenn sich der Inhalt ändert …

                Da bedarf es dann doch etwas JavaScript. Nicht für die Transition selbst, sondern nach dem Rendern einmalig (lies: nach jedem Neurendern einmalig) die benötigte Höhe auslesen und max-height zuweisen. Oder dann auch height und die Transition darauf anwenden.

                Qapla'

                --
                Wer möchte nicht lieber durch Glück dümmer als durch Schaden klüger werden? (Salvador Dalí)
                1. Hi,

                  Angenommen der Inhalt ist tatsächlich 100px hoch und du setzt die Dauer der Transition auf 1s.

                  Tu ich nicht. Ich würde schon eine für 9999 Pixel passende Zeit wählen.

                  Ich glaube nicht, dass das besonders oft möglich ist.
                  Aber kommt auf den konkreten Fall an.
                  Ist doch aber beinahe egal ob du da die max-height schätzt oder die transition-duration: Beides kann bei entsprechend komplexem Inhalt schnell mal komplett daneben liegen.

                  Dann dauert's nicht 1s bis es ausgeklappt ist sondern nur ~0.01s.

                  Dann hat der Aufklappeffekt auch eine angemessene Dauer. Bei verschieden hohen Bereichen dauert der Effekt verschieden lange, läuft aber bei allen mit derselben Geschwindigkeit, was ich nicht als Nachteil erachte.

                  Da hast du recht, das _muss_ kein Nachteil sein.
                  In den timing-functions ist man dennoch sehr stark eingeschränkt.

                  Da bedarf es dann doch etwas JavaScript. Nicht für die Transition selbst, sondern nach dem Rendern einmalig (lies: nach jedem Neurendern einmalig) die benötigte Höhe auslesen und max-height zuweisen. Oder dann auch height und die Transition darauf anwenden.

                  Ich kann den Vorteil die Höhe mit Javascript zu setzen gegenüber von .slideUp/Down nicht sehen.
                  Zumal ich bei der Javascript-Lösung sogar eine x-beliebige timing-function haben kann, nicht nur die, die mit cubic-bezier() oder steps() möglich sind.

                  Ich finde CSS-transitions ziemlich cool.
                  Sie haben jede Menge Anwendungsfälle.
                  Auf- und Zuklappen von Elementen gehört nicht dazu.
                  Natürlich könnte man irgendwie, aber warum sollte man?

                  ~dave

                  1. Hi,

                    Ich kann den Vorteil die Höhe mit Javascript zu setzen gegenüber von .slideUp/Down nicht sehen.

                    Hm, aufgrund der padding/margin Berechnung sind grade die häufig unschön und neigen zu Hupfern, man muss also auch hier manipilieren - beispielsweise per js die Weite ermitteln und fest setzen

                    Zumal ich bei der Javascript-Lösung sogar eine x-beliebige timing-function haben kann, nicht nur die, die mit cubic-bezier() oder steps() möglich sind.

                    für ein Aufsliden soviel Aufwand? Ich finde die Transitions da echt charmant einfach...

                    Gruesse, Joachim

                    --
                    Am Ende wird alles gut.
                    1. Hi,

                      Ich kann den Vorteil die Höhe mit Javascript zu setzen gegenüber von .slideUp/Down nicht sehen.
                      Hm, aufgrund der padding/margin Berechnung sind grade die häufig unschön und neigen zu Hupfern, man muss also auch hier manipilieren - beispielsweise per js die Weite ermitteln und fest setzen

                      Das kann sein.
                      Hier hat man aber wenigstens die Möglichkeit das zu korrigieren.

                      Zumal ich bei der Javascript-Lösung sogar eine x-beliebige timing-function haben kann, nicht nur die, die mit cubic-bezier() oder steps() möglich sind.
                      für ein Aufsliden soviel Aufwand? Ich finde die Transitions da echt charmant einfach...

                      Wo siehst du da viel Aufwand?
                      Wenn dir die Standard-Timing-Function "swing" nicht passt _kannst_ du eine andere nehmen.
                      Mit Transitions bist du allgemein beschränkte und in dem auf- und zuklappen Fall bleibt eigentlich nur linear.

                      Vielleicht wende ich die Transition ja nur falsch an, erklär mir bitte jemand was ich da noch groß verbessern könnte:

                      <!DOCTYPE html>  
                      <title></title>  
                      <style>  
                      [code lang=css]article {  
                          cursor: pointer;  
                      }  
                      div {  
                          overflow: hidden;  
                          border: 1px solid #888;  
                          background: #eee;  
                          padding: 1em;  
                          margin: 1em;  
                      }  
                        
                      .withoutJS div {  
                          -webkit-transition: all .3s ease;  
                          max-height: 999px;  
                      }  
                      .withoutJS.collapsed div {  
                          max-height: 0;  
                          padding-top: 0;  
                          padding-bottom: 0;  
                          border-top-width: 0;  
                          border-bottom-width: 0;  
                          margin-top: 0;  
                          margin-bottom: 0;  
                      }
                      

                      </style>
                      <article class="withJS">
                          <h1>.slideToggle()</h1>
                          <div>
                              Foo<br/>
                              Bar<br/>
                              Baz
                          </div>
                      </article>
                      <article class="withoutJS">
                          <h1>CSS Transition</h1>
                          <div>
                              Foo<br/>
                              Bar<br/>
                              Baz
                          </div>
                      </article>
                      <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
                      <script>

                      $(function() {  
                          $('.withJS').on('click', function() {  
                              $('div', $(this).toggleClass('collapsed')).slideToggle();  
                          });  
                          $('.withoutJS').on('click', function() {  
                              $(this).toggleClass('collapsed');  
                          });  
                      });

                      </script>
                      ​[/code]

                      ~dave

                      1. Hi,

                        Vielleicht wende ich die Transition ja nur falsch an, erklär mir bitte jemand was ich da noch groß verbessern könnte:

                        mein Vorschlag sähe so aus, jetzt mal bewusst ohne irgendwelche frameworks. Vorteil gegenüber "klassisch" imho: ich erspare mir die setTimeout-Animation bzw. die Berechnung der margins für jeden Durchlauf.

                        <!DOCTYPE html>
                        <html lang="de">
                        <head>

                        <title>Sixt</title>  
                        

                        <meta http-equiv="content-type" content="text/html; charset=utf-8">
                        <meta name="author" content="JW">
                        <meta name="description" content="Sixt">
                        <meta name="keywords" content="Sixt">

                        <style type="text/css">

                        body {
                                font: normal normal normal 12px verdana, arial, helvetica, sans-serif;
                            }

                        * {
                                padding: 0;
                                margin: 0;
                            }

                        #main {
                                padding: 20px;
                            }

                        #foo {
                                overflow: hidden;
                            }

                        #foo p {
                                margin: -9999px 0 0 0;
                                padding: 10px 0 10px 0;
                            }

                        #foo .foop {
                                -moz-transition: all 0.4s;
                                -webkit-transition: all 0.4s;
                                -ms-transition: all 0.4s;
                                -o-transition: all 0.4s;

                        -moz-transition-timing-function: ease-out;
                                -webkit-transition-timing-function: ease-out;
                                -ms-transition-timing-function: ease-out;
                                -o-transition-timing-function: ease-out;
                            }

                        #foo.open p {
                                margin-top: 0 !important;
                            }

                        </style>

                        <script type="text/javascript">
                            window.addEventListener("load", init_trans, false);
                            /**
                             * calculate p's hight and set
                             * top-marin depending on height
                             * now set css-class containing transition
                             * *      to av-id top margin causes animation
                             */
                            function init_trans(e) {
                                var foop                =  document.getElementById("foo").getElementsByTagName("p")[0]
                                foop.style.marginTop    =  (foop.offsetHeight * -1) + "px";
                                foop.className          =  "foop";
                            }
                            /**
                             * toggle class name
                             * @return {bool} false
                             */
                            function toggle() {
                                var el          =  document.getElementById("foo");
                                el.className    =  (el.className == "open")? "collapsed" : "open";
                                return false;
                            }
                        </script>

                        </head>
                        <body>
                            <div id="main">
                                <a href="#foo" onclick="return toggle()">Mach mal auf...</a>
                                <div id="foo">
                                    <p>
                                        foo<br />
                                        foo<br />
                                        foo<br />
                                        foo<br />
                                        bar<br />
                                        foo<br />
                                        foo<br />
                                        foo<br />
                                        foo<br />
                                        foo<br />
                                        foo<br />
                                        foo<br />
                                        batz<br />
                                        foo<br />
                                        foo<br />
                                        lala<br />
                                    </p>
                                </div>
                            </div>
                        </body>
                        </html>

                        Gruesse, Joachim

                        --
                        Am Ende wird alles gut.
                        1. @@Joachim:

                          nuqneH

                          -moz-transition: all 0.4s;
                                  -webkit-transition: all 0.4s;
                                  -ms-transition: all 0.4s;
                                  -o-transition: all 0.4s;

                          Die präfixfreie Standard-Eigenschaft fehlt. Dafür ist der -ms-Präfix sinnlos. IE ≤ 9 kennt das nicht, IE 10 wird es präfixfrei implementiert haben.

                          -moz-transition-timing-function: ease-out;
                                  -webkit-transition-timing-function: ease-out;
                                  -ms-transition-timing-function: ease-out;
                                  -o-transition-timing-function: ease-out;

                          Dito.

                          Qapla'

                          --
                          Wer möchte nicht lieber durch Glück dümmer als durch Schaden klüger werden? (Salvador Dalí)
                        2. Hi,

                          mein Vorschlag sähe so aus, jetzt mal bewusst ohne irgendwelche frameworks. Vorteil gegenüber "klassisch" imho: ich erspare mir die setTimeout-Animation bzw. die Berechnung der margins für jeden Durchlauf.

                          Ohne Frameworks gebe ich dir Recht, da ist das Ganze in Javascript sehr viel mehr Aufwand.
                          Deshalb verwende zumindest ich, wenn ich mehr mit Javascript machen will, ein Framework (weils dann einfacher wird :P).

                          Ich sehe noch immer nicht inwiefern das setzen der Höhe mit Javascript einfacher/besser sein soll als .slideUp/Down.
                          Weil man da ein Framework braucht?

                          ~dave

    2. Vergiss, dass es sowas wie css() oder ... in jQuery gibt!

      Das stellt eine gewisse Einschränkung dar, wenn man z.B. Drag & Drop implementieren möchte. Jetzt sagst Du: HTML5! Tschuldigung, ich meinte stabiles Cross-Browser Drag & Drop.