Wednesday, December 28, 2011

приоритеты селекторов в CSS


Существует 4 правила по которым вычисляется специфичность селекторов:
  1. Свойство с указанием !important (при наличии нескольких - выполняется правило идущее последним)
  2. Указание свойства в style="" тега. Правило перекрывает все селекторы описанные в стилях.
  3. Присутствие ID в селекторе: #some-id
  4. Все атрибуты(в том числе и атрибут .class) и псевдоклассы в селекторе.
  5. Селекторы с именами элементов: name=['textfield'] и псевдоэлементами.

И еще дополнительно: подробная статья на w3.org

Tuesday, December 27, 2011

использование атрибутов data для передачи в jQuery


HTML<а href="#" class="urlparam" data-num="10" data-text="text"></a>
<а href="#" class="urlparam" data-num="9" data-text="text1"></a>

JavaScript
$(".urlparam").click(function () {
    var num = $(this).data('num');
    var text = $(this).data('text');
});
И еще один интересный, передача сразу объекта JSON (отсюда):<span id="test" onclick="return {width: 250, height: 150, draggable: true, text: 'Трам-парам!'};">тест</span>

Tuesday, December 20, 2011

Часто используемые сокращения


На всякий случай для совсем уж greenhorns:

  • API - Application programming interface
  • CSS - Cascading stylesheets
  • DOM - Document Object Model
  • HTML -  Hypertext Markup Language
  • HTTP - Hypertext Transfer Protocol
  • JSON - JavaScript Object Notation
  • REST -  Representational State Transfer
  • RPC - Remote procedure call
  • URL - Uniform Resource Locator
  • XML - Extensible Markup Language
UPD

  • LTS - Long Term Support (долгосрочная поддержка)
  • FOUC - flash of unstyled content
  • AMD - Asynchronous Module Definition
  • RFC - Request for comments
  • SERP - Search Engine Rank Position
  • MIMI -  Multipurpose Internet Mail Extensions


RFC - Документ из серии пронумерованных информационных документов Интернета, содержащих технические спецификации и стандарты, широко применяемые во всемирной сети.

min-width для IE

Если решения с таблицей, 1x1 прозрачным gif-ом и css-expressions - отбрасываем, тогда получается:


Разметка html
  1. <div id=”min-width”>
  2. <div class=”minwidth”>
  3. <div class=”container”>
  4. tut ku4a texta
  5. </div>
  6. </div>
  7. </div>
Выход в случае с шириной больше 960px:
Код CSS
/* для браузеров, которые понимают */
#min-width {
  min-width:1000px;
  }
/* для IE */
* html .minwidth {
  border-left:960px solid #fff;
  border-right:40px solid #fff;/*min-width-960*/
  position:relative;
  float:left;
  z-index:1;
  }
* html .container {
  margin-left:-960px; /*-min-width*/
  margin-right:-40px; /*-(min-width-960)*/
  position:relative;
  float:left;
  z-index:2;
  }
Решение из комментариев отсюда: http://cssing.org.ua/2005/09/02/min-width-for-ie/

Wednesday, December 14, 2011

php List Files in Directory

php:
  $dir = opendir(DIR, '[YOUR DIRECTORY PATH HERE]');
  @tmplist = readdir(DIR);
  @list = grep (!/^\./, @tmplist);


tmpl:
<ul>
[$ foreach $file (sort @list) $]
  <li><a href="/drupal-4-7-2/[+ $file +]">[+ $file +]</a></li>
[$ endforeach $]
</ul>

Tuesday, December 13, 2011

подключение Jquery в ExtJS

Все мы любим jQuery за ее прозрачный синтаксис и большое количество плагинов на все случаи жизни. И в моем проекте мне пришлось сбросить часть забот на один плагин jQuery, занимающийся трансформацией JSOn в XML.

После подключения jquery в индексном файле все перестало работать, попробовал добавить адаптер Jquery в ExtJS - та же история. Пришлось погуглить, оказывается предусмотрен специальный порядок подключения файлов в головном файле.


Base LibraryInclude OrderGet Library
Ext Standaloneext-base.js
ext-all.js (or your choice of files)
http://www.extjs.com/download
Yahoo! UI (.12+)yui-utilities.js (or your choice of YUI base files)
ext-yui-adapter.js
ext-all.js (or your choice of files)
http://developer.yahoo.com/yui/
jQuery (1.1+)jquery.js
jquery-plugins.js // required jQuery plugins
ext-jquery-adapter.js
ext-all.js (or your choice of files)
http://jquery.com/
http://docs.jquery.com/Plugins
Prototype (1.5+) /
Scriptaculous (1.7+)
prototype.js
scriptaculous.js?load=effects (or whatever you want to load)
ext-prototype-adapter.js
ext-all.js (or your choice of files)
http://www.prototypejs.org/
http://script.aculo




Также на заметку: Using_Ext_With_jQuery, Using_jQuery_with_Other_Libraries

Monday, December 12, 2011

разница между Ext.Direct и Ext.Air

Ext.Direct Pack - set of server-side realizations (on different languages) of ala-web services complying with ExtDirect protocol.
Подборка реализаций Ext.Direct для разных языков

Ext.Air Pack - set of classes for running your application in Adobe AIR.
Подробный пост, раскрывающий суть Ext.Air

Спасибо plinyar, ответившему на мой вопрос на http://stackoverflow.com/

Saturday, December 10, 2011

подборка видео по ExtJS

Ext JS Screencast #002 Ext.extend

Ext JS Screencast #003 Ext.apply

Ext JS Screencast #004 Ext.each

Ext JS Screencast - data Stores and GridPanels

Подборка видео в одном торренте: http://rutracker.org/forum/viewtopic.php?t=2119643

Monday, December 5, 2011

Wednesday, November 23, 2011

:contains селектор jquery и работа с переменными

Недавно пришлось повоевать с одним из множества селекторов Jquery, а именно :contains() - поиск элементов содержащих нужный текст

Синтаксис очевидно простой:
$("div:contains('John')").css("text-decoration", "underline");
Возможности кажутся просто безграничными если подставлять не статичную стоку а заменять переменной. И именно с этим возникли проблемы, об это пишут и тут: http://api.jquery.com/contains-selector/

Тоесть конструкция someVar = $ ('div:contains('" + searchStr + "')'); - вызывала ошибку и работать отказывалась. Уже сейчас не вспомню как, но решение нашлось достаточно простое заменить крайние одинарные кавычки на двойные: someVar = $ ("div:contains('" + searchStr + "')");

javascript подсветка кода в редакторах

В разработческой части нашей системы предусмотрено редактирование исходных кодов шаблонов и самих java-классов и сответственно встала задача чтобы код для редактирования не копировать в редактор IDE или Notepad++ и потом вставлять назад и сохранять изменения и иметь возможность делать небольшие правки напрямую. Для этого код нужно было сделать более читаемым: посветить теги, пронумеровать строки и по возможности добавить прочие плюшки: несколько уровней отмены, умный поиск и тд.

Как выяснилось подобных библиотек существует более 10 - Comparison of JavaScript-based source code editors. Важно было чтобы умел подсвечивать mixed html (JS + HTML + инструкции Velocity) и сам Java.

Пробовал установить и протестировать 3 и них: CodeMirror - всплыли баги отображения в IE - курсор показывался в правой части экрана и судя по большому количеству обсуждений подобные баги у него мигрируют и периодически всплывают. устанавливать было сложнее всего - 3 файла общих, плюс дополнительно отдельный .js для каждого языка CodePress - проект давно не развивается, что насторожило, а при установке - вообще при сохранении перестало передаваться содержимое textarea, выкинул тут же
Остановились на EditArea (список фич и download)- есть все что нужно и даже часть фич отключили. Что порадовало в работе EditArea - внизу есть галочка включения/отключения подсветки для особо суровых случаев

Tuesday, October 25, 2011

обход циклов в velocity

при обходе циклов в шаблонизаторе Velocity (на Java и для Java)
есть переменная $velocityCount
работающая как показатель числа проходов

обращение к конкретной строке или ячейке

var t3 = document.getElementById("sometable");
t3.rows[1] - вся вторая строка
t3.rows[1].cells[0] - вторая строка первая ячейка

обозначение required true в input

input type="text" id="car" required="true" /> - is wrong

, it should be one of:
input type="text" id="car" required />
input type="text" id="car" required="" />
input type="text" id="car" required='' />
input type="text" id="car" required=required />
input type="text" id="car" required="required" />
input type="text" id="car" required='required' />


отсюда: http://stackoverflow.com/questions/3090369/disable-validation-of-html5-form-elements

вызов функции с setInterval/clearInterval

функция сама себя вызывает с интервалом и после вызова очищает вызов
(эта конкретно вычисляет и печатает числа фибоначчи)


var fibs = [0, 1];
var ticker = window.setInterval(function () {
console.log(fibs[fibs.length - 1]);
fibs.push(fibs[fibs.length - 1] + fibs[fibs.length - 2]);
if (fibs.length > 50) {
window.clearInterval(ticker);

}
}, 300);

какой браузер на каком движке сделан

Firefox - Gecko
Opera - Presto
IE - Trident
Safari, Chrome - Webkit

обход циклов, зачение шага минус 1

аккуратное решение:
if ($start != 0) $start -= 1;