min-width и max-width для IE6 одновременно

Используя выражения в CSS-файле для Internet Explorer 6, можно добиться поведения, которое все нормальные браузеры уже давно умеют, а именно min-width и max-width свойства для блока:

#someblock{
width:expression(((document.documentElement.clientWidth ||↵
document.body.clientWidth) < 990) ? '990px' : ↵
((document.body.clientWidth > 1280) ? ‘1280px’ : ‘100%’));
} 

Данная заметка является скорее чем-то вроде self-note, но вдруг будет полезна и вам.

P.S. Не забывайте выносить стили для IE в отдельные файлы с помощью Conditional Comments и будет вам счастье :)

Upd.:

После общения с uggallery в коментариях, было решено оптимизировать скрипт так, чтобы не использовать expressions, из-за которых частенько подвисает браузер. Вот что из этого получилось:

Так как скрипт нужен нам только для IE6, выделяем его с помощью Conditional Comments. Скрипт срабатывает на двух событиях - onload и onresize, что не обязательно:

 <!--[if lte IE 6]>
<script type="text/javascript">
window.attachEvent(‘onload’, mmwidth);
window.attachEvent(‘onresize’, mmwidth);
function mmwidth(){
document.getElementById(‘wrap’).style.width = ↵
((document.documentElement.clientWidth || ↵
document.body.clientWidth) < 990) ? ‘190px’ :↵
((document.body.clientWidth > 1280) ? ‘1000px’ : ‘1000px’);
};
</script>
<![endif]--> 

Все что нужно сделать - это подставить id нужного вам элемента, ну и конечно значения максимальной и минимальной ширины. document.body.clientWidth соответственно тоже меняйте по вкусу.

Скрипт на оригинальность не претендует, да по большому счету от expression и не отличается, просто вынесен из CSS. Знаете как сделать лучше? Нашли ошибку? Коментируйте.

За идею спасибо uggallery, за консультацию copyhold‘у.

Рабочий пример.

Забыть о target

Гениальный в своей простоте способ заставить ссылку открыться в новом табе/окне, не используя deprecated атрибут target:

< а onclick="return !window.open(this.href)" hrеf="http://www.google.com">

Преимущества этого способа перед обычным open.window(url) в том, что если javascript отключен, то ссылка все равно сработает. Кроме того, ссылка будет проиндексирована поисковиками.

Проверено в FF2, IE6/7, Opera 9.20, Safari/Win.

Поведение браузеров при нажатии Ctrl+Click / Shift+Click:
В IE6 - в обоих случаях новое окно.
В IE7 - в обоих случаях новый таб (подозреваю что зависит от настроек браузера)
В FF2 - неадекват. ctrl+click открывает две вкладки, shift+click вкладку и окно
Opera - в обоих случаях новый таб
Safari/Win - в обоих случаях новое окно

При нажатии колесиком мышки ссылка срабатывает как обычно везде, кроме IE6, естественно.

In general, не стоит принуждать посетителей к чему-либо, предпочтительнее дать посетителю знать какого рода сама ссылка (файл [включая тип], внешняя/окно) с помощью иконок, которые можно легко прикрутить с помощью CSS, на пример вот так, тем самым давая ему возможность выбрать самому, где ее открыть.

Переключатель видимости блока в JS

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

Фактически на любой странице сайта, при нажатии на Ctrl+A, справа от лого виден смайлик. Если на этот смайлик нажать, то открывается список из десяти последних входящих ссылок на его сайт, с кратким описанием.

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

А реализовано это очень просто:

<а class="yr" hrеf="#yd" >>
onclick=”document.getElеmentById(”yr”).style.display >>
= document.getElementById(”yr”).style.display>>
== “none” ? “block” : “none”; return(false);”>:-)</a>
<div id=”yr” style=”display:none;”>
Some content</div>

Маахонький скриптик, который при нажатии на ссылку проверяет свойство display у заданного блока, и соответственно меняет его на противоположное. Никаких AJAX’ов, prototype’ов и прочая.

По материалам habrahabr.ru

Подсветка навигации

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

Navigation highlight

Многие вэб-разработчики уделяют этому аспекту юзабилити не достаточно внимания или совсем не уделяют, не смотря на то что существует достаточно много способов для реализации “подсветки”.

Давайте рассмотрим несколько сравнительно не сложных примеров. Читать дальше >>

Продвинутый DHTML/Javascript календарь

JS Calendar

Продвинутый, и я бы даже сказал навороченый календарь на DTML/Javascript, подходящий как для выбора даты/времени для формы в виде popup, так и в линейном коде.

  • Внешний вид настраивается с помощью CSS в отдельном файле
  • Есть цветовые схемы
  • Навигация с помощью клавиатуры
  • Локализация
  • Настройка первого дня недели
  • Всплывающие подсказки
  • Позволяет выбирать несколько дней сразу
  • Быстрая настройка

* Календарь распространяется по GNU-лицензии.

Читать дальше >>