-1
#msg div {
  position: relative;
  border: 3px solid #b75cff;
  height: 50px;
  top: 100px;
  margin: 10px auto;
  overflow-x: auto;
  overflow-y: auto;
  width: 430px;
  left: 400px;
  font-family: Verdana, Tahoma, Arial;
  box-shadow: inset 0px 0px 15px #b75cff;
}

При нажатии на кнопку появляются div элементы msg.

Цель: Чтобы при нажатии, старый div уходил вниз, а на его месте появлялся новый(чат).

<input type="button" id="MsgButton" value="Отправить" onclick="move();addMessage()" />

3 должен быть на месте первого

3 должен быть на месте первого

3
  • а при чем здесь php ?
    – Alex
    18 фев 2018 в 17:26
  • что должно быть в новом div ?
    – Alex
    18 фев 2018 в 17:31
  • @Alex в каждом div`е появляется сообщение. 18 фев 2018 в 17:34

1 ответ 1

0

Причем тут PHP?

$("#MsgButton").on("click", function(e) {
  e.preventDefault()
  var first_element_position = $(".div_1").top;
  var third_element_position = $(".div_3").top;

  //change the positions
  $(".div_1").css('top', third_element_position);
  $(".div_3").css('top', first_element_position);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" id="MsgButton" value="Отправить" onclick="move();addMessage()" />
<div class="div_1">1</div>
<div class="div_2">2</div>
<div class="div_3">3</div>

8
  • Спасибо большое) Но немного не то. div неограниченное кол-во. Когда нажимается кнопка просто появляется новый div, под предыдущим.Мне всего лишь нужно, что бы появлялся над. 18 фев 2018 в 18:04
  • Алгоритм тот же. Только берем позицию не конкретного блока, а последнего - div:last-child 18 фев 2018 в 18:05
  • А если это окно чата - напишите просто $(".main_div").append("<div class='new_msg'>" . msg . "</div>"); Где main_div это блок с сообщениями Где new_msg это блок с самим сообщением, а переменная msg содержит в себе само сообщение 18 фев 2018 в 18:07
  • @AlexeyKhachatryan а проверить на работоспособность ?
    – Alex
    18 фев 2018 в 18:07
  • @Alex Это пример 18 фев 2018 в 18:08

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.