Ещё один вариант вёрстки чата, убран метод getElementsByClassName возможно другие изменения

Описание товара

Поскольку при выполнении JavaScript в IE6 предыдущей версии чата возникала ошибка JavaScript при использовании метода getElementsByClassName, JavaScript код был переписан, возможно внесены другие правки которые привели к съезжанию верстки.
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;
        }
        #contacts {
            position: absolute;
            left: 0;
            top: 0;
            width: 150px;
            bottom: 0;
            background: #d9e6f2;
            border-right: 1px solid #a0a0a0;
            overflow-y: auto;
        }
        .contact {
            padding: 8px 10px;
            cursor: pointer;
            border-bottom: 1px solid #c0c0c0;
            position: relative;
            min-height: 50px;
        }
        .contact.active {
            background: #b3cce6;
            font-weight: bold;
        }
        .contact-photo {
            position: absolute;
            left: 10px;
            top: 8px;
            width: 40px;
            height: 40px;
        }
        .contact-info {
            margin-left: 50px;
        }
        .contact-name {
            display: block;
            font-weight: bold;
            margin-bottom: 2px;
        }
        .contact-department {
            display: block;
            font-size: 0.8em;
            color: #555;
        }
        #resize-handle {
            position: absolute;
            left: 150px;
            top: 0;
            width: 5px;
            bottom: 0;
            background: #c0c0c0;
            cursor: col-resize;
            z-index: 100;
        }
        #chat-area {
            position: absolute;
            left: 155px;
            top: 0;
            right: 0;
            bottom: 0;
        }
        #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: 98%;
            margin-left: 20px;
        }
        .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: 96%;
            position: relative;
        }
        .message-time {
            color: #666666;
            font-size: 0.7em;
            margin-right: 5px;
        }
        .read-indicator {
            position: absolute;
            right: 5px;
            bottom: -5px;
            width: 16px;
            height: 10px;
            background: url('http://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="contacts">
        <div class="contact active" onclick="switchChat(1)">
            <img src="http://blog.ivru.net/10-11/chatUserPhoto.jpg" class="contact-photo" alt="Иван">
            <div class="contact-info">
                <span class="contact-name">Евгений Сергеевич Николаев</span>
                <span class="contact-department">Информационные технологии</span>
            </div>
        </div>
        <div class="contact" onclick="switchChat(2)">
            <img src="http://blog.ivru.net/10-11/chatUserPhoto.jpg" class="contact-photo" alt="Мария">
            <div class="contact-info">
                <span class="contact-name">Евгений Сергеевич Николаев2</span>
                <span class="contact-department">Отдел кадров</span>
            </div>
        </div>
        <div class="contact" onclick="switchChat(3)">
            <img src="http://blog.ivru.net/10-11/chatUserPhoto.jpg" class="contact-photo" alt="Алексей">
            <div class="contact-info">
                <span class="contact-name">Евгений Сергеевич Николаев3</span>
                <span class="contact-department">Бухгалтерия</span>
            </div>
        </div>
    </div>
      
    <div id="resize-handle"></div>
      
    <div id="chat-area">
        <div id="chat-container">
            <div class="date-separator">26 апреля 2025 года</div>
            
            <div class="message-container user1">
                <img src="http://blog.ivru.net/10-11/chatUserPhoto.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="http://blog.ivru.net/10-11/chatUserPhoto.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>
    </div>
      
    <script type="text/javascript">
        var currentChat = 1;
        var chats = {
            1: document.getElementById('chat-container').innerHTML,
            2: '<div class="date-separator">26 апреля 2025 года</div>' +
               '<div class="message-container user1">' +
               '<img src="http://blog.ivru.net/10-11/chatUserPhoto.jpg" class="user-photo" alt="User 1">' +
               '<div class="message-content"><div class="message">' +
               '<span class="message-time">14:20</span>Привет, Мария!<span class="read-indicator"></span></div></div></div>',
            3: '<div class="date-separator">25 апреля 2025 года</div>' +
               '<div class="message-container user1">' +
               '<img src="http://blog.ivru.net/10-11/chatUserPhoto.jpg" class="user-photo" alt="User 1">' +
               '<div class="message-content"><div class="message">' +
               '<span class="message-time">10:15</span>Доброе утро, Алексей!<span class="read-indicator"></span></div></div></div>'
        };
      
        // Функционал изменения ширины
        var handle = document.getElementById('resize-handle');
        var contacts = document.getElementById('contacts');
        var chatArea = document.getElementById('chat-area');
        var isResizing = false;
      
        handle.onmousedown = function(e) {
            e = e || window.event;
            isResizing = true;
            document.body.style.cursor = 'col-resize';
            return false;
        };
      
        document.onmousemove = function(e) {
            e = e || window.event;
            if (!isResizing) return;
            
            var newWidth = e.clientX;
            if (newWidth < 150) newWidth = 150;
            if (newWidth > 500) newWidth = 500;
            
            contacts.style.width = newWidth + 'px';
            handle.style.left = newWidth + 'px';
            chatArea.style.left = (newWidth + 5) + 'px';
        };
      
        document.onmouseup = function() {
            isResizing = false;
            document.body.style.cursor = '';
        };
      
        function switchChat(chatId) {
            currentChat = chatId;
            document.getElementById('chat-container').innerHTML = chats[chatId];
            
            // Обновляем активный контакт (IE6-совместимый способ)
            var contactsDiv = document.getElementById('contacts');
            var contactDivs = contactsDiv.getElementsByTagName('div');
            
            for (var i = 0; i < contactDivs.length; i++) {
                if (contactDivs[i].className.indexOf('contact') != -1) {
                    contactDivs[i].className = 'contact';
                }
            }
            
            // Активируем выбранный контакт
            var activeContact = contactsDiv.getElementsByTagName('div')[chatId-1];
            if (activeContact) {
                activeContact.className = 'contact active';
            }
        }
      
        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;
            
            // IE6-совместимая проверка пустой строки
            if (/^\s*$/.test(message)) return;
      
            var chat = document.getElementById("chat-container");
            var currentDate = getCurrentDate();
            
            if (currentDate != lastDate) {
                var dateSeparator = document.createElement("div");
                dateSeparator.className = "date-separator";
                dateSeparator.appendChild(document.createTextNode(currentDate));
                chat.appendChild(dateSeparator);
                lastDate = currentDate;
            }
            
            var newMessage = document.createElement("div");
            newMessage.className = "message-container user1";
            
            var photo = document.createElement("img");
            photo.src = "http://blog.ivru.net/10-11/chatUserPhoto.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.appendChild(document.createTextNode(getCurrentTime() + " "));
            
            var textNode = document.createTextNode(message);
            
            var readIndicator = document.createElement("span");
            readIndicator.className = "read-indicator";
            
            messageDiv.appendChild(timeSpan);
            messageDiv.appendChild(textNode);
            messageDiv.appendChild(readIndicator);
            messageContent.appendChild(messageDiv);
            newMessage.appendChild(photo);
            newMessage.appendChild(messageContent);
            
            chat.appendChild(newMessage);
      
            // Сохраняем сообщение в истории чата
            chats[currentChat] = document.getElementById('chat-container').innerHTML;
            
            input.value = "";
            chat.scrollTop = chat.scrollHeight;
        }
    </script>
</body>
</html>
Другие товары

Вы так же можете прочитать следующие статьи:
Ещё один вариант вёрстки чата, убран метод getElementsByClassName возможно другие изменения

104 549 руб.

Описание товара

Другие товары
