Архив

Архив раздела ‘Javascript’

Закомментировать данный код в chosen.jquery.js

    AbstractChosen.browser_is_supported = function() {
      /*
	  if ("Microsoft Internet Explorer" === window.navigator.appName) {
        return document.documentMode >= 8;
      }
      if (/iP(od|hone)/i.test(window.navigator.userAgent) || /IEMobile/i.test(window.navigator.userAgent) || /Windows Phone/i.test(window.navigator.userAgent) || /BlackBerry/i.test(window.navigator.userAgent) || /BB10/i.test(window.navigator.userAgent) || /Android.*Mobile/i.test(window.navigator.userAgent)) {
        return false;
      }
	  */
      return true;
    };
Categories: Javascript Tags:

Для нормальной работы ui на мобильных устройствах подключить https://github.com/furf/jquery-ui-touch-punch

Categories: Javascript Tags:
$(document).ready(function(){
	var sync1=$("#owl_detail");
	var sync2=$("#owl_thumbs");
	var slidesPerPage=4;
	var syncedSecondary=false;
	sync1.owlCarousel({
		items:1,
		//slideSpeed:2000,
		nav:true,
		autoplay:false,
		dots:false,
		loop:false,
		//responsiveRefreshRate:200,
	}).on('changed.owl.carousel',syncPosition);
	sync2.on('initialized.owl.carousel',function(){
		sync2.find(".owl-item").eq(0).addClass("current");
	}).owlCarousel({
		items:slidesPerPage,
		dots:false,
		nav:false,
		loop:false,
		margin:25,
		//smartSpeed:200,
		//slideSpeed:500,
		//slideBy:slidesPerPage,
		//responsiveRefreshRate:100
	}).on('changed.owl.carousel',syncPosition2);
	function syncPosition(el){
		/*
		var count=el.item.count-1;
		var current=Math.round(el.item.index-(el.item.count/2)-.5);
		if(current<0){
			current=count;
		}
		if(current>count){
			current=0;
		}
		*/
		var current=el.item.index;
		sync2.find(".owl-item").removeClass("current").eq(current).addClass("current");
		var onscreen=sync2.find('.owl-item.active').length-1;
		var start=sync2.find('.owl-item.active').first().index();
		var end=sync2.find('.owl-item.active').last().index();
		if(current>end){
			sync2.data('owl.carousel').to(current,100,true);
		}
		if(current<start){
			sync2.data('owl.carousel').to(current-onscreen,100,true);
		}
	}
	function syncPosition2(el){
		if(syncedSecondary){
			var number=el.item.index;
			sync1.data('owl.carousel').to(number,100,true);
		}
	}
	sync2.on("click",".owl-item",function(e){
		e.preventDefault();
		var number=$(this).index();
		sync1.data('owl.carousel').to(number,300,true);
	});
});
<div class="large">
	<div class="owl-carousel owl-theme" id="owl_detail">
		<div class="item">
			<img src="images/detail_1.jpg" alt=""/>
		</div>
		<div class="item">
			<img src="images/detail_2.jpg" alt=""/>
		</div>
	</div>
</div>
<div class="thumbs">
	<div class="owl-carousel owl-theme" id="owl_thumbs">
		<div class="item">
			<img src="images/detail_1.jpg" alt=""/>
		</div>
		<div class="item">
			<img src="images/detail_2.jpg" alt=""/>
		</div>
	</div>
</div>
Categories: Javascript Tags:
25 февраля 2020 Нет комментариев

Добавить muted=true, например:

v.muted=true;
v.play();
Categories: Javascript Tags:
24 января 2020 Нет комментариев
<input type="text" name="test" placeholder="Test" onkeyup="this.value=this.value.replace(/\s+/gi,'')"/>
Categories: Javascript Tags:
24 декабря 2019 Нет комментариев

Javascript:

$(document).ready(function(){
	var select_brand=$('select[name=brand]');
	var select_collection=$('select[name=collection]');
	select_brand.on('change',function(){
		$.ajax({
			url:"/?ajax_action=get_collections&brand="+select_brand.val(),
			dataType:"json",
			success:function(data){
				select_collection.find('option').not(':first').remove();
				$.each(data,function(index,item){
					select_collection.append('<option value="'+item.id+'">'+item.name+'</option>');
				});
				select_collection.trigger("chosen:updated");
			}
		});
	});
});

HTML:

<select name="brand" class="chosen">
	<option value="0">Выбрать</option>
	<?if(count($brands)>0){?>
		<?foreach($brands as $item){?>
			<option value="<?=$item['id']?>"<?if($item['id']==$change_catalog["brand"]){?> selected="selected"<?}?>><?=$item['name']?></option>
		<?}?>
	<?}?>
</select>
<select name="collection" class="chosen">
	<option value="0">Выбрать</option>
	<?if(count($collections)>0){?>
		<?foreach($collections as $item){?>
			<option value="<?=$item['id']?>"<?if($item['id']==$change_catalog["collection"]){?> selected="selected"<?}?>><?=$item['name']?></option>
		<?}?>
	<?}?>
</select>

PHP:

if($_GET['ajax_action']=='get_collections'&&$_GET['brand']>0){
	header("Content-Type: application/json");
	$result=get_from_base('`id`,`name`','collections',"`parent`='".$_GET['brand']."'",'pos');
	echo json_encode($result);
	exit();
}
$brands=get_from_base('`id`,`name`','brands',"1",'`parent`,`pos`');
if($_GET["change_id"]){
	$change_catalog=get_by_id($_GET["change_id"],'catalog');
	if($change_catalog['brand']){
		$collections=get_from_base('`id`,`name`','collections',"`parent`='".$change_catalog['brand']."'",'pos');
	}
}
Categories: Javascript, PHP Tags: ,
15 октября 2019 Нет комментариев

Когда нужно совместить Chosen (https://harvesthq.github.io/chosen/) и Autocomplete Widget (https://api.jqueryui.com/autocomplete/), например, при очень большом списке.

$("select.chosen").chosen({width:"100%"});
$('.accessories .search-field input').each(function(i,el){
	el=$(el);
	el.autocomplete({
		minLength:3,
		delay:2000,
		source:function(request,response){
			var select=el.closest('.accessories').find('select');
			$.ajax({
				url:"/?sc="+request.term,
				dataType:"json",
				success:function(data){
					select.find('option').not(':selected').remove();
					response($.map(data,function(item){
						if(!(select.find('option[value='+item.id+']').length>0)){
							select.append('<option value="'+item.id+'">'+item.name+' ['+item.part+']</option>');
						}
					}));
					select.trigger("chosen:updated");
				}
			});
		},
	});
});

Пример php для ajax:

if(isset($_GET['sc'])){
	header("Content-Type: application/json");
	$result=get_from_base('`id`,`part`,`name`','catalog',"`part` LIKE '%".$_GET['sc']."%'",'`parent`,`pos`');
	echo json_encode($result);
	exit();
}

Сам select:

<div class="accessories">
	<select name="accessories[]" multiple="multiple" class="chosen" data-placeholder="Выбрать позиции">
		<?if(count($catalog_accessories)>0){?>
			<?foreach($catalog_accessories as $v){?>
				<option value="<?=$v['id']?>"<?if(in_array($v['id'],$change_catalog_accessories)){?> selected="selected"<?}?>><?=$v['name']?> [<?=$v['part']?>]</option>
			<?}?>
		<?}?>
	</select>
</div>

Другие данные:

$change_catalog_accessories=array();
$change_catalog=get_by_id($_GET["uid"],'catalog');
if($change_catalog['accessories']!=''){
	$change_catalog_accessories=explode(',',str_replace("'","",$change_catalog['accessories']));
	$catalog_accessories=get_from_base('`id`,`name`,`part`','catalog',"`shown`=1 and `id`!='".$change_catalog['id']."' and `id` in (".$change_catalog['accessories'].")",'`parent`,`pos`');
}
Categories: Javascript Tags: