Deerua about Coding -> Заметки с тегом «html»

Блог о кодинге, автор Deerua

coding, javascript, css, html, php, jquery, mysql, deerua

Deerua about Coding

 Избранное

 Самые комментируемые за всю историю

 176 заметок ненаглядно

 Архив за 2010, 2009, 2008  год


Страницы:     1 | 2 | 3

 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





 1 комментарий

 Теги: html

 26 октября 2009, 06:26       более 4-х месяцев назад

Забытые теги… CSS: list-style-position

Сегодня речь о свойстве CSS list-style-position? И что, а зачем? Да вот зачастую отступы для булитов в списках, все делают падингами-маргинами, и зачастую они просто вылазят вне своего блока, когда кто-то что-то обнулит и забудет. И тут на помощь приходит это свойство, оно попросту указывает куда тулить эти самые булиты, то ли вне, то ли внутрь ;)

По умолчанию, значение outside, но есть ещё
{ list-style-position: inside ­}
Выглядит это так:
  • Пример
  • Рыбного
текста

Можно даже с помощью джиквери сделать лесенку в одном и том же списке ;)) Каждому чётному или не чётному присвоить это свойство ;)

ps: О, пора переименовать рубрику %) Наверное в забытые уголки HTML, или что-то в этом духе.

 Комментировать…

 Теги: css, html   tags   Забытые тэги

 3 сентября 2009, 11:37       более 6-и месяцев назад

Advancing Textarea (Google chrome hints)

TextArea гибкий и расширяемый тэг. У него есть удобный параметр wrap, который определяет правило переноса строк. Имеет два значения hard (по-умлчанию) и soft off :)

Добавив ивент 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­;
}

 Комментировать…

 Теги: html, шпаргалка

 6 августа 2009, 02:58       более 7-и месяцев назад

HTML & iframe & IE

Как сделать iframe в ИЕ без границ/бордеров? Написать параметр frameborder=«0»

Как сделать iframe в ИЕ прозрачным? Написать параметр allowTransparency=«true»

Только в ИЕ, не пропусти!

 Комментировать…

 Теги: html   tags   iframe

 18 июля 2009, 20:32       более 8-и месяцев назад

crossbrowser click event (DOM)

var clickEvent:Object = doc.createEvent("MouseEvents");
clickEvent.initMouseEvent("click");
HTMLElement.dispatchEvent(clickEvent);
С помощью dispatchEvent мы напрямую бросаем ивент(событие) в модель ивентов. Использовать можно, так же и для других событий ;)

 Комментировать…

 Теги: html   w3c   DOM, browsers   crossbrowser, javascript

 10 июля 2009, 15:14       более 8-и месяцев назад

Забытые теги… tabindex (параметр)

Это параметр, который устанавливает поочерёдность переключения элементов, при помощи кнопки Tab, на хтмл-страничке. Например, нужно для установки очерёдности переключения в форме логина/пароля, когда нажав таб, мы попадаем на ввод пароля, а не на ссылку «забыли пароль» или что-то ещё в таком духе.

Доступен он для <A>, <AREA>, <OBJECT>, <BUTTON>, <INPUT>, <SELECT>, <TEXTAREA>

Параметр как бы есть, и много где встречается, но в большенстве случаем, о нём никто не думает %) Это как бы ньюансировка, на которую не всегда хватает времени.

 Комментировать…

 Теги: html   tags   Забытые тэги

 12 июня 2009, 16:20       более 9-и месяцев назад

Забытые тэги… BDO

Замечательный тэг %) Кто о нём знает, отпишитесь ;))

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">

 1 комментарий

 Теги: html, html   tags   Забытые тэги

 10 июня 2009, 03:37       более 9-и месяцев назад

Забытые тэги… lowsrc (ну не совсем тэг, параметр)

Если на странице нужно загрузить большие картинки, и что бы наш любимый пользователь не скучал, мы можем ему скормить картинки размером поменьше, или картинку прелоадера
<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';

 Комментировать…

 Теги: html   tags   img   lowsrc, html   tags   Забытые тэги

 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>
    
    Это нам даёт огромное преимущество в управлении таблицами, ибо раньше нужно было много гемора, что бы выровнять длину колонок двух разных таблиц ;)
to be continued…

 1 комментарий

 Теги: html, html   tags   Забытые тэги

 20 мая 2009, 17:49       более 10-и месяцев назад

HTML текст под произвольным углом

Для того что бы отобразить произвольный текст под углом, мы в нормальных браузерах используем тип svg+xml для object, и через параметр data, передаём нужные данные для обработки!
А именно параметры, и теги:
  • 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: Текст будет непредсказуемо размещаться на странице, поэтому делаем ему абсолютное позиционирование! А блок в котором будет текст, вместе с объектом делаем фиксированной длины/ширины

 Комментировать…

 Теги: html, css

Страницы:     1 | 2 | 3
Нужно создать сайт на 1С-Битрикс(Bitrix)?
Работает на движке e2 Selecta * All sources code was highlighted with w3club Highlighter.
deer.org.ua © 2008—2010 Vitaliy Bogdanets Deerua