jQuery로 브라우저 너비 / 높이 변경을 듣습니다

Question

페이지가 준비되었을 때 위치 절대 (CSS)로 설정된 DIV가 있으며 다른 고정 된 Div에 비해 배치되어 있으며, Wich는 잘 작동합니다. 그러나 페이지가로드되고 모든 것이 설정되기 전에 페이지가 크기가 조정되면 해당 절대 DIV가 변경 사항을 따르지 않고 다른 장소로 이동하지 않으며 화면의 상단 및 왼쪽에 대한 값이 주어 졌다고 생각합니다.

상대적인 div i의 위치는 절대를 위치시키기 위해 시작점으로 사용하는 위치는 위의 것보다 위치를 바꿀 수 있습니다.

해당 DIV가 올바른 위치에 놓이도록 브라우저의 너비 / 높이의 변화를들을 수있는 방법이 있습니까?

미리 감사드립니다!

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, 골수는 절대적으로 배치 될 것입니다 상대적인 전체 문서와 관련하여 MyContainer에게. 이것으로 무장하면, 당신은 브라우저 크기의 거주자가 될 매우 정교하지만 강력한 위치를 건설 할 수 있습니다.

Answer 3

Jqui 웹 사이트 의이 플러그인도 있습니다.

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

다음은 데모입니다. http://www.jqui.net/demo/mutate/

도움이되기를 바랍니다.