Моя онлайн шпаргалка: 2010

Скрипт для Поиска, скрывания текста при нажатии

Стилизация input type="file"

<input type="file" id="inputFile" size="49" onchange="document.getElementById('inputText').value = this.value;" /><br />

потом блок который накладываем под инпут файл методом z-index.
<div class="block"> <input type="text" id="inputText" /><br /> <a class="btn">Загрузить</a><br /> </div>

После этого инпут файл делаем прозрачным с помощью цсс:
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);
-moz-opacity: 0;
-khtml-opacity: 0;
opacity: 0;

Выборка по атребутам

$('img[width=300]') Выбирает все картинки с заданой шириной 300
$('a[href^=http]') Выбирает все ссылки которые начинаются с http
$('a[href*=ru]') Выбирает все ссылки в адресе которых есть ru
$('a[href$=ru]') Выбирает все ссылки которые заканчиваються на ru

Поиск в контенте методами jQuery

$('div:has(strong)') - находит все DIV в которых есть тег STRONG
$('div:contains(текст)') - находит все DIV в которых есть слово ТЕКСТ

min-width для IE6 и IE7

Експрешен нас спасет)

.block{
min-width: 980px; /* для нормальных браузеров */
width:expression(document.documentElement.clientWidth < 980 ? "980px" : "auto");
}

Отправка по клику формы

Если кнопку в форме делать блоком или линком, то по нажатию кнопки "enter" ничего не происходит, обидно...

Вот так можно исправить:
$("body, form, input, textarea").keypress(function(e){
if(e.which == 13){
$("form").submit();
}
});

Прижать Footer 2

Как вариант:

html {height: 100%;}
body {
height: auto !important;
height: 100%;
min-height: 100%;
position: relative;
}
.content {
padding-bottom: 80px;
}
.footer {
position: absolute;
bottom: 0;
height: 80px;
}

выпадающее меню

вот как-то так:
$(document).ready(function(){
$('li.menu').hover(
function() { $('ul', this).css('display', 'block'); },
function() { $('ul', this).css('display', 'none'); });
});

при наведении мыши на элемент, список появляется, а при забирании мыши срабатывает вторая функция и список исчезает

Кроссбраузерное прицепленные шрифта

@font-face {

    font-family: 'MyWebFont';

    src: url('webfont.eot'); /* IE9 Compat Modes */

    src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */

    url('webfont.woff') format('woff'), /* Modern Browsers */

    url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */

    url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */

}

body {

    font-family: 'MyWebFont', Arial, sans-serif;

}

max-width - методами яваскрипта

Обтикание блоков.

Есть три варианта (для меня приемлемых):

1.
внутри блока в конце поставить блок <div style="clear:both"></div>

2.
блоку в цсс добавить свойство overflow: hidden, для ИЕ если буду проблемы можно добавить zoom: 1;

3.
интересный вариант нашел на http://rotorweb.ru

блоку добавить вот такой клас:
.floatElement:after {
visibility: hidden;
display: block;
clear: both;
content: " ";
height: 0;
}

для ИЕ zoom:1; или height:1%;

Максимальный и минимальные высоты и широты для ИЕ

Максимальная высота

/* для ИЕ */
div.max-height {
height: expression(document.body.clientHeight > 1000px ? "1000px" : "auto");
}
/* для нормальных браузеров */
div.max-height {
max-height: 1000px;
}

Минимальная высота

/* для ИЕ */
div.min-height {
width: expression(document.body.clientHeight < 600px ? "600px" : "auto"); }

/* для нормальных браузеров */
div.min-height {
min-height: 600px;
}

Максимальная ширина

/* для ИЕ */
div.max-width {
width: expression(document.body.clientWidth > 1200px ? "1200px" : "auto");
}
/* для нормальных браузеров */
div.max-width {
max-width: 1200px;
}

Минимальная ширина

/* для ИЕ */
div.min-width {
width: expression(document.body.clientWidth < 980px ? "980px" : "auto");
}
/* для нормальных браузеров */
div.min-width {
min-width: 980px;
}

Семейство шрифтов

font-family: "Arial Black", "Helvetica CY", "Nimbus Sans L" sans-serif;
font-family: Arial, "Helvetica CY", "Nimbus Sans L", sans-serif;
font-family: "Comic Sans MS", "Monaco CY", cursive;
font-family: "Courier New", "Nimbus Mono L", monospace;
font-family: Georgia, "Century Schoolbook L", Serif;
font-family: Impact, "Charcoal CY", sans-serif;
font-family: "Lucida Console", Monaco, monospace;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-family: Tahoma, "Geneva CY", sans-serif;
font-family: "Times New Roman", "Times CY", "Nimbus Roman No9 L", serif;
font-family: "Trebuchet MS", "Helvetica CY", sans-serif;
font-family: Verdana, "Geneva CY", "DejaVu Sans", sans-serif;

Прокрутка страницы вверх

<a onClick="scroll(0,0);> вверх </a>

Как пройти валидность, невалидному коду...

<script>

/* <![CDATA[ */

document.write('тут текст который будет игнорироваться валидатором')

/* ]]> */

</script>

Задержка для скрипта

$(function(){
 $('.block').animate({width:$('.block').width()},2000,
 function()
  {
          $('.photo').show('slow'); 
  })
 });

Идея простая, скрипт берет блок(любой можно задать) высчитывает его ширину и ему же присваивает,

тоесть посути ничего не меняет, и делает это 2000 миллисекунд (2секунды), а после этого уже

запускается функция, которая делает что то полезное, например показывает фото :))

Вот такая задержка на 2 сек, перед выполнением скрипта.

border radius (css3)

-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;

если надо разные углы:
-moz-border-radius: 8px 6px 4px 2px;
-webkit-border-radius: 8px 6px 4px 2px;
border-radius: 8px 6px 4px 2px;

Спец.Предложение для Internet Explorer 7

Для всех браузеров

div.block {
background: #FFF;
}

Для ИЕ7
*:first-child+html div.block {
background: #000;
}

Как запретить выделение текста

Для Мазиллы, Сафари и Хрома всё просто:

-moz-user-select: none;
-khtml-user-select: none;
user-select: none;

С ИЕ и Оперой сложнее, без скрипта не обойтись, буду искать ответ...

Тень на CSS

.box-shadow {
  -moz-box-shadow: 3px 3px 4px #000;
  -webkit-box-shadow: 3px 3px 4px #000;
  box-shadow: 3px 3px 4px #000;
 /* IE 8 and IE 5.5 - 7 */
  -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')";
  filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000');
}

Сглаженные углы на CSS (вариант №2)

Пример закругленных уголков без использования графики,
вариант использования значка • (•)
Идея стара как мир :) не знаю на сколько универсальная, но иногда можно пользоваться...
<div class="block"> <div class="tl"><span>•</span></div> <div class="tr"><span>•</span></div> <div class="bl"><span>•</span></div> <div class="br"><span>•</span></div> <div class="text"> TEXT</div> </div>
Всё как в варианте с рисунком, основной блок с класом block в ньом для каждого угла свой блок с класом (tl, tr, bl, br) с position:absolute; и растановкой по углам. Ну и блок с класом text для контента(текста, фоток)... Недостатки, есть конечно, но когда надо что-то простое вполне спасает... ИМХО: всё таки чаще пользуюсь рисунком (полупрозрачным пнг) для углов.

Читать и запомнить...

Структура CSS файла

Фикс для Хрома

Вот нашел интересный фикс для Хрома 2 и новее..

.block{
color: black;
}
.block{
[color: black;
color: red;]
}

В Хроме будет Красный цвет

Чет нечет...

Как разукрасить таблицу или список, через ряд, тоесть все чётные должны быть с одним фоном а не чётные с другим?

Решение:
tr:nth-child(even) {background: White} четный
tr:nth-child(odd) {background: Yellow} не четный

Есть сложнее комбинации типа tr:nth-child(2n+3).

Поскольку данный метод спецификация CSS3, В ИЕ не работает... тем хуже для ИЕ :)

Принудительный перенос строки

Свойство для переноса строки, особенно полезно когда одно слово может быть длиннее блока. Когда столкнетесь с такой ситуацией, поймете и оцените :)

white-space: pre-wrap;
white-space: -moz-pre-wrap; Mozilla
white-space: -o-pre-wrap; Opera
word-wrap: break-word; Internet Explorer 6+

Как сделать вертикальную надпись

Сегодня встал вопрос: Можно ли написать, средствами CSS, текст вертикально сверху в низ?
Ответ: Конечно можна!

чудо свойство - writing-mode, типа: writing-mode: tb-rl;

ну и фикс для всех браузеров кроме ИЕ(сам в шоке:))
Мозилла: -moz-transform: rotate(90deg);
Сафари: -webkit-transform: rotate(90deg);
Опера: -o-transform: rotate(90deg);

Кароче, вот так это делается:
<style> .v_text{ writing-mode: tb-rl; -moz-transform: rotate(90deg); -webkit-transform: rotate(90deg); -o-transform: rotate(90deg); } </style><div class="v_text">Text</div>

Мнемоники (Спец. символы)

Символ	Назначение	Мнемоника	Код
	неразрывный пробел
¡	перевёрнутый восклицательный знак	¡	¡
¢	знак «цент (монета)»	¢	¢
£	знак «фунт стерлингов»	£	£
¤	знак «валюта»	¤	¤
¥	знак «иена»	¥	¥
¦	разорванная вертикальная черта	¦	¦
§	знак раздела (знак параграфа)	§	§
¨	две точки — умлаут / трема	¨	¨
©	знак охраны авторского права	©	©
ª	порядковый индикатор (женский род)	ª	ª
«	направленная влево двойная угловая кавычка	«	«
»	направленная вправо двойная угловая кавычка	»	»
¬	знак «отрицание» (скобка)	¬	¬
	«мягкий» дефис (место возможного переноса)
®	знак «зарегистрированный товарный знак» не путать с ™ — «товарный знак»	®	®
¯	макрон	¯	¯
°	знак «градус»	°	°
±	плюс-минус	±	±
²	верхний индекс «2»	²	²
³	верхний индекс «3»	³	³
´	акут («острое ударение»)	´	´
µ	знак микро	µ	µ
¶	знак абзаца (параграф)	¶	¶
·	средняя точка	·	·
¸	седиль	¸	¸
¹	верхний индекс «1»	¹	¹
º	порядковый индикатор (мужской род)	º	º
¼	простая дробь «одна четвёртая»	¼	¼
½	простая дробь «одна вторая»	½	½
¾	простая дробь «три четверти»	¾	¾
¿	перевёрнутый знак вопроса	¿	¿
À	латинская заглавная A с грависом («тупым ударением»)	À	À
Á	латинская заглавная A с акутом («острым ударением»)	Á	Á
Â	латинская заглавная A с циркумфлексом	Â	Â
Ã	латинская заглавная A с тильдой	Ã	Ã
Ä	латинская заглавная A с тремой	Ä	Ä
Å	латинская заглавная A с кружком сверху	Å	Å
Æ	латинская заглавная лигатура AE	Æ	Æ
Ç	латинская заглавная C с седилью	Ç	Ç
È	латинская заглавная E с грависом	È	È
É	латинская заглавная E с акутом	É	É
Ê	латинская заглавная E с циркумфлексом	Ê	Ê
Ë	латинская заглавная E с тремой	Ë	Ë
Ì	латинская заглавная I с грависом	Ì	Ì
Í	латинская заглавная I с акутом	Í	Í
Î	латинская заглавная I с циркумфлексом	Î	Î
Ï	латинская заглавная I с тремой	Ï	Ï
Ð	латинская заглавная буква «eth»	Ð	Ð
Ñ	латинская заглавная N с тильдой	Ñ	Ñ
Ò	латинская заглавная O с грависом	Ò	Ò
Ó	латинская заглавная O с акутом	Ó	Ó
Ô	латинская заглавная O с циркумфлексом	Ô	Ô
Õ	латинская заглавная O с тильдой	Õ	Õ
Ö	латинская заглавная O с тремой	Ö	Ö
×	знак умножения	×	×
Ø	латинская заглавная O диагонально перечёркнутая	Ø	Ø
Ù	латинская заглавная U с грависом	Ù	Ù
Ú	латинская заглавная U с акутом	Ú	Ú
Û	латинская заглавная U с циркумфлексом	Û	Û
Ü	латинская заглавная U с тремой	Ü	Ü
Ý	латинская заглавная Y с акутом	Ý	Ý
Þ	латинская заглавная буква Торн (THORN)	Þ	Þ
ß	латинская буква эсцет	ß	ß
à	латинская "a" с грависом	à	à
á	латинская "a" с акутом	á	á
â	латинская "a" с циркумфлексом	â	â
ã	латинская "a" с тильдой	ã	ã
ä	латинская "a" с тремой	ä	ä
å	латинская "a" с кружком сверху	å	å
æ	латинская "ae"	æ	æ
ç	латинская "c" седилья	ç	ç
è	латинская "e" с грависом	è	è
é	латинская "e" с акутом	é	é
ê	латинская "e" с циркумфлексом	ê	ê
ë	латинская "e" с тремой	ë	ë
ì	латинская "i" с грависом	ì	ì
í	латинская "i" с акутом	í	í
î	латинская "i" с циркумфлексом	î	î
ï	латинская "i" с тремой	ï	ï
ð	латинская "eth"	ð	ð
ñ	латинская "n" с тильдой	ñ	ñ
ò	латинская "o" с грависом	ò	ò
ó	латинская "o" с акутом	ó	ó
ô	латинская "o" с циркумфлексом	ô	ô
õ	латинская "o" с тильдой	õ	õ
ö	латинская "o" с тремой	ö	ö
÷	знак деления	÷	÷
ø	латинская "o" диагонально перечёркнутая	ø	ø
ù	латинская "u" с грависом	ù	ù
ú	латинская "u" с акутом	ú	ú
û	латинская "u" с циркумфлексом	û	û
ü	латинская "u" с тремой	ü	ü
ý	латинская "y" с акутом	ý	ý
þ	латинская буква "торн" (thorn)	þ	þ
ÿ	латинская "y" с тремой	ÿ	ÿ

Символ	Назначение	Мнемоника	Код
Латинские
ƒ	латинская f с хвостиком	&fnof;	ƒ
Греческие
Α	греческая заглавная альфа	Α	Α
Β	греческая заглавная бета	Β	Β
Γ	греческая заглавная гамма	Γ	Γ
Δ	греческая заглавная дельта	Δ	Δ
Ε	греческая заглавная эпсилон	Ε	Ε
Ζ	греческая заглавная дзета	Ζ	Ζ
Η	греческая заглавная эта	Η	Η
Θ	греческая заглавная тета	Θ	Θ
Ι	греческая заглавная йота	Ι	Ι
Κ	греческая заглавная каппа	Κ	Κ
Λ	греческая заглавная лямбда	Λ	Λ
Μ	греческая заглавная мю	Μ	Μ
Ν	греческая заглавная ню	Ν	Ν
Ξ	греческая заглавная кси	Ξ	Ξ
Ο	греческая заглавная омикрон	Ο	Ο
Π	греческая заглавная пи	Π	Π
Ρ	греческая заглавная ро	Ρ	Ρ
Σ	греческая заглавная сигма	Σ	Σ
Τ	греческая заглавная тау	Τ	Τ
Υ	греческая заглавная ипсилон	Υ	Υ
Φ	греческая заглавная фи	Φ	Φ
Χ	греческая заглавная хи	Χ	Χ
Ψ	греческая заглавная пси	Ψ	Ψ
Ω	греческая заглавная омега	Ω	Ω
α	греческая строчная альфа	α	α
β	греческая строчная бета	β	β
γ	греческая строчная гамма	γ	γ
δ	греческая строчная дельта	δ	δ
ε	греческая строчная эпсилон	ε	ε
ζ	греческая строчная дзета	ζ	ζ
η	греческая строчная эта	η	η
θ	греческая строчная тета	θ	θ
ι	греческая строчная йота	ι	ι
κ	греческая строчная каппа	κ	κ
λ	греческая строчная ламбда	λ	λ
μ	греческая строчная мю	μ	μ
ν	греческая строчная ню	ν	ν
ξ	греческая строчная кси	ξ	ξ
ο	греческая строчная омикрон	ο	ο
π	греческая строчная пи	π	π
ρ	греческая строчная ро	ρ	ρ
ς	греческая конечная сигма	&sigmaf;	ς
σ	греческая строчная сигма	σ	σ
τ	греческая строчная тау	τ	τ
υ	греческая строчная ипсилон	υ	υ
φ	греческая строчная фи	φ	φ
χ	греческая строчная хи	χ	χ
ψ	греческая строчная пси	ψ	ψ
ω	греческая строчная омега	ω	ω
ϑ	греческая символьная тета	&thetasy;	ϑ
ϒ	греческий ипсилон с хвостиком	&upsih;	ϒ
ϖ	греческий символ пи	ϖ	ϖ
Основная пунктуация
•	маркер списка (буллит)	•	•
…	горизонтальное многоточие	…	…
′	штрих	′	′
″	двойной штрих	″	″
‾	верхняя черта	&oline;	‾
⁄	косая черта	&frasl;	⁄
Буквоподобные символы
℘	рукописная заглавная P = power set = Weierstrass p	&weierp;	℘
ℑ	чёрная заглавная I = мнимая часть	&image;	ℑ
ℜ	чёрная заглавная R = вещественная часть	&real;	ℜ
™	товарный знак	™	™
ℵ	буква Алеф - кардинальное число	&alefsym;	ℵ
Стрелки
←	влево	←	←
↑	вверх	↑	↑
→	вправо	→	→
↓	вниз	↓	↓
↔	влево-вправо	↔	↔
↵	вниз с углом вправо = возврат каретки	&crarr;	↵
⇐	двойная стрелка влево	⇐	⇐
⇑	двойная вверх	&uArr;	⇑
⇒	двойная вправо	⇒	⇒
⇓	двойная вниз	&dArr;	⇓
⇔	двойная влево-вправо	⇔	⇔
Математические Операторы
∀	для всех	∀	∀
∂	частичный дифференциал	∂	∂
∃	существует	∃	∃
∅	пустой набор = диаметр	∅	∅
∇	оператор набла = backward difference	∇	∇
∈	элемент из	∈	∈
∉	не элемент из	∉	∉
∋	содержит как член	&ni;	∋
∏	n-ary product = знак произведения	∏	∏
∑	n-ary sumation	∑	∑
−	минус	−	−
∗	оператор звёздочка	&lowast;	∗
√	квадратный корень = radical sign	√	√
∝	пропорционально к	&prop;	∝
∞	бесконечность	∞	∞
∠	угол	&ang;	∠
∧	логическое И = wedge	&and;	∧
∨	логическое ИЛИ = vee	&or;	∨
∩	пересечение = cap	∩	∩
∪	объединение = cup	∪	∪
∫	интеграл	∫	∫
∴	следовательно	&there4;	∴
∼	оператор тильда = varies with = подобно	&sim;	∼
≅	приблизительно равен	&cong;	≅
≈	почти равно = asymptotic to	≈	≈
≠	не равно	≠	≠
≡	идентично	&equiv;	≡
≤	меньше или равно	≤	≤
≥	больше или равно	≥	≥
⊂	подмножество	⊂	⊂
⊃	включает в себя	⊃	⊃
⊄	не включает в себя	&nsub;	⊄
⊆	подмножество или эквивалентно	&sube;	⊆
⊇	включает в себя или эквивалентно	&supe;	⊇
⊕	плюс в круге = прямая сумма	&oplus;	⊕
⊗	умножение в круге = векторное произведение	&otimes;	⊗
⊥	up tack = ортогонально к = перпендикулярно	&perp;	⊥
⋅	оператор точка	⋅	⋅
Различные Технические
⌈	левая скобка округления вверх = apl upstile	&lceil;	⌈
⌉	правая скобка округления вверх	&rceil;	⌉
⌊	левая скобка округления вниз = apl downstile	&lfloor;	⌊
⌋	правая скобка округления вниз	&rfloor;	⌋
〈	угловая скобка влево = бра	&lang;	〈
〉	угловая скобка вправо = кет	&rang;	〉
Геометрические Фигуры
◊	ромб	&loz;	◊
Различные Символы
♠	"пики" (картёжные)	&spades;	♠
♣	"крести" = shamrock	&clubs;	♣
♥	"червы" = valentine	&hearts;	♥
♦	"бубны"	&diams;	♦

Символ	Назначение	Мнемоника	Код
C0 Controls and Basic Latin
'	одинарная кавычка		'
"	двойная кавычка	"	"
&	амперсанд	&	&
<	меньше	<	<
>	больше	>	>
Latin Extended-A
Œ	латинская заглавная лигатура OE	&OElig;	Œ
œ	латинская лигатура oe	&oelig;	œ
Š	латинская заглавная S с птичкой	&Scaron;	Š
š	латинская s с птичкой	&scaron;	š
Ÿ	латинская заглавная Y с двоеточием	&Yuml;	Ÿ
Модификаторы букв
ˆ	акцент перевёрнутая птичка/circumflex accent	&circ;	ˆ
˜	малая тильда	&tilde;	˜
Общая Пунктуация
	пробел длины N	&ensp;
	пробел длины M	&emsp;
	узкий пробел
‌	zero width non-joiner	&zwnj;	‌
‍	zero width joiner	&zwj;	‍
‎	left-to-right mark	&lrm;	‎
‏	right-to-left mark	&rlm;	‏
‑	неразрывный (неразделяемый) дефис / non-breaking hyphen		‑
–	тире длины N	–	–
—	тире длины M	—	—
‘	одиночная левая кавычка	‘	‘
’	одиночная правая кавычка	’	’
‚	одиночная low-9/нижняя кавычка	&sbquo;	‚
“	двойная левая кавычка	“	“
”	двойная правая кавычка	”	”
„	двойная low-9/нижняя кавычка	&bdquo;	„
†	крест/dagger	&dagger;	†
‡	двойной dagger	&Dagger;	‡
‰	промилле	&permil;	‰
‹	одиночная левая угловая скобка (предложена, но ещё не стандартизирована ISO)	&lsaquo;	‹
›	одиночная правая угловая скобка (предложена, но ещё не стандартизирована ISO)	&rsaquo;	›
€	евро	€	€
№	Знак номера		№

Стянул на Вики , и по забирал все что не надо лично мне :)

Работать нужно с умом, а не до ночи.