Как щавергить все ajax запросы к серверуКак завершить все ajax запросы на jquery. Вы я верен знаете, что все события в JavaScript происходят последовательно. То, что называется асинхронным ajax запросом, на самом деле ем что иное, как цепь последовательных событий. И так случается, то если запросы происходят к одному серверу, что пока не завершится один запрос, другой будет висеть в воздухе. В связи с этим возникла необходимость, обрубать все текущие ajax запросы, при инициализации нового. Как это сделать? 

Рассказать друзьям

Часто возникает задача: «на коленке» сделать анимированный баннер используя лишь несколько изображений с эффектами перехода. Да, есть Adobe Flash, есть GIF анимация, но бывают случаи, когда маркетолог скинул тебе пару скудных jpg макетов, и попросил - «что-нибудь с ними сделать». 

Софт-программисты ищут, в таких случаях, нужный jquery плагин. Благо, их обилие позволяет легко найти подходящий. Но это не всегда оправданно, так как сама jQuery имеет отличные средства анимации и эффектов. И код для этого, будет не более 20-ти строк, в зависимости от того, какое количество эффектов Вам потребуется.

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

В результате мы получим такой баннер:

 
 
 
 
 
Рассказать друзьям

В контакте есть такая фича: прокручиваешь новости до конца страницы, после этого автоматически подгружаются другие новости. Это весьма удобно, не нужно организовывать сложную систему пагинации. Просто крутишь страницу. Сделать такое на jquery не составит труда. Для этого используем событие scroll. Создадим элемент.

<div id="mynews" style="height:100px;overflow-y:scroll;"></div>

к нему прицепляем обработчик события

var page = 1;
$('#mynews').scroll(function() {
	if( $(this).height() + $(this).scrollTop() >= this.scrollHeight ) {
		$('#mynews').append($.get('news.php?page='+page++));
	}
});

а вот и демонстрация работы:

В челябинске упал астероид

Невероятно но факт в челябинске упал астероид

Лада выпустила электрокар

Невероятно но факт Лада выпустила электрокар

Харламов встречается с Асмус

Невероятно но факт Харламов встречается с Асмус

Зеленое ведро зеленее черного ведра

Невероятно но факт в Зеленое ведро зеленее черного ведра

Эффект плацебо победил рак

Невероятно но факт Эффект плацебо победил рак. С животным все в порядке.

Рассказать друзьям

Доброго дня. Небольшая заметка о том, как можно получить родителя элемента по его порядковому номеру в дереве родителей.

В jquery есть несколько способов получения родителей элементов :parent, parents, closest

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

Рассказать друзьям

Вопреки названию статьи скажу, что анимации на jQuery здесь по минимуму. Фактически для браузеров Firefox и Google Chrome ее и вовсе нет. На выходе у вас должен получиться вот такая симпатичная  слайдер-галлерея

 

Но для начала немного предыстории. Задача очень простая, нужно сделать так, чтобы изображения на экране прокручивались по всей ширине, а когда  крайнее подходило к концу слайдера, те что были впереди перемещались в конец. Получается бесконечная карусель, сделать которую, как оказалось позднее не так уж и просто.

Первое, что мне пришло в голову это абсолютно перемещать все блоки по оси x(меняя свойство style.left), как только крайний достигает границы слайдера, просто перемещать первые слайды в конец и продолжать общую анимацию. Все просто, и возможно читатель, который прочтет данный пост в недалеком будущем сделает именно так, однако на данный момент ни один браузер не показал достойную анимацию изображения, а слайдер который прокручивает изображение рывками думаю мало кого интересует.

Вариант номер два, клонировать с помощью jQuery.clone содержимое одного блока с фотографиями, и добавлять вконце первого. Прокручивание целого блока работает заметно быстрее, однако все равно это очень медленное мероприятие.

Вариант номер три, тоже а намеком на будущее, использование CSS3. В CSS3 есть такие фишки, которые при грамотной реализации браузерами позволят делать совершенно не тормозящую анимацию. Это возможно и сейчас, но только не в IE. Я не знаю, что там в IE10, но на данный момент IE9 эту штуку не поддерживает, но вот сама идея очень интересна. Нашел я ее тут http://css-tricks.com/infinite-all-css-scrolling-slideshow/  

Собственно, само ТЗ изложенное выше, тут не выполняется, хотя слайдер и получился очень милым. 

Как и в статье перемещать все картинки по отдельности мы не станем, это слишком накладно и на моем не самом последнем ноутбуке прилично тормозит. Мы пойдем другим путем. Закинем все фото при помощи php в один файл, а затем со спокойной душой будем двигать этот файлик, как background.

Для начала функция для перебора всех изображений находящихся в категории:

function Perebor( $path ){
	if(  file_exists( $path ) ){
		$Handler = glob ($path . '*.jpg');
		foreach ($Handler as $Photo){
			//обработаем все фото
		}
	}
}

 

Рассказать друзьям

Подкатегории

Все о разработке на библиотеке jQuery