Stylize overflow Hidden

Asked

Viewed 158 times

0

I have a ul which has "n" lis arranged vertically.

Initially, she is styling overflow hidden, only for a part of it, specifically from the second li to simulate a select option.

However, when I click on the first li, stylize overflow visible and so the others lis appear.

I’d like to make that overflow visible did not appear at once.

I would like to apply as much in the opening as in the closing (visible, hidden) an effect of open/close as if it were a roller.

Is it possible?

The code is from the website at this link.

jquery css

  • With overflow is not possible, or will stay open/Visible, or closed/Hidden. You will need to work with the height.

  • can give an example?

  • I think I understand the question. I’m working on an answer.

  • cool. I’m on hold.

  • It would not be easier to use a plugin for jQuery ready, follow an example https://answall.com/a/242696/3635?

  • Yes, indeed it is. Only I’m on time now and would like to see in practice what some css do. I’m taking a study here.

Show 1 more comment

3 answers

0

Instead of trying to create a custom select from scratch, because it doesn’t just use a real select and customize it using some jQuery plugin (since you’re actually using jQuery), a very good example plugin is the http://marcj.github.io/jquery-selectBox/

So instead of having all the difficulty of getting the value of your select with ul and li using .text() and perhaps being forced to use $.trim, you can just use $("select").val(); and will have the value

See an example of use:

$('select.customizado').selectBox();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<link href="https://cdn.rawgit.com/marcj/jquery-selectBox/316c77f1/jquery.selectBox.css" rel="stylesheet"/>

<script src="https://cdn.rawgit.com/marcj/jquery-selectBox/316c77f1/jquery.selectBox.js"></script>

<select class="customizado combo-1">
<option value="foo">Foo</option>
<option value="bar">Bar</option>
<option value="baz">Baz</option>
<option value="foo">Foo</option>
<option value="bar">Bar</option>
<option value="baz">Baz</option>
<option value="foo">Foo</option>
<option value="bar">Bar</option>
<option value="baz">Baz</option>
<option value="foo">Foo</option>
<option value="bar">Bar</option>
<option value="baz">Baz</option>
<option value="foo">Foo</option>
<option value="bar">Bar</option>
<option value="baz">Baz</option>
</select>

<button onclick="console.log($('.combo-1').val());">Troque o valor e clique aqui</button>

<hr>

<select class="customizado combo-2">
<option value="foobar">Foo bar</option>
<option value="barbaz">Bar baz</option>
<option value="bazfoo">Baz foo</option>
<option value="foobar">Foo bar</option>
<option value="barbaz">Bar baz</option>
<option value="bazfoo">Baz foo</option>
<option value="foobar">Foo bar</option>
<option value="barbaz">Bar baz</option>
<option value="bazfoo">Baz foo</option>
<option value="foobar">Foo bar</option>
<option value="barbaz">Bar baz</option>
<option value="bazfoo">Baz foo</option>
</select>

<button onclick="console.log($('.combo-2').val());">Troque o valor e clique aqui</button>

0

@dvdsamm, I think I got the final effect.

But something’s not right. When the ul, then there is a delay in relation to the contraction of the div pai of ul. Where did I go wrong?

$(document).ready(function(e) {

  /*popula as li's*/
  $(".selectOptions select > option").each(function() {
      $(".selectOptions .selectOption ul").append("<li id="+this.value+">"+this.text+"</li>");
  });

  /*cria um contador para contar as aberturas e fechamentos da ul*/
  contador = 0;

  /*ao clicar na ul, abre/fecha a ul*/
  $(".selectOptions .selectOption").click(function(e) {

      quantasLis = $(".selectOptions .selectOption ul li" ).length; 

      if(contador % 2 == 0) {                 

          $(".selectOptions .selectOption").addClass("setaCima").removeClass("setaBaixo");
          $(".selectOptions .selectOption ul li:not(:first)").css("display","none").slideDown(400);

          if(quantasLis > 4) {        
              $(".selectOptions .selectOption ul").css("width", "217px");
              $(".selectOptions .selectOption ul").css('height', '175px');
              $(".selectOptions .selectOption ul").css("overflow-y", "scroll") ;
          } else {
              $(".selectOptions .selectOption ul").css("width", "200px");
              $(".selectOptions .selectOption ul").css('height', 'auto');
          }

      } else {    

          $(".selectOptions .selectOption").addClass("setaBaixo").removeClass("setaCima");
          $(".selectOptions .selectOption ul").css("width", "200px");
          $(".selectOptions .selectOption ul li:not(:first)").slideUp(400, function(){
              $(".selectOptions .selectOption ul").css("overflow-y", "scroll");
              $(".selectOptions .selectOption ul").css('height', '35px');
          });
      }

      e.stopPropagation();
      contador++;
  });   

  $(document).on('click',function(e){
      if($(".selectOptions .selectOption ul").css("overflow") == "visible"){
          $(".selectOptions .selectOption").trigger("click");
      }
      e.stopPropagation();
  });

/*ai clicar na li, busca correspondêcia na select option e o checa (marca)*/
 //$(".selectOptions .selectOption ul li:not(:eq(0))").on( 'click',function(evt){
 $( '.selectOptions .selectOption ul li' ).on( 'click', function( evt ){ 
     /*Joga a li selecionada ao topo da ul*/
     $($(this).closest('ul')).prepend($(this)); 
      // Armazena nome do mês que quer selecionar
      var li = $(this).attr("id");
      // 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);        

 });

});

0

You will achieve the effect you want using slideDown() (see the commented lines that have been added in the JS code that handles the <ul>):

$(".selectOptions .selectOption").click('live', function(e) {

      if(contador % 2 == 0) {
          $(".selectOptions .selectOption").addClass("setaCima").removeClass("setaBaixo");
          $(".selectOptions .selectOption ul").css("overflow", "visible");
          $(".selectOptions .selectOption ul li:not(:first)").css("display","none").slideDown(400);
      } else {    
          $(".selectOptions .selectOption").addClass("setaBaixo").removeClass("setaCima");
          $(".selectOptions .selectOption ul li:not(:first)").slideUp(400, function(){
              $(".selectOptions .selectOption ul").css("overflow", "hidden");
          });
      }

        e.stopPropagation();
      contador++;
  });


$(document).ready(function(e) {
  /*Esconde o select*/
  $(".selectOptions select").css("display", "none");

  /*popula as li's*/
  $(".selectOptions select > option").each(function() {
      $(".selectOptions .selectOption ul").append("<li id="+this.value+">"+this.text+"</li>");
  });
    
  /*cria um contador para contar as aberturas e fechamentos da ul*/
  contador = 0;

  /*ao clicar na ul, abre/fecha a ul*/
  $(".selectOptions .selectOption").click('live', function(e) {

      if(contador % 2 == 0) {
          $(".selectOptions .selectOption").addClass("setaCima").removeClass("setaBaixo");
          $(".selectOptions .selectOption ul").css("overflow", "visible");
          $(".selectOptions .selectOption ul li:not(:first)").css("display","none").slideDown(400);
      } else {    
          $(".selectOptions .selectOption").addClass("setaBaixo").removeClass("setaCima");
          $(".selectOptions .selectOption ul li:not(:first)").slideUp(400, function(){
			  $(".selectOptions .selectOption ul").css("overflow", "hidden");
		  });
      }

		e.stopPropagation();
      contador++;
  });	

	$(document).on('click',function(e){
		if($(".selectOptions .selectOption ul").css("overflow") == "visible"){
			$(".selectOptions .selectOption").trigger("click");
		}
		e.stopPropagation();
	});
  
  /*ai clicar na li, busca correspondêcia na select option e o checa (marca)*/
   //$(".selectOptions .selectOption ul li:not(:eq(0))").on( 'click',function(evt){
   $( '.selectOptions .selectOption ul li' ).on( 'click', function( evt ){ 
       /*Joga a li selecionada ao topo da ul*/
	   $($(this).closest('ul')).prepend($(this)); 
	    // Armazena nome do mês que quer selecionar
		var li = $(this).attr("id");
		// 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);		   
		   
   });

});
@charset "utf-8";
/* CSS Document */
.selectOptions {
	position: relative;
}
.selectOptions select {
	display: none;
}
.selectOptions .selectOption:after {
	position: absolute;
	content: "";
	display: block;
	top: 1px;
	right: 1px;
	width: 33px;
	height: 33px;
	background-image: url(http://www.hotplateprensas.com.br/estilos/_imgs/setaBaixo.jpg);
}
.selectOptions .selectOption.setaBaixo:after {
	background-image: url(http://www.hotplateprensas.com.br/estilos/_imgs/setaBaixo.jpg);
}
.selectOptions .selectOption.setaCima:after {
	background-image: url(http://www.hotplateprensas.com.br/estilos/_imgs/setaCima.jpg);
}
.selectOptions .selectOption, 
.selectOptions .selectOption  ul {
	position: relative;
	width: 200px;
	height: 35px;
	background-color: rgba(0,0,0,0.2);
}
.selectOptions .selectOption  ul {
	position: relative;
	overflow: hidden;
	list-style: none;
}
.selectOptions .selectOption  ul li {
	width: 100%;
	height: 31px;
	line-height: 31px;
	cursor: pointer;
	padding: 2px;
	color: rgb(255,255,255);
	background-color: rgb(240,240,240);
	border-bottom: rgba(0,0,0,.1) 1px solid;
}
.selectOptions .selectOption  ul li:hover,
.selectOptions .selectOption  ul >:first-child {
	color: rgb(255,255,255);
	background-color: rgba(0,0,0, .1);
}
.selectOptions .selectOption  ul li:hover + .selectOption:after {
	color: rgba(0,0,0, .1);
	background-color: rgb(255,255,255);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <div class="selectOptions">
      <select name="select" required>
        <option value="1">um</option>
        <option value="2">dois</option>
        <option value="3">Tres</option>
      </select>
      <div class="selectOption">
        <ul></ul>
      </div>
   </div>

  • What is click('live'? as far as I know in jQuery this does not exist, you must be talking about the live('click') and ended up reversing, of any function has already been discontinued and replaced by the delegate who gets stuck inside the .on() within use the context in the correct order.

  • @Guilhermenascimento I don’t really know. I just left the code as it was and I just tweaked what was relevant. In fact, I didn’t touch anything, I just added 2 lines :)

  • You may find me boring, overly detailed to a point of near paranoia, but I will always be in favor of speculating on the probable origins of the problem rather than just trying to deliver a possible solution. Programming is like this, sometimes it was supposed to work, but another code there my conflicted and caused an unexpected problem that nobody noticed. But that’s my personal opinion.

  • @Guilhermenascimento I understand that. I usually, when I see absurd problems in the code that have nothing to do with the problem, I improve and give possible hints. In this case here, I had not even noticed this "live", although it does not cause any effect on the code.

  • But let me ask you 2 things: 1) Is it possible at closing time to apply the same effect? 2) And the thing of clicking outside (leave the ul), how can I close it?

  • then, is that when opening, blz, the effect is being applied. But at the time of ul retract (overflow:Hidden), the effect is not working

  • Just one more thing: kkk, sorry for the inconvenience. But the way it is, in fact, when you click outside ul, it retracts. But if you click again out of document it opens again. That’s all that’s missing

  • @Carlosrocha Fiddle updated: https://jsfiddle.net/vjzogcw9/3/

  • Ready, updated as well, http://www.hotplateprensas.com.br/styles/

  • Now, just not to leave the other colleague in the vacuum, friend, I sell from php and always had a lot of difficulty with CSS. So, as you can see in the link I passed, I’m learning to make some styles of my form to really learn. Because I’m very raw. In this case, it would do no good to get something ready. It is right that it advances the work. But at the moment I have nothing to do: understand me?

  • @Carlosrocha I don’t like it. I avoid adding libraries to the maximum, only when there is no other way anyway.

  • @Carlosrocha If you want to increase the speed of the menu, just exchange the 400 for something smaller, like 200... I think it looks better.

  • I think it’s cool. It’s a little bit like the other effects I’m using.But tell me: is it cool? Now is to give a legal study in the modifications to understand well.

  • Another situation occurred: is updated there on the site, is that I was put instead of overflow: visibily, overflow:,scrool and changed the time to hide part of the lis . It worked beauty. However, the up arrow of the scroll, stood under the arrow that already had there. So it does not appear. Some feature?

  • @Carlosrocha Add code $(".selectOptions .selectOption ul").css("width","200px"); when to close and $(".selectOptions .selectOption ul").css("width","217px"); when open.

  • I will need to do some math, because this way we have 2 problems, although the look was great: 1) if you have up to 3 options, for example, can not have scrool, need to be visibility. And if you have 4 for more there yes need to have scroll

Show 11 more comments

Browser other questions tagged jquery css

You are not signed in. Login or sign up in order to post.