Ouça a largura do navegador / alterações de altura com jQuery

Question

Eu tenho alguns divs que são definidas com posição absoluta (CSS) quando a página está pronto, e está posicionado em relação a uma outra div fixa, wich funciona bem. No entanto, antes que a página é carregada e tudo está definido, se a página é redimensionada, essas divs absolutos não seguir as mudanças, movendo-se para outros lugares, wich eu acho que eles são dados valores relativos ao topo e à esquerda da tela.

A posição do div relativa eu ??uso como ponto de partida para posicionar os absolutos podem mudar de posição, bem como, em relação aos que estão acima dele.

Existe alguma maneira para ouvir as mudanças no navegador largura / altura, a fim de fazer essas divs ficar colocado na posição correta.

Agradecemos antecipadamente!

Answer 1

Primeiro, você quer começar com a ligação do evento janela de redimensionamento para uma função de sua escolha.

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

Agora você pode determinar as novas alturas e larguras e fazer ajustes para a página de lá.

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

Sem mais detalhes sobre o seu layout é difícil dizer o que muda você vai precisar exatamente, mas este deverá fazê-lo indo na direção certa.

Answer 2

Pode não ser necessário o uso de JavaScript se você só precisa posicionar o seu elemento (s) em relação a outro elemento, em vez do documento em geral. Você pode usar "position: relative":

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

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

</div>

Porque myContainer tem position:relative, meuElemento será posicionado absolutamente, mas relação para myContainer em vez de em relação ao documento em geral. Armado com isso, você pode construir bastante elaborado, mas as posições robustas que será-browser-size agnóstico.

Answer 3

Há também este plugin a partir do site jqui.

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

aqui é demonstração: http://www.jqui.net/demo/mutate/

espero que ajude.