Peter: Die Breite mehrerer gleicher Elemente verändern

Guten Abend!

Es geht um folgendes: Mit window.innerWidth und einem entsprechenden Handler lasse ich einige Objekte auf meiner Website dynamisch an die Browsergröße anpassen.

Doch irgendwie klappt nichts.

Die zu verändernden Elemente sehen so aus:

<div class="backtotop" id="backtotop">
<a href="#top" target="_top">Nach oben</a>
</div>

Ich habe bereits viele verschiedene Codes ausprobiert, doch funktioniert irgendwie keiner :/
Das ist der aktuelle:

var backtotop = document.getElementById("backtotop").getElementsByTagName("div");
for (var i = 0; i < backtotop.length; i++;) {
document.getElementById("backtotop").style.width = (width - 290) + "px";
}

Bitte, könnt ihr mir sagen was ich falsch mache und mir evtl. ein Beispiel geben wie es funktioniert?

Lg,
Peter

  1. Hellihello Peter,

    Guten Abend!

    Es geht um folgendes: Mit window.innerWidth und einem entsprechenden Handler lasse ich einige Objekte auf meiner Website dynamisch an die Browsergröße anpassen.

    Doch irgendwie klappt nichts.

    Die zu verändernden Elemente sehen so aus:

    <div class="backtotop" id="backtotop">
    <a href="#top" target="_top">Nach oben</a>
    </div>

    Ich habe bereits viele verschiedene Codes ausprobiert, doch funktioniert irgendwie keiner :/
    Das ist der aktuelle:

    var backtotop = document.getElementById("backtotop").getElementsByTagName("div");

    Also alle Divs des Elements mit er Id "backtotop"?

    for (var i = 0; i < backtotop.length; i++;) {
    document.getElementById("backtotop").style.width = (width - 290) + "px";

    das ist doch murks. Das i taucht ja garnicht auf. Auch holst Du ja wieder nur das Element mit der id "backtotop" statt backtotop[i].style.width...;

    Aber dein Beispiel enthälte keine divs, die in der NodeList auftauchen könnten.

    Dank und Gruß,

    frankx

    1. Danke für eure Antworten ... ihr habt recht .. das ist nur Gepfusche auf diese Weise ..

      Habe es jetzt mit CSS hinbekommen. :)

      Lg,
      Peter

      1. Hi,

        Habe es jetzt mit CSS hinbekommen. :)

        Brav ;)

        mfG,
        steckl

    2. Also alle Divs des Elements mit er Id "backtotop"?

      for (var i = 0; i < backtotop.length; i++;) {
      document.getElementById("backtotop").style.width = (width - 290) + "px";

      das ist doch murks. Das i taucht ja garnicht auf. Auch holst Du ja wieder nur das Element mit der id "backtotop" statt backtotop[i].style.width...;

      Aber dein Beispiel enthälte keine divs, die in der NodeList auftauchen könnten.

      So! und hier haben wir so ein Beispiel, wo man mit der Vermeidung einer Technik(JS), eine einfachere Lösung erhält, exakt das was ich in dieser Diskussion meinte ("Ach, wenn Du meinst.")

      Struppi.

      1. Hellihello Struppi,

        So! und hier haben wir so ein Beispiel, wo man mit der Vermeidung einer Technik(JS), eine einfachere Lösung erhält, exakt das was ich in dieser Diskussion meinte ("Ach, wenn Du meinst.")

        Ja, darüber hatte ich schon nachgedacht. Natürlich hast Du Recht. "Aber": er hat nicht kapiert, wie Javascript den DOM-Baum und seine Attribute anspricht, was eine Nodelist ist und wie ich mit dem Iterator (?) hantiere, um einzelne Elemente daraus anzusprechen. Wenn du jetzt sagt, dass das u.U. nicht sein Ziel war, hast Du vermutlich sogar auch Recht.

        Letztlich haben in der HTML-AG zwei 15-jährige erstmal buttons um ein a-tag gebastelt, weil sie die Breite definieren wollten. Und kamen dann mit einer Seite: diese Seite ist nur mit FF lesbar (;-), weil der IE(6) die <a> in <button> nicht mehr als Links interpretiert. Vielleicht lernt man so nicht gleich, wies richtig geht, aber _vielleicht_ erwirbt man so - durch Irr- oder Seitenwege - auch ein (evtl. tiefergehendes) Verständnis, was dann später mal hilfreich sein kann. Was nicht heißen muss, dass ich ihnen, hätt ich gleich dabeigesessen, die button-Idee vielleicht schon in den Anfängen versucht hätte auszureden.

        Zudem gilt natürlich auch: jeder Lehrer (und wenn Stammposter hier antworten, dann sind sie das erstmal auch) kann natürlich seinen Weg gehen. Also wer sagt, ich führ Dich gleich auf den richtigen Pfad und zwar nach meinem gusto, hat schon deswegen Recht, weil er ja seine Hilfe obendrein noch ehrenamtlich hier anbietet.

        Dank und Gruß,

        frankx

        1. Natürlich hast Du Recht.

          Ich weiß ;-)

          Ich geb dir aber auch absolut Recht, dass man natürlich mit u.U. umständlichen "Lösungen" etwas lernt und wenn z.b. Peter sich darauf versteift hätte es mit JS zu machen oder eben den Bewegrund das er was lernen möchte erwähnt hätte, spricht ja nichts dagegen ihm auch diese Möglichkeit zu zeigen.

          Es ging mir aber in ertser Linie darum dir aufzuzeigen, dass der Vorschlag auf eine Technik zu verzichten und das jemanden zu raten, nicht darauf schliessen läßt das jemand ein XY-Hasser ist.

          Struppi.

          1. Hellihello Struppi,

            Ich geb dir aber auch absolut Recht, dass man natürlich mit u.U. umständlichen "Lösungen" etwas lernt und wenn z.b. Peter sich darauf versteift hätte es mit JS zu machen oder eben den Bewegrund das er was lernen möchte erwähnt hätte, spricht ja nichts dagegen ihm auch diese Möglichkeit zu zeigen.

            Es ging mir aber in ertser Linie darum dir aufzuzeigen, dass der Vorschlag auf eine Technik zu verzichten und das jemanden zu raten, nicht darauf schliessen läßt das jemand ein XY-Hasser ist.

            Der Fachbereichsleiter Mathematik/Informatik meines ehem. Gymnasiums, wo ich jetzt die HTML-AG leite, sagte mir letztlich: "Ich bin Vorsitzender des Excel-Hasser-Clubs". Er hat aus diversen Gründen eine sicher auch berechtigte Abneigung. Das muss man nicht teilen. Wollte nur nochmal das Wort "Hasser" als Mode-Wort für "mag ich nicht unbedingt" klarstellen.

            Diese von mir gefühlte Tendenz - lass mal lieber die Finger erstmal von Javascript - rührt vielleicht von einer tendenziellen Abneigung gegen klicki-bunti bzw. Vorliebe für textlastige (=informationshaltige) Strukturen her, die ich bei einigen hier im Forum zu bemerken meine. Ist doch o.k. und kann ich sogar zu Teilen nachvollziehen. Was insbesondere Gunnar jetzt gegen Frames hat (ich fände es wirklich auch passend, wenn es ein selfhtml-Artikel wäre, auf den verwiesen wird), hab ich noch nicht rausbekommen. Ich könnte mir mittlerweile vorstellen, dass er heimlich mit seinem Blackberry surft oder einen 15-Zoll Monitor hat oder so (;-) - weil er immer auf den Viewport verweist.

            Ich sehe halt, dass sich sowohl mit Frames (Abstraktion weil "includieren") aber insbesondere mit JS (über a) Programmieren und b) DOM) was lernen lässt. Ist vielleicht eher eine grundlagenforschungsorientierter Ansatz (und wie schon gesagt ein autorenlastiger: meine Seite gehört mir (;-)).

            Dank und Gruß,

            frankx

            1. Grütze .. äh ... Grüße!

              [Gunnar]

              verwiesen wird), hab ich noch nicht rausbekommen. Ich könnte mir mittlerweile vorstellen, dass er heimlich mit seinem Blackberry surft oder einen 15-Zoll Monitor hat oder so (;-) - weil er immer auf den Viewport verweist.

              ?

              Auch (bzw. gerade) auf einem Monitor mit Auflösung >= 1200 ist die Wahrscheinlichkeit, daß das Browserfenster nicht voll aufgezogen ist, sehr groß. Hinzu kommen diverse side- und toolbars, also hat Gunnar absolut recht, wenn er beständig gegen die immer noch weit verbreitete Unsitte argumentiert, daß die Bildschirmgröße auch nur irgend eine Bedeutung hätte. Maßgeblich ist und bleibt immer noch der Bereich, auf dem die eigentliche Webseite dargestellt werden kann, und da das nun einmal der Viewport ist ....


              Kai

              --
              What is the difference between Scientology and Microsoft? One is an
              evil cult bent on world domination and the other was begun by L. Ron
              Hubbard.
              ie:{ fl:( br:< va:) ls:? fo:| rl:? n4:° ss:{ de:] js:| ch:? mo:| zu:|
            2. Wollte nur nochmal das Wort "Hasser" als Mode-Wort für "mag ich nicht unbedingt" klarstellen.

              Schon klar, ich hab das durchaus so verstanden ;-)

              Diese von mir gefühlte Tendenz - lass mal lieber die Finger erstmal von Javascript - rührt vielleicht von einer tendenziellen Abneigung gegen klicki-bunti bzw. Vorliebe für textlastige (=informationshaltige) Strukturen her, die ich bei einigen hier im Forum zu bemerken meine.

              Da ich fast alle JS Threads hier lese (und das seit einigen Jahren), weiß ich nicht woher dein Gefühl kommt. Im gegenteil hier werden oft und gerne irgendwelche Spielreien mit JS entwickelt.

              Nur wenn der Fragende sich mit JS andere Wege verbaut, wird natürlich nochmal hinterfragt ob ihm das bewußt ist und ob er das wirklich will, bevor man eine zweifelhafte Lösung anbietet.

              Was insbesondere Gunnar jetzt gegen Frames hat (ich fände es wirklich auch passend, wenn es ein selfhtml-Artikel wäre, auf den verwiesen wird), hab ich noch nicht rausbekommen. Ich könnte mir mittlerweile vorstellen, dass er heimlich mit seinem Blackberry surft oder einen 15-Zoll Monitor hat oder so (;-) - weil er immer auf den Viewport verweist.

              Du kannst auch ohne Probleme auf einem 100" Monitor die Fenstergrößen ändern. Ich kann aus eigener Erfahrung sagen, das bei mir z.b. oft das Browserfenster auf Systemen mit grosser Auflösung kleiner ist als auf alten mit kleinen Monitoren und Auflösung. Daher sind für mich Framesetseiten auch oft lästig, da ich erstmal das Fenster gross machen muss um den Inhalt  entsprechend lesen zu können. Aber ich beschäftige mich seit Jahren nicht mehr mit Framesets, deshalb ignoriere ich i.d.R. auch die Fragen dazu.

              Ich sehe halt, dass sich sowohl mit Frames (Abstraktion weil "includieren") aber insbesondere mit JS (über a) Programmieren und b) DOM) was lernen lässt. Ist vielleicht eher eine grundlagenforschungsorientierter Ansatz (und wie schon gesagt ein autorenlastiger: meine Seite gehört mir (;-)).

              Kann man, muss man aber nicht ;-)

              Da stellt sich dann die Frage, ob das Lernziel sinnvoll ist oder nicht oder ob nicht der andere Weg mehr Lerninhalte birgt. Aber das dürfte von Fall zu Fall verschieden sein.

              Struppi.

              1. Hellihello Struppi,

                Da ich fast alle JS Threads hier lese (und das seit einigen Jahren), weiß ich nicht woher dein Gefühl kommt. Im gegenteil hier werden oft und gerne irgendwelche Spielreien mit JS entwickelt.

                Nur wenn der Fragende sich mit JS andere Wege verbaut, wird natürlich nochmal hinterfragt ob ihm das bewußt ist und ob er das wirklich will, bevor man eine zweifelhafte Lösung anbietet.

                Nun, das doch mal eine aussagekräftige Quelle.

                Ich sehe halt, dass sich sowohl mit Frames (Abstraktion weil "includieren") aber insbesondere mit JS (über a) Programmieren und b) DOM) was lernen lässt. Ist vielleicht eher eine grundlagenforschungsorientierter Ansatz (und wie schon gesagt ein autorenlastiger: meine Seite gehört mir (;-)).

                Kann man, muss man aber nicht ;-)

                Da stellt sich dann die Frage, ob das Lernziel sinnvoll ist oder nicht oder ob nicht der andere Weg mehr Lerninhalte birgt. Aber das dürfte von Fall zu Fall verschieden sein.

                Genau, wie die Freiheit des Autors so natürlich auch die Freiheit des Lehrenden.

                Dank und Gruß,

                frankx

  2. Grüße,
    so wie ich die gewünschte Wirkung der Funktion enschätze würde es auch CSS tun - gibts einen Grund JS zu verwenden? den ndies ist (wenn es um layoutgrundlage geht) nicht so sicher.
    MFG
    bleicher

    --
    __________________________-
    Menschen an sich , sind nicht schlecht - es sind nur ihre Taten (c).
    Lieber bereuen gesündigt zu haben, als nicht sündigen und es später trotzdem bereuen.
    Boccaccio
  3. Hi,

    Guten Abend!

    Es geht um folgendes: Mit window.innerWidth und einem entsprechenden Handler lasse ich einige Objekte auf meiner Website dynamisch an die Browsergröße anpassen.

    Dass hier Javascript wohl der falsche Weg ist wurde ja bereits erwähnt.
    Sieht aus als würdest du mit JS die CSS-Eigenschaft margin-right (bzw. padding-right) simulieren wollen.

    Aber ich schreibe trotzdem mal einige Anmerkungen zu deinem Code, da dies ja immerhin einen Lerneffekt haben könnte.

    Die zu verändernden Elemente sehen so aus:

    <div class="backtotop" id="backtotop">
    <a href="#top" target="_top">Nach oben</a>
    </div>

    Die ID muss eindeutig sein und darf in deinem Dokument nur einmal vorkommen.

    var backtotop = document.getElementById("backtotop").getElementsByTagName("div");

    Du könntest hier alle DIVs in backtotop speichern, wenn du das getElementById was hier eh nicht passt (weil es ja nur ein Element mit der ID geben darf) wegläßt. Dann stehen in backtotop alle div-Elemente.

    for (var i = 0; i < backtotop.length; i++;) {

    In dieser Schleife kannst du dann die einzelnen Elemente von backtotop durchlafuen und mit einem if und der Eigenschaft className abprüfen, ob das Element zur Klasse backtotop gehört. Und den folgenden Code nur ausführen, wenn es dazugehört.

    document.getElementById("backtotop").style.width = (width - 290) + "px";

    Hier kannst du direkt über backtotop[i] auf die Elemente zugreifen.
    Ist width eine Variable?

    }

    Bitte, könnt ihr mir sagen was ich falsch mache und mir evtl. ein Beispiel geben wie es funktioniert?

    Hoffe ich konnte dir weiterhelfen. Und noch ein Tipp: Wenn deine Scripts nicht funktionieren wirf mal einen Blick in die Fehler-Konsole vom Firefox (unter Extras -> Fehler-Konsole), dort werden dir deine Javascript-Fehler angezeigt.

    mfG,
    steckl