Кодинг
★ Рубрика: Кодинг
★ Тема: Javascript, SVG

Линейка на сайт для измерения ширины

Однажды вам может понадобиться такая линейка, как вы видите выше. Например, если надо чтобы пользователь видел размеры своего экрана или для дизайнерских целей. Такая линейка не плохо вписывается в дизайн нашего сайта и может иметь декоративный смысл, но при этом показывать реальную ширину контейнера, в котором выводится текст этой публикации. Но, для большей точности, мы можем еще и текущую точную ширину линейки автоматически вычислять и выводить результат в пикселях. Например, сейчас Если после открытия страницы, вы измените размеры окна браузера, а значит изменятся и размеры поля для текста этой статьи, то для вычисления новой ширины надо перегрузить или обновить страницу (F5).

Теперь расскажем как сделать такую линейку. Во-первых, вам понадобится css для описания стиля какого-то контейнера, в котором будет отображаться линейка. В нашем случае css имеет вид:
.linerule {
margin: 0;
height:50px;
color: #fff;
background: rgba(51,82,113,0.8)
 url(/picture/svg/rule.svg) left top no-repeat;
}
Обратите внимание, для формирования фонового изображения понадобится изображение в формате svg. Вы можете загрузить этот файл здесь: rule.svg. Также необходимо установить контейнер на страницу в том месте, где должна отображаться линейка, следующий html-код:
И теперь последний шаг - разместить там, где необходимо отображать ширину линейки, следующий скрипт:
document.write('ширина линейки: '+
document.getElementById('tempwork').offsetWidth+' px.'); 
Как видите все очень просто. Весь секрет в графическом файле svg.
 Похожие публикации: Javascript, SVG

Войдите, чтобы добавить Ваш ответ. [ Регистрация | Вход ]