Tag: html

Русский бутстрап

Только сегодня наткнулся на официальном сайте bootstrap на ссылку русской версии. Вот линк http://www.oneskyapp.com/docs/bootstrap/ru

Таблица. Математические символы и греческие буквы

Описание символа Обозначение 10-ный код 16-ный код Вид
курсивное f ƒ ƒ ƒ ƒ
прописная альфа Α Α Α Α
прописная бета Β Β Β Β
прописная гамма Γ Γ Γ Γ
прописная дельта Δ Δ Δ Δ
прописной эпсилон Ε Ε Ε Ε
прописная дзета Ζ Ζ Ζ Ζ
прописная эта Η Η Η Η
прописная тета Θ Θ Θ Θ
прописная иота Ι Ι Ι Ι
прописная каппа Κ Κ Κ Κ
прописная ламбда Λ Λ Λ Λ
прописная мю Μ Μ Μ Μ
прописная ню Ν Ν Ν Ν
прописная кси Ξ Ξ Ξ Ξ
прописной омикрон Ο Ο Ο Ο
прописная пи Π Π Π Π
прописная ро Ρ Ρ Ρ Ρ
прописная сигма Σ Σ Σ Σ
прописная тау Τ Τ Τ Τ
прописная ипсилон Υ Υ Υ Υ
прописная фи Φ Φ Φ Φ
прописная хи Χ Χ Χ Χ
прописная пси Ψ Ψ Ψ Ψ
прописная омега Ω Ω Ω Ω
строчная альфа α α α α
строчная бета β β β β
строчная гамма γ γ γ γ
строчная дельта δ δ δ δ
строчная эпсилон ε ε ε ε
строчная дзета ζ ζ ζ ζ
строчная эта η η η η
строчная тета θ θ θ θ
строчная иота ι ι ι ι
строчная каппа κ κ κ κ
строчная ламбда λ λ λ λ
строчная мю μ μ μ μ
строчная ню ν ν ν ν
строчная кси ξ ξ ξ ξ
строчный омикрон ο ο ο ο
строчная пи π π π π
строчная ро ρ ρ ρ ρ
строчная сигма конечная ς ς ς ς
строчная сигма σ σ σ σ
строчная тау τ τ τ τ
строчная ипсилон υ υ υ υ
строчная фи φ φ φ φ
строчная хи χ χ χ χ
строчная пси ψ ψ ψ ψ
строчная омега ω ω ω ω
символ строчная тета ϑ ϑ ϑ ϑ
ипсилон с крючком ϒ ϒ ϒ ϒ
символ пи ϖ ϖ ϖ ϖ
маркер списка • • •
многоточие … … …
знак прим ′ ′ ′
знак двойной прим ″ ″ ″
надчеркивание ‾ ‾ ‾
дробная черта ⁄ ⁄ ⁄
рукописная P ℘ ℘ ℘
мнимая часть числа ℑ ℑ ℑ
действительная часть числа ℜ ℜ ℜ
торговая марка ™ ™ ™
алеф ℵ ℵ ℵ
стрелка влево ← ← ←
стрелка вверх ↑ ↑ ↑
стрелка вправо → → →
стрелка вниз ↓ ↓ ↓
стрелка влево-вправо ↔ ↔ ↔
возврат каретки ↵ ↵ ↵
двойная стрелка влево ⇐ ⇐ ⇐
двойная стрелка вверх ⇑ ⇑ ⇑
двойная стрелка вправо ⇒ ⇒ ⇒
двойная стрелка вниз ⇓ ⇓ ⇓
двойная стрелка влево-вправо ⇔ ⇔ ⇔
квантор всеобщности ∀ ∀ ∀
знак дифференциала ∂ ∂ ∂
квантор существования ∃ ∃ ∃
пустое множество ∅ ∅ ∅
набла ∇ ∇ ∇
принадлежит множеству ∈ ∈ ∈
не принадлежит множеству ∉ ∉ ∉
является членом ∋ ∋ ∋
n-арное произведение ∏ ∏ ∏
n-арная сумма ∑ ∑ ∑
знак минус − − −
оператор звездочка ∗ ∗ ∗
радикал √ √ √
пропорционально ∝ ∝ ∝
бесконечность ∞ ∞ ∞
угол ∠ ∠ ∠
логическое И ∧ ∧ ∧
логическое ИЛИ ∨ ∨ ∨
пересечение ∩ ∩ ∩
объединение ∪ ∪ ∪
интеграл ∫ ∫ ∫
следовательно ∴ ∴ ∴
оператор тильда ∼ ∼ ∼
приблизительно равно ≅ ≅ ≅
асимптотически равно ≈ ≈ ≈
не равно ≠ ≠ ≠
тождественно равно ≡ ≡ ≡
меньше или равно ≤ ≤ ≤
больше или равно ≥ ≥ ≥
подмножество ⊂ ⊂ ⊂
надмножество ⊃ ⊃ ⊃
не подмножество ⊄ ⊄ ⊄
подмножество или равно ⊆ ⊆ ⊆
надмножество или равно ⊇ ⊇ ⊇
прямая сумма ⊕ ⊕ ⊕
векторное произведение ⊗ ⊗ ⊗
перпендикулярно ⊥ ⊥ ⊥
оператор точка ⋅ ⋅ ⋅
левый верхний угол ⌈ ⌈ ⌈
правый верхний угол ⌉ ⌉ ⌉
левый нижний угол ⌊ ⌊ ⌊
правый нижний угол ⌋ ⌋ ⌋
левая угловая скобка ⟨ 〈 〈
правая угловая скобка ⟩ 〉 〉
ромб ◊ ◊ ◊
пики ♠ ♠ ♠
трефы ♣ ♣ ♣
червы ♥ ♥ ♥
бубны ♦ ♦ ♦

Таблица. Специальные символы

Описание символа Обозначение 10-ный код 16-ный код Вид
кавычка " " " «
амперсант & & & &
левая угловая скобка &lt; &#60; &#x3C; <
правая угловая скобка &gt; &#62; &#x3E; >
лигатура OE &OElig; &#338; &#x152; Œ
лигатура oe &oelig; &#339; &#x153; œ
S с птичкой &Scaron; &#352; &#x160; Š
s с птичкой &scaron; &#353; &#x161; š
Y с диерезой &Yuml; &#376; &#x178; Ÿ
циркумфлекс &circ; &#710; &#x2C6; ˆ
малая тильда &tilde; &#732; &#x2DC; ˜
короткий пробел &ensp; &#8194; &#x2002;
длинный пробел &emsp; &#8195; &#x2003;
узкий пробел &thinsp; &#8201; &#x2009;
разделитель нулевой ширины &zwnj; &#8204; &#x200C;
соединитель нулевой ширины &zwj; &#8205; &#x200D;
указатель слева направо &lrm; &#8206; &#x200E;
указатель справа налево &rlm; &#8207; &#x200F;
короткое тире &ndash; &#8211; &#x2013;
длинное тире &mdash; &#8212; &#x2014;
открывающая одинарная кавычка &lsquo; &#8216; &#x2018;
закрывающая одинарная кавычка &rsquo; &#8217; &#x2019;
нижняя одинарная кавычка &sbquo; &#8218; &#x201A;
открывающая двойная кавычка &ldquo; &#8220; &#x201C;
закрывающая двойная кавычка &rdquo; &#8221; &#x201D;
нижняя двойная кавычка &bdquo; &#8222; &#x201E;
кинжал &dagger; &#8224; &#x2020;
двойной кинжал &Dagger; &#8225; &#x2021;
знак промилле &permil; &#8240; &#x2030;
открывающая угловая кавычка &lsaquo; &#8249; &#x2039;
закрывающая угловая кавычка &rsaquo; &#8250; &#x203A;
евро &euro; &#8364; &#x20AC;

Таблица. Символы латиницы

Описание символа Обозначение 10-ный код 16-ный код Вид
неразрывный пробел &nbsp; &#160; &#xA0;
перевернутый восклицательный знак &iexcl; &#161; &#xA1; ¡
цент &cent; &#162; &#xA2; ¢
фунт стерлингов &pound; &#163; &#xA3; £
знак денежной единицы &curren; &#164; &#xA4; ¤
йена &yen; &#165; &#xA5; ¥
вертикальная черта &brvbar; &#166; &#xA6; ¦
параграф &sect; &#167; &#xA7; §
диереза &uml; &#168; &#xA8; ¨
знак авторского права &copy; &#169; &#xA9; ©
показатель женского рода &ordf; &#170; &#xAA; ª
открывающая двойная угловая кавычка &laquo; &#171; &#xAB; «
знак отрицания &not; &#172; &#xAC; ¬
мягкий перенос &shy; &#173; &#xAD; ­
охраняемый знак &reg; &#174; &#xAE; ®
надчеркивание &macr; &#175; &#xAF; ¯
градус &deg; &#176; &#xB0; °
плюс-минус &plusmn; &#177; &#xB1; ±
вторая степень &sup2; &#178; &#xB2; ²
третья степень &sup3; &#179; &#xB3; ³
острое ударение &acute; &#180; &#xB4; ´
знак микро &micro; &#181; &#xB5; µ
конец абзаца &para; &#182; &#xB6;
средняя точка &middot; &#183; &#xB7; ·
седиль &cedil; &#184; &#xB8; ¸
единица в верхнем индексе &sup1; &#185; &#xB9; ¹
показатель мужского рода &ordm; &#186; &#xBA; º
закрывающая двойная угловая кавычка &raquo; &#187; &#xBB; »
одна четвертая &frac14; &#188; &#xBC; ¼
одна вторая &frac12; &#189; &#xBD; ½
три четверти &frac34; &#190; &#xBE; ¾
перевернутый вопросительный знак &iquest; &#191; &#xBF; ¿
A с тупым ударением &Agrave; &#192; &#xC0; À
A с острым ударением &Aacute; &#193; &#xC1; Á
A с циркумфлексом &Acirc; &#194; &#xC2; Â
A с тильдой &Atilde; &#195; &#xC3; Ã
A с диерезой &Auml; &#196; &#xC4; Ä
A с кружком &Aring; &#197; &#xC5; Å
лигатура AE &AElig; &#198; &#xC6; Æ
C с седилем &Ccedil; &#199; &#xC7; Ç
E с тупым ударением &Egrave; &#200; &#xC8; È
E с острым ударением &Eacute; &#201; &#xC9; É
E с циркумфлексом &Ecirc; &#202; &#xCA; Ê
E с диерезой &Euml; &#203; &#xCB; Ë
I с тупым ударением &Igrave; &#204; &#xCC; Ì
I с острым ударением &Iacute; &#205; &#xCD; Í
I с циркумфлексом &Icirc; &#206; &#xCE; Î
I с диерезой &Iuml; &#207; &#xCF; Ï
ETH &ETH; &#208; &#xD0; Ð
N с тильдой &Ntilde; &#209; &#xD1; Ñ
O с тупым ударением &Ograve; &#210; &#xD2; Ò
O с острым ударением &Oacute; &#211; &#xD3; Ó
O с циркумфлексом &Ocirc; &#212; &#xD4; Ô
O с тильдой &Otilde; &#213; &#xD5; Õ
O с диерезой &Ouml; &#214; &#xD6; Ö
знак умножения &times; &#215; &#xD7; ×
O перечеркнутое &Oslash; &#216; &#xD8; Ø
U с тупым ударением &Ugrave; &#217; &#xD9; Ù
U с острым ударением &Uacute; &#218; &#xDA; Ú
U с циркумфлексом &Ucirc; &#219; &#xDB; Û
U с диерезой &Uuml; &#220; &#xDC; Ü
Y с острым ударением &Yacute; &#221; &#xDD; Ý
THORN &THORN; &#222; &#xDE; Þ
двойное s &szlig; &#223; &#xDF; ß
a с тупым ударением &agrave; &#224; &#xE0; à
a с острым ударением &aacute; &#225; &#xE1; á
a с циркумфлексом &acirc; &#226; &#xE2; â
a с тильдой &atilde; &#227; &#xE3; ã
a с диерезой &auml; &#228; &#xE4; ä
a с кружком &aring; &#229; &#xE5; å
лигатура ae &aelig; &#230; &#xE6; æ
c с седилем &ccedil; &#231; &#xE7; ç
e с тупым ударением &egrave; &#232; &#xE8; è
e с острым ударением &eacute; &#233; &#xE9; é
e с циркумфлексом &ecirc; &#234; &#xEA; ê
e с диерезой &euml; &#235; &#xEB; ë
i с тупым ударением &igrave; &#236; &#xEC; ì
i с острым ударением &iacute; &#237; &#xED; í
i с циркумфлексом &icirc; &#238; &#xEE; î
i с диерезой &iuml; &#239; &#xEF; ï
eth &eth; &#240; &#xF0; ð
n с тильдой &ntilde; &#241; &#xF1; ñ
o с тупым ударением &ograve; &#242; &#xF2; ò
o с острым ударением &oacute; &#243; &#xF3; ó
o с циркумфлексом &ocirc; &#244; &#xF4; ô
o с тильдой &otilde; &#245; &#xF5; õ
o с диерезой &ouml; &#246; &#xF6; ö
знак деления &divide; &#247; &#xF7; ÷
o перечеркнутое &oslash; &#248; &#xF8; ø
u с тупым ударением &ugrave; &#249; &#xF9; ù
u с острым ударением &uacute; &#250; &#xFA; ú
u с циркумфлексом &ucirc; &#251; &#xFB; û
u с диерезой &uuml; &#252; &#xFC; ü
y с острым ударением &yacute; &#253; &#xFD; ý
thorn &thorn; &#254; &#xFE; þ
y с диерезой &yuml; &#255; &#xFF; ÿ

Как изменить внешний вид checkbox

Наверняка многие знают, что такие элементы формы как select, file, checkbox, radio не поддаются стилизации средствами CSS. Но как же быть, если нерадивый дизайнер в макете дизайна нарисовал поле checkbox в форме стилизировным под общий дизайн сайт, а заказчик на отрез не хочет принимать дизайн без формы ввода данных идентичной макету дизайна.

Вот здесь и пригодиться описанный ниже метод. Суть метода состоит в том, что элемент checkbox делается невидимым, но невидимым не простым присвоением display:none, а через свойство opacity:0.

filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);
-moz-opacity: 0.5;
-khtml-opacity: 0.5;
opacity: 0.5;

Таким образом, элемент находиться на странице, остается кликабельным, но полностью прозрачный, таким образом, невидимый. А в блоке, в котором находиться checkbox задается бекграунд с картинкой, на которой изображено, как должен выглядеть измененный checkbox и при клике на checkbox скриптом у блока меняется класс стиля, чтоб поменялся бекграунд на картинку с измененным чекбоксом в другом состоянии.

/*---------- Стили классов -----------*/
input {
margin:0;padding:0;
opacity:0;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);
}
.checkboxOn {
background:url(f_logincheckbox_on.png) no-repeat 0 3px;
}
.checkboxOff {
background:url(f_logincheckbox_off.png) no-repeat 0 3px;
}

/*---------- Скрипт изменения класса-----------*/

function logincheckboxCheck () {
  if (document.getElementById("checkbox1").checked) {
	document.getElementById("checkboxDiv").className="checkboxOn";
   }
	else {
	 document.getElementById("checkboxDiv").className="checkboxOff";
	}
}

/*---------- Верстка-----------*/

<div id="checkboxDiv">
	<input type="checkbox" id="checkbox1" onclick="logincheckboxCheck();" checked="checked"/> <label for="checkbox1">Запомнить меня</label>
</div>

В дополнение, стоит отметить что картинку чекбокса лучше делать спрайтом из двух картинок чтоб избежать эффекта мерцания при подргрузке картинки.

Конвертация валюты cbr.ru на Python и jQuery

Задача: конвертировать валюту (USD, EUR) вводимую пользователем в рубли. При смене вида валюты уже введенные данные конвертируем тоже.

Решение:

Python функция которая принимает GET запросом вид валюты и сумму.

import json
import urllib
from xml.etree import ElementTree as ET

def ajax_convert_valuta(request):
    # Пропускаем проверку принимаемых данных, выполните ее сами
    valuta = request.GET['valuta']
    summa = request.GET['sum']
    root = ET.parse(urllib.urlopen('http://www.cbr.ru/scripts/XML_daily.asp')).getroot()
    for x in root:
        if x.attrib['ID'] == 'R01239': valueEUR = x.find('Value').text.replace(',', '.')
        if x.attrib['ID'] == 'R01235': valueUSD = x.find('Value').text.replace(',', '.')
    if valuta == '1':
        convert_valuta = float(valueUSD) * float(summa)
    if valuta == '2':
        convert_valuta = float(valueEUR) * float(summa)
    response = HttpResponse()
    response['Content-Type'] = "text/javascript"
    response.write(json.dumps({'Value': convert_valuta}))
    return response

jQuery у меня примерно такой (в Вашем случае все должно отличаться;]).

$("#valuta_convert").hide();
function initLocal(){
	var localId = $('select[name=type_of_currency]').val();
	var summa = $("input[name=price]").val();
	if(localId != 0){
		var valueLocal = $('select[name=type_of_currency] option:selected').val();
		$.getJSON('/ajax/convert_valuta.json?valuta='+valueLocal+'&='+summa, function(data) {
			$("#valuta_convert").show();
			$("#valuta_convert").text('~ '+data.Value+' руб');
		});
	}else{
		$("#valuta_convert").hide();
	}
}
$('select[name=type_of_currency]').change(initLocal);
$("#price").keyup(function(){
	initLocal();

});

Данные примерные и у всех будут отличаться в том числе и у меня, лишнее я отрезал за ненадобностью.

Кросс-браузерный CSS transform (даже в IE)

Скопипастил себе, дабы вещь пригодится.
———————————-
CSS свойство transform позволяет масштабировать, наколнять и поворачивать HTML-блоки с помощью CSS. Движки Firefox, Opera и Webkit имеют встроенную поддержку свойства, чего нельзя сказать об Internet Explorer. Но не все так печально, в IE есть фильтр DXImageTransform.Microsoft.Matrix который реализует такую функциональность. Один замечательный человек по имени Zoltan Hawryluk разработал небольшую библиотеку под названием cssSandpaper, с помощью которой можно создавать интересные эффекты. Примеры работы:

Примеры работы:

Узнать побольше о том, как создавалась библиотека, а так же скачать можно здесь

Hello World

Ну вот пришел тот самый день=) Дописал свой блог. Все написано на Python & Django. В ближайшее время перенесу все со старого блога и в топку старый добрый вордпрез…. Если Вы каким то образом попали сюда, то сразу Вам скажу, регистрация сдесь закрытая… нах этих спамеров… И вдруг Вам захотелось поучаствовать в дискуссиях и прокоментить тот или иной пост, то сдесь все просто, ломимся ко мне всеми возможными способами и просим ак, после чего я вам выдам логин и пароль… На этой нотке заканчиваю первый пост. Ну и Hello World in g00g1e.org.