Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > JavaScript: Общие вопросы > Отловить изменение базового шрифта.

Автор: Хоббит 2.7.2007, 17:24

Надо отловить изменение базового шрифта. То есть, то что происходит после нажатия Ctrl + в FireFox или выбора шрифта в меню вид в Explorer. Какие будут варианты?

Автор: ksnk 2.7.2007, 20:19

Как собственно отловить - не знаю, а вот как понять - шрифт какого размера установлен - можно , к примеру так

<span id="test">X</span>
Установить этому спану какой-нибудь определенный шрифт
Сделать его невидимым с помошью opacity=0 или просто цвет==цвет бакграунда.
Проверить у этого спана после загрузки всего документа атрибуты scrollWidth,scrollHeigth.

При выборе шрифта по умолчанию для FireFox у меня показывает 11x19. Соответственно
Ctrl- 10x16, 9x15, 6x10,4x5, 2x4, 1x2
Ctr+ 13x21,17x27,23x36,35x55,...

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

Для IE при смене шрифта вызывается onresize, для FF - не знаю что вызывается...

Автор: SelenIT 2.7.2007, 21:52

Для FF Ctrl-± можно отловить именно как нажатие клавиш, но вот при смене шрифта через меню не вызывается ничего... насколько я понимаю, в этом-то и главная проблема.

Пока придумал лишь такой изврат (не считая очевидно большего изврата с периодическим замером эталонного элемента по таймеру) - использовать в качестве эталонного элемента "замаскированный" iframe высотой 1em, а уже в него грузить страничку с обработчиком onresize. Как минимум, в FF2 это работает...

Upd.: работает также в IE6 и Opera 8-9. А вот срабатывания onresize в IE в основном окне при смене шрифта я почему-то не заметил...

Автор: Хоббит 3.7.2007, 10:45

Так. Значит надо создать невидимый элемент 1em размером, и определять его размеры в пикселях. Сейчас исполним.

Автор: pythonwin 12.10.2007, 08:23

Цитата(Хоббит @ 3.7.2007, 13:45

)

Так. Значит надо создать невидимый элемент 1em размером, и определять его размеры в пикселях. Сейчас исполним.

Код


<iframe onresize="alert('1')" id="frame_id" height="1em" style="display:none">
</iframe>

ничего не просходит при Ctrl-±
FF 2.0.x

Добавлено через 9 минут и 53 секунды

Код


<iframe onresize="alert('1')" id="frame_id" style="height:1em; display:none;">
</iframe>

тоже не работает :(

Автор: cruelangel 12.10.2007, 12:59

Хоббит, а зачем определять это изменение?

Автор: pythonwin 12.10.2007, 13:11

Цитата(cruelangel @ 12.10.2007, 15:59

)

Хоббит, а зачем определять это изменение?

1) тема названа неправильно - "изменение маштаба отображения страницы"
2) это нужно чтобы сайт был "резиновым"

Автор: cruelangel 12.10.2007, 13:43

width: 100%
max-width
min-width

не спасут отца русской демократии?

Автор: pythonwin 12.10.2007, 15:37

Цитата(cruelangel @ 12.10.2007, 16:43

)

не спасут отца русской демократии?

к сожелению - нет.

Автор: cruelangel 12.10.2007, 16:16

почему?

Автор: pythonwin 12.10.2007, 17:10

Цитата(cruelangel @ 12.10.2007, 19:16

)

почему?

Код


<html>
<body>
<div id="parent_div_fon" style="position: absolute; left: 271px; top: 138px; min-width: 550px; min-height: 313px"><img src="./images/logo.png" alt=" " width="429" height="156" /></div>

<div id="div_text_ID" style="position: absolute; left: 271px; top: 138px; max-width: 550px; max-height: 313px"
><p>Alice was beginning to get very tired of sitting by her sister on the bank, and of having nothing to do:  once or twice she had peeped into the book her sister was reading, but it had no pictures or conversations in it, 'and what is the use of a book,' thought Alice 'without pictures or conversation?'</p>  <p>So she was considering in her own mind (as well as she could, for the hot day made her feel very sleepy and stupid), whether the pleasure of making a daisy-chain would be worth the trouble of getting up and picking the daisies, when suddenly a White Rabbit with pink eyes ran close by her.</p></div>



<script type="text/javascript">
var rezise_img = function(s1, s2){
var childDivObj = document.getElementById(s1);
var parentDivObj = document.getElementById(s2);
alert(childDivObj.offsetHeight);
parentDivObj.style['height']=childDivObj.offsetHeight;
parentDivObj.style['width']=childDivObj.offsetWidth;

}
setTimeout("rezise_img('" + "div_text_ID" + "', '" + "parent_div_fon" + "')",1);
</script>
</body>
</html>

рисунок - просто синий прямоугольник с загкругленными углами

Автор: cruelangel 12.10.2007, 19:03

если ты хочешь сделать фигурную рамку вокруг текста, то для этого скрипты совершенно не нужны smile

http://dark-demon.nm.ru/web/samples/xhtml/index.xml#borderskin

Автор: pythonwin 13.10.2007, 11:00

Цитата(cruelangel @ 12.10.2007, 22:03

)

если ты хочешь сделать фигурную рамку вокруг текста, то для этого скрипты совершенно не нужны smile

спасибо за ссылку! smile

а закругленные углы как можно сделать?

Автор: cruelangel 13.10.2007, 12:08

картинки поменять smile

http://dark-demon.nm.ru/web/samples/xhtml/pics/