✔ Endlosschleife: Überwachung DIV-Tag

T

TIMS_Ralf

Erfahrenes Mitglied
Hallo Leute,

habe ein DIV, dessen Höhe / Inhalt sich am Browserfenster orientieren soll - tuts auch. Damit es das auch tut, wenn das Browserfenster vergrößert / verkleinert - die Höhe des DIVs als entspr. angepasst - wird, habe ich mit JS eine Endlos-Schleife programmiert, die sich alle 2 Sek. selbst aufruft ( setTimeOut, setInterval ). Dürfte auch laufen, FireBug meldet keine Fehler.

Bei setInterval hängt der Browser in dem Loop ("Keine Rückmeldung").
Bei setTimeout wird die Endlosschleife nur einmal ausgeführt, nicht nachdem das Brwoserfenster verändert wurde.

Ist die Überwachung des DIVs mit einer solchen Endlosschleife überhaupt möglich, OHNE dass der Browser hängt? Gibts andere Möglichkeiten ( CSS - margin-top / margin-bottom funktioniert nicht ).
Der Code dürfte hier nichts bringen, der läuft ja...


Danke vorab!
Gruß Ralf
 
Du hast keine Endlosschleife programmiert, da du setTimeout/setInterval benutzt hast. Wenn du diese Funktionen benutzt, sollte es eben nicht zu einem hängenden Browser führen.

Es gibt das "resize" des window-Objektes:
Javascript: 
window.addEventListener("replace", function() { ... });
Siehe MDN-Dokumentation: https://developer.mozilla.org/en-US/docs/Web/Events/resize

@ikosaeder Ich würde von der Nutzung von W3Schools absehen. In der Vergangenheit hatten sie einige Fehler drin und immer noch propagieren sie die Nutzung von Inline-Eventhandlern (z. B. bei deinem Link und den weiterführenden Events sehe ich kein addEventListener(), sondern immer xyz.on=...). Edit: Bei einigen Eventtypen ist das addEventListener() durchaus zu finden, allerdings nicht bei onresize. Siehe auch http://w3fools.com
 
Hallo ikosaeder, ComFreak,

erstmal Dank an Euch! Mit den HTML-Eventhandlern hats nichts zu tun :), der "addEventListener" scheint sehr inteerssant, kenne ich aber noch nicht....

Hiermal stark verkürzt das biesherige Script:

Javascript: 
function setDvH(DvID,addY) // setze DIV-Höhe
{
 var
  DivH = 0,      // Num: Höhe des DIVs, soll angepasst werden soll, wenn Browser vergrößert/verkleinert wird

  HTopBot = 120, // Summe Pixel über / unter DIV-Tag
  setH = "";    // String: Höhe des DIVs, soll angepasst werden soll, wenn Browser vergrößert/verkleinert 

  if(document.getElementById(DvID))
  {
   DivH = document.documentElement.clientHeight - HTopBot - addY;
   setH = DivH + "px";
   document.getElementById(DvID).style.height = setH;

  // Endlosschleife für Überwachung / Änderung; ruft sich selbst auf
   setInterval("setDvH('" + DvID + "'," + addY +")", 1000); 
  }
}

Die Höhe des DIVs soll jede Sekunde angepasst werden, falls das Browserfenster vergrößert / verkleinert wird.

Danke!
 
TIMS_Ralf hat gesagt.:
Gibts andere Möglichkeiten ( CSS - margin-top / margin-bottom funktioniert nicht ).
Zum Vergrößern anklicken....
Grundsätzlich ja, aber ohne zu wissen, wie das Seitenlayout im Detail konstruiert ist, kann der Vorschlag nur allgemein gehalten werden. Einzig bekannt ist aus dem gezeigten JS-Code die Summe des oberen und unteren Abstands zum Fensterrand.

Daraus ergibt sich:

Möglichkeit Nr.1
HTML: 
<body>
    <div id="topBox">...</div>
    <div id="middleBox">...</div>
    <div id="bottomBox">...</div>
</body>
CSS: 
#topBox  {
      position:absolute;
      top:0;
      right:0;
      left:0;
      height:60px;
      background:#dfdfdf
}
#middleBox {
      position:absolute;
      top:60px;
      right:0;
      bottom:60px;
      left:0;
      overflow:auto;
      background:#efefef
}
#bottomBox {
      position:absolute;
      right:0;
      bottom:0;
      left:0;
      height:60px;
      background:#dfdfdf
}
Live-Demo: http://jsfiddle.net/spicelab/W8h7D/

Möglichkeit Nr.2
HTML: 
<body>
    <div id="wrapBox">
        <div id="topBox">...</div>
        <div id="middleBox">...</div>
        <div id="bottomBox">...</div>
    </div>
</body>
CSS: 
* {
      margin:0;
      padding:0
}
html,body {
      height:100%
}
#wrapBox {
      min-height:100%;
      position:relative;
      background:#efefef /* erzeugt Hintergrund für #middleBox */
}
#topBox  {
      height:60px;
      background:#dfdfdf
}
#middleBox {
      padding-bottom:60px
}
#bottomBox {
      position:absolute;
      right:0;
      bottom:0;
      left:0;
      z-index:2;
      height:60px;
      background:#dfdfdf
}
Live-Demo: http://jsfiddle.net/spicelab/DVdG2/
_________________________
[edit]JSFiddle hinzugefügt[/edit]​
 
Zuletzt bearbeitet:
TIMS_Ralf hat gesagt.:
erstmal Dank an Euch! Mit den HTML-Eventhandlern hats nichts zu tun :)
Zum Vergrößern anklicken....
Ich dachte, du willst eine bestimmte Aktion (hier: irgendetwas vergrößern / verkleinern) bei einer Größenänderung des Browserfensters ausführen:
TIMS_Ralf hat gesagt.:
Die Höhe des DIVs soll jede Sekunde angepasst werden, falls das Browserfenster vergrößert / verkleinert wird.
Zum Vergrößern anklicken....

Dafür kannst du doch das resize-Event nehmen.

Natürlich würde ich eine CSS-Lösung empfehlen, wenn es nur darauf hinausläuft, einem DIV eine relative Größe zu verpassen, und dies mit CSS möglich ist.
 
Hey... allen vielen Dank!

Joo... Die CSS-Lösungen - hier Möglichkeit 2 - von SpiceLab ist am effektivsten und einfachsten. Hatte es mit einer Kombination height:.../margin:... versucht. Mit position:absolute; etc. läufts!

Das Eventhandling ( resize... ) ist für andere Dinge sehr interessant!

Es läuft nun - vieleN Dank - insbes. auch für die Mühe bei jsfiddle !
Ralf
 
Und @ikosaeder hat keinen ausdrücklichen Dank verdient? :eek:

Sein JSFiddle demonstriert doch den Grundgedanken von "Möglichkeit Nr.2", ein Element bildschirmfüllend zu gestalten.
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück