Min-width и max-width в IE6 с помощью expression

Уже писали много раз, просто приведу свой код.

В JavaScript-файле размещаем такую функцию:

function width(min,max){
	w = document.documentElement.clientWidth;
	return (w <= min) ? min + "px" : ((w >= max) ? max + "px" : "auto");
}

Функция всего лишь принимает значения максимальной и минимальной ширины, проверяет текущую ширину документа и возвращает значение:

  1. Если ширина документа меньше минимальной ширины, то возвращается минимальная ширина;
  2. Если ширина документа больше максимальной ширины, то возвращается максимальная ширина;
  3. Иначе ширина указывается автоматическая.

Функция из CSS вызывается следующим образом:

div {
    width: expression(width(600,1000));

    /* далее для нормальных браузеров */
    min-width: 600px;
    max-width: 1000px;
}

600 и 1000 — минимальная и максимальная ширина. Поскольку expression работает только для IE, а min-width и max-width уже работают в IE7 и IE8, то этот CSS нужно изолировать и вынести в отдельный css-файл и подключить его с помощью условных комментариев, либо воспользоваться хакками, поскольку чтобы изменить значение придётся лезть в два файла, а не в один. Ну это уже как кому удобнее.

Скачайте пример и убедитесь, что всё работает.

Минимальную ширину в IE 6 можно эмулировать с помощью приёма, в котором указывается правый border для контейнера шириной в необходимую минимальную ширину элемента, а элементу задаётся правый отрицательный margin равный той же минимальной ширине. При этом внутренний элемент должен быть либо плавающим (float), либо inline-block. В общем не читайте и не внимайте в эти последние предложения, а просто посмотрите пример на cssplay.co.uk.

Дата: 06.08.2009
»
Категории: CSS | JavaScript | Брaузеры
Google     

]]> nemec ]]>

я надеюсь Вы не забыли, что expression вызывается при каждом действии (например при перемещении курсора). Получается довольно накладно с JavaScript, если нам только нужно менять min-width и max-width при загрузке и при ресайзе бровсера.
При большем количестве подобных хаков (На полностью все события) сайт быдет саметно тормозить

»

]]> Никита ]]>

nemec, не проблема добавить в функцию флаг выключающий её. Есть другие предложения?

»

]]> Олег ]]>

На http://www.cssplay.co.uk есть пример без использования
JavaScript,
http://www.cssplay.co.uk/layou.....ual-height

»

]]> Никита ]]>

Олег, посмотрите в код страницы, на которую вы дали ссылку.

»

]]> vill ]]>

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

»

]]> Татьяна ]]>

Спасибо.

»

]]> Макс ]]>

Спасибо. Ура!

»

Напишите комментарий