0
Well, I have a button that opens a div.
If this button is in the middle of screen, then I open the div below the button.
If the button is the end of screen and by opening the div can’t see its contents, so I open the div below the button.
But, how calculate if the button is in the screen end?
Take a look: NAY It is in the page end, but YES in the end of visible part of the page.
1
This code checks whether the element (in this case a button) is at the end of the visible area of the screen or below it:
$(window).on("scroll load", function(){
dist_bot_top = $("#botao").offset().top; // distância do botão para o início do documento
janela_scroll = $(window).scrollTop(); // distância que a página foi rolada
altura_bot = $("#botao").outerHeight(); // altura real do botão
// Abaixo subtraio a distância do botão para o início do documento
// pela distância que a página foi rolada (isso me dá a distância
// real do botão até o topo da área visível da janela) e comparo
// se é igual ou maior que a área visível da janela: window.innerHeight
if((dist_bot_top-janela_scroll)+altura_bot >= window.innerHeight){
console.log("Botão está no final");
}
// este "else" é apenas para apagar o console, pode deletar
else{
console.clear();
}
});
$(window).on("scroll load", function(){
dist_bot_top = $("#botao").offset().top; // distância do botão para o início do documento
janela_scroll = $(window).scrollTop(); // distância que a página foi rolada
altura_bot = $("#botao").outerHeight(); // altura real do botão
// Abaixo subtraio a distância do botão para o início do documento
// pela distância que a página foi rolada (isso me dá a distância
// real do botão até o topo da área visível da janela) e comparo
// se é igual ou maior que a área visível da janela: window.innerHeight
if((dist_bot_top-janela_scroll)+altura_bot >= window.innerHeight){
console.log("Botão está no final");
}
// este "else" é apenas para apagar o console, pode deletar
else{
console.clear();
}
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Role para baixo
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<input id="botao" type="button" value="ok" />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />0
Good, adapting here was as below.
But does it have a way to optimize this code?
I’m guessing it’s not well written, although it’s working properly.
$(document).ready(function(e) {
// entrega o primeiro elemento da select option à div .selecionada
$(".selectOptions .selecionada").html($(".selectOptions select > option:first-child").html());
/*popula as li's*/
$(".selectOptions select > option").each(function() {
//Não exibe a primeira li pois esta já está sendo exibida na .selecionada
if ($(this).is(':first-child')) $(".selectOptions ul").append("<li value='" + this.value + "' style='display:none;'>" + this.text + "</li>");
else $(".selectOptions ul").append("<li style='display:block;' value='" + this.value + "'>" + this.text + "</li>");
});
//contador de vezes que abre e fecha a ul
contador = 0;
$(".selectOptions .selecionada").click(function(e) {
quantasLis = $(".selectOptions ul li").length;
if (contador % 2 == 0) {
$(".selectOptions .selecionada").addClass("setaCima").removeClass("setaBaixo");
$(".selectOptions ul").css("display", "block");
$(".selectOptions ul li").css("display", "none").slideDown(400);
if (quantasLis > 4) {
$(".selectOptions ul").css('height', '175px');
$(".selectOptions ul").css("overflow-y", "scroll");
} else {
$(".selectOptions ul").css('height', (quantasLis*35)+'px');
$(".selectOptions ul").css("overflow-y", "auto");
}
janela = $(window).height();
selecionadaPosicao = $(".selectOptions .selecionada").offset().top;
selecionadaAltura = $(".selectOptions .selecionada").height();
ulAltura = $(".selectOptions ul").height();
janelaScroll = $(window).scrollTop(); // distância que a página foi rolada
posicaoFinal = ulAltura + $(".selectOptions .selecionada").outerHeight();
total = selecionadaPosicao + selecionadaAltura + ulAltura - janelaScroll;
if (total >= janela)
$(".selectOptions ul").css("bottom", posicaoFinal, "important");
else
$(".selectOptions ul").css("bottom", "0", "important");
} else {
$(".selectOptions .selecionada").addClass("setaBaixo").removeClass("setaCima");
$(".selectOptions ul li").slideUp(400, function() {
$(".selectOptions ul").css("overflow-y", "hidden");
});
}
contador++;
e.stopPropagation();
});
/*ai clicar na li, busca correspondência na select option e o checa (marca)*/
$('.selectOptions ul li').on('click', function(evt) {
/*Joga a li selecionada na label .selecionada*/
$(".selectOptions .selecionada").html($(this).html());
/*Joga a li selecionada ao topo da ul*/
$($(this).closest('ul')).prepend($(this));
// Armazena nome do maos que quer selecionar
var li = $(this).attr("value");
// Guarda em opcao o elemento que retornar do filtro que vai testar entre as
// options possÃveis
var opcao = $('.selectOptions select option').filter(function() {
// testa entre as options qual delas tem o mesmo conteúdo que o desejado
return $(this).attr('value') === li;
});
// Redefine o atributo do elemento encontrado pra selecionado.
opcao.attr('selected', true);
});
// ao clicar em qualquer coissa, fecha a ul caso ela esteja aberta
$(document).on('click', function(e) {
if (
$(".selectOptions ul").css("overflow-y") == "auto" ||
$(".selectOptions ul").css("overflow-y") == "scroll") {
$(".selectOptions .selecionada").trigger("click");
}
});
});
True, I’ll remove that part.
Browser other questions tagged jquery css css3
You are not signed in. Login or sign up in order to post.
It depends on what you call the "end of the screen"... to do this calculation, you need to define what you consider "the button at the end of the screen", because the button may be EXACTLY at the end or a few pixels above.
– Sam
@Dcdsam, first of all, thanks again for the force. So, as you scroll the screen up, the button goes down, of course. And when the button reaches the bottom of the screen, not at the bottom of the page because a page only ends at the bottom of html, but at the bottom of the visible part of the screen, then I have the position I want to calculate.
– Carlos Rocha