Increasing CSS value instead of decreasing with jquery

Question

I have a page that I need to convert to rtl.
The active tab & tab arrow position doesn't match. I need to change the tab arrow position from TAB 1 to TAB 2 and vice versa.
I already changed some js value but in vain

HTML :

    <div class="container">
        <div class="row">
            <div class="col-md-12">

                <div class="main-search-container">

                    <form class="main-search-form">

                        <div class="search-type">
                            <label class="active"><input class="first-tab" name="tab" checked="checked" type="radio">TEXT</label>
                            <label><input name="tab" type="radio">TEXT</label>
                            <label><input name="tab" type="radio">TEXT</label>
                            <div class="search-type-arrow"></div>
                        </div>

                        <div class="main-search-box">

                            <div class="main-search-input larger-input">
                            </div>

                      </div>
                    </form>



            </div>
        </div>
    </div>

</div>
</div>

CSS :

body { 
    direction:rtl; 
    color: #707070; 
    background-color: #cccccc;
}
.parallax {
    background-repeat: no-repeat;
    background-position: 50% 50%;
    position: relative;
    z-index: 99;
}
.parallax-overlay {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    z-index: 101;
    background-color: #333;
    opacity: 0.4;
}

.parallax-content {
    position: relative;
    z-index: 999;
    padding: 105px 0;
}

.main-search-container {
    transform: translate3d(0,-12px,0);
}

.main-search-form {
    width: 660px;
    display: block;
    margin: 0 auto;
    position: relative;
    margin-top: 35px;
}

.search-type {
    display: inline-block;
    padding-bottom: 35px;
    position: relative;
}

.search-type input[type="radio"] { display: none; }

.search-type label {
    background-color: #fff;
    color: #333;
    cursor: pointer;
    display:inline-block;
    text-align: center;
    padding: 9px 18px;
    margin: 0 0 0 15px;
    float: right;
    transition: all 0.2s;
    border-radius: 3px;
}

.search-type label:hover,
.search-type label.active {
    background-color: #66676b;
    color: #fff;
}
.search-type-arrow {
    width: 0; 
    height: 0; 
    border-right: 15px solid transparent;
    border-left: 15px solid transparent;
    border-bottom: 15px solid #fff;
    position: absolute;
    bottom: 0;
    right: 0;
    transform: translate3d(-3px,0,0);
}

.main-search-box {
    background-color: #fff;
    box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.12);
    padding: 30px;
    padding-bottom: 20px;
    margin-top: -9px;
    border-radius: 3px;
}

.main-search-box.no-shadow {
    box-shadow: none;
    padding: 0;
    margin: 0;
}
.search-container .main-search-input input {
    font-weight: 500;
    font-size: 17px;
    height: 57px !important;
    float: right;
    box-sizing: border-box;
    border: none;
    float: right;
    height: auto;
}
.search-container .main-search-input button.button {
    width: initial;
    min-width: 100px;
    max-width: 100px;
    margin: 0;
    font-size: 18px;
    position: relative;
    margin-right: 20px;
    flex: 0 auto;
    height: 57px;
}
.search-container .main-search-input button.button i {
    position: relative;
    right: 2px;
}

JS :

(function($){
"use strict";

$(document).ready(function(){

function searchTypeButtons() {

    // Radio attr reset
    $('.search-type label.active input[type="radio"]').prop('checked',true);

    // Positioning indicator arrow
    var buttonWidth = $('.search-type label.active').width();
    var arrowDist = $('.search-type label.active').position().left;
    $('.search-type-arrow').css('right', arrowDist + (buttonWidth/2) );

    $('.search-type label').on('change', function() {
        $('.search-type input[type="radio"]').parent('label').removeClass('active');
        $('.search-type input[type="radio"]:checked').parent('label').addClass('active');

        // Positioning indicator arrow
        var buttonWidth = $('.search-type label.active').width();
        var arrowDist = $('.search-type label.active').position().left;

        $('.search-type-arrow').css({
            'right': arrowDist + (buttonWidth/2),
            'transition':'right 0.4s cubic-bezier(.87,-.41,.19,1.44)'
        });
    });

}

// Init
if ($(".main-search-form").length){
    searchTypeButtons();
    $(window).on('load resize', function() { searchTypeButtons(); });
}



// ------------------ End Document ------------------ //
});

})(this.jQuery);

• I'm using bootstrap, bootstrap rtl flipped & jquery 2.2.0 as external ressources.

Here's the snippet:
https://jsfiddle.net/s3hy37nd/5/

Can someone help with that?

Answer 1

So many errors... I can only say I tried to comment them all inside the code so... yeah it's all there:

"use strict";

jQuery(function($) { // DOM ready and $ alias secured

  // Radio attr reset (on DOM ready... makes sense?)
  $('.search-type label.active input[type="radio"]').prop('checked', true);

  function repositionArrow() { // Use a meaningful fn name
    // Positioning indicator arrow
    // Width? No. You need .outerWidth! you have paddings!!
    var buttonWidth = $('.search-type label.active').outerWidth();
    // Again use meaningful names
    // If you do console.log( $('.search-type label.active').position() );
    // you'll see no `.right` property. So yeah, use .left
    var posLeft = $('.search-type label.active').position().left;

    $('.search-type-arrow').css({
      left: posLeft + (buttonWidth / 2)
      // No need for transition here - move it to Stylesheet instead
    });
  }

  // Init
  if ($(".main-search-form").length) {
    // You might want this too inside the "if"
    $('.search-type label').on('change', function() {
      $('.search-type input[type="radio"]').parent('label').removeClass('active');
      $('.search-type input[type="radio"]:checked').parent('label').addClass('active');
      repositionArrow(); // Now you have such function
    });
    repositionArrow();
    $(window).on('load resize', repositionArrow);
  }

});

body {
  direction: rtl;
  color: #707070;
  background-color: #cccccc;
}

.parallax {
  background-repeat: no-repeat;
  background-position: 50% 50%;
  position: relative;
  z-index: 99;
}

.parallax-overlay {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  z-index: 101;
  background-color: #333;
  opacity: 0.4;
}

.parallax-content {
  position: relative;
  z-index: 999;
  padding: 105px 0;
}

.main-search-container {
  transform: translate3d(0, -12px, 0);
}

.main-search-form {
  width: 660px;
  display: block;
  margin: 0 auto;
  position: relative;
  margin-top: 35px;
}

.search-type {
  display: inline-block;
  padding-bottom: 35px;
  position: relative;
}

.search-type input[type="radio"] {
  display: none;
}

.search-type label {
  position: relative;
  /* YOU NEED SOME POSITION! */
  background-color: #fff;
  color: #333;
  cursor: pointer;
  display: inline-block;
  text-align: center;
  padding: 9px 18px;
  margin: 0 0 0 15px;
  /*float: right;              WHY? you use rtl already */
  transition: all 0.2s;
  border-radius: 3px;
}

.search-type label:hover,
.search-type label.active {
  background-color: #66676b;
  color: #fff;
}

.search-type-arrow {
  width: 0;
  height: 0;
  border-right: 15px solid transparent;
  border-left: 15px solid transparent;
  border-bottom: 15px solid #fff;
  position: absolute;
  bottom: 0;
  /*right: 0;            ...Nope. See JS, we need left */
  left: calc(100% - 30px);
  /* calc to the rescue */
  /*transform: translate3d(-3px,0,0);     but why */
  transition: left 0.4s cubic-bezier(.87, -.41, .19, 1.44);
  /* Moved from JS */
}

.main-search-box {
  background-color: #fff;
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.12);
  padding: 30px;
  padding-bottom: 20px;
  margin-top: -9px;
  border-radius: 3px;
}

<div class="parallax-content">
  <div class="container">
    <div class="row">
      <div class="col-md-12">

        <div class="main-search-container">
          <form class="main-search-form">
            <div class="search-type">
              <label class="active"><input class="first-tab" name="tab" checked="checked" type="radio">TAB 1</label>
              <label><input name="tab" type="radio">TAB 2</label>
              <label><input name="tab" type="radio">TAB 3</label>
              <div class="search-type-arrow"></div>
            </div>

            <div class="main-search-box">
              <div class="main-search-input larger-input">
              </div>
            </div>
          </form>
        </div>

      </div>
    </div>
  </div>
</div>

<script src="https://code.jquery.com/jquery-3.1.0.js"></script>

Updated jsFiddle