Archive for Листопад 2009
Ігри з датою за допомогою плагіна Datapicker для jQuery
Posted by Цінитель in Java Script on 12.11.2009
Дуже специфічне завдання :) Суть – є дата в форматі “2009-05-05″ потрібно до неї додати один рік. Робив двома способами
Старий варіант(рік додаю через перевід в Юнікс стемп і додавання мілісекунд):
onchange='var old_date=jQuery.datepicker.parseDate("yy-mm-dd", this.value);
temp=parseInt(jQuery.datepicker.formatDate("@", old_date))+parseInt(31556926000);
new_date=jQuery.datepicker.parseDate("@", temp);
jQuery("#date_end<?echo $v['catalog_firm_id']; ?>").val(jQuery.datepicker.formatDate("yy-mm-dd", new_date));'
Остаточний варіант (рік додається шляхом маніпуляцій з отриманим об’єктом Date):
onchange='var m_date=jQuery.datepicker.parseDate("yy-mm-dd", this.value);
m_date.setFullYear(m_date.getFullYear()+1);
jQuery("#date_end<?echo $v['catalog_firm_id']; ?>").val(jQuery.datepicker.formatDate("yy-mm-dd", m_date));'
В обох випадках для парсингу використовується функція jQuery.datepicker.parseDate, оскільки стандартний метод parse для дати виду “2009-05-05″ НЕ ПРАЦЮЄ
Tooltip на CSS
Існують певні бібліотеки на JS для створення красивик підказок, але цей ефект можна реалізуати виключно засобами CSS (матеріал взято звідси)
.tooltip_base a {
position: relative;
text-decoration: none;
}
.tooltip_base img {
border:none;
}
a .tooltip{
display: none;
}
.tooltip_base a:hover .tooltip {
display: block !important;
position: absolute;
top: 5px;
left: 20px;
width: 150px;
border: 1px solid #C0C0C0;
background-color: #F7EDD4;
color: #000;
padding: 5px;
font-size: .8em;
}
<span class="tooltip_base"><a onclick="return false;"><span class="tooltip">This popup is set to 150px wide and is made "absolute" </span></a></span>
Можна було б обійтись і без тега a, але ІЕ не підтримує подію hover для інших тегів (інші браузери підтримують)
“HTML” means How To Make Love?
Власне кажучи, в заголовку статті найкумедніша розшифровка абревіатури HTML, яку я зміг знайти. Хоча треба буде ще пошукати :)
Відключити автозаповнення в елементах форми
Досить потрібна штука. Для цього в атрибутах елемента необхідно прописати
autocomplete=”off”
Цитата:
The autocomplete attribute applies to the text, password, date-related, time-related, numeric, email, and url controls. The attribute takes two values, on and off. The default, when the attribute is not specified, is on.
Редирект сторінки
<head> <meta HTTP-EQUIV="REFRESH" content="5"; URL=http://www.google.com"> </head>
Через 5 секунд відвідувача автоматично перекине на сайт google.com
Елемент SELECT + IE
Оскільки ІЕ(принаймні до 7 версії) для відмальовки списків використовує можливості ОС, то задати деякі атрибути для нього (наприклад колір бордера) через CSS не вийде.
Також одним з наслідків такої відмальовки списків є те, що в ІЕ списки завжди відображаються ПОВЕРХ елементів DIV, незважаючи на z-index останніх.
Вирівнювання таблиці в середині елемента div
Щоб вирівняти таблицю по ПРАВОМУ краю елемента можна використати такий стиль
#table1 {
float:right;
}
Правильні лінки
(вичитано на сайті студії А. Лебедева)
Лінк завжди повинен вести на якийсь ресурс – чи то веб-сторінка, чи то файл. Іншими словами, атрибут href завжди повинен містити адресу ресурсу(а не, скажімо, решітку, “javascript://” чи ще щось).
Не варто використовувати лінк, якщо його немає на що поставити. В цьому випадку можна використовувати інші теги, для оформлення вигляду яких треба використовувати стилі, а реакції – подію onclick=”some_function(); return false;”
Уникнення кешування браузером деяких об’єктів
Яких об’єктів? Ну, наприклад, файлів *.js, *.css, звичайних малюнків.
Для цього потрібно в шлях їхнього виклику додати змінну величину. Наприклад:
<link type="text/css" rel="Stylesheet" href="/css/main.css?1258804188" />
Як цього досягти? Якщо файл, що викликає ресурс має розширення php, то так:
<link type="text/css" rel="Stylesheet" href="/css/main.css?<? echo time(); ?>" />
якщо html, то так:
LoadScript( ‘../fckconfig.js?’+( new Date() * 1 ) ) ;