Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Как реализовать всплытие наверх комментариев? (https://javascript.ru/forum/misc/75060-kak-realizovat-vsplytie-naverkh-kommentariev.html)

giwuf 30.08.2018 10:05

Как реализовать всплытие наверх комментариев?
 
Приветствую всех. Помогите, пожалуйста, с советом - на какую библиотеку, технологию опереться, чтобы делать подобные комментарии, как на фото, т.е. чтобы по кнопке отправить они всплывали вверх в область экрана и при переполнении уходили вверх за область видимости?

Aetae 30.08.2018 11:35

Никаких технологий кроме базовых html, js и css тут не требуется.
<style>
  *{
    margin: 0;
    padding: 0;
  }
  .container{
    margin: 10px auto;
    position: relative;
    height: 100px;
    width: 304px;
    border: 1px solid gray;
    overflow: hidden;
  }
  #inner{
    position: absolute;
    bottom: 24px;
    left:0;
    width: 100%;
  }
  .message{
    border-radius: 10px;
    padding: 2px 10px;
    margin: 2px;
    background: gray;
    float: right;
    clear: both;
  }
  .input{
    border-top: 1px solid gray;
    position: absolute;
    bottom: 0;
    left:0;
  }
  #input, #send{
    border: none;
    padding: 2px;
    height: 20px;
  }
  #input{
    width: 200px;
  }
  #send{
    width: 100px;
  }
</style>

<div class="container">
  <div id="inner"></div>
  <div class="input">
    <input id="input"/><input id="send" value="Send" type="button"/>
  </div>
  
</div>

<script>
  send.addEventListener('click', function(){
    if(!input.value.trim()) return false;
    
    var msg = document.createElement('div');
    msg.className = 'message';
    msg.appendChild(document.createTextNode(input.value));
    input.value = "";
    inner.appendChild(msg);
  })
</script>

Но если очень хочется всегда можно найти готовую библиотеку для этого.

giwuf 30.08.2018 16:34

Aetae,
благодарю!


Часовой пояс GMT +3, время: 10:09.