js | Разработчик сайтов и магазинов на битриксе . И не только.

jquery scroll : событие прокрутки до выбранного элемента и до конца страницы

21.12.2016 Автор:alex

Комментариев нет

Данный код определяет прокрутку до элемента .scroll_picca и если доходим до него то показываем меню или производим любое другое действие.
Вторая проверка- на скролл до низа страницы. Если дошли до низа — производим нужное действие.

jQuery(window).scroll(function() {
		// проверка на докрутку до определенного элемента
		var scroll_picca =jQuery('.scroll_picca').offset().top;
		console.log(scroll_picca) ;// выводим в консоль смещение  элемента пицца
		//если мы докрутили до нужного элемента 
		if (jQuery(this).scrollTop() > scroll_picca) {
			// создаем эффекты и анимацию
			jQuery(".bottom_float_menu").show();
			
		}else{
			jQuery(".bottom_float_menu").hide();
			
		}	
		// если докрутил до низа страницы
		if(jQuery(window).scrollTop()+jQuery(window).height()>=jQuery(document).height()){
			jQuery(".bottom_float_menu").hide();
		}		
});

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

jQuery(window).scroll(function() {

// проверка на докрутку до определенного элемента

var scroll_picca =jQuery('.scroll_picca').offset().top;

console.log(scroll_picca) ;// выводим в консоль смещение элемента пицца

//если мы докрутили до нужного элемента

if (jQuery(this).scrollTop() > scroll_picca) {

// создаем эффекты и анимацию

jQuery(".bottom_float_menu").show();

}else{

jQuery(".bottom_float_menu").hide();

}

// если докрутил до низа страницы

if(jQuery(window).scrollTop()+jQuery(window).height()>=jQuery(document).height()){

jQuery(".bottom_float_menu").hide();

}

});

Скролл по хешу (после решетки) в url- Jquery

07.12.2016 Автор:alex

Комментариев нет

ссылка http://test.ru/#scroll_garniry обрабатывается и скроллится до элемета в тексте у которого есть класс scroll_picca

var hash=window.location.hash.toString();	
	if(!empty(hash)){
		if(hash!="#"){
		
		var myclass = '.'+hash.slice(1);
		//var a_menu =jQuery('attr[href="'+hash+'"]').html('33333');		
		
		position =jQuery(myclass).position();		
		jQuery("html, body").animate({scrollTop: position.top-95}, 600);			
		}		
	}

1

2

3

4

5

6

7

8

9

10

11

var hash=window.location.hash.toString();

if(!empty(hash)){

if(hash!="#"){

var myclass = '.'+hash.slice(1);

//var a_menu =jQuery('attr[href="'+hash+'"]').html('33333');

position =jQuery(myclass).position();

jQuery("html, body").animate({scrollTop: position.top-95}, 600);

}

А вот меню для скролла.
только на главной странице скрол, на других — клик , затем переход на главную+ скролл на главной. Нужно заранее определиться с переменной $page .

<ul id="uslugi">
<li><a class="arrow" href="">Меню</a>
<ul>
	<?php
	 $mas_id= array(
		'scroll_picca'=>'Пицца',
		'scroll_rolly'=>'Роллы',
		'scroll_garniry'=>'Гарниры',
		'scroll_salaty'=>'Салаты',
		'scroll_bizlanch'=>'Бизнес ланч',
		'scroll_deserty'=>'Десерты',
		'scroll_napitki'=>'Напитки',
	 
	 );
	foreach ($mas_id as $key=>$val){
		
		$id_scroll=$key; 	
		 if($page=='main'){ 																					
			
			$slesh='';											
			?>
			<li><a id="<?php echo $id_scroll; ?>" href="<?php echo $slesh; ?>#<?php echo $id_scroll; ?>"><?php echo $val; ?></a></li>
			<?php											
		}else{
			//$id_scroll='';
			$slesh='/';
			?>
			<li><a id="<?php echo $id_scroll; ?>" href="<?php echo $slesh; ?>#<?php echo $id_scroll; ?>"><?php echo $val; ?></a></li>
			<?php
		}										
	}	
	?>	
</ul>
</li>
</ul>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

<ul>

<?php

$mas_id= array(

'scroll_picca'=>'Пицца',

'scroll_rolly'=>'Роллы',

'scroll_garniry'=>'Гарниры',

'scroll_salaty'=>'Салаты',

'scroll_bizlanch'=>'Бизнес ланч',

'scroll_deserty'=>'Десерты',

'scroll_napitki'=>'Напитки',

);

foreach ($mas_id as $key=>$val){

$id_scroll=$key;

if($page=='main'){

$slesh='';

?>

<?php

}else{

//$id_scroll='';

$slesh='/';

?>

<?php

}

?>

</ul>

</li>

</ul>

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

07.12.2016 Автор:alex

Комментариев нет

Эту функцию вынести за Ready

// функция предзагрузки изображения
jQuery.preloadImages = function () {
    if (typeof arguments[arguments.length - 1] == 'function') {
        var callback = arguments[arguments.length - 1];
    } else {
        var callback = false;
    }
 
    if (typeof arguments[0] == 'object') {
        var images = arguments[0];
        var n = images.length;
    } else {
        var images = arguments;
        var n = images.length - 1;
    }
    var not_loaded = n;
    for (var i = 0; i < n; i++) {
        jQuery(new Image()).attr('src', images[i]).load(function() {
            if (--not_loaded < 1 && typeof callback == 'function') {
                callback();
            }
        });
    }
}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

// функция предзагрузки изображения

jQuery.preloadImages = function () {

if (typeof arguments[arguments.length - 1] == 'function') {

var callback = arguments[arguments.length - 1];

} else {

var callback = false;

}

if (typeof arguments[0] == 'object') {

var images = arguments[0];

var n = images.length;

} else {

var images = arguments;

var n = images.length - 1;

}

var not_loaded = n;

for (var i = 0; i < n; i++) {

jQuery(new Image()).attr('src', images[i]).load(function() {

if (--not_loaded < 1 && typeof callback == 'function') {

callback();

}

});

}

вот пример вызова ajax

jQuery.get(url , function( data ) {	 

	var container_str='.container_category_'+category+' .row'; //тут прописываем id, класс цели , что будем проверять
	jQuery(container_str).html(data);		
	//обработка после загрузки 
	var paths  = [];
	var images = jQuery(container_str).find('img');
	images.each(function() {
	paths.push(jQuery(this).attr('src'));
	});

	jQuery.preloadImages(paths, function () {
		// инициализация галереи  или иной код (можно удалить)- применялся для выравнивания блоков после загрузки. Функция setEqualHeight - описана в другой статье
		
		if (jQuery(window).width() >= '750'){
		//выравнивание по высоте всех стразу пицц, роллов и других			
			var obj=jQuery(container_str).find(".thumbnail");
			//функция выравнивания блоков по высоте ( )
			setEqualHeight(obj);				
		}  				
	//alert(0);		
	});	
	
});

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

jQuery.get(url , function( data ) {

var container_str='.container_category_'+category+' .row'; //тут прописываем id, класс цели , что будем проверять

jQuery(container_str).html(data);

//обработка после загрузки

var paths = [];

var images = jQuery(container_str).find('img');

images.each(function() {

paths.push(jQuery(this).attr('src'));

});

jQuery.preloadImages(paths, function () {

// инициализация галереи или иной код (можно удалить)- применялся для выравнивания блоков после загрузки. Функция setEqualHeight - описана в другой статье

if (jQuery(window).width() >= '750'){

//выравнивание по высоте всех стразу пицц, роллов и других

var obj=jQuery(container_str).find(".thumbnail");

//функция выравнивания блоков по высоте ( )

setEqualHeight(obj);

}

//alert(0);

});

Одиночные картинки

jQuery.preloadImages(["first_image.jpg","second_image.jpg"], function () {
  alert('Обе картинки загружены.');
});

1

2

3

jQuery.preloadImages(["first_image.jpg","second_image.jpg"], function () {

alert('Обе картинки загружены.');

});

по сути весь выше код это автоматизация вот этой команды

$(new Image()).attr('src', '/img/preload_me_plz.jpg').load(function() {
    alert('Я загрузилось!');
});

1

2

3

$(new Image()).attr('src', '/img/preload_me_plz.jpg').load(function() {

alert('Я загрузилось!');

});

ie отправляет неправильно кирилиллицу через ajax

08.11.2016 Автор:alex

Комментариев нет

решение можно найти тут
http://www.sql.ru/forum/879091/jquery-ajax-get-kirillica-v-parametrah-iz-ie-krakozyabry-na-servere

если страничка работает во всех браузерах кроме IE а ошибка в IE возникает если использовать кириллические символы: не работает ни поиск, ни добавление/изменение
При этом если про кодировку из jquery.ajax, в т.ч. на http://habrahabr.ru/blogs/webdev/17640/ из чего следует что улетает все в utf-8,

Нам поможет функция js encodeURIComponent

Выравнивание дивов по высоте.

26.10.2016 Автор:alex

Комментариев нет

Выравнивание дивов по высоте можно сделать использовав функцию Js.

function setEqualHeight(columns)
{
	
	var tallestcolumn = 0;
	columns.each(
	function()
	{
	currentHeight = jQuery(this).height();	
	if(currentHeight > tallestcolumn)
	{
		
	tallestcolumn = currentHeight;
	}
	}
	);
	columns.height(tallestcolumn);
}


пример использования -вставить в ready
//выравнивание по высоте всех стразу пицц, роллов и других
setEqualHeight(jQuery(".proluct_list_with_fon .row>div .thumbnail"));

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

function setEqualHeight(columns)

{

var tallestcolumn = 0;

columns.each(

function()

{

currentHeight = jQuery(this).height();

if(currentHeight > tallestcolumn)

{

tallestcolumn = currentHeight;

}

);

columns.height(tallestcolumn);

}

пример использования -вставить в ready

//выравнивание по высоте всех стразу пицц, роллов и других

setEqualHeight(jQuery(".proluct_list_with_fon .row>div .thumbnail"));

Условия обработки персональных данных

jquery scroll : событие прокрутки до выбранного элемента и до конца страницы

Скролл по хешу (после решетки) в url- Jquery

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

ie отправляет неправильно кирилиллицу через ajax

Выравнивание дивов по высоте.

Цены

Последние видео админа

Последние комментарии

Свежие записи

Рубрики

Страницы

Архивы

Метки

Мета