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

jquery lazy load — показать все изображения по клику.

01.04.2021 Автор:alex

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

Рассмотрим вот этот лоадер
http://jquery.eisbehr.de/
Подробнее

jquery — Простое раскрывающееся меню (левое).

16.03.2020 Автор:alex

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

Основной скрипт для раскрытия

<script>
    $(document).ready(function() {

        $('ul#my-menu li').each(function(i) {
            if($(this).find('ul').length>0)
            {
                $(this).addClass('parrent').append('<i class="el-submenu__icon-arrow el-icon-arrow-down el-icon-arrow-top"></i>');
            }

        })
        $('ul#my-menu li.active_element').closest('ul').addClass('active');
        $('ul#my-menu li.active_element').parents('ul').addClass('active');


        //http://loco.ru/materials/66-javascript-expanded-collapse-menu
        $('ul#my-menu>li>i, ul#my-menu>li>a').click(function(e) { // Attach an event listener
            // debugger;
            e.preventDefault();
            var li=$(this).closest('li');
            var href=$(this).closest('li').find('a:first').attr('href');

            if(li.find('ul:first').length==0)
            {
                location.href=href;
            }
            if(li.find('ul:first').is(':visible'))
            {  li.find('ul:first').hide();
                li.removeClass('open');

            }else{
                li.find('ul:first').show();
                li.addClass('open');
            }


         //   return false; // Prohibit the browser to follow the link address
        });
        //http://loco.ru/materials/66-javascript-expanded-collapse-menu
        $('ul#my-menu>li>ul>li>i, ul#my-menu>li>ul>li>a').click(function(e) { // Attach an event listener

            // debugger;
            e.preventDefault();
            var li=$(this).closest('li');
            var href=$(this).closest('li').find('a:first').attr('href');

            if(li.find('ul:first').length==0)
            {
                location.href=href;
            }
            if(li.find('ul:first').is(':visible'))
            {  li.find('ul:first').hide();
                li.removeClass('open');

            }else{
                li.find('ul:first').show();
                li.addClass('open');
            }
        });

        /*
                //http://loco.ru/materials/66-javascript-expanded-collapse-menu
        $('ul#my-menu>li>i').click(function(e) { // Attach an event listener
            // debugger;
            var li=$(this).closest('li');

            if(li.find('ul:first').is(':visible'))
            {  li.find('ul:first').hide();
                li.removeClass('open');

            }else{
                li.find('ul:first').show();
                li.addClass('open');
            }


         //   return false; // Prohibit the browser to follow the link address
        });
        //http://loco.ru/materials/66-javascript-expanded-collapse-menu
        $('ul#my-menu>li>ul>li>i').click(function() { // Attach an event listener
            var li=$(this).closest('li');


            if(li.find('ul:first').is(':visible'))
            {  li.find('ul:first').hide();
                li.removeClass('open');

            }else{
                li.find('ul:first').show();
                li.addClass('open');
            }
        });
        * */


    });


</script>

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

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

$(document).ready(function() {

$('ul#my-menu li').each(function(i) {

if($(this).find('ul').length>0)

{

$(this).addClass('parrent').append('<i class="el-submenu__icon-arrow el-icon-arrow-down el-icon-arrow-top"></i>');

}

})

$('ul#my-menu li.active_element').closest('ul').addClass('active');

$('ul#my-menu li.active_element').parents('ul').addClass('active');

//http://loco.ru/materials/66-javascript-expanded-collapse-menu

$('ul#my-menu>li>i, ul#my-menu>li>a').click(function(e) { // Attach an event listener

// debugger;

e.preventDefault();

var li=$(this).closest('li');

var href=$(this).closest('li').find('a:first').attr('href');

if(li.find('ul:first').length==0)

{

location.href=href;

}

if(li.find('ul:first').is(':visible'))

{ li.find('ul:first').hide();

li.removeClass('open');

}else{

li.find('ul:first').show();

li.addClass('open');

}

// return false; // Prohibit the browser to follow the link address

});

//http://loco.ru/materials/66-javascript-expanded-collapse-menu

$('ul#my-menu>li>ul>li>i, ul#my-menu>li>ul>li>a').click(function(e) { // Attach an event listener

// debugger;

e.preventDefault();

var li=$(this).closest('li');

var href=$(this).closest('li').find('a:first').attr('href');

if(li.find('ul:first').length==0)

{

location.href=href;

}

if(li.find('ul:first').is(':visible'))

{ li.find('ul:first').hide();

li.removeClass('open');

}else{

li.find('ul:first').show();

li.addClass('open');

}

});

/*

//http://loco.ru/materials/66-javascript-expanded-collapse-menu

$('ul#my-menu>li>i').click(function(e) { // Attach an event listener

// debugger;

var li=$(this).closest('li');

if(li.find('ul:first').is(':visible'))

{ li.find('ul:first').hide();

li.removeClass('open');

}else{

li.find('ul:first').show();

li.addClass('open');

}

// return false; // Prohibit the browser to follow the link address

});

//http://loco.ru/materials/66-javascript-expanded-collapse-menu

$('ul#my-menu>li>ul>li>i').click(function() { // Attach an event listener

var li=$(this).closest('li');

if(li.find('ul:first').is(':visible'))

{ li.find('ul:first').hide();

li.removeClass('open');

}else{

li.find('ul:first').show();

li.addClass('open');

}

});

* */

});

</script>

Подробнее

Сервис по разворачиванию js

31.01.2018 Автор:alex

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

для разворачивания сжатых js я пользуюсь:
Подробнее

Очистка input radio (снятие выделения) с помощью Jquery

07.07.2017 Автор:alex

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

Для снятия выделения с Input type=radio надо использовать следующую команду jquery.

jQuery("input[name='filter_category_id']").prop('checked', false);

1	jQuery("input[name='filter_category_id']").prop('checked', false);

Подробнее

Считаем количество строк в тексте c помощью js и css

02.03.2017 Автор:alex

2 комментария

Для того что бы скрыть текст по количеству строк недостаточно css. Вернее достаточно, но мы не сможем подсчитать количество строк.
1. Надо сделать 2 вложенных блока. внутренний блок тянется и мы через js считаем его высоту. Высота обрамляющего блока фиксирована и сделан overflow для скрытия лишнего.

<div class="product_prod_text_out">
	<div class="product_prod_text_in">
	text высотой в 100 пикселов и (5 строк ) шрифт јриал 
	</div>
</div>

1

2

3

4

5

text высотой в 100 пикселов и (5 строк ) шрифт јриал

</div>

Js измеряет высоту внутреннего блока.
Подробнее

Yii2 — Несколько полезных фитч для компонента costa-rico/yii2-images

06.01.2017 Автор:alex

23 комментария

Маленькое резюме- текущая статья устарела в начале 2018 года, когда переписали это расширение. здесь можно взять общую организацию проекта. Я как автор опасаюсь, что вас веду в заблуждение. Если я опять возьмусь за разработку на Yii2- обязательно скорректирую эту статью, но с новым кодом. Если у вас есть конкретные корректировки- присылайте, я буду благодарен и будут благодарны многочисленные читатели этой статьи.
——————
Это настройки в файл web

 'components' => [
	....
// компонет рисунков
 'yii2images' => [
		'class' => 'rico\yii2images\Module',
		//be sure, that permissions ok
		//if you cant avoid permission errors you have to create "images" folder in web root manually and set 777 permissions
		'imagesStorePath' => 'upload/store', //path to origin images
		'imagesCachePath' => 'upload/cache', //path to resized copies
		'graphicsLibrary' => 'GD', //but really its better to use 'Imagick'
		'placeHolderPath' => '@webroot/upload/store/no-image.png', // if you want to get placeholder when image not exists, string will be processed by Yii::getAlias
	],
		.....
		
],

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

'components' => [

....

// компонет рисунков

'yii2images' => [

'class' => 'rico\yii2images\Module',

//be sure, that permissions ok

//if you cant avoid permission errors you have to create "images" folder in web root manually and set 777 permissions

'imagesStorePath' => 'upload/store', //path to origin images

'imagesCachePath' => 'upload/cache', //path to resized copies

'graphicsLibrary' => 'GD', //but really its better to use 'Imagick'

'placeHolderPath' => '@webroot/upload/store/no-image.png', // if you want to get placeholder when image not exists, string will be processed by Yii::getAlias

],

.....

],

Подробнее

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();

}

});

Позиционируем форму по центру экрану с возможностью прокрутки

09.12.2016 Автор:alex

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

После нажатия на кнопку, центрируем форму div.nashli_deshevle_form и показываем её. Показываем подложку -div.empty

jQuery('a.nashli_deshevle_button').on('click', function(e){
		e.preventDefault();	
		var scroll=jQuery(window).scrollTop();  
		var b_height=jQuery(window).height();	//высота браузера	
		var f_height=jQuery("div.nashli_deshevle_form").height();	// высота формы	
		scroll=scroll+(b_height-f_height)/2;
		jQuery("div.nashli_deshevle_form").css('top',scroll+'px');	// позиционируем форму	
		jQuery("div.nashli_deshevle_form").show();	// показываем форму	
		jQuery("div.empty").show();		// показываем подлолжку			 
		return false;  
		});

1

2

3

4

5

6

7

8

9

10

11

jQuery('a.nashli_deshevle_button').on('click', function(e){

e.preventDefault();

var scroll=jQuery(window).scrollTop();

var b_height=jQuery(window).height(); //высота браузера

var f_height=jQuery("div.nashli_deshevle_form").height(); // высота формы

scroll=scroll+(b_height-f_height)/2;

jQuery("div.nashli_deshevle_form").css('top',scroll+'px'); // позиционируем форму

jQuery("div.nashli_deshevle_form").show(); // показываем форму

jQuery("div.empty").show(); // показываем подлолжку

return false;

});

div.empty {
  display: none;
  position: fixed;
  width: 100%;
  height: 100%;
  left:0px;
  top:0px;
  z-index: 920;
  background: #000;
  filter: progid:DXImageTransform.Microsoft.Alpha(opacity=30);
  -moz-opacity: 0.30;
  -khtml-opacity: 0.30;
  opacity: 0.30;
  zoom: 1;
}
		
.nashli_deshevle_form {
    position: absolute;
    padding: 0px 0px 15px 0px;
    border-radius: 6px;
    overflow: hidden;
    display: none;
    /* position: fixed; */
    top: 40px;
    left: 350px;
    width: 500px;
    /* margin: 0px 0px 0px -250px; */
    z-index: 930;
    text-align: left;
    background-color: #fff;
	
}

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

div.empty {

display: none;

position: fixed;

width: 100%;

height: 100%;

left:0px;

top:0px;

z-index: 920;

background: #000;

filter: progid:DXImageTransform.Microsoft.Alpha(opacity=30);

-moz-opacity: 0.30;

-khtml-opacity: 0.30;

opacity: 0.30;

zoom: 1;

}

.nashli_deshevle_form {

position: absolute;

padding: 0px 0px 15px 0px;

border-radius: 6px;

overflow: hidden;

display: none;

/* position: fixed; */

top: 40px;

left: 350px;

width: 500px;

/* margin: 0px 0px 0px -250px; */

z-index: 930;

text-align: left;

background-color: #fff;

}

Скролл по хешу (после решетки) в 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('Я загрузилось!');

});

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

jquery lazy load — показать все изображения по клику.

jquery — Простое раскрывающееся меню (левое).

Сервис по разворачиванию js

Очистка input radio (снятие выделения) с помощью Jquery

Считаем количество строк в тексте c помощью js и css

Yii2 — Несколько полезных фитч для компонента costa-rico/yii2-images

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

Позиционируем форму по центру экрану с возможностью прокрутки

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

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

Цены

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

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

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

Рубрики

Страницы

Архивы

Метки

Мета