All geek questions in one place

How can I reposition divs when I click on the center of the parent div using jQuery?

I am trying to move a div to the center of the parent div when the link is clicked.

I currently have 3 links and they correspond to 3 divs. When you click on a link, the div to which it corresponds increases (using css transitions). So far, it works well. The right link increments the right div.

After the div has been enlarged (to select it), I need the div to move to the center, and I need the div that was already in the center to take another place. This is what I am trying to achieve. I tried to use the jQuery append, prepend, animateand use closest, but I'm not sure how to get the div to move to the center and the div in the center to move to the nearest place.

I hope this makes sense so far. I found this script link (from a question about SO) and it moves divs, but this is not entirely correct.

Here is my HTML structure:

<div class="test">
  <div class="test-links">
    <ul>
        <li><a data-target=".ecommerce" href="#">Ecommerce</a></li>
        <li><a data-target=".cloud" href="#">Cloud</a></li>
        <li><a data-target=".amazon" href="#">Amazon</a></li>  
    </ul>
  </div>
  <div class="test-slider">
    <div class="test-slide ecommerce">
      Ecommerce
    </div>
    <div class="test-slide cloud">
      Cloud
    </div>
    <div class="test-slide amazon">
      Amazon
    </div>
  </div>
</div>

This is the corresponding jQuery:

$(document).ready(function() {
  $(".test-links a").click(function() {
    var $target = $($(this).data('target'));
    $(".test-slide").not($target).removeClass('active');
    $target.addClass('active');
    return false
  });
});

Here is a link to a full working example.

+4
3

.

, div div.test-slider .

$(document).ready(function() {
  $(".test-links a").click(function() {
    var $target = $($(this).data('target'));
    $(".test-slide").not($target).removeClass('active');
    $target.addClass('active');
    
    $(".test-slider div").each(function(index,elem)
    {
      if($(elem).text() == $target.text())
      {
        if(index > 1)
        $(elem).insertBefore($(".test-slider div").eq(1));
        if(index < 1)
        $(elem).insertBefore($(".test-slider div").eq(2));
      }
    });
    
    
    
    return false
  });
});
.test {
  float: left;
  width: 100%;
  text-align: center;
}

.test-links {
  float: left;
  width: 100%;
  margin: 30px 0;
}

.test-links ul {
  list-style-type: none;
  float: left;
  width: 100%;
  margin: 0;
}

.test-links ul li {
  display: inline-block;
  float: left;
}

.test-links ul li a {
  display: block;
  padding: 30px;
}

.test-slide {
  float: left;
  width: 33.33333%;
  height: 200px;
  color: #fff;
  transition: all 300ms ease;
  opacity: 0.8;
  position: relative;
  z-index: 0;
}

.ecommerce {
  background: blue;
}

.cloud {
  background: red;
}

.amazon {
  background: grey;
}

.test-slide.active {
  -moz-transform: scale(1.08);
  -ms-transform: scale(1.08);
  -o-transform: scale(1.08);
  -webkit-transform: scale(1.08);
  color: #e67e22;
  opacity: 1;
  transform: scale(1.08);
  position: relative;
  z-index: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="test">
  <div class="test-links">
    <ul>
      <li><a data-target=".ecommerce" href="#">Ecommerce</a></li>
      <li><a data-target=".cloud" href="#">Cloud</a></li>
      <li><a data-target=".amazon" href="#">Amazon</a></li>
    </ul>
  </div>
  <div class="test-slider">
    <div class="test-slide ecommerce">
      Ecommerce
    </div>
    <div class="test-slide cloud">
      Cloud
    </div>
    <div class="test-slide amazon">
      Amazon
    </div>
  </div>
</div>
Hide result

: - .

$(document).ready(function() {
  $(".test-links a").click(function() {
    var $target = $($(this).data('target'));
    $(".test-slide").not($target).removeClass('active');
    $target.addClass('active');
    
    var len = $(".test-slider div").length;
    
    var mid = (Math.floor(len/2));
    
    $(".test-slider div").each(function(index,elem)
    {
      if($(elem).text() == $target.text())
      {
        if(index > mid)
        $(elem).insertBefore($(".test-slider div").eq(mid));
        if(index < mid)
        $(elem).insertBefore($(".test-slider div").eq(mid+1));
      }
    });
    
    
    
    return false
  });
});
.test {
  float: left;
  width: 100%;
  text-align: center;
}

.test-links {
  float: left;
  width: 100%;
  margin: 30px 0;
}

.test-links ul {
  list-style-type: none;
  float: left;
  width: 100%;
  margin: 0;
}

.test-links ul li {
  display: inline-block;
  float: left;
}

.test-links ul li a {
  display: block;
  padding: 30px;
}

.test-slide {
  float: left;
  width: 20%;
  height: 200px;
  color: #fff;
  transition: all 300ms ease;
  opacity: 0.8;
  position: relative;
  z-index: 0;
}

.ecommerce {
  background: blue;
}

.cloud {
  background: red;
}

.amazon {
  background: grey;
}

.paypal {
  background: yellow;
}

.cisco {
  background: green;
}

.test-slide.active {
  -moz-transform: scale(1.08);
  -ms-transform: scale(1.08);
  -o-transform: scale(1.08);
  -webkit-transform: scale(1.08);
  color: #e67e22;
  opacity: 1;
  transform: scale(1.08);
  position: relative;
  z-index: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="test">
  <div class="test-links">
    <ul>
      <li><a data-target=".ecommerce" href="#">Ecommerce</a></li>
      <li><a data-target=".cloud" href="#">Cloud</a></li>
      <li><a data-target=".amazon" href="#">Amazon</a></li>
       <li><a data-target=".paypal" href="#">Paypal</a></li>
        <li><a data-target=".cisco" href="#">Cisco</a></li>
    </ul>
  </div>
  <div class="test-slider">
    <div class="test-slide ecommerce">
      Ecommerce
    </div>
    <div class="test-slide cloud">
      Cloud
    </div>
    <div class="test-slide amazon">
      Amazon
    </div>
    <div class="test-slide paypal">
      Paypal
    </div>
    <div class="test-slide cisco">
      Cisco
    </div>
  </div>
</div>
Hide result
+4

insertAfter() - div div.

:

$(document).ready(function() {
  $(".test-links a").click(function() {
    var $target = $($(this).data('target'));
    $(".test-slide").not($target).removeClass('active');
    
    if ($target.is('.test-slider .test-slide:first-child'))
      $target.addClass('active').insertAfter('.test-slider .test-slide:nth-child(2)');
    else
      $target.addClass('active').insertAfter('.test-slider .test-slide:first-child');
    return false
  });
});
.test {
  float: left;
  width: 100%;
  text-align: center;
}
.test-links {
  float: left;
  width: 100%;
  margin: 30px 0;
}
.test-links ul {
  list-style-type: none;
  float: left;
  width: 100%;
  margin: 0;
}
.test-links ul li {
  display: inline-block;
  float: left;
}
.test-links ul li a {
  display: block;
  padding: 30px;
}
.test-slide {
  float: left;
  width: 33.33333%;
  height: 200px;
  color: #fff;
  transition: all 300ms ease;
  opacity: 0.8;
  position: relative;
  z-index: 0;
}
.ecommerce {
  background: blue;
}
.cloud {
  background: red;
}
.amazon {
  background: grey;
}
.test-slide.active {
  -moz-transform: scale(1.08);
  -ms-transform: scale(1.08);
  -o-transform: scale(1.08);
  -webkit-transform: scale(1.08);
  color: #e67e22;
  opacity: 1;
  transform: scale(1.08);
  position: relative;
  z-index: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="test">
  <div class="test-links">
    <ul>
      <li><a data-target=".ecommerce" href="#">Ecommerce</a>
      </li>
      <li><a data-target=".cloud" href="#">Cloud</a>
      </li>
      <li><a data-target=".amazon" href="#">Amazon</a>
      </li>
    </ul>
  </div>
  <div class="test-slider">
    <div class="test-slide ecommerce">
      Ecommerce
    </div>
    <div class="test-slide cloud">
      Cloud
    </div>
    <div class="test-slide amazon">
      Amazon
    </div>
  </div>
</div>
Hide result
+1

can try this code. I just changed the code to jsfiddle: see here: https://jsfiddle.net/6v37ue4y/10/

$(document).ready(function() {
  $(".test-links a").click(function() {
    var $target = $($(this).data('target'));
    $(".test-slide").not($target).removeClass('active');
    $target.addClass('active');
    return false
  });
  $('.test-slider div').click(function(e){
 	   var indx = $( ".test-slider div" ).index( $(this) ) ;
    // alert(indx);
     if(indx == 0){
       $(this).next('div').after($(this));
     } else if(indx == 2){
         $(this).prev('div').before($(this));
     } else {
     
     }
  });
});
.test {
  float: left;
  width: 100%;
  text-align: center;
}

.test-links {
  float: left;
  width: 100%;
  margin: 30px 0;
}

.test-links ul {
  list-style-type: none;
  float: left;
  width: 100%;
  margin: 0;
}

.test-links ul li {
  display: inline-block;
  float: left;
}

.test-links ul li a {
  display: block;
  padding: 30px;
}

.test-slide {
  float: left;
  width: 33.33333%;
  height: 200px;
  color: #fff;
  transition: all 300ms ease;
  opacity: 0.8;
  position: relative;
  z-index: 0;
}

.ecommerce {
  background: blue;
}

.cloud {
  background: red;
}

.amazon {
  background: grey;
}

.test-slide.active {
  -moz-transform: scale(1.08);
  -ms-transform: scale(1.08);
  -o-transform: scale(1.08);
  -webkit-transform: scale(1.08);
  color: #e67e22;
  opacity: 1;
  transform: scale(1.08);
  position: relative;
  z-index: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="test">
  <div class="test-links">
    <ul>
      <li><a data-target=".ecommerce" href="#">Ecommerce</a></li>
      <li><a data-target=".cloud" href="#">Cloud</a></li>
      <li><a data-target=".amazon" href="#">Amazon</a></li>
    </ul>
  </div>
  <div class="test-slider">
    <div class="test-slide ecommerce">
      Ecommerce
    </div>
    <div class="test-slide cloud">
      Cloud
    </div>
    <div class="test-slide amazon">
      Amazon
    </div>
  </div>
</div>
Run codeHide result
-1
source

Source: https://habr.com/ru/post/1666717/

More articles:


All Articles