Posicionar DIV conforme eixo X e Y

[FabianoSouza 5]

Vivo com este problema. Se exibo dinamicamente uma div perto da barra de rolagem vertical aí estoura a tela e aparece uma rolagem horizontal... isso é muito chato.

 

Como faço para que ao exibir uma DIV via JS o código a mostre da direita para a esquerda, evitando a rolagem horizontal?

 

Vejam, não é o alinhamento da DIV (left/right). É entender em que ponto da tela foi clicado e decidir se a DIV será exibida (ou criada) da esquerda para direita ou de direita para a esquerda.

 

oBrigado.

 

 

[YFilus 14]

Olá Fabiano, tudo bem?

 

Passei por uma situação semelhante uns tempos atrás. Para resolver, calculei por JS se a div estava muito perto da lateral direita, e se estivesse, alterava uma propriedade css para a animação ficar correta.

 

Lá vai o código comentado, creio que poderá te ajudar:

 

$('.mainbar,.fullbar').each(function() {

	var w = $(this).width(); // Grava a largura da div pai

	$(this).find('.js-bigBlock').each(function() {
		var pos = $(this).position(); // Grava a posição da div filha, tendo a pai como referência
		if ( w - pos.left < 300 ) { // Se a div estiver muito para direita (position left alto), deixando menos de 300px sobrando, ele executa uma função diferente
			$(this).css({ "right":0 });
		} else {
			$(this).css({ "left":0 });
		}
	});

});

Talvez você precise alterar alguma coisa no código. Por exemplo, acho que você vai pegar o tamanho do navegador, ao invés do tamanho da div como referência. Nesse caso:

 

var w = $(window).width(); e

var pos = $(this).offset();

 

Espero que isso te ajude!