Архив

Публикации с меткой ‘javascript’
28 марта 2019 Нет комментариев

Когда, к примеру, input checkbox невидим, а вместо него отображается иконка font awesome или др. и нужно проверить его checked и т.д.
Не использовать display:none или visibility:hidden
Использовать, например, opacity:0;

Categories: CSS, Javascript Tags: ,
26 марта 2019 Нет комментариев

Убрать атрибут readonly="readonly" и добавить class="readonly", и js:

$(".readonly").on('keydown paste',function(e){
	e.preventDefault();
});
Categories: Javascript Tags: ,
14 марта 2019 Нет комментариев
ymaps.ready(init);
function init(){
	var placemarks=[];
	var myMap=new ymaps.Map("places_map",{
		center:[59.952236, 30.299258],
		zoom:16,
		controls:['zoomControl']
	});
	Placemark=new ymaps.Placemark([59.952236, 30.299258],{
		balloonContent:'address 1',
		hintContent:'name 1',
	},{
		preset:'islands#redDotIcon'
	});
	placemarks[1]=Placemark;
	myMap.geoObjects.add(Placemark);
	Placemark=new ymaps.Placemark([59.924406, 30.385793],{
		balloonContent:'address 2',
		hintContent:'name 2',
	},{
		preset:'islands#redDotIcon'
	});
	placemarks[2]=Placemark;
	myMap.geoObjects.add(Placemark);
	Placemark=new ymaps.Placemark([59.952236, 30.299258],{
		balloonContent:'address 3',
		hintContent:'name 3',
	},{
		preset:'islands#redDotIcon'
	});
	placemarks[3]=Placemark;
	myMap.geoObjects.add(Placemark);
	myMap.behaviors.disable('scrollZoom');
	$('.places_map .places .item').on('click',function(){
		$('.places_map .places .item').removeClass('active');
		$(this).addClass('active');
		$('.places_map .places').addClass('closed');
		var cid=$(this).data('id');
		myMap.setCenter(placemarks[cid].geometry.getCoordinates());
		//placemarks[cid].balloon.open();
	});
}
<script src="https://api-maps.yandex.ru/2.1/?lang=ru_RU"></script>
<div class="places_map">
	<div id="places_map"></div>
	<div class="places">
		<div class="items">
			<div class="item" data-id="1">title 1</div>
			<div class="item" data-id="2">title 2</div>
			<div class="item" data-id="3">title 3</div>
		</div>
	</div>
</div>
#places_map{
	height:500px;
}
Categories: Javascript Tags:

Например:

$(document).on('mouseover','.q',function(e){
	$('#'+$(this).data('tip')).fadeIn();
});
$(document).on('mouseout','.q',function(e){
	$('#'+$(this).data('tip')).fadeOut();
});

Вместо:

$('.q').hover(function(){
	$('#'+$(this).data('tip')).fadeIn();
},function(){
	$('#'+$(this).data('tip')).fadeOut();
});
Categories: Javascript Tags: ,
26 февраля 2019 Нет комментариев
function replaceAll(str,find,replace){
	return str.replace(new RegExp(find,'g'),replace);
}

Например, удалить проблемы во всех input в форме:

$("form input[type=text]").each(function(){
	$(this).val(replaceAll($(this).val(),' ',''));
});
Categories: Javascript Tags:
26 февраля 2019 Нет комментариев

JS:

$(".input_place").autocomplete({
	source:"/?ajax_action=get_places",
	minLength:4,
	position:{my:"left top",at:"left bottom"},
	select:function(event,ui){
		var loc=$(this).closest('form').attr('action');
		if(ui.item.country_id){
			loc+='?country[]='+ui.item.country_id;
			$('#hidden_country').val(ui.item.country_id);
		}
		if(ui.item.district_id){
			loc+='&district[]='+ui.item.district_id;
			$('#hidden_district').val(ui.item.district_id);
		}
		if(ui.item.city_id){
			loc+='&city[]='+ui.item.city_id;
			$('#hidden_city').val(ui.item.city_id);
		}
		var selected=ui.item.country_name;
		if(ui.item.district_name!=''){
			selected=ui.item.district_name;
		}
		if(ui.item.city_name!=''){
			selected=ui.item.city_name;
		}
		$(this).val(selected);
		if($('#hidden_country').val()==undefined){
			window.location.href=loc;
		}
		return false;
	}
}).autocomplete("instance")._renderItem=function(ul,item){
	var li=item.country_name;
	if(item.district_name!=''){
		li+=' '+item.district_name;
	}
	if(item.city_name!=''){
		li+=' '+item.city_name;
	}
	return $("<li>").append(li).appendTo(ul);
};
if($_GET['ajax_action']=='get_places'){
	$places=array();
	$ajax_countries=get_from_base('*','countries',"shown=1 and (`name` LIKE '%".$_GET['term']."%' OR `id` IN (SELECT `parent` FROM `districts` WHERE`shown`=1 and (`name` LIKE '%".$_GET['term']."%' OR `id` IN (SELECT `parent` FROM `cities` WHERE`shown`=1 and `name` LIKE '%".$_GET['term']."%'))))",'pos');
	if(count($ajax_countries)>0){
		foreach($ajax_countries as $country){
			$places[]=array('country_id'=>$country['id'],'country_name'=>$country['name'],'district_id'=>0,'district_name'=>'','city_id'=>0,'city_name'=>'');
			$ajax_districts=get_from_base('*','districts',"`parent`=".$country['id']." and `shown`=1 and (`name` LIKE '%".$_GET['term']."%' OR `id` IN (SELECT `parent` FROM `cities` WHERE`shown`=1 and `name` LIKE '%".$_GET['term']."%'))",'pos');
			if(count($ajax_districts)>0){
				foreach($ajax_districts as $district){
					$places[]=array('country_id'=>$country['id'],'country_name'=>$country['name'],'district_id'=>$district['id'],'district_name'=>$district['name'],'city_id'=>0,'city_name'=>'');
					$ajax_cities=get_from_base('*','cities',"`parent`=".$district['id']." and `shown`=1 and `name` LIKE '%".$_GET['term']."%'",'pos');
					if(count($ajax_cities)>0){
						foreach($ajax_cities as $city){
							$places[]=array('country_id'=>$country['id'],'country_name'=>$country['name'],'district_id'=>$district['id'],'district_name'=>$district['name'],'city_id'=>$city['id'],'city_name'=>$city['name']);
						}
					}
				}
			}
		}
	}
	header('Content-Type: application/json');
	echo json_encode($places);
	exit();
}

https://jqueryui.com/autocomplete/#custom-data

Categories: Javascript, PHP Tags: , ,
26 февраля 2019 Нет комментариев

Файлы для загрузки:

https://leafletjs.com/download.html
https://github.com/Leaflet/Leaflet.markercluster

Подключение:

<script src="/assets/js/leaflet/leaflet.js"></script>
<script src="/assets/js/leaflet/leaflet.markercluster.js"></script>
<link href="/assets/js/leaflet/leaflet.css" rel="stylesheet" type="text/css"/>
<link href="/assets/js/leaflet/MarkerCluster.css" rel="stylesheet" type="text/css"/>
<link href="/assets/js/leaflet/MarkerCluster.Default.css" rel="stylesheet" type="text/css"/>

JS:

var map=L.map('map_search_leaflet').setView([59.939095,30.315868],2);
L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}',{
	attribution:'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
	minZoom:2,
	maxZoom:18,
	id:'mapbox.streets',
	accessToken:'--token--'
}).addTo(map);
map.scrollWheelZoom.disable();
map.setMaxBounds([
	[90,-180],
	[-90,180]
]);
var markers=L.markerClusterGroup({
	maxClusterRadius:20
});
markers.addLayer(L.marker([60.171801, 24.956500]).bindPopup('<div class="popup_header"><a href="http://example.com/nedvizhimost/kupit/kafe-v-helsinki-art1.html">Кафе в Хельсинки</a></div><div class="popup_body"><div class="art">ID: art1</div><div class="price">248 000 €</div><div class="photo"><a href="http://example.com/nedvizhimost/kupit/kafe-v-helsinki-art1.html"><img src="http://example.com/resize/catalog/crop/270/210/c11.jpg" alt="Кафе в Хельсинки"/></a></div></div><div class="popup_footer"><div class="f_3">49 м2</div></div>'));
markers.addLayer(L.marker([60.166892, 24.943673]).bindPopup('<div class="popup_header"><a href="http://example.com/nedvizhimost/kupit/restoran-v-helsinki-art2.html">Ресторан в Хельсинки</a></div><div class="popup_body"><div class="art">ID: art2</div><div class="price">350 000 €</div><div class="photo"><a href="http://example.com/nedvizhimost/kupit/restoran-v-helsinki-art2.html"><img src="http://example.com/resize/catalog/crop/270/210/c18.jpg" alt="Ресторан в Хельсинки"/></a></div></div><div class="popup_footer"><div class="f_3">130 м2</div></div>'));
markers.addLayer(L.marker([60.166892, 24.943673]).bindPopup('<div class="popup_header"><a href="http://example.com/nedvizhimost/kupit/pomeshchenie-v-helsinki-art3.html">Помещение в Хельсинки</a></div><div class="popup_body"><div class="art">ID: art3</div><div class="price">198 000 €</div><div class="photo"><a href="http://example.com/nedvizhimost/kupit/pomeshchenie-v-helsinki-art3.html"><img src="http://example.com/resize/catalog/crop/270/210/c22.jpg" alt="Помещение в Хельсинки"/></a></div></div><div class="popup_footer"><div class="f_3">54 м2</div></div>'));
map.addLayer(markers);

HTML:

<div id="map_search_leaflet"></div>

CSS:

#map_search_leaflet{
	height:570px;
	margin-bottom:20px;
}
Categories: Javascript, Web Tags: