All geek questions in one place

Filling causing the wrong button?

So, I am trying to place buttons above the img element. I was able to do this with some CSS, but to put them upright, I used an add-on. This seems to cause problems with proper shooting. It seems that the only arrow of the icon is the icon moveDown. This is apparently related to the add-on used.

Any ideas?

  function moveItUp() {
    $(".moveUp").off("click").on("click", function() {
      var moveUpId = $(this).closest("div").attr("id");
      console.log("moveupClicked")
      console.log(moveUpId)

    })
  }
  function moveItDown() {
    $(".moveDown").off("click").on("click", function() {
      var moveDownId = $(this).closest("div").attr("id");
      console.log("moveDownClicked")
    })
  }
  moveItUp();
  moveItDown();
  
    .track img {
      position: relative;
      float: left;
      height: 75px;
      border-radius: 0px;
      
    }
    .soundMove{
      position: relative;
      text-align: center;
      font-size: 2.5em; 
       
    }
     
    .moveUp{
    
      cursor: pointer;
      position: absolute;
      left: 0;
      top: -10;
      z-index: 10;
      padding-left: 15px;
      color: white !important;
    }
    .moveDown{
    
      cursor: pointer;
      position: absolute;
      left: 0;
      top: 0;
      padding-top: 35px;
      padding-left: 15px;
      z-index: 10;
       color: white !important;
    }
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="queueList" class="queueListDiv col-md-4">
          <div class='track' id='test'>
            <div class="soundMove">
            <i class="moveUp fa fa-arrow-up"></i>
            <i class="moveDown fa fa-arrow-down"></i> 
             </div>
            <img src="https://i1.sndcdn.com/artworks-000134901706-qotldu-large.jpg" />
          </div>
    </div>
Run codeHide result

HTML

<div id="queueList" class="queueListDiv col-md-4">
      <div class='track' id='test'>
        <div class="soundMove">
        <i class="moveUp fa fa-arrow-up"></i>
        <i class="moveDown fa fa-arrow-down"></i> 
         </div>
        <img src="https://i1.sndcdn.com/artworks-000134901706-qotldu-large.jpg" />
      </div>
</div>

CSS

.track img {
  position: relative;
  float: left;
  height: 75px;
  border-radius: 0px;

}
.soundMove{
  position: relative;
  text-align: center;
  font-size: 2.5em; 

}

.moveUp{

  cursor: pointer;
  position: absolute;
  left: 0;
  top: -10;
  z-index: 10;
  padding-left: 15px;
  color: white !important;
}
.moveDown{

  cursor: pointer;
  position: absolute;
  left: 0;
  top: 0;
  padding-top: 35px;
  padding-left: 15px;
  z-index: 10;
   color: white !important;
}

Js

  function moveItUp() {
    $(".moveUp").off("click").on("click", function() {
      var moveUpId = $(this).closest("div").attr("id");
      console.log("moveupClicked")
      console.log(moveUpId)
      console.log(queueList)
      arrayMoveUp(queueList, moveUpId)
      console.log(queueList)
    })
  }
  function moveItDown() {
    $(".moveDown").off("click").on("click", function() {
      var moveDownId = $(this).closest("div").attr("id");
      console.log("moveDownClicked")
      console.log(queueList);
      arrayMoveDown(queueList, moveDownId)
      console.log(queueList);
    })
  }

Here's the script https://jsfiddle.net/m6wm8jcf/

+4
source share
2 answers

OK, I think you can do it.

function arrayMoveDown(arr, fromIndex) {
  var element = arr[fromIndex];
  arr.splice(fromIndex, 1);
  arr.splice(fromIndex + 1, 0, element)
}

function arrayMoveUp(arr, fromIndex) {
  var element = arr[fromIndex];
  arr.splice(fromIndex, 1);
  arr.splice(fromIndex - 1, 0, element)
}
function moveItUp() {
  $(".moveUp").off("click").on("click", function() {
    var moveUpId = $(this).closest("div").attr("id");
    console.log("moveupClicked")
    console.log(moveUpId)
  });
}
function moveItDown() {
  $(".moveDown").off("click").on("click", function() {
    var moveDownId = $(this).closest("div").attr("id");
    console.log("moveDownClicked")
  });
}

moveItUp();
moveItDown();
@import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css');
.track {position: relative;}
.track img {
  height: 75px;
  border-radius: 0px;
}
.soundMove{
  font-size: 2em;
}

.moveUp{
  cursor: pointer;
  position: absolute;
  top: 5px;
  z-index: 10;
  left: 15px;
  color: white !important;
}
.moveDown {
  cursor: pointer;
  position: absolute;
  left: 0;
  bottom: 5px;
  left: 15px;
  z-index: 10;
  color: white !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="queueList" class="queueListDiv col-md-4">
  <div class='track' id='test'>
    <div class="soundMove">
      <i class="moveUp fa fa-arrow-up"></i>
      <i class="moveDown fa fa-arrow-down"></i> 
    </div>
    <img src="https://i1.sndcdn.com/artworks-000134901706-qotldu-large.jpg" />
  </div>
</div>
Run codeHide result
+1
source

, click.

, position: absolute top:35px, .

  function moveItUp() {
    $(".moveUp").off("click").on("click", function() {
      var moveUpId = $(this).closest("div").attr("id");
      console.log("moveupClicked")
      console.log(moveUpId)

    })
  }
  function moveItDown() {
    $(".moveDown").off("click").on("click", function() {
      var moveDownId = $(this).closest("div").attr("id");
      console.log("moveDownClicked")
    })
  }
  moveItUp();
  moveItDown();
  
    .track {
      position: relative;
      display: inline-block;
      height: 75px;
    }
    .track img {
      position: relative;
      float: left;
      height: 75px;
      border-radius: 0px;
      
    }
    .soundMove{
      position: absolute;
      top: 0;
      width: 100%;
      height: 100%;
      text-align: center;
      font-size: 2.5em; 
       
    }
     
    .moveUp{
    
      cursor: pointer;
      position: absolute;
      left: 0;
      top: -10;
      z-index: 10;
      padding-left: 15px;
      color: white !important;
    }
    .moveDown{
    
      cursor: pointer;
      position: absolute;
      left: 0;
      top: 35px;
      padding-left: 15px;
      z-index: 10;
       color: white !important;
    }
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="queueList" class="queueListDiv col-md-4">
          <div class='track' id='test'>
            <div class="soundMove">
            <i class="moveUp fa fa-arrow-up"></i>
            <i class="moveDown fa fa-arrow-down"></i> 
             </div>
            <img src="https://i1.sndcdn.com/artworks-000134901706-qotldu-large.jpg" />
          </div>
    </div>
Hide result
+1

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

More articles:


All Articles