Проскролить в самый низ в чате

299

16 июня 2017, 11:17

Здравствуйте такая проблема есть блок с сообщениями высотой 400px в него добавлено css свойство overflow-y: scroll; и блок прокручивается вниз только на 400px а как сделать чтобы прокручивался в самый низ вот сам код

$('.message-block').animate({ 
  scrollTop: $('.message-block').height() 
});

.message-block { 
    position: sticky; 
    background-color: #eef2f4; 
    height: 400px; 
    overflow-y: scroll; 
    padding-top: 10px; 
    border-radius: 10px; 
} 
.text-sender-read { 
    background-color: #8bda84; 
    width: 60%; 
    padding: 5%; 
    border-radius: 30px; 
} 
.text-sender-unread { 
    box-shadow: 0px 0px 14px 2px #3675d8; 
 } 
.sender{ 
	position: relative; 
} 
 
.incoming { 
position: relative; 
} 
 
.text-incoming { 
    background-color:rgba(173, 164, 172, 0.31); 
    width: 60%; 
    padding: 5%; 
    border-radius: 30px; 
    float: right; 
} 
 
.page_square_photo { 
        position: relative; 
    display: inline-block; 
    height: 82%; 
    border-radius: 50%; 
    border: 3px solid #b6cada; 
    width: 70px; 
    /* margin-left: 6px; */ 
    background-size: cover; 
    background-repeat: no-repeat; 
    background-position: 50% 50%; 
} 
.page_photos_module { 
    padding: 5px 0px 20px; 
    height: 110px; 
     
} 
.inline-message { 
        display: table-row-group; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="message-block"> 
<div class="inline-message"> 
<div class="col-md-10"> 
	<div class="incoming"><p class="text-incoming">tyhrgedwsqa uyjthgr4fewq</p></div> 
</div> 
 
</div> 
 
 
 
<div class="inline-message"> 
<div class="col-md-10"> 
	<div class="incoming"><p class="text-incoming">yhtrgeythrgfe</p></div> 
</div> 
 
</div> 
 
<div class="inline-message"> 
 
<div class="col-md-10"> 
<div class="sender"><p class="text-sender-read">rbtefdw</p></div> 
</div> 
</div> 
 
<div class="inline-message"> 
<div class="col-md-10"> 
	<div class="incoming"><p class="text-incoming">yhtg4rfew</p></div> 
</div> 
 
</div> 
 
<div class="inline-message"> 
<div class="col-md-10"> 
	<div class="incoming"><p class="text-incoming">tyhrge</p></div> 
</div> 
 
</div> 
 
<div class="inline-message"> 
 
<div class="col-md-10"> 
<div class="sender"><p class="text-sender-read">rtgefw</p></div> 
</div> 
</div> 
 
<div class="inline-message"> 
<div class="col-md-10"> 
	<div class="incoming"><p class="text-incoming">ytyhrgwe tyhrgew</p></div> 
</div> 
 
</div> 
 
<div class="inline-message"> 
<div class="col-md-10"> 
	<div class="incoming"><p class="text-incoming">yhtrg4e</p></div> 
</div> 
 
</div> 
 
<div class="inline-message"> 
 
<div class="col-md-10"> 
<div class="sender"><p class="text-sender-read">yuujthrge</p></div> 
</div> 
</div> 
 
<div class="inline-message"> 
<div class="col-md-10"> 
	<div class="incoming"><p class="text-incoming">hrtgefw</p></div> 
</div> 
 
</div> 
 
<div class="inline-message"> 
 
<div class="col-md-10"> 
<div class="sender"><p class="text-sender-read">y4tre</p></div> 
</div> 
</div> 
 
<div class="inline-message"> 
<div class="col-md-10"> 
	<div class="incoming"><p class="text-incoming">jtyhr4e</p></div> 
</div> 
 
</div> 
 
<div class="inline-message"> 
 
<div class="col-md-10"> 
<div class="sender"><p class="text-sender-read">ytehrg4ew</p></div> 
</div> 
</div> 
 
<div class="inline-message"> 
 
<div class="col-md-10"> 
<div class="sender"><p class="text-sender-read">trew</p></div> 
</div> 
</div> 
 
<div class="inline-message"> 
 
<div class="col-md-10"> 
<div class="sender"><p class="text-sender-read">rthgweqq</p></div> 
</div> 
</div> 
 
<div class="inline-message"> 
 
<div class="col-md-10"> 
<div class="sender"><p class="text-sender-read">rgefwq</p></div> 
</div> 
</div> 
 
<div class="inline-message"> 
 
<div class="col-md-10"> 
<div class="sender"><p class="text-sender-read">yujthtr4e</p></div> 
</div> 
</div> 
 
<div class="inline-message"> 
 
<div class="col-md-10"> 
<div class="sender"><p class="text-sender-read">y54r</p></div> 
</div> 
</div> 
 
<div class="inline-message"> 
 
<div class="col-md-10"> 
<div class="sender"><p class="text-sender-read">trgedw</p></div> 
</div> 
</div> 
 
<div class="inline-message"> 
 
<div class="col-md-10"> 
<div class="sender"><p class="text-sender-read">jyhtg4re</p></div> 
</div> 
</div> 
 
<div class="inline-message"> 
 
<div class="col-md-10"> 
<div class="sender"><p class="text-sender-read">yutjhrg4e</p></div> 
</div> 
</div> 
 
<div class="inline-message"> 
 
<div class="col-md-10"> 
<div class="sender"><p class="text-sender-read">yujthgr4e</p></div> 
</div> 
</div> 
 
<div class="inline-message"> 
 
<div class="col-md-10"> 
<div class="sender"><p class="text-sender-read">gfbvrweqq</p></div> 
</div> 
</div> 
 
<div class="inline-message"> 
<div class="col-md-10"> 
	<div class="incoming"><p class="text-incoming">y5t4re</p></div> 
</div> 
 
</div> 
 
<div class="inline-message"> 
 
<div class="col-md-10"> 
<div class="sender"><p class="text-sender-read">jyhtgrteww</p></div> 
</div> 
</div> 
 
<div class="inline-message"> 
 
<div class="col-md-10"> 
<div class="sender"><p class="text-sender-read">tyhrgew</p></div> 
</div> 
</div> 
 
<div class="inline-message"> 
 
<div class="col-md-10"> 
<div class="sender"><p class="text-sender-read">ymtnhrgeww</p></div> 
</div> 
</div> 
 
<div class="inline-message"> 
<div class="col-md-10"> 
	<div class="incoming"><p class="text-incoming"></p></div> 
</div> 
 
</div> 
 
<div class="inline-message"> 
 
<div class="col-md-10"> 
<div class="sender"><p class="text-sender-read">оноеркп4</p></div> 
</div> 
</div> 
 
<div class="inline-message"> 
 
<div class="col-md-10"> 
<div class="sender"><p class="text-sender-read">yt4r</p></div> 
</div> 
</div> 
 
<div class="inline-message"> 
 
<div class="col-md-10"> 
<div class="sender"><p class="text-sender-read">nrtberewfdqq</p></div> 
</div> 
</div> 
 
<div class="inline-message"> 
<div class="col-md-10"> 
	<div class="incoming"><p class="text-incoming">tjyhrgf4e</p></div> 
</div> 
 
</div> 
 
<div class="inline-message"> 
 
<div class="col-md-10"> 
<div class="sender"><p class="text-sender-read">jyhty4r</p></div> 
</div> 
</div> 
 
<div class="inline-message"> 
<div class="col-md-10"> 
	<div class="incoming"><p class="text-incoming">ujy4tr</p></div> 
</div> 
 
</div> 
 
<div class="inline-message"> 
<div class="col-md-10"> 
	<div class="incoming"><p class="text-incoming">yhtg4re</p></div> 
</div> 
 
</div> 
 
<div class="inline-message"> 
 
<div class="col-md-10"> 
<div class="sender"><p class="text-sender-read">jhy4gtre</p></div> 
</div> 
</div> 
 
<div class="inline-message"> 
<div class="col-md-10"> 
	<div class="incoming"><p class="text-incoming">trhgfew</p></div> 
</div> 
 
</div> 
 
<div class="inline-message"> 
<div class="col-md-10"> 
	<div class="incoming"><p class="text-incoming">jyh5g4re</p></div> 
</div> 
 
</div> 
 
<div class="inline-message"> 
 
<div class="col-md-10"> 
<div class="sender"><p class="text-sender-read">jythrg4fe</p></div> 
</div> 
</div> 
 
<div class="inline-message"> 
 
<div class="col-md-10"> 
<div class="sender"><p class="text-sender-read">tyrhge</p></div> 
</div> 
</div> 
 
<div class="inline-message"> 
 
<div class="col-md-10"> 
<div class="sender"><p class="text-sender-read">hrtgewww</p></div> 
</div> 
</div> 
 
<div class="inline-message"> 
 
<div class="col-md-10"> 
<div class="sender"><p class="text-sender-read">hngrtgrwe</p></div> 
</div> 
</div> 
 
<div class="inline-message"> 
<div class="col-md-10"> 
	<div class="incoming"><p class="text-incoming">hgrgtewqw</p></div> 
</div> 
 
</div> 
 
<div class="inline-message"> 
 
<div class="col-md-10"> 
<div class="sender"><p class="text-sender-read">trhgweq</p></div> 
</div> 
</div> 
</div>

Answer 1

Вот как я сделал, добавил еще один контейнер в ваших сообщениях теперь они в контейнере с классом message-block-inner. и у него высота автоматически ровно высоты его содержимого. И изменил прокрутку и сделал прокрутку до конца этого блока с классом (message-block-inner).

$('.message-block').animate({ 
  scrollTop: $('.message-block-inner').height() 
});

.message-block { 
    position: sticky; 
    background-color: #eef2f4; 
    height: 400px; 
    overflow-y: scroll; 
    padding-top: 10px; 
    border-radius: 10px; 
} 
.text-sender-read { 
    background-color: #8bda84; 
    width: 60%; 
    padding: 5%; 
    border-radius: 30px; 
} 
.text-sender-unread { 
    box-shadow: 0px 0px 14px 2px #3675d8; 
 } 
.sender{ 
	position: relative; 
} 
 
.incoming { 
position: relative; 
} 
 
.text-incoming { 
    background-color:rgba(173, 164, 172, 0.31); 
    width: 60%; 
    padding: 5%; 
    border-radius: 30px; 
    float: right; 
} 
 
.page_square_photo { 
        position: relative; 
    display: inline-block; 
    height: 82%; 
    border-radius: 50%; 
    border: 3px solid #b6cada; 
    width: 70px; 
    /* margin-left: 6px; */ 
    background-size: cover; 
    background-repeat: no-repeat; 
    background-position: 50% 50%; 
} 
.page_photos_module { 
    padding: 5px 0px 20px; 
    height: 110px; 
     
} 
.inline-message { 
        display: table-row-group; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="message-block"> 
<div class="message-block-inner"> 
<div class="inline-message"> 
<div class="col-md-10"> 
	<div class="incoming"><p class="text-incoming">tyhrgedwsqa uyjthgr4fewq</p></div> 
</div> 
 
</div> 
 
 
 
<div class="inline-message"> 
<div class="col-md-10"> 
	<div class="incoming"><p class="text-incoming">yhtrgeythrgfe</p></div> 
</div> 
 
</div> 
 
<div class="inline-message"> 
 
<div class="col-md-10"> 
<div class="sender"><p class="text-sender-read">rbtefdw</p></div> 
</div> 
</div> 
 
<div class="inline-message"> 
<div class="col-md-10"> 
	<div class="incoming"><p class="text-incoming">yhtg4rfew</p></div> 
</div> 
 
</div> 
 
<div class="inline-message"> 
<div class="col-md-10"> 
	<div class="incoming"><p class="text-incoming">tyhrge</p></div> 
</div> 
 
</div> 
 
<div class="inline-message"> 
 
<div class="col-md-10"> 
<div class="sender"><p class="text-sender-read">rtgefw</p></div> 
</div> 
</div> 
 
<div class="inline-message"> 
<div class="col-md-10"> 
	<div class="incoming"><p class="text-incoming">ytyhrgwe tyhrgew</p></div> 
</div> 
 
</div> 
 
<div class="inline-message"> 
<div class="col-md-10"> 
	<div class="incoming"><p class="text-incoming">yhtrg4e</p></div> 
</div> 
 
</div> 
 
<div class="inline-message"> 
 
<div class="col-md-10"> 
<div class="sender"><p class="text-sender-read">yuujthrge</p></div> 
</div> 
</div> 
 
<div class="inline-message"> 
<div class="col-md-10"> 
	<div class="incoming"><p class="text-incoming">hrtgefw</p></div> 
</div> 
 
</div> 
 
<div class="inline-message"> 
 
<div class="col-md-10"> 
<div class="sender"><p class="text-sender-read">y4tre</p></div> 
</div> 
</div> 
 
<div class="inline-message"> 
<div class="col-md-10"> 
	<div class="incoming"><p class="text-incoming">jtyhr4e</p></div> 
</div> 
 
</div> 
 
<div class="inline-message"> 
 
<div class="col-md-10"> 
<div class="sender"><p class="text-sender-read">ytehrg4ew</p></div> 
</div> 
</div> 
 
<div class="inline-message"> 
 
<div class="col-md-10"> 
<div class="sender"><p class="text-sender-read">trew</p></div> 
</div> 
</div> 
 
<div class="inline-message"> 
 
<div class="col-md-10"> 
<div class="sender"><p class="text-sender-read">rthgweqq</p></div> 
</div> 
</div> 
 
<div class="inline-message"> 
 
<div class="col-md-10"> 
<div class="sender"><p class="text-sender-read">rgefwq</p></div> 
</div> 
</div> 
 
<div class="inline-message"> 
 
<div class="col-md-10"> 
<div class="sender"><p class="text-sender-read">yujthtr4e</p></div> 
</div> 
</div> 
 
<div class="inline-message"> 
 
<div class="col-md-10"> 
<div class="sender"><p class="text-sender-read">y54r</p></div> 
</div> 
</div> 
 
<div class="inline-message"> 
 
<div class="col-md-10"> 
<div class="sender"><p class="text-sender-read">trgedw</p></div> 
</div> 
</div> 
 
<div class="inline-message"> 
 
<div class="col-md-10"> 
<div class="sender"><p class="text-sender-read">jyhtg4re</p></div> 
</div> 
</div> 
 
<div class="inline-message"> 
 
<div class="col-md-10"> 
<div class="sender"><p class="text-sender-read">yutjhrg4e</p></div> 
</div> 
</div> 
 
<div class="inline-message"> 
 
<div class="col-md-10"> 
<div class="sender"><p class="text-sender-read">yujthgr4e</p></div> 
</div> 
</div> 
 
<div class="inline-message"> 
 
<div class="col-md-10"> 
<div class="sender"><p class="text-sender-read">gfbvrweqq</p></div> 
</div> 
</div> 
 
<div class="inline-message"> 
<div class="col-md-10"> 
	<div class="incoming"><p class="text-incoming">y5t4re</p></div> 
</div> 
 
</div> 
 
<div class="inline-message"> 
 
<div class="col-md-10"> 
<div class="sender"><p class="text-sender-read">jyhtgrteww</p></div> 
</div> 
</div> 
 
<div class="inline-message"> 
 
<div class="col-md-10"> 
<div class="sender"><p class="text-sender-read">tyhrgew</p></div> 
</div> 
</div> 
 
<div class="inline-message"> 
 
<div class="col-md-10"> 
<div class="sender"><p class="text-sender-read">ymtnhrgeww</p></div> 
</div> 
</div> 
 
<div class="inline-message"> 
<div class="col-md-10"> 
	<div class="incoming"><p class="text-incoming"></p></div> 
</div> 
 
</div> 
 
<div class="inline-message"> 
 
<div class="col-md-10"> 
<div class="sender"><p class="text-sender-read">оноеркп4</p></div> 
</div> 
</div> 
 
<div class="inline-message"> 
 
<div class="col-md-10"> 
<div class="sender"><p class="text-sender-read">yt4r</p></div> 
</div> 
</div> 
 
<div class="inline-message"> 
 
<div class="col-md-10"> 
<div class="sender"><p class="text-sender-read">nrtberewfdqq</p></div> 
</div> 
</div> 
 
<div class="inline-message"> 
<div class="col-md-10"> 
	<div class="incoming"><p class="text-incoming">tjyhrgf4e</p></div> 
</div> 
 
</div> 
 
<div class="inline-message"> 
 
<div class="col-md-10"> 
<div class="sender"><p class="text-sender-read">jyhty4r</p></div> 
</div> 
</div> 
 
<div class="inline-message"> 
<div class="col-md-10"> 
	<div class="incoming"><p class="text-incoming">ujy4tr</p></div> 
</div> 
 
</div> 
 
<div class="inline-message"> 
<div class="col-md-10"> 
	<div class="incoming"><p class="text-incoming">yhtg4re</p></div> 
</div> 
 
</div> 
 
<div class="inline-message"> 
 
<div class="col-md-10"> 
<div class="sender"><p class="text-sender-read">jhy4gtre</p></div> 
</div> 
</div> 
 
<div class="inline-message"> 
<div class="col-md-10"> 
	<div class="incoming"><p class="text-incoming">trhgfew</p></div> 
</div> 
 
</div> 
 
<div class="inline-message"> 
<div class="col-md-10"> 
	<div class="incoming"><p class="text-incoming">jyh5g4re</p></div> 
</div> 
 
</div> 
 
<div class="inline-message"> 
 
<div class="col-md-10"> 
<div class="sender"><p class="text-sender-read">jythrg4fe</p></div> 
</div> 
</div> 
 
<div class="inline-message"> 
 
<div class="col-md-10"> 
<div class="sender"><p class="text-sender-read">tyrhge</p></div> 
</div> 
</div> 
 
<div class="inline-message"> 
 
<div class="col-md-10"> 
<div class="sender"><p class="text-sender-read">hrtgewww</p></div> 
</div> 
</div> 
 
<div class="inline-message"> 
 
<div class="col-md-10"> 
<div class="sender"><p class="text-sender-read">hngrtgrwe</p></div> 
</div> 
</div> 
 
<div class="inline-message"> 
<div class="col-md-10"> 
	<div class="incoming"><p class="text-incoming">hgrgtewqw</p></div> 
</div> 
 
</div> 
 
<div class="inline-message"> 
 
<div class="col-md-10"> 
<div class="sender"><p class="text-sender-read">trhgweq</p></div> 
</div> 
</div> 
</div> 
</div>

Answer 2

function animated_scroll(block, delay = 2222){ 
  let y = block.scrollTop; // Откуда начинаем прокручивать 
  const dest = block.scrollHeight -block.offsetHeight;  // До куда надо прокрутить 
  const interval = 1000 / 24; // 24 fps))  
  const delta = (dest - y) * (interval/delay); // Сколько надо прокрутить за шаг, чтобы за время delay успеть прокрутить до куда надо 
  // Поехали 
  (function scroll(){ 
    if(y < dest){ 
      y += delta; 
      block.scrollTop = y; 
      setTimeout(scroll, interval); 
    }// else мы уже на месте 
  })(); 
} 
 
 
animated_scroll(document.querySelector('.message-block'))

.message-block { 
    position: sticky; 
    background-color: #eef2f4; 
    height: 400px; 
    overflow-y: scroll; 
    padding-top: 10px; 
    border-radius: 10px; 
} 
.text-sender-read { 
    background-color: #8bda84; 
    width: 60%; 
    padding: 5%; 
    border-radius: 30px; 
} 
.text-sender-unread { 
    box-shadow: 0px 0px 14px 2px #3675d8; 
 } 
.sender{ 
	position: relative; 
} 
 
.incoming { 
position: relative; 
} 
 
.text-incoming { 
    background-color:rgba(173, 164, 172, 0.31); 
    width: 60%; 
    padding: 5%; 
    border-radius: 30px; 
    float: right; 
} 
 
.page_square_photo { 
        position: relative; 
    display: inline-block; 
    height: 82%; 
    border-radius: 50%; 
    border: 3px solid #b6cada; 
    width: 70px; 
    /* margin-left: 6px; */ 
    background-size: cover; 
    background-repeat: no-repeat; 
    background-position: 50% 50%; 
} 
.page_photos_module { 
    padding: 5px 0px 20px; 
    height: 110px; 
     
} 
.inline-message { 
        display: table-row-group; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="message-block"> 
<div class="inline-message"> 
<div class="col-md-10"> 
	<div class="incoming"><p class="text-incoming">tyhrgedwsqa uyjthgr4fewq</p></div> 
</div> 
 
</div> 
 
 
 
<div class="inline-message"> 
<div class="col-md-10"> 
	<div class="incoming"><p class="text-incoming">yhtrgeythrgfe</p></div> 
</div> 
 
</div> 
 
<div class="inline-message"> 
 
<div class="col-md-10"> 
<div class="sender"><p class="text-sender-read">rbtefdw</p></div> 
</div> 
</div> 
 
<div class="inline-message"> 
<div class="col-md-10"> 
	<div class="incoming"><p class="text-incoming">yhtg4rfew</p></div> 
</div> 
 
</div> 
 
<div class="inline-message"> 
<div class="col-md-10"> 
	<div class="incoming"><p class="text-incoming">tyhrge</p></div> 
</div> 
 
</div> 
 
<div class="inline-message"> 
 
<div class="col-md-10"> 
<div class="sender"><p class="text-sender-read">rtgefw</p></div> 
</div> 
</div> 
 
<div class="inline-message"> 
<div class="col-md-10"> 
	<div class="incoming"><p class="text-incoming">ytyhrgwe tyhrgew</p></div> 
</div> 
 
</div> 
 
<div class="inline-message"> 
<div class="col-md-10"> 
	<div class="incoming"><p class="text-incoming">yhtrg4e</p></div> 
</div> 
 
</div> 
 
<div class="inline-message"> 
 
<div class="col-md-10"> 
<div class="sender"><p class="text-sender-read">yuujthrge</p></div> 
</div> 
</div> 
 
<div class="inline-message"> 
<div class="col-md-10"> 
	<div class="incoming"><p class="text-incoming">hrtgefw</p></div> 
</div> 
 
</div> 
 
<div class="inline-message"> 
 
<div class="col-md-10"> 
<div class="sender"><p class="text-sender-read">y4tre</p></div> 
</div> 
</div> 
 
<div class="inline-message"> 
<div class="col-md-10"> 
	<div class="incoming"><p class="text-incoming">jtyhr4e</p></div> 
</div> 
 
</div> 
 
<div class="inline-message"> 
 
<div class="col-md-10"> 
<div class="sender"><p class="text-sender-read">ytehrg4ew</p></div> 
</div> 
</div> 
 
<div class="inline-message"> 
 
<div class="col-md-10"> 
<div class="sender"><p class="text-sender-read">trew</p></div> 
</div> 
</div> 
 
<div class="inline-message"> 
 
<div class="col-md-10"> 
<div class="sender"><p class="text-sender-read">rthgweqq</p></div> 
</div> 
</div> 
 
<div class="inline-message"> 
 
<div class="col-md-10"> 
<div class="sender"><p class="text-sender-read">rgefwq</p></div> 
</div> 
</div> 
 
<div class="inline-message"> 
 
<div class="col-md-10"> 
<div class="sender"><p class="text-sender-read">yujthtr4e</p></div> 
</div> 
</div> 
 
<div class="inline-message"> 
 
<div class="col-md-10"> 
<div class="sender"><p class="text-sender-read">y54r</p></div> 
</div> 
</div> 
 
<div class="inline-message"> 
 
<div class="col-md-10"> 
<div class="sender"><p class="text-sender-read">trgedw</p></div> 
</div> 
</div> 
 
<div class="inline-message"> 
 
<div class="col-md-10"> 
<div class="sender"><p class="text-sender-read">jyhtg4re</p></div> 
</div> 
</div> 
 
<div class="inline-message"> 
 
<div class="col-md-10"> 
<div class="sender"><p class="text-sender-read">yutjhrg4e</p></div> 
</div> 
</div> 
 
<div class="inline-message"> 
 
<div class="col-md-10"> 
<div class="sender"><p class="text-sender-read">yujthgr4e</p></div> 
</div> 
</div> 
 
<div class="inline-message"> 
 
<div class="col-md-10"> 
<div class="sender"><p class="text-sender-read">gfbvrweqq</p></div> 
</div> 
</div> 
 
<div class="inline-message"> 
<div class="col-md-10"> 
	<div class="incoming"><p class="text-incoming">y5t4re</p></div> 
</div> 
 
</div> 
 
<div class="inline-message"> 
 
<div class="col-md-10"> 
<div class="sender"><p class="text-sender-read">jyhtgrteww</p></div> 
</div> 
</div> 
 
<div class="inline-message"> 
 
<div class="col-md-10"> 
<div class="sender"><p class="text-sender-read">tyhrgew</p></div> 
</div> 
</div> 
 
<div class="inline-message"> 
 
<div class="col-md-10"> 
<div class="sender"><p class="text-sender-read">ymtnhrgeww</p></div> 
</div> 
</div> 
 
<div class="inline-message"> 
<div class="col-md-10"> 
	<div class="incoming"><p class="text-incoming"></p></div> 
</div> 
 
</div> 
 
<div class="inline-message"> 
 
<div class="col-md-10"> 
<div class="sender"><p class="text-sender-read">оноеркп4</p></div> 
</div> 
</div> 
 
<div class="inline-message"> 
 
<div class="col-md-10"> 
<div class="sender"><p class="text-sender-read">yt4r</p></div> 
</div> 
</div> 
 
<div class="inline-message"> 
 
<div class="col-md-10"> 
<div class="sender"><p class="text-sender-read">nrtberewfdqq</p></div> 
</div> 
</div> 
 
<div class="inline-message"> 
<div class="col-md-10"> 
	<div class="incoming"><p class="text-incoming">tjyhrgf4e</p></div> 
</div> 
 
</div> 
 
<div class="inline-message"> 
 
<div class="col-md-10"> 
<div class="sender"><p class="text-sender-read">jyhty4r</p></div> 
</div> 
</div> 
 
<div class="inline-message"> 
<div class="col-md-10"> 
	<div class="incoming"><p class="text-incoming">ujy4tr</p></div> 
</div> 
 
</div> 
 
<div class="inline-message"> 
<div class="col-md-10"> 
	<div class="incoming"><p class="text-incoming">yhtg4re</p></div> 
</div> 
 
</div> 
 
<div class="inline-message"> 
 
<div class="col-md-10"> 
<div class="sender"><p class="text-sender-read">jhy4gtre</p></div> 
</div> 
</div> 
 
<div class="inline-message"> 
<div class="col-md-10"> 
	<div class="incoming"><p class="text-incoming">trhgfew</p></div> 
</div> 
 
</div> 
 
<div class="inline-message"> 
<div class="col-md-10"> 
	<div class="incoming"><p class="text-incoming">jyh5g4re</p></div> 
</div> 
 
</div> 
 
<div class="inline-message"> 
 
<div class="col-md-10"> 
<div class="sender"><p class="text-sender-read">jythrg4fe</p></div> 
</div> 
</div> 
 
<div class="inline-message"> 
 
<div class="col-md-10"> 
<div class="sender"><p class="text-sender-read">tyrhge</p></div> 
</div> 
</div> 
 
<div class="inline-message"> 
 
<div class="col-md-10"> 
<div class="sender"><p class="text-sender-read">hrtgewww</p></div> 
</div> 
</div> 
 
<div class="inline-message"> 
 
<div class="col-md-10"> 
<div class="sender"><p class="text-sender-read">hngrtgrwe</p></div> 
</div> 
</div> 
 
<div class="inline-message"> 
<div class="col-md-10"> 
	<div class="incoming"><p class="text-incoming">hgrgtewqw</p></div> 
</div> 
 
</div> 
 
<div class="inline-message"> 
 
<div class="col-md-10"> 
<div class="sender"><p class="text-sender-read">trhgweq</p></div> 
</div> 
</div> 
</div>

P.S. jQuery не нужен

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Отображение графиков в HTML письме

Есть рассылка по пользователям раз в неделю с информациейТолько эта информация более наглядно будет смотреться в виде графика

302

javascript

Красивое форматирование html, css , js на javascript?

Есть строки в которых лежит html, js, css, json кодЕсли ли какие нибудь инструменты на javascript чтобы получив такую строку с кодом отформатировать её по указанному...

314

javascript

Как убрать toggle эффект?

Возник вопрос, о том как возможно убрать toggle в коде, этот плагин установлен в WordPress называется он olevmedia-shortcodes

206

javascript

Как сортировать по алфавиту ссылки

Этим я отсортировал только текст, но ссылки остались на прежних местахКак сделать чтобы текст ссылки соответствовал адресу ссылки после...

185