Как написать хак для IE, Firefox, Chrome

Увы, приходится иногда использовать и хаки — сложная не своя верстка, в которой нет времени разбираться, например…
У оперы хаки от версии к версии меняются, поэтому можно в css написать для нее как основы, а остальных поправить хаками (если требуется).

[code lang=»css»]
/* firefox */
@-moz-document url-prefix() {
.myclass {
font-size:16px;
}
/* … */
}
/* chrome и safari */
@media all and (-webkit-min-device-pixel-ratio:0) {
.myclass {
font-size: 18px;
}
/* … */
}
[/code]

Для Internet Explorer — самое удобное. Подход называется «Conditional comments». См. пример:

[code lang=»html»]
<!—[if IE]>
Special instructions for IE here
<![endif]—>
[/code]

Внутри можно, например, подключить css, которая выполнится только в IE:

[code lang=»html»]
<!—[if IE]>
<link rel="stylesheet" type="text/css" href="/css/ie.css">
<![endif]—>
[/code]

Также, можно указывать версию IE:

[code lang=»html»]
<!—[if IE 6]> <![endif]—>
<!—[if IE 7]> <![endif]—>
<!—[if IE 8]> <![endif]—>
[/code]

Или указывать версию больше или меньше:
gt: больше, чем.
lt: меньше, чем.
Если добавляется «e», то еще и равно значению
[code lang=»html»]
<!—[if gt IE 6]>Больше 6-ого<![endif]—>
<!—[if lte IE 7]>Седьмой или меньше<![endif]—>
[/code]

И помните, хаки — плохой выход.

Плавно перемещаем скролл к элементу

Можно сделать красивый якорь — т.е. плавное перемещение к любому DOM-элементу. Для этого сделаем такой скрипт:

[code lang=»javascript»]
$(‘a[href^="#"]’).click(function() {
$(‘html:not(:animated)’ +( !$.browser.opera ? ‘,body:not(:animated)’ : »)).animate({ scrollTop: $($(this).attr(‘href’)).offset().top}, 1000 );
return false;
});
[/code]

Этот код заменяет все якоря на плавные. Время перемещения до якоря — 1000 мс, вы, конечно же, можете легко поменять его.

$(‘element’).offset().top — определить расстояние (высоту) от начала (самого верха) страницы до выбранного элемента.

Проверил работу в браузерах IE8, Chrome 19, Opera 12.00, Firefox 13.01. Везде хорошо работает.

И не забудьте подключить jQuery в блоке head!
[code lang=»html»]
<head>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js">

</head>
[/code]

Источники:
http://loco.ru/materials/96-jquery-scroll-to-top
http://api.jquery.com/offset/

Как получить координаты в формате Excel из числового вида

Допустим, нам надо представить ячейку с координатами (5,4) в Excel-формате, т.е. как «E4». Либо (27,3) как «AA3». Эту задачу легко выполнить, если представить буквенный формат таблицы Excel в виде 26ричной системы счисления, состоящей из букв.
Т.е., нам потребуется словарь, мы можем представить его одной алфавитной строкой, и собственно, сам алгоритм, который несложен сам по себе.
Для того, чтобы получать правильные координаты ячейки Excel, будем использовать начало координат не (0,0), а (1,1), как в экселе.
Получился такой вот код:

[code lang=»php»]

function getExcelCell($x,$y) {
if (($x < 1) || ($y < 1)) { return False; }
$alphabet = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
$excelX = »;
while ($x > 0) {
$r = $x % 26;
$x = (int)($x / 26);
if ($r == 0) { $r = 26; $x = $x — 1;}
$excelX = $alphabet[$r-1] . $excelX;
}
$excelCell = $excelX . $y;
return $excelCell;
}

// Тест

for ($i = -10; $i < 1500; $i++) {
$res = getExcelCell($i,$i);
if ($res) {
echo $res . "<br>";
} else {
echo ‘Значение (‘ . $i . ‘, ‘ . $i . ‘) не может быть обработано!<br>’;
}
}
[/code]

Как видите, в случае, если передаются отрицательные значения (или 0) в $x или $y, то функция возвращает False.

Cufon не меняет цвет ссылок при наведении

Обнаружил такую проблему: Cufon (заменитель шрифтов, см. здесь и здесь) прекрасно менял все шрифты, цвета и т.п. Но в одном месте ни в какую не хотел изменять цвет шрифта при наведении (:hover).
Оказалось, что если ссылка, которая должна hover’иться, находится внутри другого блока текста, который уже обработан Cufon’ом, то она не сможет изменить цвет (!), border и некоторые другие свойства будут меняться без проблем.
Итак, ниже показываю, в каких случаях hover’а не происходит, а в каких происходит (в коде все понятно). Либо можно скачать архив, вместе со шрифтами, и самому посмотреть.

[code lang=»html»]
<!doctype html>
<html>
<head>
<script type="text/javascript" src="test/jquery00.js"></script>
<script type="text/javascript" src="test/cufon-yu.js"></script>
<script type="text/javascript" src="test/Plumb_20.js"></script>
<style>
a, a:link, a:visited { color : #0000cc; }
</style>
</head>
<body>
<div class="example">Lorem <a href="#" class="ahref">Ссылка, вложенная в другой элемент с Cufon’ом, обработка сначала внешнего блока, потом ссылки [hover’а нет]</a> ipsum</div>
<div class="example2"><span class="example">Lorem</span> <a href="#" class="ahref">Ссылка, не вложенная в элемент с Cufon’ом, внутри текста</a> <span class="example">ipsum</span></div>
<div class="example2">Lorem <a href="#" class="ahref">Ссылка, вложенная в другой элемент с Cufon’ом, обработка сначала ссылки, потом внешнего блока</a> ipsum</div>
<div class="example2">Lorem <a href="#">Ссылка без явного указания класса [hover’а нет]</a> ipsum</div>
<a class="ahref" href="#" >Ссылка, не вложенная в другие элементы, которые обрабатываются Cufon’ом</a>

<script type="text/javascript">
Cufon(‘.example’);
Cufon(‘.ahref’, {
color: ‘#0000cc’,
hover: true,
hover: {
color: ‘#ccc’
}
});
Cufon(‘.example a’, {
color: ‘#0000cc’,
hover: true,
hover: {
color: ‘#ccc’
}
});
Cufon(‘.example2’);
</script>
</body>
</html>
[/code]