Erkennen das Fenstergröße geändert wird

[Sedrick]

Hallo zusammen,

ich brauche irgendwie die Möglichkeit zu erkennen wenn das Fenster verkleinert, vergrößert oder maximiert wird.
Einen passenden Event-Handler hierzu hab ich z.b. leider nicht gefunden.

Das Problem ist, wenn eins der oben genannten Aktionen auftritt muss die Seite neugeladen werden.

Danke im Voraus

Sedrick

[Harlequin]

Yerf!

Einen passenden Event-Handler hierzu hab ich z.b. leider nicht gefunden.

Über window.onresize = deineFunktion; kannst du das festlegen.

Das Problem ist, wenn eins der oben genannten Aktionen auftritt muss die Seite neugeladen werden.

Das klingt allerdings eher nach einem anderen Problem... *Muss* das wirklich so sein?

Gruß,

Harlequin

[Sedrick]

Erstmal danke für die Antworten, ich werde es testen und dann sagen ob es das ist was ich wollte

[Felix Riesterer]

Lieber Sedrick,

Einen passenden Event-Handler hierzu hab ich z.b. leider nicht gefunden.

wonach hast Du gesucht?

Du willst window.onresize benutzen, gell?

Liebe Grüße,

Felix Riesterer.

[Gunnar Bittersmann]

@@Sedrick:

ich brauche irgendwie die Möglichkeit zu erkennen wenn das Fenster verkleinert, vergrößert oder maximiert wird.
Einen passenden Event-Handler hierzu hab ich z.b. leider nicht gefunden.

'resize'.

Das Problem ist, wenn eins der oben genannten Aktionen auftritt muss die Seite neugeladen werden.

window.onresize = myReload;  
  
function myReload()  
{  
    window.location.reload();  
};

Warum geht es nicht so: window.onresize = window.location.reload;?

Live long and prosper,
Gunnar

[Joachim]

Hi,

Warum geht es nicht so: window.onresize = window.location.reload;

sollte man vorsichtshalber mal testen, afaik feuert das bei manchen Browsern  mehrfach während man "resized" und führt so zu multiplen reloads. Ggf also eine kleine Zeitverzögerung einbauen.

Mein altes Hirn kann sich/mich aber auch täuschen ;-)

Gruesse, Joachim

[Sedrick]

So,

scheint das du sein was ich brauche.

Hab aber nun das Problem das die Seite nicht neugeladen wird.
Der Code ist in einer PHP Datei drin.
Wenn ich die Fenstergröße ändere werden beide Alerts ausgeführt, jedoch nicht die Seite neu geladen.
Woran könnte das liegen?

echo '<script type="text/javascript" language="JavaScript">
                window.onresize = myReload;
                function myReload()
                {
                    window.location.reload();
                    alert("1");
                    self.location.reload();
                    alert("2");
                }
                </script>';

[Kalle_B]

Hallo,

Das Problem ist, wenn eins der oben genannten Aktionen auftritt muss die Seite neugeladen werden.

Verständnisfrage:
Die Seite wird beim ersten Mal in ein beliebig großes Fenster geladen, "passt" also für alle Fenstergrößen. Warum soll bei Größenänderung neu geladen werden?

Willst du Leute mit einer lahmen Internetverbindung bestrafen?

Kalle

[Sedrick]

Weil ich das Bild mit DIVS je nach Browserbreite zentriere.
Sobald nun aber sich die Browserbreite sich ändert kann es dazu führen, dass das Bild nichtmehr zentriert ist oder teilweise abgeschnitten.

[Harlequin]

Yerf!

Weil ich das Bild mit DIVS je nach Browserbreite zentriere.

Wenn du das "richtig" per CSS machst (mit margin:auto) passt sich das automatisch an.

Und selbst wenn das aufgrund der Umstände nicht geht... wie zentrierst du die Seite beim ersten Aufbauen? Vermutlich per JavaScript (Serverseitig kann es ja nicht gehen), also könntest du diese JS-Funktion doch auch im onresize ausführen, oder?

Gruß,

Harlequin

[Sedrick]

Das ist alles etwas komplizierter.
Per css ging es nicht.
Und ins andere JS wird es glaube ich nicht gehen.
Das andere JS schreibt je nach Bild/Browserbreite dann die DIV Informationen in eine Variable.
Um genau zusein handelt es sich um NagVis falls euch das was sagt.

[Struppi]

Das ist alles etwas komplizierter.
Per css ging es nicht.
Und ins andere JS wird es glaube ich nicht gehen.
Das andere JS schreibt je nach Bild/Browserbreite dann die DIV Informationen in eine Variable.

Das sind alles so wage Aussagen, die sich so nicht nachvollziehen lassen und wenn man sieht das du, obwohl du angeblich gesucht hast, den onresize Event nicht gefuden hast, dann schleicht sich das Gefühl ein, dass diese Aussagen nicht fundiert sind. Aber das ist natürlich alles Spekulation, da wir nur deinen Versuch eines Workarounds kennen.

Struppi.

[ChrisB]

Hi,

ich brauche irgendwie die Möglichkeit zu erkennen wenn das Fenster verkleinert, vergrößert oder maximiert wird. [...]
Das Problem ist, wenn eins der oben genannten Aktionen auftritt muss die Seite neugeladen werden.

Das waere absolut idiotisch.

Lasse uns an deinem eigentlichen Problem teilhaben (und zwar mit einer besseren Problembeschreibung als "mit CSS ging es nicht") - dann finden wir dafuer vielleicht eine Loesung.

MfG ChrisB

[JürgenB]

Hallo Sedrick und die Anderen,

zwei Anmerkungen zu onresize, auch wenn Sedricks Problem wahrscheinlich ohne gelöst werden kann.

1. Vorsicht
Mit dem onresize, so meine Erfahrung, muss man etwas vorsichtig sein. Ein Browser - ich habe mir nicht gemerkt, welche(r) - feuerte den Event bei jeder Größenänderung um ein Pixel, und nicht erst, wenn man die Maustaste losgelassen hat. Das führte bei mir zu einer enormen CPU-Belastung.

2. Warum
ich habe für eine GoogleMaps-Anwendung das Div für die Map per CSS an die Viewportgröße angepasst. Nach verändern der Fenstergröße (z.B. Fullscreen) wurde zwar das Div, nicht aber die Map darin an die neue Größe angepasst. Hier half der onresize-Event. Leider musste ich davon Abstand nehmen, siehe 1..

Gruß, Jürgen

[Kalle_B]

1. Vorsicht
   Mit dem onresize, so meine Erfahrung, muss man etwas vorsichtig sein. Ein Browser - ich habe mir nicht gemerkt, welche(r) - feuerte den Event bei jeder Größenänderung um ein Pixel, und nicht erst, wenn man die Maustaste losgelassen hat. Das führte bei mir zu einer enormen CPU-Belastung.

Ich denke, es ist die Opera, die mehrfach feuert (nicht gerade bei jedem Pixel ...).
Ist aber leicht abzufangen. Mit folgendem Trick wird nur zweimal pro Sekunde auf das Feuern reagiert:

function FensterVeraendert() {
  if ( !veraendert ) {
    veraendert = window.setTimeout("sizeBar('p121_bar','p121_table','p121_table_kopie')", 500);
  }
}
var veraendert = 0;
window.onresize = FensterVeraendert;

.. und in Funktion sizeBar() veraendert = 0;

2. Warum
   ich habe für eine GoogleMaps-Anwendung das Div für die Map per CSS an die Viewportgröße angepasst. Nach verändern der Fenstergröße (z.B. Fullscreen) wurde zwar das Div, nicht aber die Map darin an die neue Größe angepasst. Hier half der onresize-Event. Leider musste ich davon Abstand nehmen, siehe 1..

Ein neuer Anlauf?

Kalle

[Felix Riesterer]

Lieber Kalle_B,

if ( !veraendert ) {

.. und in Funktion sizeBar() veraendert = 0;

globale Variablen? Pfui!

Liebe Grüße,

Felix Riesterer.

[Kalle_B]

Lieber Felix,

if ( !veraendert ) {

.. und in Funktion sizeBar() veraendert = 0;

globale Variablen? Pfui!

Und jetzt von dir die fortgeschrittene OOP- Version? Her damit!

Kalle

[Felix Riesterer]

Lieber Kalle_B,

Und jetzt von dir die fortgeschrittene OOP- Version? Her damit!

gerne: Kleiner Lehrgang zum vernünftigen Schreiben eines JavaScripts

Liebe Grüße,

Felix Riesterer.

[molily]

Und jetzt von dir die fortgeschrittene OOP- Version? Her damit!

OOP? JavaScript ist eher funktional als klassisch objektorientiert. Kapselung erreicht man mit Funktionen/Closures:

function überwacheFenstergröße (handler) {
   var timeout = null;
   window.onresize = function () {
      if (timeout) {
         window.clearTimeout(timeout);
      }
      timeout = window.setTimeout(handler, 500;
   };
}

überwacheFenstergröße(function () {
   sizeBar('p121_bar', 'p121_table', 'p121_table_kopie');
});

(Konzept, ungetestet)

Mathias

[molily]

Und jetzt von dir die fortgeschrittene OOP- Version? Her damit!

Okay, es wird immer funktional bleiben:

/* Helferfunktionen und prototypische Erweiterungen */  
Array.convert = function (obj) {  
   return Array.prototype.slice.apply(obj);  
};  
  
// Diese funktion spart uns function () { bla("blub"); } und lässt uns stattdessen bla.curry("blub") schreiben  
Function.prototype.curry =  function() {  
   if (!arguments.length) return this;  
   var method = this, args = Array.convert(arguments);  
   return function () {  
      return method.apply(this, args.concat(arguments));  
   }  
};  
  
// bind mal ohne Parameterweitergabe, dafür haben wir curry  
Function.prototype.bind = function () {  
   var method = this, object = arguments[0];  
   return function () {  
      return method.apply(object);  
   };  
};  
  
if (!Array.prototype.each) {  
   Array.prototype.each = function (func) {  
      var length = this.length, context = arguments[1] || this;  
      for (var i = 0; i < length; i++) {  
         if (i in this) {  
  func.call(context, this[i], i, this);  
         }  
      }  
   };  
}  
  
/* Resize-Logik */  
  
var Resize = {  
   handlers : [],  
   timeout : 0,  
   addHandler : function (f) {  
      this.handlers.push(f);  
   },  
   resizeHandler : function () {  
      if (this.timeout) {  
         window.clearTimeout(this.timeout);  
      }  
      this.timeout = window.setTimeout(this.fireHandlers.bind(this), 500);  
   },  
   fireHandlers : function () {  
      this.handlers.each(function (f) {  
         f();  
      });  
   },  
   init : function () {  
      window.onresize = this.resizeHandler.bind(this);  
   }  
};  
Resize.init();  
  
/* Anwendung */  
  
Resize.add( sizeBar.curry('p121_bar', 'p121_table', 'p121_table_kopie') );  
...

(Konzept, ungetestet)

Jetzt könnte man das ganze natürlich noch weiter abstrahieren, schließlich ist dieses »Überwache Event x und führe nur alle 500ms nach dem letzten x-Event einen Handler aus« auf keinen Event begrenzt. Die API könnte so aussehen:

DelayedHandler.addEvent(element, "event-type", function () { alert("Hallo Welt"); }, 1234);

Im Beispiel dann so:

DelayedHandler.addEvent(window, "resize", sizeBar.curry('p121_bar', 'p121_table', 'p121_table_kopie'), 500);

Das bedarf nur minimaler Umstellungen. Besser wäre dann natürlich, ein vernünftiges addEvent zu verwenden, bei dem sich mehrere Handler nicht in die Quere kommen. So kommt man dann schon - man siehts bereits an den obigen prototypischen Erweiterungen - schnell zu einem eigenen Mini-Framework.

Mathias

[Felix Riesterer]

Lieber molily,

// bind mal ohne Parameterweitergabe, dafür haben wir curry

ähm, warum "curry"? Ich hätte da jetzt eher carry erwartet...

Liebe Grüße,

Felix Riesterer.

[molily]

ähm, warum "curry"?

Das ist der Terminus Technicus dafür:
http://de.wikipedia.org/wiki/Currying
http://ejohn.org/blog/partial-functions-in-javascript/

Der von mir gepostete Code für curry und bind ist Prototype entlehnt (bind hatte ich ja schon einmal vorgestellt).

Mathias