Archive for category Работа
Скрыть значение при клике на поле
Очень простой скрипт на Jquery. Позволяет скрыть value когда input поймал фокус и показать когда фокус потерян.
Инсталляция: вешаем класс “change-val” на нужные инпуты в форме.
-
function hideValue() {
-
-
var elem = jQuery(“.change-val”);
-
if (elem.size() > 0) {
-
elem.each(function () {
-
var defaultVal = jQuery(this).val();
-
jQuery(this).focus(function () {
-
if (jQuery(this).val() == defaultVal) {
-
jQuery(this).val(”);
-
}
-
}).blur(function () {
-
if (jQuery(this).val() == ”) {
-
jQuery(this).val(defaultVal);
-
}
-
});
-
});
-
}
-
-
}
-
-
-
jQuery(document).ready(function () {
-
hideValue();
-
});
Удачи!
Ускорь свой Javascript
Некоторые советы для ускорения выполнения Javascript.
1. Не использовать анонимные функции
Медленно:
-
function func() {
-
function square(p) {return p *p};
-
var i = 100, sum = 0;
-
while(i–) {sum += square(i)}
-
}
Быстро:
-
function func() {
-
var i = 100, sum = 0;
-
while(i–) {sum += i*i}
-
}
2. Писать на классическом синтаксисе
Медленно:
-
function func() {
-
var a = [];
-
var o = {};
-
}
Быстро:
-
function func() {
-
var a = new Array;
-
var o = new Object;
-
}
3. Использовать while вместо for
Медленно:
-
function func() {
-
var string = ”;
-
for(var i = 0; i < 1000; i++) {
-
string = string + str;
-
}
-
}
Быстро:
-
function func() {
-
var string = ”, i = 1000;
-
while(i–) {string = string + str;}
-
}
Измерять скорость выполнения можно в консоли фаербага, если прописать console.time(’test’); вначале и console.timeEnd(’test’); вконце куска кода.
Jquery: Множественный фон, текст в колонки
Есть некоторые полезные свойства которые включены в спецификацию CSS3, но до сих пор не поддерживаются в полной мере современными браузерами(исключение пожалуй составляет только Safari).
И ничего другого не остается как эмулировать эти свойства через Javascript, а лучше с использованием замечательного фреймворка Jquery.
Первое свойство с которого хотелось бы начать это - множественный фон. Применений этому свойству можно найти массу, например уже приевшиеся закругленные уголки в блоке.
И так для реализации множественного фона нам понадобиться сам jquery 1.3.2 и плагин jquery.background_layers.js
Применяем все следующем образом:
-
<script src=“jquery-1.3.2.min.js” type=“text/javascript”></script>
-
<script src=“jquery.background_layers.js” type=“text/javascript”></script>
-
-
<script type=“text/javascript”>
-
$(function(){
-
$(’#general’).add_layer("url(’/images/header_back.jpg’) no-repeat center top");
-
$(’#general’).add_layer("url(’/images/footer_back.jpg’) no-repeat center bottom");
-
});
-
</script>
-
-
<div id=“general”> множественный фон у этого блока </div>
Второе свойство которое приходится эмулировать это - текст в колонки, по типу газетной верстки. Преимущество этого свойства в том что кусок текста при добавлении на страницу автоматически разбивается на колонки и это не приходится делать вручную.
Для этого понадобиться jquery 1.2.6 и плагин autocolumn.js
Применение этого свойства выглядит так:
-
<script src=“jquery1.2.6.js” type=“text/javascript”></script>
-
<script src=“autocolumn.js” type=“text/javascript”></script>
-
-
<script type=“text/javascript”>
-
$(function(){
-
$(’.column’).columnize({columns:2, width: 300});
-
});
-
</script>
-
-
<div class=“column”>
-
<h1>Текст в колонки</h1>
-
<p>Bonorum has. His u usu in odio offendit theophrastus. Mel labore indoctum cu, ad soleat admodum delicatissimi sed, mei viris tritani ullamcorper eu. Ut vim simul aperiam.</p>
-
</div>
Более подробные примеры работы этого плагина тут
Центрирование сайта
Есть много способов центрирования сайта по вертикали и горизонтали.
Наиболее популярный это способ с отрицательными маргинами:
-
.site {
-
position:absolute;
-
left:50%;
-
top:50%;
-
width:600px;
-
height:400px;
-
margin:-200px 0 0 -300px;
-
}
Но на практике такой способ не всегда подходит. Например когда нужно, чтобы был вертикальный скроллинг на сайте.
Тогда на помощь приходит старый способ центрирования в ячейке таблицы:
Но этот способ наиболее кроссбраузерный без указания DOCTYPE
Нестандартный скроллинг
Иногда по особой просьбе дизайнера необходимо сделать нестандартный скроллинг на сайте. Изменение внешнего вида скроллбаров поддерживают только IE и Opera, но только без указания DOCTYPE. Для полной кроссбраузерности с DOCTYPE нужно использовать яваскрипт, например jquery.
На этом сайте показан как работает один из таких скриптов - http://kelvinluck.com/assets/jquery/jScrollPane/examples.html
Справочник по CSS 3
http://zapomni.ru/css/ - хороший справочник по CSS 3