الاستماع إلى عرض متصفح / ارتفاع التغييرات مع jQuery

Question

لدي بعض Divs التي يتم تعيينها مع الموضع المطلق (CSS) عندما تكون الصفحة جاهزة، ويتم وضعها بالنسبة إلى DIC ثابت آخر، Wich يعمل بشكل جيد. ومع ذلك، قبل تحميل الصفحة ويتم تعيين كل شيء، إذا تم تغيير حجم الصفحة، فإن هذه Divs المطلقة لا تتبع التغييرات، والانتقال إلى أماكن أخرى، وأعتقد أنهم يعانون منهم قيم نسبة إلى الأعلى ويطار الشاشة.

إن موقف الحف النسبي الذي أستخدمه كأداة بداية لوضع تلك المطلقة قد يغير الموضع أيضا، بالنسبة إلى تلك الموجودة فوقها.

هل هناك أي طريقة للاستماع إلى التغييرات في عرض المستعرض / الارتفاع من أجل جعل هذه divs البقاء في الموضع الصحيح.

شكرا مقدما!

Answer 1

أولا تريد أن تبدأ بملزمة حدث تغيير حجم النافذة إلى وظيفة اختيارك.

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

يمكنك الآن تحديد المرتفعات والعرض الجديدة وإجراء تعديلات على الصفحة من هناك.

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

بدون مزيد من التفاصيل على تخطيطك، من الصعب معرفة التغييرات التي ستحتاجها بالضبط ولكن يجب أن تحصل على هذا في الاتجاه الصحيح.

Answer 2

قد لا يكون من الضروري استخدام JavaScript إذا كنت بحاجة فقط إلى وضع عنصر (عناصر) بالنسبة إلى عنصر آخر بدلا من المستند الإجمالي. يمكنك استخدام "الوضع: قريب":

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

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

</div>

لأن mycontainer لديه position:relative, ، سيتم وضع myLement على الإطلاق ولكن نسبيا إلى MyContainer بدلا من النسبي إلى الوثيقة الإجمالية. مسلح مع هذا، يمكنك بناء مواقف توضيحية للغاية، ولكنها مواقف قوية ستكون متصفح الحجم.

Answer 3

يوجد أيضا هذا البرنامج المساعد من موقع JQui.

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

هنا العرض التوضيحي: http://www.jqui.net/demo/mutate/

آمل أن يساعد.