Самостоятельное создание сайта
Самостоятельная раскрутка и продвижение сайта

Резолюция дисплея на Javascript

   Для корректного отображения страниц html, необходимо подстраивать код страницы под различные расширения экранов дисплея пользователей. Для этого идеально подходит использование Javascript. Однако, не стоит забывать и про то, что некоторые пользователи отключают Javascript в браузерах, с целью ограничить себя от лишний выскакиваемых окон с рекламой.

   Итак, стоит задача: корректно отобразить web-страницу под различными расширениями дисплеев.
   Но, также, необходимо учесть следующие моменты:
   - пользователь отключил Javascript;
   - не использовать процентное деление ширины ячеек таблиц (так как, имеет место автоматическое увеличение браузером ширины ячеек при помещение в них различных компонентов, например, <textarea>).

   Нам необходимо выполнить следующие действия:
   1. создать обычную web-страничку;
   2. присвоить таблицам и ячейкам, которые должны динамически изменятся, идентификаторы (атрибут id);
   3. с помощью Javascript определить резолюцию дисплея и изменить значение ширины таблиц/ячеек на нужную.

   Давайте рассмотрим краткий пример, создайте простую web-страничку:
 

<html>
<head>
<title>Пример отображения ширины таблицы на дисплеях с разными резолюциями
</head>
<body>
<script src="width_table.js" type="text/javascript"></script>

<center>
<table id="table1" width="977" cellpadding="0" cellspacing="0" border=1>
<tr>
<td width=200>Ширина ячейки 200 пикселей и не меняется</td>
<td id="td1" width="577">Ширина ячейки динамически меняется</td>
<td width=200>Ширина ячейки 200 пикселей и не меняется</td> </tr>
</table>

</body>
</html>

   Как Вы заметили, мы подключаем к странице файл "width_table.js" с кодом Javascript.
   Создаем файл "width_table.js" со следующим текстом:
 

function width_table()
{
var main_width=screen.width-47;/* 47 пикселей мы отнимаем для того чтобы табличка была чуть меньше ширины браузера и внизу не появлялась горизонтальная прокрутка*/
if (document.getElementById("table1")) {document.getElementById("table1").width=main_width-47;}
if (document.getElementById("td1")) {document.getElementById("td1").width=main_width-47-400;}/* 400 пикселей это сума ширины боковых колонок таблицы ширина которых должна быть фиксированной*/
}
setTimeout("width_table()",100);/* запускаем выполнение скрипта через 100 мс*/

   Теперь, кратко рассмотрим что происходит.
   1. страница загружается и скрипт выполняется :)
   2. переменная screen.width приобретает значение резолюции дисплея в пикселях (например, 1024, 1152, 1280).
   3. далее вызываем элементы страницы через их итендификаторы и присваиваем им новое значение. Первично страница настроена на дисплей с резолюцией 1024, поэтому ширина нашей таблицы и равняется 977 (1024-47), а средняя колонка - 577 (1024-47-400).

   Также, мы учли момент, если у пользователя отключен Javascript. В этом случае, размеры таблицы остаются в первосозданом виде и благодаря тегу <center> размещенному перед таблицей она будет отображаться в центре страницы.

   Данная статья носит более теоретический характер, чем практический. На практике большинство веб мастеров для растяжения страницы сайта на всю ширину дисплея используют свойства процентного растяжения таблиц. Но из-за того, что браузер строит таблицы сразу же по мере их загрузки, не всегда корректно отображаются столбцы/рядки с не зафиксированным размером. Обычно это решается с помощью вложенных таблиц, но также это можно решить и с помощью javascript.

336
1.8 8
Рейтинг: +1.8 , голосов 8
Вы еще не голосовали!
Добавить комментарий
Удалить ответ

Ваш почтовый ящик никогда не будет опубликован
Трудно разобрать цифры? Нажмите на рисунок, чтобы обновить.

Комментариев еще нет, Вы будете первым!

Дополнительно

» С чего начать сайт?

» Установка программ

» Пример создания сайта

» Хостинг и домен

» Оптимизация сайта

» Раскрутка сайта

» Заработок web-мастера

» Примеры PHP/Javascript

» Блог и мои записки

Последние новости

Статьи по рейтингу

» Особенности покупки контента 5.0 1
» Выбор хостинга 4.8 5
» Поисковые системы 4.7 9
» Курс молодого web-мастера 4.6 21
» Где взять бесплатные ссылки 4.5 11
» Что такое сниппеты 4.5 6
» Addstudio - SEO модуль 4.5 4
» Отладка js и CSS 4.4 14
» Стратегия дохода на Sape.ru 4.3 3
» Каталоги и биржи статей 4.3 4