CTAPbIu_MABP's BLOG » animation

Плавающий текст

CTAPbIu_MABP — Mon, 21 Mar 2011 14:06:00 +0000

Вот такая анимация у меня родилась

ЖОПА

Как дебажить анимацию

CTAPbIu_MABP — Mon, 29 Nov 2010 17:22:22 +0000

Дебажить анимацию дело геморрное но нужное.

Пост про дебаг поэтому включите, плз, консольку.

Когда надо затормозить анимацию где-то посередине, я обычно пишу в консоли что-то вроде


setInterval(function(){$(':animated').stop();},500);

Но бывает что этого недостаточно тогда в ход идет такой код


$("#id").animate({/**/},{
	step:function(){
		console.log(arguments)
	}
});

Как он работает можно посмотреть на примере анимаций backgroundColor и borderColor

backgroundColor

borderColor

Вот такая нелепость и хуй пойми почему....

ЗЫ для тех кто читает через ридер - нелепость в том что анимация бэкграунда начинается всегда с текущего цвета, а бордера - с белого :(

Букавки

CTAPbIu_MABP — Fri, 03 Sep 2010 17:52:06 +0000

Сейчас все дружно подумают что я съехал с катушек...

Да-да, это летающие букавки! История создания на форуме


(function () {
	var 
	
	r = function (shift) {
		return (Math.random() * 255) << shift;
	},
  
	print = function (letter, opacity, fontsize) {
		letter.style.opacity = opacity;
		letter.style.fontSize = fontsize+"px";
		~~(opacity * 100) > 1 &&
		(a = arguments) &&
		setTimeout(function () { a.callee(letter, opacity - 0.07, fontsize * 0.85); }, 50) ||
		rem(letter);
	},
   
	rem = function (l) {
		l.parentNode.removeChild(l);
	},
  
	letter = function (html, color) {
		var l = document.createElement("div");
		l.style.textAlign = "center";
		l.style.position = "fixed";
		l.style.width = "100%";
		l.style.fontSize = "700px";
		l.style.top = 0;
		l.style.color = color;
		l.innerHTML = html;
		return document.querySelector("body").appendChild(l);
	};
  
	document.documentElement.addEventListener("keypress", function (e) {
		print(letter(String.fromCharCode(e.charCode).toUpperCase(), "#" + (r(16) + r(8) + r(0)).toString(16)), 1, 700);
		e.preventDefault();
	}, false);
	
})();

Работает как букмарклет или из фаербага, даже на этом сайте.

ЗЫ сюда выложил чтобы черновики не засорял.

Симофорчик

CTAPbIu_MABP — Fri, 05 Mar 2010 16:05:49 +0000

Давно лежит в черновиках, и вот надумал опубликовать. Небольшой пример работы с анимацией на jquery

Все очень просто: при ошибке, например, загрузки данных с сервера вылазит маленькое окошечко с сообщением о том что произошла ошибка. Примерно так как на Хабре. Сообщение держиться 5 секунд после чего исчезает. Если на него не навести мышку, если навести то снова появляеться даже если уже наполовину исчезло. Если на него кликнуть то будет держаться пока не кликнеш еще раз. Если сообщения два второе становиться под первое. К сожелению изза дизайна сайта тут положение высчитываеться вврху экрана и если проскролить чуток то оно чуть сползет, поэтому лучше всего смотриться в абсолютным позиционированием контента. Такое позиционирование есть если для создания сраницы исользовался UI.Layout, так что нужно откорректировать top и left.


	function showMessage(text, error){
		var clicked = false;
		var self = $("",{
			css:{
				width : "200px",
				height : "60px",
				background : error ? "#ED6060" : "#60ED60",
				position : "relative",
				zIndex : 10,
				textAlign : "center",
				lineHeight : "60px",
				display : "none",
			},
			text : text,
			click : function(){
				clicked = !clicked;
			},
			mouseover : function(){
				self.stop(true, true).fadeIn("slow");
			},
			mouseout : function(){
			if (!clicked){
				self.stop(true, true).fadeOut("slow").queue(function(){
					self.remove();
				});
 			}
		}})
		.appendTo("body")
		.fadeIn("slow")
		.delay(5000)
		.fadeOut("slow")
		.queue(function(){
			self.remove();
		});
	}

Ну и на последок как водиться примерчик.

jQuery UI: Progress Bar with custom event

CTAPbIu_MABP — Thu, 26 Mar 2009 14:29:21 +0000

Начитался Брэндона Аарона и решил создать небольшое практическое пособие для начинающих по пользовательским событиям (custom events). Напомню что пользовательские события это такие же события как onclick только запускает их не браузер а сам jQuery. Такими событиями являются, например, события "mouseenter", "mouseleave", "ready" и целый набор ajax'овых событий.

jQuery также дает возможность создавать пользовательские события, чем я и воспользуюсь, создав собственное событие с помощью которого буду обновлять ползунок из Modal Dialog и Progress Bar. Практическая польза от этого скрипта нулевая, но для демонстрации самое то что доктор прописал. На самом деле весь код описанный в событии можно перенести в стандартный callback 'change'. Итак задача: обновлять ползунок при помощи пользовательского события, при срабатывании события ползунок увеличивается и меняет цвет.






Progress Bar with custom event

Более подробные комментарии можно посмотреть в Modal Dialog и Progress Bar

jQuery UI: Google Gears local store setup

CTAPbIu_MABP — Wed, 25 Mar 2009 13:31:31 +0000

В одной из прошлых статей я рассказывал как совместить Modal Dialog и Progress Bar, теперь пришло время рассказать как это можно использовать. Есть такая штука как Google Gears это интернет акселератор предназначенный по большому счету для продуктов самого Google, таких как почта, календарь, ридер и т.д. Но Google предоставляет возможность устанавливать акселератор и на сторонние сайты, чем я сейчас и займусь. Самым простым видом акселерации является загрузка в кеш статических файлов, то есть картинок, скриптов и css стилей, хотя теоретически можно загружать и все остальное включая html самой страницы. Я покажу как сделать анимацию загрузки файлов в хранилище Google Gears.

Итак начну с начала, мне понадобиться скрипт который инициализирует Google Gears, он написан самим Google и является единственным официальным способом запустить Google Gears, и jQuery UI для создания модального диалога из прошлой статьи. Скрипт создаёт фабрику объектов с которой я буду работать дальше, хотя там и так подробно описано в комментариях. Дальше логика такая - нужно создать новый "склад" и передать все отобранные для кеширования файлы, обновляя после каждого файла ползунок загрузки. Поехали:






GoogleGears local store setup

Примера к сожалению не будет потому что даже если у когото из вас и установлен Google Gears, то у меня нечего особо кешировать, можете посмотреть как выглядит анимация в статье Modal Dialog и Progress Bar

Конечно же интереснее было бы использовать ManagedResourceStore с манифестом, это дает возможность иметь сразу например несколько цветовых схем сайта, но тогда бы не получилось анимировать процесс загрузки.

Autocomplete

CTAPbIu_MABP — Tue, 08 Apr 2008 14:57:44 +0000

Prehistory

First of all, I want to say, that this plugin was developed for KyivStar, therefore all fine details were studied and stipulated very carefully. For example, what should occur, when the user would reach last element of the list: whether it should rest against the end or begin a cycle all over again. Or whether the list should disappear when the cursor is out of it. All this passed through business analysts’ and designer and only then came to me.

On the other hand I tried to make autocomplete multifunctional (multipurpose) and as simple as possible for any person to use it on ones site. Remarkable is that even with switched off javascript the site would not lose functionality, and visitor can enter data anyway. Autocomplete was not made as a filtrator of data entered by the user but the tool which helps the user to fill the form more quickly.

Well-known plugin jquery.suggest was taken as an example. Pieces of which can be identified in some methods. In spite of the fact that I took mechanism, I have added some new functions and have removed some errors. So in last version jquery.suggest the code became more readable thanks to the removal of one check. But at the end of the list the cursor (illumination) disappears for one position and then again appears at the first element of the list. It happens because jquery (in traversing) always return itself to the object and doesn’t give value to quantity chosen nodes. Another authors fault that he persistently tries to apply $.fn.bgiframe to the list

Functions that were added: generation of the list from select-box, the limited visible part of the list with scrolling and prefilling of the list for it to look like a select-box. One more events handling onKeyPress. Well-known algorithm of caching MRU was deleted and replaced with my cache algorithm, this takes a lot of memory but it very fast!

Downloads

Last update 14.09.2009!

HTML file with examples (autocomplete.html)

Plugin itself (jquery.autocomplete.js)

Styles (autocomplete.css)

Little blue arrow (select.gif)

Progress bar backgraund image (progress.gif)

Php backend (search.phps)

Copy all this files to your own local web-server in root directory, rename search.phps to search.php and run http://path.to.your.server/autocomplete.html.

Examples

Example 1: Minimal requirements

To launch plugin you just need to put in one parameter, the url of php script which generats a list of words. Format of the list can be either xml or json.


$("#autocomplete1").autocomplete({
	url:'search.php'
});

Example 2: onSelect event

Plugin has four public events. First of them is onSelect, it fires where you pick element from the list. You can activate it by left clicking or pressing 'enter' button on the selected item. In this example I use one second delay before searching, and string must be at least 2 characters. The ansver from server will be in xml format so you can omit type property.


$("#autocomplete2").autocomplete({
	url:'search.php?type=xml',
	minchar:2,
	delay:1000, // in milliseconds
	onSelect:function(){
		alert(this.ac.val())
	},
	type:'xml'
});

Example 3: onKeyPress

onKeyPress event fires when you are typing. It can be used to filtrate user input. In this example you can use only alphabetical characters and white space, all other characters will be deleted. The fillin flag will fill in list before user start typing, because of input string is empty the request to the server will also contains empty mask value (i.e. search.php?type=json&mask=). In this case you will see list of one item with text "The list is empty!". The ansver from server will be in json format and you must set type property to 'json'.


$("#autocomplete3").autocomplete({
	url:'search.php?type=json',
	onKeyPress:function(){
		var o=this;
		setTimeout(function(){
			o.ac.val(o.ac.val().replace(/[^a-z ]+/g,""))
		},50)
	},
	fillin:true,
	type:'json'
});

Example 4: onError event

onError and onSuccess is the last two events, onError fires when AJAX has a problems otherwise onSuccess fires when you get answer from server. For example onError fires where you request for non-existing page. Also its an example of how to disable autocomplete. onSuccess get the same parametrs and scope.


$("#autocomplete4").autocomplete({
	url:'non_exist.php',
	onError:function(XMLHttpRequest, textStatus, errorThrown){
		this.ac.val(textStatus);
		this.ac.attr({disabled:"disabled"}).css({'background-color':'#d0d0d0'});
		this.ul.hide();
		this.img.unbind("click");
	}
});

Example 5: generation list from


$("#autocomplete5").autocomplete({
	source:"#select",
		onKeyPress:function(){
		var o=this;
		setTimeout(function(){
			o.ac.val(o.ac.val().replace(/[^0-9]+/g,""))
		},50)
	},
	fillin:true
});

Example 6: generation list from array

If you have no need to use AJAX or have no select-box on your page, you can generate autocomplete from array. Sorry but nested arrays are not supported so you can not use [{a:'a'},{b:'b'}]


$("#autocomplete6").autocomplete({
	source:['a','b','c','d','e'],
	fillin:true
});

Example 7: generation list from object

The same as above. Sorry but nested objects are not supported so you can not use [{a:'a'},{b:'b'}] or {a:{b:c}}


$("#autocomplete7").autocomplete({
	source:{a:'a',b:'b',c:'c',d:'d',e:'e'},
	fillin:true
});

Example 8: list position

Example of list position at the top of input box


$("#autocomplete8").autocomplete({
	url:'search.php',
	top:true
});

Example 9: real values

Example of real values in non writeable fields


$("#autocomplete9").autocomplete({
	url:'search.php',
	values : true,
	writable : false,
	onSelect:function(){
		alert(this.pairs[this.ac.val()]);
	}
});

Example 10: alternative setup

By onSetup event you can change all properties exept 'width' or change behaviour of elements after autocomplete created. This example demonstrate smooth animation to options list.


$("#autocomplete10").autocomplete({
	onSetup:function(){
		var self = this;
		self.url = 'search.php';
		self.img.unbind("click")
			.bind("click", function() {
				clearTimeout(self.close);
				self.scroll();
				self.ul.slideToggle("slow")
				self.ac.focus();
			});
	}
});

Example 11: progress animation

Example of real usage with event hndling and animation


$("#autocomplete11").autocomplete({
	url:'/content/polygon/search.php?type=json',
	onSuggest:function(){
		this.ac.css({'background-image': 'url("/content/source/autocomplete/progress.gif")'});
	},
	onError:function(XMLHttpRequest, textStatus, errorThrown){
		this.ac.val(textStatus);
		this.ac.attr({disabled:"disabled"}).css({'background-color':'#d0d0d0','background-image':'none'});
		this.ul.hide();
		this.img.unbind("click");
	},
	onDisplay:function(list){
		this.ac.css({'background-image':'none'});
		if (!list)
		this.ul.append("[Empty list...]");
	},
	minchar:2,
	type:'json'
});

Example 12: custom data format

Example of how to use custom data format


$("#autocomplete12").autocomplete({
    source : [{a:'a'},{b:'b'},{c:'c'},{d:'d'},{e:'e'}],
    fillin : true,
    dataHandler : function(mask){
        var self = this;
        return function(i, n) {
        for (var key in n){
            self.cache[mask].push(n[key]);
        }
        self.store[mask] += self.mark(n[key],mask);
        if(self.values && !self.pairs[n[key]])
            self.pairs[n[key]] = key;
        };
    }
});

Example 13: cascading selectbox

Example of how create selectbox wich depends on another input field


$("#autocomplete13").autocomplete({
    url:function(self){
        var state = $("#c13").attr("checked");
        if (self.ac.data("c13") != state){
            self.ac.data("c13", state);
            self.cache = {};
            self.store = {};
            self.pairs = {};
        }
        return 'search.php?c13='+state;
    }
});

Example 14: autocomplete form selectbox

Example of how to customize selectbox with plug-in


$("select#autocomplete14").autocomplete();

Notice

There is no simple way to re-render autocomplete created from select-box or array (object). You just need to re-create it.

Donation

If you like this plugin please vote for it on jquery site

Thanks to

Damir
Connected
Joey
Pasha
Morleydots
Gianfrasoft
Andrea
Ztalker
WooYek
Naden
Andrea Riciputi

Advanced options

Properties

url - [String|Function] ajax url
source - [String|jQuery|Array|Object] css selector or raw html, jQuery object, array [], object {}
minchar - [Integer] The minimum number of characters a user has to type before the autocompleter activates (default 1)
delay - [Integer] The delay in milliseconds the autocompleter waits after a keystroke to activate itself (default 50 miliseconds)
fillin - [Boolean] Pre-fill in (default false)
width - [Integer] width of autocomplete (default 200)
type - [String] type of server responce xml or json (default xml)
top - [Boolean] position of the list (default false to the bottom)
writable - [Boolean] allows to user write his own option (default true)
values - [Boolean] keep values for options (default false)
partial - [Boolean] makes request to server after each new letter (default false)

Events

onKeyPress - fires when user press a button
onSetup - fires once when autocomplit created
onSuggest - fires after onKeyPress but before ajax request send
onSuccess - fires when AJAX retuns result
onError - fires when AJAX retuns error
onDisplay - fires before list of items shows
onSelect - fires when user picks up from list

Dependences

jQuery - requires jQuery 1.2.6 or higher
bgiframe - use bgiframe if installed

FACE по мотивам проекта KuraFire

CTAPbIu_MABP — Tue, 26 Jun 2007 14:26:35 +0000

В пятницу лазил по сети и наткнулся на сайте KuraFire на один весьма забавный проект под названием FACE. Решил его поставить себе и поэкспериментировать с ним. На первый взгляд показалось, что все очень красиво и здорово, но при внимательном рассмотрении нашлась пара серьезных недостатков.

Самый серьезный из них то, что два таких рисунка нельзя поставить на одну страницу. Нет, я дочитал до конца и видел, как автор предлагает в первом диве для анимации указать все id дивов, которые будут анимированы, но этот способ не в счет, а что если я захочу создать блок на лету или прицепить анимацию на кнопку?! Тем более что таким образом анимация работает по очереди, сначала на первом, потом на втором элементе, а не на всех одновременно. Я пробовал переписать код на объектно-ориентированный, но решил, что дешевле написать новый из-за особенностей архитектуры скрипта. Я люблю описывать объект через прототип, и в очередной раз столкнулся с тем, что не могу вызвать метод объекта (из самого объекта используя this) по таймауту.

Вторым недостатком, на мой взгляд, было то, что в примере автор показывает квадрат, который заполняется спирально, а в версии для скачивания он заполняется рядами. Мне тоже захотелось спиралью (а еще столбиками), открыв CSS, я увидел, что каждый квадрат отпозиционирован отдельно. Вообщем, в этом ничего страшного нет, если большой квадрат состоит из 25-49 маленьких, а если, например, из 100? CSS разрастается в геометрической прогрессии, создавая неудобство разработчику и пользователю.

Это натолкнуло меня на написание плагина под jQuery, который бы обладал всеми вышеперечисленными свойствами, то есть быстрота создания, компактность, скорость, программируемость порядка заполнения. ВОТ ОН:

Для того чтобы запустить пример в работу нужно три строчки кода:


$.face.init(5,5,400,400,6,'#face1');
$.face.resort([0,1,2,3,4,9,14,19,24,23,22,21,20,15,10,5,6,7,8,13,18,17,16,11,12],'#face1');
$.face.start(50,'#face1');

В первой строчке происходит инициализация объекта, задаются количество столбцов и строк внутри большого квадрата, ширина и высота этого квадрата и id елемента, в котором будет построена сетка.

Во второй задается порядок, в котором будет происходить анимация, в данном конкретном случае - по спирали (по часовой стрелке). Второй параметр нужен, если на странице находиться более одного квадрата.

Третья строчка, собственно, запускает анимацию, эту функцию можно прикрепить, например, к кнопке. Первый параметр - скорость заполнения при загрузке (оптимально от 25 до 100), второй - id

Теперь я приведу код собственно самого плагина:


jQuery.extend({
    face : {
        id : null,
        li : [],
        sort : [],
        init : function (cols,rows,width,height,border,id) {
            this.id = id || '#face';
            this.li[this.id] = [];
            for(var i=0,j=cols*rows,l=0,t=0,w=width/cols-border/2,h=height/rows-border/2;i';
            this.sort[id] = this.li[id];
        },
        resort : function (array, id) {
            jQuery(id).empty();
            var n = [];
            id = id || this.id;
              for(var key in array)
                n[key] = this.li[id][array[key]];
            this.sort[id] = n;
        },
        start : function (speed,id)
        {
            id = id || this.id;
            jQuery(id).append(''+this.sort[id].toString().replace(/,/g,'')+'');
            jQuery(id+' ul li div').mouseover(function(){jQuery('div',this).animate({opacity:1},'slow','',function(){jQuery(this).animate({opacity:0},'fast');});});
            jQuery.each(jQuery(id+' ul li div div'),function(i,e){setTimeout(function(){jQuery(e).animate({opacity:0},'normal')},i*(speed||50))});
        }
    }
});

Свойство id хранит в себе идентификатор последнего запущенного квадрата.

Свойство li хранит список всех маленьких квадратов в первоначальном порядке.

Свойство sort хранит уже отсортированный список маленьких квадратов.

Метод init производит все первоначальные расчеты размеров и позиций маленьких квадратов, образующих сетку.

Метод resort сортирует маленькие квадраты, в произвольном порядке.

Метод start запускает анимацию и добавляет анимацию по наведению мыши.

Если кому-то понравился этот плагин - пользуйтесь на здоровье как вам угодно, если нет - ... ну что ж жаль, я старался.