Hören Browser Breite/Höhe ändert sich mit jQuery

Question

Ich habe einige divs, die mit Position absolute (CSS) eingestellt werden, wenn die Seite bereit ist, und sind relativ zu einem anderen festen div positioniert, was gut funktioniert. Bevor jedoch die Seite geladen wird und alles eingestellt ist, folgen diese absoluten divs nicht den Änderungen, wenn die Größe der Seite geändert wird, und bewegen sich zu anderen Stellen, von denen ich denke, dass sie Werte relativ zu oben und links vom Bildschirm erhalten.

Die Position des relativen Div, das ich als Ausgangspunkt für die Positionierung der absoluten Werte verwende, kann auch die Position relativ zu den darüber liegenden Positionen ändern.

Gibt es eine Möglichkeit, die Änderungen in der Breite/Höhe des Browsers zu hören, damit diese divs in der richtigen Position bleiben.

Vielen Dank im Voraus!

Answer 1

Zuerst möchten Sie mit dem Binden des Fensters resize Ereignis an eine Funktion Ihrer Wahl beginnen.

$(window).on("resize", methodToFixLayout); 

Jetzt können Sie die neuen Höhen und Breiten bestimmen und von dort aus Anpassungen an der Seite vornehmen.

function methodToFixLayout(e) { 
    var winHeight = $(window).height(); 
    var winWidth = $(window).width(); 
    //adjust elements css etc..... 
    //$("#someDiv").css('someProperty',someValue based on winHeight and winWidth); 
} 

Ohne weitere Einzelheiten auf der Anlage ist es schwer zu sagen, welche Änderungen Sie genau brauchen, aber diese sollten Sie in der richtigen Richtung bekommen.

Answer 2

Es ist möglicherweise nicht notwendig, JavaScript zu verwenden, wenn Sie nur Ihre Elemente relativ zu einem anderen Element als dem Gesamtdokument positionieren müssen. ": Relative Position": Sie können

<div id="myContainer" style="position:relative"> 

    <div id="myElement" style="position:absolute;left:100px;"></div> 

</div> 

Da MyContainer position:relative hat, wird myElement absolut positioniert werden aber relativ MyContainer statt, bezogen auf das Gesamtdokument. Auf diese Weise können Sie recht ausgefeilte, aber robuste Positionen erstellen, die browsergroß sind.

Answer 3

Es gibt auch dieses Plugin von jqui Website.

http://www.jqui.net/jquery-projects/jquery-mutate-official/

hier ist Demo: http://www.jqui.net/demo/mutate/

hoffe, es hilft.