15 января 2010, 18:25 более 2-х месяцев назад
HTML CharCodes for special symbols (Spanish, Italian, German, French)
Есть проекты разны-вкусны, делаешь его на англицком и руссише, а тут клиент бац и говорит что нужно ещё пару-тройку европеских ленгвиджей, а CMSка то windows1251 и точить ой как лень под UTF8 всё и везде. Вместо желанных умляутов, клиент в лучшем случаи увидит букву без точек, запятых, а что ещё хуже знаки вопроса.
Простой выход — помахать дороговизной переработки, и объяснить то-сё, а можно просто сделать через ВИЗИВИГ реплейсы непонятных символов в альтернативные спецсимволы, а в простых инпутах заставить вставлять вместо тех символов спец-коды.
Пример таблички (бабосики):
Простой выход — помахать дороговизной переработки, и объяснить то-сё, а можно просто сделать через ВИЗИВИГ реплейсы непонятных символов в альтернативные спецсимволы, а в простых инпутах заставить вставлять вместо тех символов спец-коды.
Пример таблички (бабосики):
| Display | Friendly Code | Numerical Code | Hex Code | Description |
| € | € | € | € | Euro |
| ₣ | ₣ | ₣ | Franc | |
| ₧ | ₧ | ₧ | Peseta | |
| ₤ | ₤ | Lira |
26 октября 2009, 06:26 более 4-х месяцев назад
Забытые теги… CSS: list-style-position
Сегодня речь о свойстве CSS list-style-position? И что, а зачем? Да вот зачастую отступы для булитов в списках, все делают падингами-маргинами, и зачастую они просто вылазят вне своего блока, когда кто-то что-то обнулит и забудет. И тут на помощь приходит это свойство, оно попросту указывает куда тулить эти самые булиты, то ли вне, то ли внутрь ;)
По умолчанию, значение outside, но есть ещё
Можно даже с помощью джиквери сделать лесенку в одном и том же списке ;)) Каждому чётному или не чётному присвоить это свойство ;)
ps: О, пора переименовать рубрику %) Наверное в забытые уголки HTML, или что-то в этом духе.
По умолчанию, значение outside, но есть ещё
{ list-style-position: inside }Выглядит это так:
- Пример
- Рыбного
Можно даже с помощью джиквери сделать лесенку в одном и том же списке ;)) Каждому чётному или не чётному присвоить это свойство ;)
ps: О, пора переименовать рубрику %) Наверное в забытые уголки HTML, или что-то в этом духе.
3 сентября 2009, 11:37 более 6-и месяцев назад
Advancing Textarea (Google chrome hints)
TextArea гибкий и расширяемый тэг. У него есть удобный параметр wrap, который определяет правило переноса строк. Имеет два значения hard (по-умлчанию) и soft off :)
Добавив ивент onclick=«select();» мы можем превратить его в удобный инструмиент для копипаста ;)
В конечном итоге получим простой сриптик
Добавив ивент onclick=«select();» мы можем превратить его в удобный инструмиент для копипаста ;)
В конечном итоге получим простой сриптик
<!-- со скролом, для длииинных строк --> <textarea onclick="select();" style="width: 600px; height: 36px;" wrap="off"></textarea> <!-- без скрола --> <textarea onclick="select();" style="width: 600px; height: 16px;"></textarea>Хром умеет ресайзить любые textarea, это можно ограничить или упразнить
.limit_ta { /* ограничиваем textarea по высоте и ширине */ max-width: 100px; max-height: 100px; } .cancel_resize { resize: none; /* отключаем ресайз textarea */ } .wrapoff { /* css analog wrap='off' */ white-space: nowrap; overflow: auto; }
6 августа 2009, 02:58 более 7-и месяцев назад
HTML & iframe & IE
Как сделать iframe в ИЕ без границ/бордеров? Написать параметр frameborder=«0»
Как сделать iframe в ИЕ прозрачным? Написать параметр allowTransparency=«true»
Только в ИЕ, не пропусти!
Как сделать iframe в ИЕ прозрачным? Написать параметр allowTransparency=«true»
Только в ИЕ, не пропусти!
18 июля 2009, 20:32 более 8-и месяцев назад
crossbrowser click event (DOM)
var clickEvent:Object = doc.createEvent("MouseEvents"); clickEvent.initMouseEvent("click"); HTMLElement.dispatchEvent(clickEvent);С помощью dispatchEvent мы напрямую бросаем ивент(событие) в модель ивентов. Использовать можно, так же и для других событий ;)
10 июля 2009, 15:14 более 8-и месяцев назад
Забытые теги… tabindex (параметр)
Это параметр, который устанавливает поочерёдность переключения элементов, при помощи кнопки Tab, на хтмл-страничке. Например, нужно для установки очерёдности переключения в форме логина/пароля, когда нажав таб, мы попадаем на ввод пароля, а не на ссылку «забыли пароль» или что-то ещё в таком духе.
Доступен он для <A>, <AREA>, <OBJECT>, <BUTTON>, <INPUT>, <SELECT>, <TEXTAREA>
Параметр как бы есть, и много где встречается, но в большенстве случаем, о нём никто не думает %) Это как бы ньюансировка, на которую не всегда хватает времени.
Доступен он для <A>, <AREA>, <OBJECT>, <BUTTON>, <INPUT>, <SELECT>, <TEXTAREA>
Параметр как бы есть, и много где встречается, но в большенстве случаем, о нём никто не думает %) Это как бы ньюансировка, на которую не всегда хватает времени.
12 июня 2009, 16:20 более 9-и месяцев назад
Забытые тэги… BDO
Замечательный тэг %) Кто о нём знает, отпишитесь ;))
BDO — Bi-directional Override
Что же он делает — всего лишь указывает направление текста, слева-направо, справа-налево ;) через параметр dir (дирекшон)
Выглядит вот так: Sample Fun Text
А на самом деле, направление текста можно изменить у всех текстовых блоках, через css
ps: Также параметр dir есть у тега HTML
BDO — Bi-directional Override
Что же он делает — всего лишь указывает направление текста, слева-направо, справа-налево ;) через параметр dir (дирекшон)
- rtl — right to left
- ltr — left to right (по умолчанию)
<bdo dir="rtl">Sample Fun Text</bdo>
Выглядит вот так: Sample Fun Text
А на самом деле, направление текста можно изменить у всех текстовых блоках, через css
div { direction: rtl }
ps: Также параметр dir есть у тега HTML
<HTML dir="RTL">
10 июня 2009, 03:37 более 9-и месяцев назад
Забытые тэги… lowsrc (ну не совсем тэг, параметр)
Если на странице нужно загрузить большие картинки, и что бы наш любимый пользователь не скучал, мы можем ему скормить картинки размером поменьше, или картинку прелоадера
Сквозь CSS путь открыт только с современных браузерах, и то с помощью обманки :) Укажем в ЛоуСрц параметр «thumb» и потом используем один селектор, что бы картинке сделать фоновую картинку
В JavaScript все ещё проще ;)
<input type="image" lowsrc="btn_.png" src="btn.png"> <img lowsrc="img_.png" src="img.png">
Сквозь CSS путь открыт только с современных браузерах, и то с помощью обманки :) Укажем в ЛоуСрц параметр «thumb» и потом используем один селектор, что бы картинке сделать фоновую картинку
img[lowsrc="thumb"] { background-image: url(img_.gif); }
В JavaScript все ещё проще ;)
image_obj.lowsrc = 'img_.gif';
5 июня 2009, 18:09 более 9-и месяцев назад
Забытые тэги… COL
Эта заметка о забытых тэгах. Она будет со временем пополняться, ибо таких уже достаточно, как ни странно ;)
Ну что же, начнём:
Ну что же, начнём:
- У table есть замечательный тэг col, который я, честно говоря, не встречал нигде, случайно наткнувшись на него в каких-то мануалах. Что же он нам даёт? :) Спросите вы ;) А всё просто, мы можем установить любой колонке фиксированную длину (width). Использовать его очень прочто, структура такова:
<table border="1"> <col width="140"/> <col width="360"/> <tr> <td>Колонка 1</td> <td>Колонка 2</td> </tr> </table>
Это нам даёт огромное преимущество в управлении таблицами, ибо раньше нужно было много гемора, что бы выровнять длину колонок двух разных таблиц ;)
20 мая 2009, 17:49 более 10-и месяцев назад
HTML текст под произвольным углом
Для того что бы отобразить произвольный текст под углом, мы в нормальных браузерах используем тип svg+xml для object, и через параметр data, передаём нужные данные для обработки!
А именно параметры, и теги:
Но есть ещё друг ИЕ (буеее:), и для него есть css filter, а именно:
ps: Текст будет непредсказуемо размещаться на странице, поэтому делаем ему абсолютное позиционирование! А блок в котором будет текст, вместе с объектом делаем фиксированной длины/ширины
А именно параметры, и теги:
- x=’-200’ — координата начала строки текста от верхней стороны object;
- y=’18’ — координата базовой линии строки текста от левой стороны object;
- font-family=’Arial’ font-size=’12’ — размер, гарнитура шрифта;
- fill=’#000000’ — цвет текста;
- transform=’rotate(-90)’ — поворачиваем текст на -90 градусов.
<object type="image/svg+xml" data="data:image/svg+xml; charset=utf-8, <svg xmlns='http://www.w3.org/2000/svg'> <text x='-200' y='18' font-family='Arial' font-size='12' fill='#000000' transform='rotate(-90)' text-rendering='optimizeSpeed'> вертикальный текст </text> </svg>"> </object>
Но есть ещё друг ИЕ (буеее:), и для него есть css filter, а именно:
- вертикальный фильтр %)
- горизонтальный фильтр 8)
- под произвольным углом :D
.vertical object { /* скрываем svg */ display:none; } .vertical span { filter: flipv() fliph(); writing-mode: tb-rl; } .vertical_angle span { writing-mode:lr-tb; filter:progid:DXImageTransform.Microsoft.Matrix( M11='0.985', M12='-0.174', M21='0.174', M22='0.985', SizingMethod="auto expand"); }
- M11 = cos(угла в градусах)
- M12 = -sin(угла в градусах)
- M21 = sin(угла в градусах)
- M22 = cos(угла в градусах)
ps: Текст будет непредсказуемо размещаться на странице, поэтому делаем ему абсолютное позиционирование! А блок в котором будет текст, вместе с объектом делаем фиксированной длины/ширины