Вёрстка чата с уведомление о прочтении рядом с сообщением
Гобелен - кликните для возврата на главную
Не прошло и месяца а Фурмановская ЦРБ в очередной раз попала в историю. На этот раз сотрудница клеветала на пациентов, а именно огласку получил случай когда сотрудница назвала пациента алкашём.
Ровно 3 года назад произошло событие, которое подарило жителям планеты Змеля новый чистый праздник 6 апреля - в этот замечательный день земля забрала гнить негодяя и СПАМера Жладимира Вольфовича Жириновского.
Как бы не обстояли дела в области культуры и IT-технологий, Самосвал писал статьи на связанные темы и планирует ещё написать.
Начал разбираться с информацией которая находится в HTTPS клиентском запросе рукопожатия.
Обратите внимание! Объект изображённый на гобилене может отличаться от общепринятого вида описанного объекта. Тут дело в том что художник видит именно так!
104 549 руб.
Описание товара
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=6">
<title>Чат для IE6 с индикаторами прочтения</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
background: #e6f2ff;
font-family: Arial, sans-serif;
height: 100%;
overflow: hidden;
}
#chat-container {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 80px;
overflow-y: scroll;
padding: 10px;
scrollbar-face-color: #c0c0c0;
scrollbar-shadow-color: #808080;
}
.date-separator {
background: #d9d9d9;
color: #333;
text-align: center;
margin: 15px 0;
padding: 5px 0;
max-width: 80%;
margin-left: 60px;
}
.message-container {
margin: 5px 0;
min-height: 50px;
position: relative;
}
.message-content {
margin-left: 60px;
min-height: 50px;
}
.user-photo {
position: absolute;
left: 0;
bottom: 0;
width: 50px;
height: 50px;
}
.message {
padding: 5px 10px 20px 10px; /* Увеличиваем нижний отступ */
display: inline-block;
max-width: 80%;
position: relative;
}
.message-time {
color: #666666;
font-size: 0.8em;
margin-right: 5px;
}
.read-status {
position: absolute;
right: 5px;
bottom: 5px;
width: 16px;
height: 10px;
}
.message-footer {
position: absolute;
right: 5px;
bottom: 3px;
height: 12px;
text-align: right;
}
.user1 .message {
background: #ffcccc;
}
.user2 .message {
background: #cce6ff;
}
#input-area {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 80px;
background: #d9e6f2;
border-top: 1px solid #a0a0a0;
}
#input-col {
position: absolute;
left: 0;
top: 0;
right: 150px;
height: 100%;
padding: 10px;
box-sizing: border-box;
}
#button-col {
position: absolute;
right: 0;
top: 0;
width: 150px;
height: 100%;
padding: 10px;
box-sizing: border-box;
}
#message-input {
width: 100%;
height: 100%;
}
#send-button {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div id="chat-container">
<div class="date-separator">26 апреля 2025 года</div>
<div class="message-container user1">
<img src="https://kp.spcable.ru/upload/main/1d2/tmtxe4zifn63z8f7k8s0bq3j42r1lq19.jpg" class="user-photo" alt="User 1">
<div class="message-content">
<div class="message">
<span class="message-time">12:37</span>Привет! Как дела?
<div class="message-footer">
<img src="https://blog.ivru.net/10-11/messageRead.png" class="read-status" alt="Прочитано">
</div>
</div>
</div>
</div>
<div class="message-container user2">
<img src="https://kp.spcable.ru/upload/main/1d2/tmtxe4zifn63z8f7k8s0bq3j42r1lq19.jpg" class="user-photo" alt="User 2">
<div class="message-content">
<div class="message">
<span class="message-time">12:39</span>Всё отлично! А у тебя? Это длинное сообщение для демонстрации того, как индикатор прочтения остаётся под текстом и не накладывается на него.
<div class="message-footer">
<img src="https://blog.ivru.net/10-11/messageRead.png" class="read-status" alt="Прочитано">
</div>
</div>
</div>
</div>
</div>
<div id="input-area">
<div id="input-col">
<textarea id="message-input" rows="3"></textarea>
</div>
<div id="button-col">
<button id="send-button" onclick="sendMessage()">Отправить</button>
</div>
</div>
<script type="text/javascript">
function getCurrentTime() {
var now = new Date();
var hours = now.getHours();
var minutes = now.getMinutes();
return (hours < 10 ? '0' : '') + hours + ':' + (minutes < 10 ? '0' : '') + minutes;
}
function getCurrentDate() {
var months = ['января', 'февраля', 'марта', 'апреля', 'мая', 'июня',
'июля', 'августа', 'сентября', 'октября', 'ноября', 'декабря'];
var now = new Date();
return now.getDate() + ' ' + months[now.getMonth()] + ' ' + now.getFullYear() + ' года';
}
var lastDate = '';
function sendMessage() {
var input = document.getElementById("message-input");
var message = input.value.trim();
if (message === "") return;
var chat = document.getElementById("chat-container");
var currentDate = getCurrentDate();
if (currentDate != lastDate) {
var dateSeparator = document.createElement("div");
dateSeparator.className = "date-separator";
dateSeparator.innerHTML = currentDate;
chat.appendChild(dateSeparator);
lastDate = currentDate;
}
var newMessage = document.createElement("div");
newMessage.className = "message-container user1";
var photo = document.createElement("img");
photo.src = "https://kp.spcable.ru/upload/main/1d2/tmtxe4zifn63z8f7k8s0bq3j42r1lq19.jpg";
photo.className = "user-photo";
photo.alt = "User";
var messageContent = document.createElement("div");
messageContent.className = "message-content";
var messageDiv = document.createElement("div");
messageDiv.className = "message";
var timeSpan = document.createElement("span");
timeSpan.className = "message-time";
timeSpan.innerHTML = getCurrentTime() + " ";
var messageFooter = document.createElement("div");
messageFooter.className = "message-footer";
var readStatus = document.createElement("img");
readStatus.src = "https://blog.ivru.net/10-11/messageRead.png";
readStatus.className = "read-status";
readStatus.alt = "Прочитано";
messageDiv.appendChild(timeSpan);
messageDiv.appendChild(document.createTextNode(message));
messageFooter.appendChild(readStatus);
messageDiv.appendChild(messageFooter);
messageContent.appendChild(messageDiv);
newMessage.appendChild(photo);
newMessage.appendChild(messageContent);
chat.appendChild(newMessage);
input.value = "";
chat.scrollTop = chat.scrollHeight;
}
</script>
</body>
</html>
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=6">
<title>Чат для IE6 с индикаторами прочтения</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
background: #e6f2ff;
font-family: Arial, sans-serif;
height: 100%;
overflow: hidden;
}
#chat-container {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 80px;
overflow-y: scroll;
padding: 10px;
scrollbar-face-color: #c0c0c0;
scrollbar-shadow-color: #808080;
}
.date-separator {
background: #d9d9d9;
color: #333;
text-align: center;
margin: 15px 0;
padding: 5px 0;
max-width: 80%;
margin-left: 60px;
}
.message-container {
margin: 5px 0;
min-height: 50px;
position: relative;
}
.message-content {
margin-left: 60px;
min-height: 50px;
}
.user-photo {
position: absolute;
left: 0;
bottom: 0;
width: 50px;
height: 50px;
}
.message {
padding: 5px 10px;
display: inline-block;
max-width: 80%;
position: relative;
}
.message-time {
color: #666666;
font-size: 0.8em;
margin-right: 5px;
}
.read-indicator {
display: inline-block;
width: 16px;
height: 10px;
background: url('https://blog.ivru.net/10-11/messageRead.png') no-repeat;
margin-left: 5px;
vertical-align: text-bottom;
}
.user1 .message {
background: #ffcccc;
}
.user2 .message {
background: #cce6ff;
}
#input-area {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 80px;
background: #d9e6f2;
border-top: 1px solid #a0a0a0;
}
#input-col {
position: absolute;
left: 0;
top: 0;
right: 150px;
height: 100%;
padding: 10px;
box-sizing: border-box;
}
#button-col {
position: absolute;
right: 0;
top: 0;
width: 150px;
height: 100%;
padding: 10px;
box-sizing: border-box;
}
#message-input {
width: 100%;
height: 100%;
}
#send-button {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div id="chat-container">
<div class="date-separator">26 апреля 2025 года</div>
<div class="message-container user1">
<img src="https://kp.spcable.ru/upload/main/1d2/tmtxe4zifn63z8f7k8s0bq3j42r1lq19.jpg" class="user-photo" alt="User 1">
<div class="message-content">
<div class="message">
<span class="message-time">12:37</span>Привет! Как дела?<span class="read-indicator"></span>
</div>
</div>
</div>
<div class="message-container user2">
<img src="https://kp.spcable.ru/upload/main/1d2/tmtxe4zifn63z8f7k8s0bq3j42r1lq19.jpg" class="user-photo" alt="User 2">
<div class="message-content">
<div class="message">
<span class="message-time">12:39</span>Всё отлично! А у тебя? Это длинное сообщение для демонстрации того, как индикатор прочтения остаётся в конце строки<span class="read-indicator"></span>
</div>
</div>
</div>
</div>
<div id="input-area">
<div id="input-col">
<textarea id="message-input" rows="3"></textarea>
</div>
<div id="button-col">
<button id="send-button" onclick="sendMessage()">Отправить</button>
</div>
</div>
<script type="text/javascript">
function getCurrentTime() {
var now = new Date();
var hours = now.getHours();
var minutes = now.getMinutes();
return (hours < 10 ? '0' : '') + hours + ':' + (minutes < 10 ? '0' : '') + minutes;
}
function getCurrentDate() {
var months = ['января', 'февраля', 'марта', 'апреля', 'мая', 'июня',
'июля', 'августа', 'сентября', 'октября', 'ноября', 'декабря'];
var now = new Date();
return now.getDate() + ' ' + months[now.getMonth()] + ' ' + now.getFullYear() + ' года';
}
var lastDate = '';
function sendMessage() {
var input = document.getElementById("message-input");
var message = input.value.trim();
if (message === "") return;
var chat = document.getElementById("chat-container");
var currentDate = getCurrentDate();
if (currentDate != lastDate) {
var dateSeparator = document.createElement("div");
dateSeparator.className = "date-separator";
dateSeparator.innerHTML = currentDate;
chat.appendChild(dateSeparator);
lastDate = currentDate;
}
var newMessage = document.createElement("div");
newMessage.className = "message-container user1";
var photo = document.createElement("img");
photo.src = "https://kp.spcable.ru/upload/main/1d2/tmtxe4zifn63z8f7k8s0bq3j42r1lq19.jpg";
photo.className = "user-photo";
photo.alt = "User";
var messageContent = document.createElement("div");
messageContent.className = "message-content";
var messageDiv = document.createElement("div");
messageDiv.className = "message";
var timeSpan = document.createElement("span");
timeSpan.className = "message-time";
timeSpan.innerHTML = getCurrentTime() + " ";
var readIndicator = document.createElement("span");
readIndicator.className = "read-indicator";
messageDiv.appendChild(timeSpan);
messageDiv.appendChild(document.createTextNode(message));
messageDiv.appendChild(readIndicator);
messageContent.appendChild(messageDiv);
newMessage.appendChild(photo);
newMessage.appendChild(messageContent);
chat.appendChild(newMessage);
input.value = "";
chat.scrollTop = chat.scrollHeight;
}
</script>
</body>
</html>
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=6">
<title>Чат для IE6 с индикаторами прочтения</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
background: #e6f2ff;
font-family: Arial, sans-serif;
height: 100%;
overflow: hidden;
}
#chat-container {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 80px;
overflow-y: scroll;
padding: 10px;
scrollbar-face-color: #c0c0c0;
scrollbar-shadow-color: #808080;
}
.date-separator {
background: #d9d9d9;
color: #333;
text-align: center;
margin: 15px 0;
padding: 5px 0;
max-width: 80%;
margin-left: 60px;
}
.message-container {
margin: 5px 0;
min-height: 50px;
position: relative;
}
.message-content {
margin-left: 60px;
min-height: 50px;
}
.user-photo {
position: absolute;
left: 0;
bottom: 0;
width: 50px;
height: 50px;
}
.message {
padding: 5px 25px 5px 10px; /* Увеличиваем правый отступ */
display: inline-block;
max-width: 80%;
position: relative;
}
.message-time {
color: #666666;
font-size: 0.8em;
margin-right: 5px;
}
.read-indicator {
position: absolute;
right: 5px;
bottom: -1px; /* Смещение на 1px вниз */
width: 16px;
height: 10px;
background: url('https://blog.ivru.net/10-11/messageRead.png') no-repeat;
}
.user1 .message {
background: #ffcccc;
}
.user2 .message {
background: #cce6ff;
}
#input-area {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 80px;
background: #d9e6f2;
border-top: 1px solid #a0a0a0;
}
#input-col {
position: absolute;
left: 0;
top: 0;
right: 150px;
height: 100%;
padding: 10px;
box-sizing: border-box;
}
#button-col {
position: absolute;
right: 0;
top: 0;
width: 150px;
height: 100%;
padding: 10px;
box-sizing: border-box;
}
#message-input {
width: 100%;
height: 100%;
}
#send-button {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div id="chat-container">
<div class="date-separator">26 апреля 2025 года</div>
<div class="message-container user1">
<img src="https://kp.spcable.ru/upload/main/1d2/tmtxe4zifn63z8f7k8s0bq3j42r1lq19.jpg" class="user-photo" alt="User 1">
<div class="message-content">
<div class="message">
<span class="message-time">12:37</span>Привет! Как дела?
<span class="read-indicator"></span>
</div>
</div>
</div>
<div class="message-container user2">
<img src="https://kp.spcable.ru/upload/main/1d2/tmtxe4zifn63z8f7k8s0bq3j42r1lq19.jpg" class="user-photo" alt="User 2">
<div class="message-content">
<div class="message">
<span class="message-time">12:39</span>Всё отлично! А у тебя? Это длинное сообщение для демонстрации расположения индикатора прочтения
<span class="read-indicator"></span>
</div>
</div>
</div>
</div>
<div id="input-area">
<div id="input-col">
<textarea id="message-input" rows="3"></textarea>
</div>
<div id="button-col">
<button id="send-button" onclick="sendMessage()">Отправить</button>
</div>
</div>
<script type="text/javascript">
function getCurrentTime() {
var now = new Date();
var hours = now.getHours();
var minutes = now.getMinutes();
return (hours < 10 ? '0' : '') + hours + ':' + (minutes < 10 ? '0' : '') + minutes;
}
function getCurrentDate() {
var months = ['января', 'февраля', 'марта', 'апреля', 'мая', 'июня',
'июля', 'августа', 'сентября', 'октября', 'ноября', 'декабря'];
var now = new Date();
return now.getDate() + ' ' + months[now.getMonth()] + ' ' + now.getFullYear() + ' года';
}
var lastDate = '';
function sendMessage() {
var input = document.getElementById("message-input");
var message = input.value.trim();
if (message === "") return;
var chat = document.getElementById("chat-container");
var currentDate = getCurrentDate();
if (currentDate != lastDate) {
var dateSeparator = document.createElement("div");
dateSeparator.className = "date-separator";
dateSeparator.innerHTML = currentDate;
chat.appendChild(dateSeparator);
lastDate = currentDate;
}
var newMessage = document.createElement("div");
newMessage.className = "message-container user1";
var photo = document.createElement("img");
photo.src = "https://kp.spcable.ru/upload/main/1d2/tmtxe4zifn63z8f7k8s0bq3j42r1lq19.jpg";
photo.className = "user-photo";
photo.alt = "User";
var messageContent = document.createElement("div");
messageContent.className = "message-content";
var messageDiv = document.createElement("div");
messageDiv.className = "message";
var timeSpan = document.createElement("span");
timeSpan.className = "message-time";
timeSpan.innerHTML = getCurrentTime() + " ";
var readIndicator = document.createElement("span");
readIndicator.className = "read-indicator";
messageDiv.appendChild(timeSpan);
messageDiv.appendChild(document.createTextNode(message));
messageDiv.appendChild(readIndicator);
messageContent.appendChild(messageDiv);
newMessage.appendChild(photo);
newMessage.appendChild(messageContent);
chat.appendChild(newMessage);
input.value = "";
chat.scrollTop = chat.scrollHeight;
}
</script>
</body>
</html>
Другие товары
Вы так же можете прочитать следующие статьи:
- Гобелен «Канада. Озеро Луиза на рассвете»
- Гобелен "Памятник Дмитрию Фурманову", город Фурманов, Ивановская область
- Версия вёрстки чата в которую добавлен список пользователей слева для возможности их выбора
- Гобелен «Греция. Остров Санторини на закате»
- Как отличить подлинный духовный опыт от галлюцинаций, вызванных растениями силы?
- Гобелен «Чили. Атакама. Соляные равнины под звёздным небом»
- Гобелен "Преображенский кафедральный собор, город Иваново. Свет православной веры"
- Гобелен «Мексика. Пирамиды Теотиуакан»
- Гобелен "Фонтаны на Стрелке, Ярославская область. Танец воды и света"
- Гобелен «Германия. Замок Нойшванштайн. Сказка на фоне Альп»
- DevCpp встраивание браузера в форму
- Гобелен "Музей чайников. Переславль-Залесский", Ярославская область
- Как дон Хуан объясняет природу реальности, и насколько это совместимо с квантовой физикой?
- Гобелен "Величие Колизея"
- Ещё один вариант вёрстки чата, убран метод getElementsByClassName возможно другие изменения
- Как в Borland C++ Builder 6 разместить код в заголовочном файле(например, WebBrowserEventHandler.h) и как затем подключить его к проекту
- Гобелен "Италия. Амальфийское побережье. Вечерняя лазурь"
- Почему учение дона Хуана стало популярным именно в 60-70-е годы?
- Гобелен «Франция. Прованс. Лавандовые поля на закате»
- Гобелен "Испания. Барселона. Саграда Фамилия на закате"