Реализация изменения размера области(ячейки таблицы) пользователем с помощью мыши для IE6
Гобелен - кликните для возврата на главную
Не прошло и месяца а Фурмановская ЦРБ в очередной раз попала в историю. На этот раз сотрудница клеветала на пациентов, а именно огласку получил случай когда сотрудница назвала пациента алкашём.
Ровно 3 года назад произошло событие, которое подарило жителям планеты Змеля новый чистый праздник 6 апреля - в этот замечательный день земля забрала гнить негодяя и СПАМера Жладимира Вольфовича Жириновского.
Как бы не обстояли дела в области культуры и IT-технологий, Самосвал писал статьи на связанные темы и планирует ещё написать.
Начал разбираться с информацией которая находится в HTTPS клиентском запросе рукопожатия.
Обратите внимание! Объект изображённый на гобилене может отличаться от общепринятого вида описанного объекта. Тут дело в том что художник видит именно так!
104 549 руб.
Описание товара
Начальный вариант.
<!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 Table Layout</title>
<style type="text/css">
body, html {
margin: 0;
padding: 0;
height: 100%;
overflow: hidden;
}
#container {
width: 100%;
height: 100%;
border-collapse: collapse; /* Убираем промежутки между ячейками */
}
#users-panel {
background: #f0f0f0;
vertical-align: top;
overflow-y: scroll;
}
#resize-handle {
width: 3px;
height: 100%;
background: #ccc;
cursor: col-resize;
}
#chat-panel {
height: 100%;
background: #fff;
vertical-align: top;
overflow: auto;
}
</style>
</head>
<body>
<table id="container" cellspacing="0">
<tr>
<!-- 1. Список пользователей -->
<td id="users-panel" width="150" height="100%" style="overflow-y: scroll; overflow-x: hidden;">
<div style="height: 100%; width: 100%; overflow: auto;">
<div style="padding: 5px;">Пользователь 1</div>
<div style="padding: 5px;">Пользователь 2</div>
<div style="padding: 5px;">Пользователь 2</div>
<div style="padding: 5px;">Пользователь 2</div>
<div style="padding: 5px;">Пользователь 2</div>
<div style="padding: 5px;">Пользователь 2</div>
<div style="padding: 5px;">Пользователь 2</div>
<div style="padding: 5px;">Пользователь 2</div>
<div style="padding: 5px;">Пользователь 2</div>
<div style="padding: 5px;">Пользователь 2</div>
<div style="padding: 5px;">Пользователь 2</div>
<div style="padding: 5px;">Пользователь 1</div>
<div style="padding: 5px;">Пользователь 2</div>
<div style="padding: 5px;">Пользователь 2</div>
<div style="padding: 5px;">Пользователь 2</div>
<div style="padding: 5px;">Пользователь 2</div>
<div style="padding: 5px;">Пользователь 2</div>
<div style="padding: 5px;">Пользователь 2</div>
<div style="padding: 5px;">Пользователь 2</div>
<div style="padding: 5px;">Пользователь 2</div>
<div style="padding: 5px;">Пользователь 2</div>
<div style="padding: 5px;">Пользователь 2</div>
<div style="padding: 5px;">Пользователь 1</div>
<div style="padding: 5px;">Пользователь 2</div>
<div style="padding: 5px;">Пользователь 2</div>
<div style="padding: 5px;">Пользователь 2</div>
<div style="padding: 5px;">Пользователь 2</div>
<div style="padding: 5px;">Пользователь 2</div>
<div style="padding: 5px;">Пользователь 2</div>
<div style="padding: 5px;">Пользователь 2</div>
<div style="padding: 5px;">Пользователь 2</div>
<div style="padding: 5px;">Пользователь 2</div>
<div style="padding: 5px;">Пользователь 2</div>
<div style="padding: 5px;">Пользователь 1</div>
<div style="padding: 5px;">Пользователь 2</div>
<div style="padding: 5px;">Пользователь 2</div>
<div style="padding: 5px;">Пользователь 2</div>
<div style="padding: 5px;">Пользователь 2</div>
<div style="padding: 5px;">Пользователь 2</div>
<div style="padding: 5px;">Пользователь 2</div>
<div style="padding: 5px;">Пользователь 2</div>
<div style="padding: 5px;">Пользователь 2</div>
<div style="padding: 5px;">Пользователь 2</div>
<div style="padding: 5px;">Пользователь 2</div>
<div style="padding: 5px;">Пользователь 1</div>
<div style="padding: 5px;">Пользователь 2</div>
<div style="padding: 5px;">Пользователь 2</div>
<div style="padding: 5px;">Пользователь 2</div>
<div style="padding: 5px;">Пользователь 2</div>
<div style="padding: 5px;">Пользователь 2</div>
<div style="padding: 5px;">Пользователь 2</div>
<div style="padding: 5px;">Пользователь 2</div>
<div style="padding: 5px;">Пользователь 2</div>
<div style="padding: 5px;">Пользователь 2</div>
<div style="padding: 5px;">Пользователь 2</div>
<div style="padding: 5px;">Пользователь 1</div>
<div style="padding: 5px;">Пользователь 2</div>
<div style="padding: 5px;">Пользователь 2</div>
<div style="padding: 5px;">Пользователь 2</div>
<div style="padding: 5px;">Пользователь 2</div>
<div style="padding: 5px;">Пользователь 2</div>
<div style="padding: 5px;">Пользователь 2</div>
<div style="padding: 5px;">Пользователь 2</div>
<div style="padding: 5px;">Пользователь 2</div>
<div style="padding: 5px;">Пользователь 2</div>
<div style="padding: 5px;">Пользователь 2</div>
</td>
<!-- 2. Разделитель -->
<td id="resize-handle"></td>
<!-- 3. Область чата -->
<td id="chat-panel">
<div style="padding: 10px;">Сообщения будут здесь</div>
<input type="text" id="X">
<input type="text" id="Y">
<input type="text" id="mouseX" value="0" /> X<br />
<input type="text" id="mouseY" value="0" /> Y<br />
</td>
</tr>
</table>
<script type="text/javascript">
var mouseX = 0;
var mouseY = 0;
// Функция для обновления позиции мыши
function updateMousePosition() {
document.getElementById("mouseX").value = mouseX;
document.getElementById("mouseY").value = mouseY;
}
// Захват позиции мыши (IE6-совместимый способ)
document.onmousemove = function(e) {
e = e || window.event;
mouseX = e.clientX;
mouseY = e.clientY;
};
// Запускаем обновление полей каждые 100 мс
setInterval(updateMousePosition, 100);
</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 Table Layout</title>
<style type="text/css">
body, html {
margin: 0;
padding: 0;
height: 100%;
overflow: hidden;
}
#container {
width: 100%;
height: 100%;
border-collapse: collapse; /* Убираем промежутки между ячейками */
}
#users-panel {
background: #f0f0f0;
vertical-align: top;
overflow-y: scroll;
}
#resize-handle {
width: 3px;
height: 100%;
background: #ccc;
cursor: col-resize;
}
#chat-panel {
height: 100%;
background: #fff;
vertical-align: top;
overflow: auto;
}
</style>
</head>
<body>
<table id="container" cellspacing="0">
<tr>
<!-- 1. Список пользователей -->
<td id="users-panel" width="150" height="100%" style="overflow-y: scroll; overflow-x: hidden;">
<div style="height: 100%; width: 100%; overflow: auto;">
<div style="padding: 5px;">Пользователь 1</div>
<div style="padding: 5px;">Пользователь 2</div>
<div style="padding: 5px;">Пользователь 2</div>
<div style="padding: 5px;">Пользователь 2</div>
<div style="padding: 5px;">Пользователь 2</div>
<div style="padding: 5px;">Пользователь 2</div>
<div style="padding: 5px;">Пользователь 2</div>
<div style="padding: 5px;">Пользователь 2</div>
<div style="padding: 5px;">Пользователь 2</div>
<div style="padding: 5px;">Пользователь 2</div>
<div style="padding: 5px;">Пользователь 2</div>
<div style="padding: 5px;">Пользователь 1</div>
<div style="padding: 5px;">Пользователь 2</div>
<div style="padding: 5px;">Пользователь 2</div>
<div style="padding: 5px;">Пользователь 2</div>
<div style="padding: 5px;">Пользователь 2</div>
<div style="padding: 5px;">Пользователь 2</div>
<div style="padding: 5px;">Пользователь 2</div>
<div style="padding: 5px;">Пользователь 2</div>
<div style="padding: 5px;">Пользователь 2</div>
<div style="padding: 5px;">Пользователь 2</div>
<div style="padding: 5px;">Пользователь 2</div>
<div style="padding: 5px;">Пользователь 1</div>
<div style="padding: 5px;">Пользователь 2</div>
<div style="padding: 5px;">Пользователь 2</div>
<div style="padding: 5px;">Пользователь 2</div>
<div style="padding: 5px;">Пользователь 2</div>
<div style="padding: 5px;">Пользователь 2</div>
<div style="padding: 5px;">Пользователь 2</div>
<div style="padding: 5px;">Пользователь 2</div>
<div style="padding: 5px;">Пользователь 2</div>
<div style="padding: 5px;">Пользователь 2</div>
<div style="padding: 5px;">Пользователь 2</div>
<div style="padding: 5px;">Пользователь 1</div>
<div style="padding: 5px;">Пользователь 2</div>
<div style="padding: 5px;">Пользователь 2</div>
<div style="padding: 5px;">Пользователь 2</div>
<div style="padding: 5px;">Пользователь 2</div>
<div style="padding: 5px;">Пользователь 2</div>
<div style="padding: 5px;">Пользователь 2</div>
<div style="padding: 5px;">Пользователь 2</div>
<div style="padding: 5px;">Пользователь 2</div>
<div style="padding: 5px;">Пользователь 2</div>
<div style="padding: 5px;">Пользователь 2</div>
<div style="padding: 5px;">Пользователь 1</div>
<div style="padding: 5px;">Пользователь 2</div>
<div style="padding: 5px;">Пользователь 2</div>
<div style="padding: 5px;">Пользователь 2</div>
<div style="padding: 5px;">Пользователь 2</div>
<div style="padding: 5px;">Пользователь 2</div>
<div style="padding: 5px;">Пользователь 2</div>
<div style="padding: 5px;">Пользователь 2</div>
<div style="padding: 5px;">Пользователь 2</div>
<div style="padding: 5px;">Пользователь 2</div>
<div style="padding: 5px;">Пользователь 2</div>
<div style="padding: 5px;">Пользователь 1</div>
<div style="padding: 5px;">Пользователь 2</div>
<div style="padding: 5px;">Пользователь 2</div>
<div style="padding: 5px;">Пользователь 2</div>
<div style="padding: 5px;">Пользователь 2</div>
<div style="padding: 5px;">Пользователь 2</div>
<div style="padding: 5px;">Пользователь 2</div>
<div style="padding: 5px;">Пользователь 2</div>
<div style="padding: 5px;">Пользователь 2</div>
<div style="padding: 5px;">Пользователь 2</div>
<div style="padding: 5px;">Пользователь 2</div>
</div>
</td>
<!-- 2. Разделитель -->
<td id="resize-handle"></td>
<!-- 3. Область чата -->
<td id="chat-panel">
<div style="padding: 10px;">Сообщения будут здесь</div>
<input type="text" id="X">
<input type="text" id="Y">
<input type="text" id="mouseX" value="0" /> X<br />
<input type="text" id="mouseY" value="0" /> Y<br />
</td>
</tr>
</table>
<script type="text/javascript">
var mouseX = 0;
var mouseY = 0;
var isResizing = false;
var startX = 0;
var startWidth = 0;
var usersPanel = document.getElementById("users-panel");
var resizeHandle = document.getElementById("resize-handle");
// Функция для обновления позиции мыши
function updateMousePosition() {
document.getElementById("mouseX").value = mouseX;
document.getElementById("mouseY").value = mouseY;
}
// Захват позиции мыши (IE6-совместимый способ)
document.onmousemove = function(e) {
e = e || window.event;
mouseX = e.clientX;
mouseY = e.clientY;
if (isResizing) {
var newWidth = startWidth + (mouseX - startX);
// Минимальная ширина панели пользователей
if (newWidth < 100) newWidth = 100;
// Максимальная ширина панели пользователей (например, половина экрана)
if (newWidth > document.documentElement.clientWidth / 2) {
newWidth = document.documentElement.clientWidth / 2;
}
usersPanel.width = newWidth;
}
};
// Обработчик нажатия кнопки мыши на разделителе
resizeHandle.onmousedown = function(e) {
e = e || window.event;
// Проверяем левую кнопку мыши (для IE6)
if (e.button == 1 || (e.button == 0 && !('button' in e))) {
isResizing = true;
startX = mouseX;
startWidth = parseInt(usersPanel.getAttribute("width")) || 150;
// Блокируем выделение текста при перетаскивании
document.onselectstart = function() { return false; };
document.body.style.cursor = "col-resize";
}
};
// Обработчик отпускания кнопки мыши
document.onmouseup = function() {
if (isResizing) {
isResizing = false;
document.onselectstart = null;
document.body.style.cursor = "";
}
};
// Запускаем обновление полей каждые 100 мс
setInterval(updateMousePosition, 100);
</script>
</body>
</html>
Другие товары
Вы так же можете прочитать следующие статьи:
- Гобелен «Долина Монументов. Закат над красными скалами»
- Почему дон Хуан запрещал Кастанеде записывать некоторые знания?
- Необходимость API-ключа для TinyMCE
- Как «сталкинг» (выслеживание себя) соотносится с когнитивно-поведенческой терапией?
- Гобелен "Чарующая Венеция: Закат на Гранд-канале"
- Детальный разбор частей рукопожатия в HTTPS запросе
- Гобелен "Каменные круги Стоунхенджа"
- Как применять «контролируемую глупость» в повседневной жизни?
- Гобелен "Художественный музей Иваново. Храм искусства и вдохновения"
- Гобелен «Париж. Вид на Эйфелеву башню с Сены»
- Гобелен «Греция. Санторини. Закат над Эгейским морем»
- Гобелен «Австралия. Долина Баросса. Виноградники на рассвете»
- Гобелен «Франция. Прованс. Лавандовые поля»
- Как «учение о сновидении» связано с осознанными снами?
- Гобелен «Швейцария. Озеро Люцерн и Альпы»
- Гобелен «Швейцария. Люцерн. Вид на озеро и гору Пилатус»
- Импорт SSL сертификатов в Firefox 52 для Windows XP
- Гобелен «Петра. Каменные храмы и фасады»
- Гобелен «Канада. Озеро Морейн. Голубое зеркало»
- Как Кастанеда повлиял на нью-эйджевскую культуру?