Pull to refresh
18
0
Маров Николай @kolyuchii

Пользователь

Send message

Кроссбраузерный поиск в select list

Reading time 2 min
Views 31K
Ниже пойдёт речь о методе поиска по выпадающему списку (select).

Для этого требуется поле ввода текста и собственно сам выпадающий список:
<input class="type-search" type="text" />
<select size="10" id="list">
    <option value="val">Text</option>
    ...
    <option value="val*n">Text</option>
</select>

Чтобы результат поиска был нагляднее для пользователя, стоит задать тегу select атрибут size со значением 10.

Добавим к этому немного css:
input, select {
    width: 300px;
    margin: 10px auto;
    display: block;
}

При вводе данных в поле input всё, что не совпадает со строкой поиска, будем скрывать, оставляя в списке только нужные результаты.
Читать дальше →
Total votes 46: ↑30 and ↓16 +14
Comments 28

Московская Служба Спасения до совершеннолетия не дотянет?

Reading time 4 min
Views 2.1K
Примерно месяц назад на форуме Московской Службы Спасения (далее МСС) появилось сообщение, о том что работа информационного центра МСС заканчивается 1 декабря 2011 года.

Это значит, что прекращают свою работу канал МТС 112, телефон МГТС 937-99-11, каналы 0911, а так же, вероятно, «9» и «19» радиоканалы.

Надо отметить, что в истории МСС это не первый случай, когда её работникам выдают уведомление об увольнении. Подобный случай был в марте 2009 года. Однако тогда службе повезло.

На этот раз, по мнению сотрудников, ситуация куда более критичная.

Что такое МСС можно узнать на официальном сайте службы.

О закрытии МСС на радио «Сити-FM».
Читать дальше →
Total votes 66: ↑52 and ↓14 +38
Comments 39

Метод html-верстки кнопок с применением псевдоэлементов

Reading time 7 min
Views 8.8K
Появлению этой методики способствовала воистину монстрообразная вёрстка элементов страницы на нашем проекте. Подумать только, для отображения одной кнопки требовалось до семи тегов на один элемент.

Выглядело это примерно так:



html
<div class="large_button"><br>  <span class="buttons submit_v2-button clickable"><br>    <i class="left left2"></i><br>    <i class="body"><br>      <b>В архив</b><br>      <i class="end"><br>        <i></i><br>      </i><br>    </i><br>  </span><br></div>

Видно, что запутаться в таком коде проще простого, тем паче, что вариантов кнопок на проекте накопилось не менее 30. Попытка создать такую кнопку на серверной стороне вызывала негодование у коллег «пехапистов».

Поэтому моей негласной задачей стало максимальное упрощение кода.
Читать дальше →
Total votes 74: ↑50 and ↓24 +26
Comments 93

Паспорт сайта

Reading time 2 min
Views 2.5K
Довольно давно вынашиваю идею о создании для каждого сайта отдельной страницы, на которой будут указанны параметры всего сайта, информация о его разработчиках и платформе разработки.

Мысль засела мне в голову довольно давно и кое что я уже успел реализовать, но как водится, эта идея пришла в голову не одному мне. В частности на сайте студии «ANTULA» идея приобрела довольно конкретные формы.

Ниже привожу параметры, которые по мнению сотрудников компании должны входить в состав паспорта сайта.

  • 1.Название сайта.
  • 2.URL сайта.
  • 3.Краткая аннотация сайта.
  • 4.Месторасположение и контактная информация о хостинге сайта.
  • 5. Дата разработки сайта.
  • 6.Владелец сайта.
  • 7.Контактная информация о владельце сайта.
  • 8.Владелец домена (URL).
  • 9.Контактная информация о владельце домена.
  • 10.Разработчик сайта.
  • 11.Контактная информация о разработчике сайта.
  • 12.Минимальные требования к аппаратному и программному обеспечению:
    • Разрешение мониторов, под которые оптимизирован сайт.
    • Оптимальное разрешение монитора для просмотра сайта.
    • Минимальное количество цветов монитора, на котором может быть просмотрен сайт.
    • Основной браузер, которым будет просматриваться сайт, и его минимальная версия.
    • Среднее время загрузки страниц сайта при заданной скорости соединения с Интернет.
    • Время загрузки головной (домашней) страницы сайта.
  • 13. Объем сайта, Мб.
  • 14.Число html страниц сайта.
  • 15.Количество файлов сайта.
  • 16.Количество гиперссылок сайта:
    • Количество внутренних гиперссылок.
    • Количество внешних гиперссылок.
    • Количество картинок сайта.
  • 18.Глубина сайта.
  • 19.Имеется ли возможность просмотра сайта автономно, без подключения к Интернет.
  • 20.Требуется ли специальное программное обеспечение, необходимое для обеспечения штатной работоспособности сайта.

Единственное, что на мой взгляд стоит внести, так это более подробную информацию о разработчиках.

  • 10.Разработчики сайта.
    • дизайнер
    • верстальщик
    • программист
    • технический директор


В остальном это довольно полный список, по которому можно судить о всём сайте и при необходимости связаться с его разработчиками.

Принципиальное отличие предложенного метода от ставшего привычным «копипаста» в том, что информация предоставляется пользователю в неком стандартизованном виде и сразу т.е. не надо как раньше открывать окно почтовой программы для связи с автором ведь большинство информации уже отображено на экране.
Total votes 16: ↑11 and ↓5 +6
Comments 23

SEARCH-CUBE: 3D визуализация поиска от Google

Reading time 1 min
Views 578
Недавно обнаружил необычный поисковик с 3D интерфейсом от Google.

image

На сторонах куба умещается 9 поисковых страниц Google, включая графику и видео. Переворот куба на одну грань осуществляется нажатием соответствующей «стрелки» на клавиатуре. Комбинация Shift+Left Mouse осуществляет плавный поворот куба в любом направлении.

Для работы с сервисом необходим включенный JS и FlashPlayer не ниже девятой версии.

Ссылка на SEARCH-CUBE
Total votes 20: ↑16 and ↓4 +12
Comments 15

Эти тянущиеся изображения.

Reading time 2 min
Views 1.5K
Я люблю дизайнеров, которые рисуют «невозможные» сайты. Это не даёт закиснуть, заставляет искать новые решения вёрстки. Одним из таких решений стало применение «резинового неповторяющегося фона».
Решение основано на взаимосвязи вертикальной и горизонтальной координаты у изображения. Говоря иными словами, если у картинки указать только высоту, то ширина изменится согласно исходным пропорциям.
Суть идеи в том, что небольшое по размеру (и по объёму) фоновое изображение вставляется не через таблицу стилей в body, а непосредственно через тег img на странице сайта.

HTML:
<img src="url" class="body-img" alt="" title="" />

CSS:
.body-img{
position: absolute;
top: 0;
left: 0;
z-index: -1;
width: 100%;
}


Наглядная реализация метода: http://marow.ru/site/sadik/40/

Плюс такого способа вставки фонового изображения в уменьшении размера исходной картинки. Это не относится к изображениям, от которых требуется высокая чёткость. Хотя как показывает практика, фоновое изображение в большинстве случаев, нечто размытое и аморфное.

Минус же в том, что этот способ не соответствует соображениям семантичности и разделения структуры от содержания.
Также утрачивается возможность указать значения margin и padding у тега body. Иначе картинка будет растягиваться не на весь экран.

О главном.

В ie6 при наведении на фон, созданный таким способом, появляется окно ImageToolbar, которое портит всё впечатление от содеянного. Благо, что сие решается довольно безболезненно. Достаточно установить в «голову» сайта мета-тег, который запрещает появление ImageToolbar на всей площади страницы:

<meta http-equiv="imagetoolbar" content="no" />

Кроме применения в качестве фонового изображения эффект зависимости высоты и ширины можно применить при необходимости создания блока высота которого будет меняться в зависимости от его ширины (например при масштабировании страницы). Достаточно просто поместить внутрь этого блока прозрачное изображение с заданными пропорциями.
Пример.
Total votes 21: ↑14 and ↓7 +7
Comments 7

Information

Rating
Does not participate
Location
Москва, Москва и Московская обл., Россия
Date of birth
Registered
Activity