Записки разработчика

10.10.2014

проблема в карусели TinyCarousel

Добрый день! Хочу поделится с вами проблемой, с которой столкнулся и потратил время на решение.

Долгое время я пользовался jQuery-плагином для отображения фотографий и другого контента в красивом модальном окне fancybox, у меня была библиотека скачанная с сайта http://fancybox.net

На днях возникла задача запилить на одном сайте jQuery-карусель. Я выбрал TinyCarousel (http://baijs.nl/tinycarousel/). Все хорошо получилось, контент-менеджеры сломя голову начали добавлять изображения в карусель, ничего не предвещало неприятностей.

Внезапно менеджер сказал мне о странном поведении карусели, в конце 7 последних кадров при переключении вбок вызывало мельтешение кадров и, в конце концов, переключался на нужный кадр. Пришлось засесть в глубокий дебаг скрипта карусели, но нелогичности в коде не обнаруживались. Единственная зацепка была — мельтешение начинает происходить после получения внутренней переменной смещения большее 10000px. Гуглинг по этой зацепке ничего не дал.

После часа бесполезного медетирования над скриптом, решил попробовать потестить «сферического коня в вакууме». Взял канонический пример из библиотеки tinycarousel. Добавил в 6 имеющимся блокам карусели еще 70. Вывел смещение — и... ничего, смещение уже за 17 тысяч. Никаких глюков. Работает зараза как часы. Стал менять css-код, чтобы приблизить каноническую карусель к своей задаче (хотя бы по попожести). Не глючит. В итоге решил перетянуть блоки из сайта (чем черт не шутит, вдруг проблема в картинках xD).
Перетянул, все работает и красиво каруселит) Потом внезапно появилась догадка относительно влияния библиотеки fancybox. Конечно либа не заработала... т.к. в каноническом пример jquery используется из Google Host Library — latest. А для fancybox нужна 1.4.3
Подключаю, fancybox заработал. А вот карусель сломалась)) Именно аналогичным глюком. Путем подбора выяснил — что нормально работает с обоими либами jquery-1.5.2 ))

Вот так-то. И почему я сразу не подумал про версию jquery? Написал — вдруг кому-то пригодится.

admin @ 02:13


11.01.2013

Перебор ключей массива в текстовых полях

Иногда нужно отдать ajax-запросу набор данных, получив их их текстовых полей.

Например, задача. У нас есть интернет-магазин. На странице каталога перечислены товары. И рядом с каждым — текстовое поле «количество» и кнопка «купить». Задачу поставим таким образом: пользователь вводит в разные поля числа, сколько бы он хотел купить того или иного товара (пусть у нас будет оптовый магазин).

Посмотрим изнутри: у нас есть несколько полей:


....

....

В квадратных скобках ID единиц товара. По нажатии кнопки нам надо перебрать все поля, и где значние value не равно 0 добавить в корзину (вопрос проверки существования этих позиций в корзине мы опустим).

Технически мы должны взять селектором все поля которые начинаются с quantity, перебрать их, и если value не равно нулю — добавить в массив, котрый мы отправим через ajax-запрос.

Вообщем — пример работающего кода (jquery, javascript):

var data = $('input:text[name*=quantity]');
$.each(data, function(key,object){
    var name = object.name;
    i1 = name.indexOf("[");
    i2 = name.indexOf("]");
    var id_val = name.substring(i1 + 1, i2);
    var quantity_val = object.value;
}

Мы получаем и ID, и значение. Т.е. все то что нам нужно для проверки состояния корзины.

admin @ 20:04


08.02.2012

Различные TinyMCE и textarea на одной странице

Иногда при использовании TinyMCE возникает задача, чтобы некоторые поля были textarea (текстовые области), a некоторые перехватывал TinyMCE. Если мы используем параметр mode как «textareas», то TinyMCE задействует все текстовые области на странице. Чтобы этого не происходило, используем:

tinyMCE.init({
mode : "specific_textareas",
editor_selector : "mceTextarea",
/* остальные параметры */
});

После этого опишем нашу текстовую область.


Необходимо прописать CSS-класс, такой же как вы указали в editor_selector. И все! После этого у вас будут отдельно обычные текстовые поля, и текстовые поля преобразованные TinyMCE.

admin @ 23:33


20.09.2010

Дебаг массивов и объектов на JavaScript

// made by s0lar
function __debug( arr , level ) {
      var dumped_text = "";
      if( !level )
            level = 0;
      var level_padding = "";
      for( var j=0; j \"" + value + "\"\n";
                  }
            }
      }
      else {
            dumped_text = "===>"+arr+"<===("+typeof(arr)+")";
      }
      return dumped_text;
}
admin @ 21:28


 

Powered by WordPress