Problem with <select> animation

Asked

Viewed 52 times

1

Galera I set up an input system similar to android, the problem and I’m not able to do the same animation in select.

Could someone help me?

Follows the code:

Code working jsfiddle

NOTE: I want to leave the select animation, same as the input.

jquery html css

  • Hello Hugo, welcome to Stackoverflow in English. I see that you are new on the site, so I advise you to do a [tour] to better understand how Sopt works. Could you explain better how this animation would look? The more information you provide, the easier it will be to get help.

  • well put a link with the code working, wanted to leave the animation equal to the input, which is also in the code.

2 answers

1


I understand what you want. I’ve made some changes.
In HTML, in the first div:

<div class='form-group-select'>
   <label class='control-label'>CENTRO DE CUSTO</label>
   <select name='banco' class='select form_campos form_campos_numeros'>
      <option value='0'></option>
      <option value='1'>custo</option>
      <option value='2'>custo</option>
   </select>
</div>

In Jquery, from line 5, delete everything and poe:

$('.select').on('change', function(e) {
   $(this).parents('.form-group-select').toggleClass('focused', (e.type === 'focus' || this.value > 0));
}).trigger('blur');

In CSS, line 24:

.form-group.focused .control-label, .form-group-select.focused .control-label {
  opacity: 1;
  transform: scale(0.75);
}

I only changed those parts, remaining remains the same.

  • Okay, I made the changes but it didn’t work, look how the code looks like what you gave me: https://jsfiddle.net/kt8tqpkg/1/

  • The animation you say is the correct input label? When it is empty is written "Cost Center" there when it changes the option the "Cost Center" goes up and down is the correct value? Or is it something else?

  • Yes that’s right, it worked here, it was me who did wrong hahah. thank you very much.

  • But with this animation in select you got the changes I gave you. It’s in the select change. If you want the animation by clicking select swap the jquery line 5 from 'change' to 'Focus Blur' as the input is

  • friend found a problem, could you help me? Next I noticed that in fields where select already comes filled the animation does not occur, and it only works for value that is numerical. Could you help me? Follow the code with the.https://jsfiddle.net/kt8tqpkg/2problem/

  • quiet. The value is checking if it is > than 0. So if it is string it will not work. Put != 0 or different from the value of your default field. The event to work with the input has to be Blur, so it would be: $('. select'). on('change Blur', Function(e) { $(this). parents('. form-group-select'). toggleClass('focused', (e. type === 'Focus' || this.value != 0); }). Trigger('Blur');

  • Just one more thing when I put <option></option> for the input to be soft, and when I go to select an option occurs the animation. the problem is that the animation is up. look at the code:https://jsfiddle.net/kt8tqpkg/3/

  • putting <option></option> the value comes '', then you would have to check if (this.value != 0 && this.value != '), so empty or 0 does not animate

  • perfect friend, thank you very much :)

Show 4 more comments

0

Hugo, I had to do a similar implementation for some time, I’m going to post it here, maybe help you to give you an idea.

var containers = document.querySelectorAll(".container");

[].forEach.call(containers, function(container, indice) {
  var input = container.querySelector("input, select");  
  input.addEventListener("focus", function () {
    container.classList.add("hasFocus");
  });

  input.addEventListener("blur", function () {
    container.classList.remove("hasFocus");
  });

  input.addEventListener("input", function () {
    if (input.value || input.selectedIndex > 0) {
      container.classList.add("hasValue");
    } else {
      container.classList.remove("hasValue");
    }
  });
  
  var event = new Event("input");
  input.dispatchEvent(event);
});
.container {
  position: relative;
  height: 55px;
  width: 200px;
}

.container input, .container select {
  position: absolute;
  top: 20px;
  bottom: 5px;
  width: 100%;
  padding: 0px;
  margin: 0px;
  border: 0px none transparent;
  outline: none;
  box-sizing: border-box;  
  
  background-color: transparent;  
  border-bottom: 1px solid gray;
}

.container input {
  padding-left: 4px;
}

.container.hasFocus input,
.container.hasFocus select{
  border-bottom: 1px solid teal;
}

.container label {
  position: absolute;
  top: 25px;
  left: 4px;
  transition: top 0.3s linear;
  color: gray;
}

.container.hasFocus label {
  color: teal;
}

.container.hasFocus label,
.container.hasValue label
{
  top: 0px;
}
<div class="container">  
  <input id="field1" type="text" />
  <label for="field1">Campo 01</label>
</div>

<div class="container">  
  <input id="field2" type="text" value="Hello Wolrd" />
  <label for="field2">Campo 02</label>
</div>

<div class="container">  
  <select id="sel1">
    <option value=""></option>
    <option value="1">Opcao 1</option>
    <option value="2">Opcao 2</option>
    <option value="3">Opcao 3</option>
    <option value="4">Opcao 4</option>    
  </select>
  <label for="sel1">Select 01</label>
</div>

Browser other questions tagged jquery html css

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