Bootstrap and JQuery

Community feedback

• 

  Raymart Pamplona•16,100

  @pikapikamartPosted over 3 years ago

  Hey just to add up, in your day and night toggle . Instead of just left to transition it. You could just use the transform then translateX property since your day and night takes the container size as 100%, then just translating it 100% from x-axis will make sure that it won't be seen until it is toggled. Because there are points where your night toggle is visible and you don't want that right. So instead of left and aligning it to the 110px position, you could just translate it. Well there are many solutions right^

  1

  ---

  

  Cường•885

  @docuong0912Posted over 3 years ago

  @pikamart Hi,thank you so much for your suggestion,really appreciate it

  Can you explain more, i didn't get your point, did you mean i should change the animate left to transform:translateX(110px), right?

  And the bug that you mention is when pressing the toggle too fast so the transition can not catch up with it right?

  0

  

  Raymart Pamplona•16,100

  @pikapikamartPosted over 3 years ago

  @docuong0912 Ughm no, what I mean in the translate is that, you should translate it like this, transform: translateX(100%) since both containers of night and days takes the whole size of its parent, translating their axis via 100% or -100% sill surely make your day and night toggle hidden. Since in your code in this block

  .night {
      position: absolute;
      content: '';
      top: 0;
      left: 110px;
      width: 100%;
      height: 100%;
      background-image: url(images/tk-stars.svg);
      background-size: cover;
      background-repeat: no-repeat;
      border-radius: 40px;
  }
  

  that is your css right, when you look at the left property, it goes with fixed pixel, but since your container resizes when its going at mobile state, the size gets bigger, and you are just transitioning it at 110px, then it won't be totally hidden, since at that point, your containerr is now at 160px, so by transitioning at 100%, using left: 100% or transform: translateX(100%) it will make sure that it is hidden

  1

  

  Cường•885

  @docuong0912Posted over 3 years ago

  @pikamart Oh, now i get it, t totally forgot about mobile viewport when writing js, thanks for pointing out my mistake, thank you for your time

  0

  

  Raymart Pamplona•16,100

  @pikapikamartPosted over 3 years ago

  @docuong0912 well helping out others also gives you ideas about things and you're welcome as well^^

  1