Шлейф за курсором (IE)


Содержание

Шлейф за курсором (IE)

Библиотека: скачать готовые скрипты Javascript
Шлейф изображений летает по экрану за курсором пользователя

Посмотрите на работу этого забавного скрипта на отдельной веб-странице.
При помощи приводимого ниже клиентского сценария — скрипта Javascript — шлейфы изображений (радужные звезды) летает по экрану за курсором пользователя. Вместо звезд можно ставить набор своих картинок под теми-же самыми именами (размеры изображений тоже нужно прописать).

Скачайте архивный файл ZIP или архив EXE (rar-распаковывающийся), распакуйте его и поместите содержимое распакованной папки в ту-же самую папку, где размещается Ваша веб-страница. Изменение кода скрипта может повлечь его неработоспособность. Изображения прилагаются в архиве.

Выделите мышью приводимый ниже код, скопируйте его (командой Ctrl+C) и вставьте его (командой Ctrl+V) в html-код своей веб-страницы в нужное Вам место.

Наши ссылки на веб-страницы, можно скопировать html-код ссылки

Книги по математике и физике, программы HTML, компьютерные технологии
Скачать JavaScript — бесплатно скрипты JavaScript (коллекция программ на JavaScript)

Примечание. Удобная текстовая ссылка для форумов, блогов, цитирования материалов веб-сайта, код html можно скопировать и просто вставить в Ваши веб-страницы при цитировании материалов нашего веб-сайта. Материал носит неофициальный характер и приведен для ознакомления.

Отображение шлейфа за курсором

18.05.2014, 13:07

Отображение координат точки рядом с курсором
Как сделать на WinForm так, чтоб при наведении и движении курсора по картинке (PictureBox).

Длина шлейфа
Есть экранчик winstor WH1602M-YGH-CTK а также небольшая схемка на ATMiko32 16PU (работает на 8 МГц.

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

Засорение в гнезде шлейфа
Гнездо шлейфа засорилось ватой, внутри крючки, которые цепляют волокна. Как её оттуда вытащить? -.

Стороны IDE шлейфа
В общем вопрос , давно волнующий умы и рождающий споры , есть ли разница каким концом втыкать.

Henry Motu

Разработка C#, PHP, AS3. Администрирование Linux и Windows

Шлейф «Спираль» за курсором мыши на AS3 во Flash

Обещал писать о AS3, а по сей день ни одной записи :). Стало стыдно мне….
Хочу предупредить сразу, что основную массу примеров буду описывать с использованием подхода программиста, а не художника. Весь код буду стараться описывать более читабельно и с точки ООП (Объектно ориентированного программирования).

Перечитал ранее описанное и смешно стало — звучит как постулаты))).

Сегодня рассмотрим пример создания так называемой мной «красивости». Почему именно так назвал? Дело в том, что практического применения я пока не нашел. Буду использовать математические модели описанные в AS3 коде. Мой совет, если Вы хотите создавать действительно классные вещи во Flash, осмотритесь вокруг, на природу и постарайтесь найти математическое описание модели.

Шлейф «Спираль» на AS3 можно создать при помощи следующих инструментов:

  1. Обычный текстовый редактор и бесплатный Flex SDK для преобразования программы в SWF файл;
  2. Настроенное приложение Flash Develop ;
  3. Настроенное приложение Eclipse ;
  4. Продукты компании Adobe — Flex Builder, или Flash Professional;
  5. и кто чем гаразд)))

Кстати, вскоре хочу создать проект онлайн компиляции на моем домашнем хостинге. Приглашение выложу.

1. Создание файла AS3 c именем основного класса:

Создадим файл MouseTrailer.as, котрый будет содержать весь Наш код.

2. Создание класса AS3 элементарного объекта:

Запишем в файл следующий код, который описывает элементарный класс с незамысловатым названием «Частичка».


3. Основной класс сцены

В начало файла MouseTrailer.as дописываем код основного класса. Описание каждой функции опишу ниже.

4. Компиляция MouseTrailer.as и результат

Скомпилировав данный файл. Должно получиться следующее:

Шлейф «Спираль» за курсором мыши на AS3 во Flash : Один комментарий

Спасибо за статью!
Очень интересно и результат красивый

Шлейф за курсором (IE)

Библиотека: скачать готовые скрипты Javascript
Шлейф изображений летает по экрану за курсором пользователя

Посмотрите на работу этого забавного скрипта на отдельной веб-странице.
При помощи приводимого ниже клиентского сценария — скрипта Javascript — шлейфы изображений (радужные звезды) летает по экрану за курсором пользователя. Вместо звезд можно ставить набор своих картинок под теми-же самыми именами (размеры изображений тоже нужно прописать).

Скачайте архивный файл ZIP или архив EXE (rar-распаковывающийся), распакуйте его и поместите содержимое распакованной папки в ту-же самую папку, где размещается Ваша веб-страница. Изменение кода скрипта может повлечь его неработоспособность. Изображения прилагаются в архиве.

Выделите мышью приводимый ниже код, скопируйте его (командой Ctrl+C) и вставьте его (командой Ctrl+V) в html-код своей веб-страницы в нужное Вам место.

Наши ссылки на веб-страницы, можно скопировать html-код ссылки

Книги по математике и физике, программы HTML, компьютерные технологии
Скачать JavaScript — бесплатно скрипты JavaScript (коллекция программ на JavaScript)

Примечание. Удобная текстовая ссылка для форумов, блогов, цитирования материалов веб-сайта, код html можно скопировать и просто вставить в Ваши веб-страницы при цитировании материалов нашего веб-сайта. Материал носит неофициальный характер и приведен для ознакомления.

Henry Motu

Разработка C#, PHP, AS3. Администрирование Linux и Windows

Шлейф «Спираль» за курсором мыши на AS3 во Flash

Обещал писать о AS3, а по сей день ни одной записи :). Стало стыдно мне….
Хочу предупредить сразу, что основную массу примеров буду описывать с использованием подхода программиста, а не художника. Весь код буду стараться описывать более читабельно и с точки ООП (Объектно ориентированного программирования).

Перечитал ранее описанное и смешно стало — звучит как постулаты))).

Сегодня рассмотрим пример создания так называемой мной «красивости». Почему именно так назвал? Дело в том, что практического применения я пока не нашел. Буду использовать математические модели описанные в AS3 коде. Мой совет, если Вы хотите создавать действительно классные вещи во Flash, осмотритесь вокруг, на природу и постарайтесь найти математическое описание модели.

Шлейф «Спираль» на AS3 можно создать при помощи следующих инструментов:

  1. Обычный текстовый редактор и бесплатный Flex SDK для преобразования программы в SWF файл;
  2. Настроенное приложение Flash Develop ;
  3. Настроенное приложение Eclipse ;
  4. Продукты компании Adobe — Flex Builder, или Flash Professional;
  5. и кто чем гаразд)))

Кстати, вскоре хочу создать проект онлайн компиляции на моем домашнем хостинге. Приглашение выложу.

1. Создание файла AS3 c именем основного класса:

Создадим файл MouseTrailer.as, котрый будет содержать весь Наш код.

2. Создание класса AS3 элементарного объекта:

Запишем в файл следующий код, который описывает элементарный класс с незамысловатым названием «Частичка».

3. Основной класс сцены


В начало файла MouseTrailer.as дописываем код основного класса. Описание каждой функции опишу ниже.

4. Компиляция MouseTrailer.as и результат

Скомпилировав данный файл. Должно получиться следующее:

Шлейф «Спираль» за курсором мыши на AS3 во Flash : Один комментарий

Спасибо за статью!
Очень интересно и результат красивый

Илон Маск рекомендует:  Тег ruby

Использование URL значений для свойства cursor

Gecko 1.8 (Firefox 1.5, SeaMonkey 1.0) поддерживает URL-значения для CSS свойства cursor в Windows и Linux. Поддержка Mac была добавлена в Gecko 2 (Firefox 4). Это позволяет устанавливать произвольные изображения в качестве курсора мыши — может быть использовать любой формат изображений, поддерживаемый Gecko.

Синтаксис

Базовый (CSS 2.1) синтаксис для этого свойства:

Это означает, что устанавливать можно любое количество URL’ов (отделенных запятой), которые должны сопровождаться одним из ключевых слов, определеннымы спецификацией CSS, таких как auto или pointer .

Например, такая последовательность значений допустима:

В первую очередь браузер пытается загрузить foo.cur. Если такой файл отсутствует или его форма не допустим по каким-то другим причинам, то дальше загружается bar.gif. И если он также не может быть использован, будет использовано значение auto .

Поддержка CSS 3 синтаксиса для указания курсора была добавлена в Gecko 1.8 (Firefox 1.5):

Это позволяет устанавливать координаты смещения курсора, которые буду зафиксированы на границах курсора. Если координаты не указаны, то они считываются непосредственно из файла (для CUR и XBM файлов) или же устанавливаются в левый верхний угол изображения.

Пример CSS 3 синтаксиса:

Первое число определяет координату по оси x, а вторая — по оси y. Данный пример сместит изображение на точку (4,12) относительно левого верхнего угла (0,0).

Ограничения

Могут быть использованы любые форматы, поддерживаемые Gecko. Это означает, что вы можете использовать PNG, GIF, JPG, BMP, CUR и т.д. ANI не поддерживается. Анимированные PNG и GIF не добавят анимацию курсору.

Примечание: Начиная с Gecko 2.0 (Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1), Gecko также поддерживает формат SVG в качестве изображения курсора. Тем не менее, SVG изображение должно содержать значения (кроме процентных значений) высоты и ширины на корневом SVG узле. JavaScript, CSS анимация и декларативный SMIL внутри SVG изображения игнорируются; например, вы не можете использовать SVG, чтобы создать анимированный курсор.

В Gecko (Firefox) максимальный размер курсора — 128×128 пикселей. Изображения большего размера игнорируются. Однако, вам следую ограничиться рамером курсора в 32×32 пикселя для максимальной совместимости с операционными системами и платформами.

(В следствие бага Gecko 1.9.2-1.9.2.6, Firefox 3.6-3.6.6 в Windows ограничивает размер в 32×32 пикселя. Это исправляется в более новых версиях.)

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

URL в качестве курсора поддерживаются в Windows, OS/2, и Linux (с использованием GTK+ 2.4 или выше) версиях Mozilla. Поддержка Mac OS X была добавлена в Gecko 2 (Firefox 4).

Совместимость с другими браузерами

Microsoft Internet Explorer 6.0 также поддерживает URI значения для свойства cursor . Тем не менее:

Тема: Увидела прикольную вещ-за курсором движется шлейф букв.Как это делается?

Опции темы
Отображение


  • Линейный вид
  • Комбинированный вид
  • Древовидный вид

Увидела прикольную вещ-за курсором движется шлейф букв.Как это делается?

Поделитесь, кто знает

Re: Увидела прикольную вещ-за курсором движется шлейф букв.Как это делается?

Поделитесь, кто знает

Привет!
Вот те скрипт №1.
За мышкай бегут красивые шарики!
======================

Последний раз редактировалось Voyager; 15.08.2003 в 00:10 .

Re: Re: Увидела прикольную вещ-за курсором движется шлейф букв.Как это делается?

А мне этот скриптик больше нравится!

СуППеРР-СуППеРР-СуППеР .
Я как-то раньше такого не встречала. И идейки такой не было. Но сейчас вот увидела и таааак понравилось
А можно на мой сайтик воткнуть?

Да можно, хоть на два! Говори своё мыло я тебе изготовлю под твой сайт!
И какой адрес твоей странички?

а по-моему такая ерундень на сайте — свидетельство плохого вкуса

Дык это кому и для чего! Если для личного фотоальбома и маленького личного сайта, то можно и всякой всячины туда напихать!

Дык это кому и для чего! Если для личного фотоальбома и маленького личного сайта, то можно и всякой всячины туда напихать!

Не. лучше на своём маленьком сайте сделать мини-раздел «всякая всячина» и в него поскладывать всякую х. эээ всячину %)

Кто хочет увидить всякую эту-самую всячину — обязательно её там найдет. А кто не хочет — сохранит свои нервы.

10 возмутительных багов IE и пути их решения

Сегодня я намерен представить вам 10 самых распространенных багов, имеющих место в браузерах IE, а так же расскажу как их избежать.

Вступление

В практике каждого веб-разработчика были проблемы, связанные с непониманием браузерами IE некоторых элементов кода. И я как разработчик тоже постоянно сталкиваюсь с такими причудами IE, что порой просто хочется биться головой об стенку! Однако, время идет, мы учимся на своих ошибках, хотя правильней будет сказать не своих, а браузера IE, и начинаем понимать и привыкать к его странному поведению. Нам приходится с этим мириться, так как еще есть пользователи, продолжающие пользоваться 6 версией IE. Самый лучший способ предупредить проблемы — это сверять каждый свой шаг с поведением различных браузеров. Ведь проще устранить ошибку сразу же, чем потом рыскать среди тысячи строк html и css кодов.

Многие компании настроены против 6 версии IE, но людям, продолжающим им пользоваться, похоже, все равно. Что делать? Продолжать бороться с багами данного браузера. Но хочу вас порадовать — ежемесячная статистика, которую нам любезно представляет w3cschool, гласит, что количество упрямых пользователей IE6 значительно сократилось за последние годы. В январе 2006 года их было 60,3%, а в августе 2009 года их зарегистрировано уже 13,6%. Думаю, к середине 2010 года мы, наконец, избавимся от IE6:) О ДА.

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

1. Баг IE6, выдающий текст повторно


Как раз перед тем, как сесть писать эту статью я столкнулся вот с таким багом: из ниоткуда выскакивает дублированный кусок текста, и размещается он прямо под оригинальным текстом. Я начал экспериментировать и о удача!, я нашел как с ним бороться.

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

Однако, Hippy Tech Blog, к которому я тоже обращался за помощью, предлагает другие решения, к тому же он поясняет причину данного бага — оказывается во всем виноваты html теги комментариев, ведь IE6 не воспринимает их должным образом.

• обрамлять комментарии тегами
• удалять все комментарии
• в предшествующем элементе float указывать стиль
• использовать отрицательные поля в соответствующих плавающих div
• добавить к оригинальному тексту примерно 10 пробелов (мой способ)

2. Position Relative и Overflow Hidden

Практически каждый раз, когда я пишу урок по jQuery , я сталкиваюсь с одной и той же проблемой, ведь я привык использовать overflow:hidden. Баг появляется, когда есть исходный (родительский) элемент overflow со значением hidden и дочерний элемент с позицией :relative.

Что же происходит вы можете увидеть вот в этой статье — position:relative and overflow in internet explorer

Решение
• добавить position relative и родительскому элементу

3. Min-Height для IE

IE просто игнорирует min-height свойства, но вы теперь можете справиться и с этой проблемой. Данное решение магически действует не только на IE6, но и на Mozilla/Firefox/Gecko, Opera 7.x+, Safari1.2

4. Бикубическое отображение масштабируемых изображений

Вам понравится данное решение. Раздражает ли вас плохое качество картинок при изменении их масштаба в браузере IE? Согласитесь IE выполняет эту задачу не очень качественно.

5. Прозрачность PNG

Полагаю, что каждый знаком с этой проблемой, и все же я уделю и этому пункту немного времени.
Если вам нужно прозрачное изображение, и изображения в формате gif не могут дать вам нужного эффекта, вам пригодится данный прием. Но помните, что используя этот прием и устанавливая PNG в качестве фона, вы не сможете задать его позицию.

6. Прозрачный фон встроенного окна IFrame

В firefox и safari нам не приходится что-либо настраивать, так как они делают фон iframe прозрачным по умолчанию, тогда как в IE такое не предусмотрено. Здесь вам нужен будет атрибут allowTransparency, а так же специальный CSS код.

Илон Маск рекомендует:  Счетчик посещений на delphi

7. Отключение вертикальной полосы прокрутки, предусмотрено в IE по умолчанию

По умолчанию IE всегда отображает вертикальную полосу прокрутки, даже если содержимое страницы полностью вмещается в окно браузера. В данном случае вы можете воспользоваться свойством overflow:auto , чтобы полоса прокрутки появлялась только при необходимости.

8. Псевдокласс :hover

IE поддерживает только псевдокласс :hover для элемента anchor. Но ведь того же самого эффекта можно добиться и используя jQuery.

9. Блочная модель — Box Hack Model

Это самый частый баг. Дело в том, что IE рассчитывает ширину не так, как остальные браузеры. В соответствии со стандартом консорциума W3C, полная ширина должна подсчитываться следующим образом:

А вот IE делает подсчет, не учитывая данные отступов и границ

Можно воспользоваться следующим CSS кодом. Все стандартные браузеры смогут прочесть такую строку — width:180px, кроме IE5.

10. Удваивание полей

Если у вас имеются float элементы со значениями полей left или right, то 6 версия IE удваивает поля. Например, поле (интервал) шириной в 5 пикселей вот в такой строке margin-left:5px в IE6 превратится в поле с шириной в 10 пикселей. Данную проблему можно устранить добавив всего одну строку display:inline.

Надеюсь, данный урок вам очень пригодится:)

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: www.queness.com
Перевел: Максим Шкурупий
Урок создан: 16 Ноября 2009
Просмотров: 37465
Правила перепечатки


5 последних уроков рубрики «Разное»

Как разместить свой сайт на хостинге? Правильно выбранный хороший хостинг — это будущее Ваших сайтов

Проект готов, Все проверено на локальном сервере OpenServer и можно переносить сайт на хостинг. Вот только какую компанию выбрать? Предлагаю рассмотреть хостинг fornex.com. Отличное место для твоего проекта с перспективами бурного роста.

Разработка веб-сайтов с помощью онлайн платформы Wrike

Создание вебсайта — процесс трудоёмкий, требующий слаженного взаимодействия между заказчиком и исполнителем, а также между всеми членами коллектива, вовлечёнными в проект. И в этом очень хорошее подспорье окажет онлайн платформа Wrike.

20 ресурсов для прототипирования

Подборка из нескольких десятков ресурсов для создания мокапов и прототипов.

Топ 10 бесплатных хостингов

Небольшая подборка провайдеров бесплатного хостинга с подробным описанием.

Быстрая заметка: массовый UPDATE в MySQL

Ни для кого не секрет как в MySQL реализовать массовый INSERT, а вот с UPDATE-ом могут возникнуть сложности. Чтобы не прибегать к манипуляциям события ON_DUPLICATE можно воспользоваться специальной конструкцией CASE … WHEN … THEN.

cursor

Устанавливает форму курсора, когда он находится в пределах элемента. Вид курсора зависит от операционной системы и установленных параметров.

Краткая информация

Значение по умолчанию auto
Наследуется Да
Применяется Ко всем элементам
Анимируется Нет

Синтаксис ?

Обозначения

Описание Пример
Указывает тип значения.
A && B Значения должны выводиться в указанном порядке. &&
A | B Указывает, что надо выбрать только одно значение из предложенных (A или B). normal | small-caps
A || B Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке. width || count
[ ] Группирует значения. [ crop || cross ]
* Повторять ноль или больше раз. [, ]*
+ Повторять один или больше раз. +
? Указанный тип, слово или группа не является обязательным. inset?
Повторять не менее A, но не более B раз.
# Повторять один или больше раз через запятую. #

×

Значения

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

Табл. 1. Вид курсора

Вид Значение Тест Пример Примечание
default P
context-menu P Отображается только в IE10+.
help P
pointer P
progress P
wait P
cell P
crosshair P
text P
vertical-text P
alias P
copy P
move P
no-drop P Все браузеры, кроме IE, отображают как not-allowed .
not-allowed P
all-scroll P
col-resize P
row-resize P
n-resize P
ne-resize P
e-resize P
se-resize P
s-resize P
sw-resize P
w-resize P
nw-resize P
nesw-resize P
nwse-resize P
zoom-in P IE не поддерживает.
zoom-out P IE не поддерживает.
grab P Chrome, Opera, Safari поддерживают значение -webkit-grab . IE не поддерживает.
grabbing P Chrome, Opera, Safari поддерживают значение -webkit-grabbing . IE не поддерживает.

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

При добавлении курсора из файла синтаксис несколько видоизменится.

Через запятую допускается указывать несколько значений url , в этом случае браузер попытается открыть первый файл с курсором и если это по каким-либо причинам не получится, перейдёт к следующему файлу. Список обязательно заканчивается ключевым словом, например, auto или pointer , допустимые значения перечислены выше.

Пример

Объектная модель

Примечание

Internet Explorer в качестве формата файла курсора поддерживает CUR и ANI. Firefox, Chrome, Safari поддерживают форматы CUR, PNG, GIF, JPG.

Chrome до версии 36, Opera до версии 24 и Safari до версии 9 поддерживают значения -webkit-zoom-in и -webkit-zoom-out .


Firefox до версии 24 поддерживает значения -moz-zoom-in и -moz-zoom-out .

Chrome до версии 22, Opera до версии 24 и Safari до версии 9 поддерживают значения -webkit-grab и -webkit-grabbing .

Firefox до версии 27 поддерживает значения -moz-grab и -moz-grabbing .

Браузеры на мобильных устройствах не поддерживают свойство cursor .

Спецификация ?

Спецификация Статус
CSS Basic User Interface Module Level 3 Рабочий проект
CSS Level 2 (Revision 1) Рекомендация

Спецификация

Каждая спецификация проходит несколько стадий одобрения.

  • Recommendation ( Рекомендация ) — спецификация одобрена W3C и рекомендована как стандарт.
  • Cand >Возможная рекомендация ) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
  • Proposed Recommendation ( Предлагаемая рекомендация ) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
  • Working Draft ( Рабочий проект ) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
  • Editor’s draft ( Редакторский черновик ) — черновая версия стандарта после внесения правок редакторами проекта.
  • Draft ( Черновик спецификации ) — первая черновая версия стандарта.

×

Браузеры ?

auto, crosshair, default, move, text, wait, help, n-resize, e-resize, s-resize, w-resize, ne-resize, nw-resize, se-resize, sw-resize 4 12 1 7 1.2 1
pointer, progress 6 12 1 7 1.2 1
url() 6 12 1 15 3 1.5
not-allowed, no-drop, vertical-text, all-scroll, col-resize, row-resize 6 12 1 10.6 3 1.5
alias, cell, copy, ew-resize, ns-resize, nesw-resize, nwse-resize, context-menu 10 12 1 10.6 3 1.5
none 6 14 5 15 5 3
zoom-in, zoom-out 12 4 36 15 24 3.1 9 2 24
grab, grabbing 12 4 22 15 24 4 9 1.5 27

Браузеры

В таблице браузеров применяются следующие обозначения.

  • — свойство полностью поддерживается браузером со всеми допустимыми значениями;
  • — свойство браузером не воспринимается и игнорируется;
  • — при работе возможно появление различных ошибок, либо свойство поддерживается лишь частично, например, не все допустимые значения действуют или свойство применяется не ко всем элементам, которые указаны в спецификации.

Число указывает версию браузера, начиная с которой свойство поддерживается.

Баги IE. Часть 1. Наличие или отсутствие hasLayout

Этим постом я планирую начать серию статей о багах IE и возможных вариантах их исправления. Цикл статей решил написать в первую очередь для себя, дабы как-то систематизировать и сохранить свои знания, но я надеюсь, что он будет полезен как новичкам так и опытным верстальщикам.

Первым постом хочу затронуть одно из фундаментальных понятий при исправлении багов IE — hasLayout.

Что такое hasLayout?

В движке рендеринга IE каждый элемент, по сути, не отвечает за свое расположение. Расположение элемента зависит лишь от его положения в исходном коде и расположения в нормальном потоке. При этом, все дочерние элементы некоторго блока-контейнера располагаются, на самом деле, не относительно своего непосредственного родителя, а в зависимости от наиболее близкого предка имеющего «layout».

hasLayout это проприетарное свойство IE, которое определяет имеет ли элемент «layout» т.е. то, как элемент располагается в потоке, его размеры, позиционирование, реакцию на события и влияние на другие элементы.

HTML элементы, которые по умолчанию имеют «layout» (hasLayout = true): , ,

, ,
, , , , ,

Свойство hasLayout в IE нельзя напрямую установить, но на его наличие можно косвенно влиять различными значениями некоторых css свойств. Следующие значения перечисленных свойств дают элементу «layout» (hasLayout = true):

  • position: absolute
  • float: left или right
  • height, width: любое значение кроме auto
  • display: inline-block
  • zoom: любое значение кроме normal (невалидное свойство)
  • writing-mode: tb-rl
  • overflow, overflow-x, overflow-y: auto|scroll|hidden (только в IE7)
  • position: fixed (только в IE7)
  • min-width, min-height: любое значение (только в IE7)
  • max-width, max-height: любое значение кроме none (только в IE7)

Чтобы скинуть hasLayout нужно указать значение отличное от перечисленных выше (например: width: auto или float: none).

Более подробно о том, что такое hasLayout читайте в замечательной статье On having layout — the concept of hasLayout in IE/Win (перевод).

Как и зачем устанавливать hasLayout


Придание элементам hasLayout может исправить множество багов IE. Большинство багов, связанных с неправильным позиционированием, отображением или измерением связаны с наличием или отсутствием у элемента hasLayout.

Чтобы успешно исправлять эти баги прежде всего нужно узнать включен ли у элемента hasLayout. Это можно проверить аналитическим или опытным путем.

Первый подразумевает просмотр исходного кода стилей, применяемых к проблемному элементу, и сканирование их на наличие свойств-триггеров, перечисленных выше. Если у элемента, к примеру, явно задана высота (свойство height имеет значение отличное от auto) то свойство hasLayout установлено (его значение true). Если же свойств-триггеров не найдено, либо они имеют значения, которые сбрасывают hasLayout и элемент не относится к списку элементов имеющих «layout» по умолчанию, то свойство hasLayout не установлено.

Второй способ заключается в непосредственном просмотре значения свойства hasLayout элемента с помощью DOM инспектора в плагине Internet Explorer Developer Toolbar.
После того как вы установите плагин, на панели IE появится кнопка , при нажатии на которую откроется панель плагина:

Также, открыть панель можно через меню View в IE6 (View → Explorer Bar → IE Developer Toolbar) или через меню Tools в IE7 (Tools → Toolbars → Explorer Bar → IE Developer Toolbar).

Для того чтобы выбрать элемент, у которого мы хотим проверить наличие свойства hasLayout, нужно нажать на кнопку и мышкой выделить его (аналогично тому как выделяются элементы в Firebug после нажатия на кнопку «Inspect»). После этого в панели «Current Style» будут показаны все стили, применяемые к выделенному элементу браузером. Если среди них нет свойства hasLayout значит элемент не имеет «layout». Если же среди них оно есть и его значение равно -1 (true), значит свойство hasLayout установлено, и элемент имеет «layout».

После того, как мы узнали как проверить включено ли свойство hasLayout самое время научиться правильно его устанавливать. Все перечисленные выше свойства-триггеры так или иначе будут влиять на отображение элемента. Если, к примеру, мы укажем элементу float: left; то, кроме необходимого нам эффекта (установки hasLayout), элемент будет вести себя в соответствии прямому назначению этого свойства (будет вырван из нормального потока и его будут обтекать другие элементы). Хорошо, если это совпадает с нашей задумкой, но чаще всего нам нужно просто включить элементу hasLayout.

Поэтому нам нужно такое свойство-триггер, которое, в идеале, никак прямо не влияет на поведение элемента. Таких свойств немного, в некоторых ситуациях таким свойством может быть height со значением 1% или display: inline-block, но все они имеют ограничения. Если использовать height: 1%, то в случае явно установленной высоты родительского блока, высота элемента, естественно, будет вычисляться относительно выставленного значения. На мой взгляд, наиболее безопасным можно считать свойство zoom с установленным значением 1 (масштаб 100%). Но, так как это свойство невалидно, лучше всего использовать его в отдельном файле стилей для IE, который подключать с помощью Conditional Comments. Все бы хорошо, но это свойство не поддерживается в IE DOCTYPE html PUBLIC «-//W3C//DTD XHTML 1.0 Strict//EN» «http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd» >
html xmlns =»http://www.w3.org/1999/xhtml» xml:lang =»ru» >
head >
title > Пример 1. Неправильное позиционирование элементов с position:absolute. title >
meta http-equiv =»Content-Type» content =»text/html;charset=utf-8″ />
style type =»text/css» >
* <
margin:0;
padding:0;
>

div.parent <
position:relative;
border:1px solid #000;
padding:20px;
margin:10px;
>

div.parent div <
position:absolute;
width:20px;
height:20px;
top:0;
left:0;
background:#0c0;
>

div.parent div.bottom <
top:auto;
bottom:0;
>
style >
head >
body >
div class =»parent» >
p > Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor inc > p >
div > div >
div class =»bottom» > div >
div >
body >
html >
* This source code was highlighted with Source Code Highlighter .

В нормальных браузерах все отображается как и задумывалось. Два зеленых квадратика, один из которых в левом верхнем углу элемента с рамкой, а другой в левом нижнем. Но, в IE6 все выглядит так:

Для того чтобы исправить это поведение нужно дать «layout» родительскому элементу (div.parent) для этого я добавлю ему специально заготовленный для этого класс «zoom». После этого все встанет на свои места:

Рассмотрим следующий пример. Его код:

DOCTYPE html PUBLIC «-//W3C//DTD XHTML 1.0 Strict//EN» «http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd» >
html xmlns =»http://www.w3.org/1999/xhtml» xml:lang =»ru» >
head >
title > Пример 2. Неправильная высота списка title >
meta http-equiv =»Content-Type» content =»text/html;charset=utf-8″ />
style type =»text/css» >
* <
margin:0;
padding:0;
>

div.parent <
border:1px solid #000;
padding:20px;
margin:10px;
>

div.parent ul <
background:#00c;
>

div.parent ul li <
border:1px solid #000;
background:#0cc;
>
style >
head >
body >
div class =»parent» >
ul >
li > Пункт li >
li > Пункт li >
li > Пункт li >
ul >
div >
body >
html >

* This source code was highlighted with Source Code Highlighter .

В нормальных браузерах, список внутри блока с рамкой заканчивается ровно там, где заканчивается последний элемент списка. В IE 6 и 7 нижняя граница списка совпадает с нижней границей блока с рамкой (это четко видно из-за того, что я указал списку синий бекграунд):

Опять же, после включения hasLayout у родительского элемента (div.parent) баг исчезает:

Следующий пример. Есть некоторый общий контейнер в котором несколько зафлоаченных элементов:

DOCTYPE html PUBLIC «-//W3C//DTD XHTML 1.0 Strict//EN» «http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd» >
html xmlns =»http://www.w3.org/1999/xhtml» xml:lang =»ru» >
head >
title > Пример 3. Выпадение зафлоаченных блоков из контейнера title >
meta http-equiv =»Content-Type» content =»text/html;charset=utf-8″ />
style type =»text/css» >
* <
margin:0;
padding:0;
>

div.parent <
border:2px solid #000;
margin:10px 20%;
>

div.parent div.float <
background:#cc0;
float:left;
margin:2px;
text-align:center;
width:50px;
height:50px;
line-height:50px;
>
style >
head >
body >
div class =»parent» >
div class =»float» > Float div >
div class =»float» > Float div >
div class =»float» > Float div >
div class =»float» > Float div >
div class =»float» > Float div >
div class =»float» > Float div >
div class =»float» > Float div >
div class =»float» > Float div >
div class =»float» > Float div >
div class =»float» > Float div >
div class =»float» > Float div >
div class =»float» > Float div >
div class =»float» > Float div >
div class =»float» > Float div >
div class =»float» > Float div >
div class =»float» > Float div >
div class =»float» > Float div >
div class =»float» > Float div >
div class =»float» > Float div >
div class =»float» > Float div >
div class =»float» > Float div >
div class =»float» > Float div >
div class =»float» > Float div >
div class =»float» > Float div >
div class =»float» > Float div >
div class =»float» > Float div >
div class =»float» > Float div >
div class =»float» > Float div >
div class =»float» > Float div >
div class =»float» > Float div >
div style =»clear:both;» > div >
div >
body >
html >

* This source code was highlighted with Source Code Highlighter .

IE снова глючит:

После добавления класса zoom для родительского дива баг исчезает:

Помимо исправления подобных багов, включение у элемента hasLayout полезно также для следующего:

  • Создание нового контекста форматирования (Пример 4).
  • В следствиии создания нового контекста форматирования запрет на обтекание плавающих элементов (Пример 5).
  • Фильтры применяются только к элементам с установленным hasLayout (Пример 6).
  • Исправление бага при котором display:inline-block применяется только к изначально строчным элементам. (Пример 7).

Негативное влияние hasLayout

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

Кроме этого, нужно учесть, что применение hasLayout плохо влияет на производительность.

Илон Маск рекомендует:  Sql с самого начала
Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL