Skip to main content
removeu 398 caracteres do conteúdo
Fonte Link
Carlos Rocha
  • 4mil
  • 2
  • 23
  • 65

Gostaria também de saber se são possíveis mais 2 coisas:

Na hora que a UL abrir, ela já abre/fecha com efeito slideDown()/slideUp().

  1. Gostaria que esse efeito (slideDown()/slideUp()) fosse aplicado também à barra de scrool da UL

  2. Gostaria que esse efeito slideDown(), quando a UL abrisse para cima da LABEL, corresse de baixo para cima.

Gostaria também de saber se são possíveis mais 2 coisas:

Na hora que a UL abrir, ela já abre/fecha com efeito slideDown()/slideUp().

  1. Gostaria que esse efeito (slideDown()/slideUp()) fosse aplicado também à barra de scrool da UL

  2. Gostaria que esse efeito slideDown(), quando a UL abrisse para cima da LABEL, corresse de baixo para cima.

adicionou 33 caracteres ao conteúdo
Fonte Link
Carlos Rocha
  • 4mil
  • 2
  • 23
  • 65
  1. Gostaria que esse feitoefeito (slideDown()/slideUp()) fosse aplicado também à barra de scrool da UL

  2. Gostaria que esse efeito slideDown(), quando a UL abrisse para cima da LABEL, corresse de baixo para cima.

  1. Gostaria que esse feito fosse aplicado também à barra de scrool da UL

  2. Gostaria que esse efeito slideDown(), quando a UL abrisse para cima da LABEL, corresse de baixo para cima.

  1. Gostaria que esse efeito (slideDown()/slideUp()) fosse aplicado também à barra de scrool da UL

  2. Gostaria que esse efeito slideDown(), quando a UL abrisse para cima da LABEL, corresse de baixo para cima.

adicionou 3532 caracteres ao conteúdo
Fonte Link
Carlos Rocha
  • 4mil
  • 2
  • 23
  • 65
$(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");
        }
    });

});
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");
$(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");
        }
    });

});
adicionou 7 caracteres ao conteúdo; adicionou 5 caracteres ao conteúdo
Fonte Link
Carlos Rocha
  • 4mil
  • 2
  • 23
  • 65
Carregando
Fonte Link
Carlos Rocha
  • 4mil
  • 2
  • 23
  • 65
Carregando