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

Jquery — событие после загрузки картинок (рисунков)

05.12.2016 Автор:alex

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

Это можно использовать для выравнивания адаптивных блоков для каталога.

// срабатывает после загрузки всех элементов, аналог реди.
jQuery(window).load(function () {
  // манипуляции с готовой страницей
  	//если меньше 750 пикселов- то  отключаем выравнивание
	if (jQuery(window).width() >= '750'){
		//выравнивание по высоте всех стразу пицц, роллов и других
		jQuery('.proluct_list_with_fon , .proluct_list , .news_list').each(function(i,elem) {
			var obj=jQuery(this).find(".row>div .thumbnail");
			setEqualHeight(obj);
		});	
	}  
}); //of Load !!!  не добавлять функции от реди!!!

1

2

3

4

5

6

7

8

9

10

11

12

// срабатывает после загрузки всех элементов, аналог реди.

jQuery(window).load(function () {

// манипуляции с готовой страницей

//если меньше 750 пикселов- то отключаем выравнивание

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

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

jQuery('.proluct_list_with_fon , .proluct_list , .news_list').each(function(i,elem) {

var obj=jQuery(this).find(".row>div .thumbnail");

setEqualHeight(obj);

});

}

}); //of Load !!! не добавлять функции от реди!!!

а вот сама функция выравнивания элементов каталога по высоте.

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

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

function setEqualHeight(columns)

{

var tallestcolumn = 0;

columns.each(

function()

{

currentHeight = jQuery(this).height();

if(currentHeight > tallestcolumn)

{

tallestcolumn = currentHeight;

}

);

columns.height(tallestcolumn);

}

Она срабатывает после срабаватывания load
Итог. В коде появляются 2 конструкции

jQuery(document).ready(function(){
//после загрузки скриптов
});

jQuery(window).load(function () {
// после загрузки изображений
});

1

2

3

4

5

6

7

jQuery(document).ready(function(){

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

});

jQuery(window).load(function () {

// после загрузки изображений

});

Не выставляется селект Jquery в IE

01.12.2016 Автор:alex

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

Такая Команда для выставления options в select в Ie Не срабатывает:

jQuery("#win_tide :nth-child(2)").attr("selected", "selected");

1	jQuery("#win_tide :nth-child(2)").attr("selected", "selected");

Срабатывает вот такая команда. Но ошибок не наблюдается. Будьте осторожны. И даже в предыщущей команде присваиваются атрибуты, но не происходит изменение селекта.

jQuery("#win_tide :nth-child(2)").prop('selected', true);

1	jQuery("#win_tide :nth-child(2)").prop('selected', true);

Стилизация социальных кнопок- быстрая

15.11.2016 Автор:alex

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

это переклик с тех социальных кнопок что сделал верстальщик, на те что реально работают, но не стилизованы. (с помощью сервиса http://social-likes.js.org/ru/) (Добавляем в обертку ready )

jQuery('a.vk').click(function (e) { 
e.preventDefault(); 
jQuery('.social-likes__button_vkontakte').click(); 

}); 
jQuery('.fb').click(function (e) { 
e.preventDefault(); 
jQuery('.social-likes__button_facebook').click(); 
}); 

jQuery('a.ok').click(function (e) { 
e.preventDefault(); 
jQuery('.social-likes__widget_odnoklassniki').click(); 
}); 
jQuery('a.tw').click(function (e) { 
e.preventDefault(); 
jQuery('.social-likes__widget_twitter').click(); 
}); 
jQuery('a.ggl').click(function (e) { 
e.preventDefault(); 
jQuery('.social-likes__widget_plusone').click(); 
});

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

jQuery('a.vk').click(function (e) {

e.preventDefault();

jQuery('.social-likes__button_vkontakte').click();

});

jQuery('.fb').click(function (e) {

e.preventDefault();

jQuery('.social-likes__button_facebook').click();

});

jQuery('a.ok').click(function (e) {

e.preventDefault();

jQuery('.social-likes__widget_odnoklassniki').click();

});

jQuery('a.tw').click(function (e) {

e.preventDefault();

jQuery('.social-likes__widget_twitter').click();

});

jQuery('a.ggl').click(function (e) {

e.preventDefault();

jQuery('.social-likes__widget_plusone').click();

});

подключаем js и css с сайта http://social-likes.js.org/ru/

<link rel="stylesheet" href="css/social-likes_classic.css">
<script src="/js/social-likes.min.js"></script>

1 2	<link rel="stylesheet" href="css/social-likes_classic.css"> <script src="/js/social-likes.min.js"></script>

вот базовая верстка — от дизайнера

<ul class="social">
<li><a href="#" class="vk" title="vkontakte">Vkontakte</a></li>
<li><a href="#" class="fb" title="facebook">Facebook</a></li>
<li><a href="#" class="ok" title="Odnoklassniki">Odnoklassnii</a></li>
<li><a href="#" class="tw" title="Twitter">Twitter</a></li>
<li><a href="#" class="ggl" title="Google+">Google+</a></li>
</ul>

1

2

3

4

5

6

7

<li><a href="#" class="vk" title="vkontakte">Vkontakte</a></li>

<li><a href="#" class="fb" title="facebook">Facebook</a></li>

<li><a href="#" class="ok" title="Odnoklassniki">Odnoklassnii</a></li>

<li><a href="#" class="tw" title="Twitter">Twitter</a></li>

<li><a href="#" class="ggl" title="Google+">Google+</a></li>

</ul>

вот то что дает этот сервис (http://social-likes.js.org/ru/), добавляем ниже верстки от дизайнера

<div class="social-likes" data-counters="no">
	<div class="facebook" title="Поделиться ссылкой на Фейсбуке">Facebook</div>
	<div class="twitter" title="Поделиться ссылкой в Твиттере">Twitter</div>
	<div class="vkontakte" title="Поделиться ссылкой во Вконтакте">Вконтакте</div>
	<div class="odnoklassniki" title="Поделиться ссылкой в Одноклассниках">Одноклассники</div>
	<div class="plusone" title="Поделиться ссылкой в Гугл-плюсе">Google+</div>
</div>

1

2

3

4

5

6

7

<div class="facebook" title="Поделиться ссылкой на Фейсбуке">Facebook</div>

<div class="twitter" title="Поделиться ссылкой в Твиттере">Twitter</div>

<div class="vkontakte" title="Поделиться ссылкой во Вконтакте">Вконтакте</div>

<div class="odnoklassniki" title="Поделиться ссылкой в Одноклассниках">Одноклассники</div>

<div class="plusone" title="Поделиться ссылкой в Гугл-плюсе">Google+</div>

</div>

добавляем display:none к той верстке что предоставил нам сервис

<div class="social-likes" data-counters="no" style="display:none">
</div>

1 2	<div class="social-likes" data-counters="no" style="display:none"> </div>

А теперь кликаем на иконки что сделал дизайнер)

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

работа с селект -полезности

02.11.2016 Автор:alex

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

сделать все элементы не выбранными
$(‘#my_select option:selected’).each(function(){
this.selected=false;
});

Сделать выбранным второй элемент
$(«#my_select :nth-child(2)»).attr(«selected», «selected»);

Сделать выбранным элемент, value которого = 2
$(«#my_select [value=’2′]»).attr(«selected», «selected»);
или $(«#my_select [value=’2′]»).prop(‘selected’, true); -посленяя команда срабатывает в хроме.