Архив

Публикации с меткой ‘javascript’

Javascript:

ymaps.ready(init);
function init(){
	var groups=[
		{
			name:"Группа 1",
			style:"islands#blueCircleIcon",
			items:[
				{name:"Санкт-Петербург, Московский пр-т, д. 44"},
				{name:"Санкт-Петербург, ул. Байконурская, д. 14А, ТРК «Континент»"},
			]
		},
		{
			name:"Группа 2",
			style:"islands#greenCircleIcon",
			items:[
				{name:"Санкт-Петербург, Лиговский пр-т, д. 30А, ТРЦ «Галерея»"},
				{name:"Санкт-Петербург, Петергофское ш., д. 51, ТРЦ «Жемчужная Плаза»"},
			]
		},
	];
	var myMap=new ymaps.Map('map',{
		center:[59.939095,30.315868],
		zoom:10
	},{
		searchControlProvider:'yandex#search'
	}),
	menu=$('<div class="menu"></div>');
	for(var i=0,l=groups.length;i<l;i++){
		createMenuGroup(groups[i]);
	}
	function createMenuGroup(group){
		var menuItem=$('<div class="group"><p>'+group.name+'</p></div>'),
			collection=new ymaps.GeoObjectCollection(null,{preset:group.style}),
			submenu=$('<ul></ul>');
		myMap.geoObjects.add(collection);
		menuItem.append(submenu).appendTo(menu);
		for(var j=0,m=group.items.length;j<m;j++){
			createSubMenu(group.items[j],collection,submenu);
		}
	}
	function createSubMenu(item,collection,submenu){
		var submenuItem=$('<li><a href="#">'+item.name+'</a></li>');
		ymaps.geocode(item.name,{results:1}).then(function(res){
			var coords=res.geoObjects.get(0).geometry.getCoordinates();
			var placemark=new ymaps.Placemark(coords,{balloonContent:item.name});
			collection.add(placemark);
			submenuItem.appendTo(submenu).find('a').bind('click',function(){
				if(!placemark.balloon.isOpen()){
					placemark.balloon.open();
				}
				else{
					placemark.balloon.close();
				}
				return false;
			});
		});
	}
	menu.insertAfter($('#map'));
}

HTML:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://api-maps.yandex.ru/2.1/?lang=ru_RU"></script>
<script>
	//js here
</script>
<div id="map" style="height:400px;"></div>
Categories: Javascript, Web Tags:
var win=window.open('https://google.com/','_blank');
win.focus();
Categories: Javascript Tags:
22 января 2018 Нет комментариев
$('.popup').fancybox({
	helpers:{title:null},
	padding:'0',
	width:'800',
	beforeShow:function(){
		$('input.date').datepicker({
			//options
		});
	}
});
#ui-datepicker-div{
	z-index:9999 !important;
}
Categories: CSS, Javascript Tags: ,
23 ноября 2017 Нет комментариев

В примере таблицы в контенте расположены внутри тега article

$(document).ready(function(){
	$("article table").wrapAll('<div class="contenttable"></div>');
});
article .contenttable{
	overflow-y:auto;
}
Categories: Web Tags: ,
14 ноября 2017 Нет комментариев

Преобразует 00001 в 1:

$(this).data('card');

Оставит 00001 как есть:

$(this).attr('data-card');
Categories: Javascript Tags: ,
8 ноября 2017 Нет комментариев

Чтобы удалить из строки, содержащей html, элемент с его содержимым, в примере div

var str_html=$('.container').html();
str_html=str_html.replace(/<div[^>]*?>[\s\S]*?<\/div>/i,'');

Чтобы удалить элемент с определенным class, в примере class="classname"

str_html=str_html.replace(/<div.*(class="classname")[^>]*?>[\s\S]*?<\/div>/i,'');
Categories: Javascript Tags:
26 октября 2017 Нет комментариев

HTML:

<div id="map"></div>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" async defer></script>

Javascript:

var map;
function initMap(){
	map=new google.maps.Map(document.getElementById('map'),{
		center:{lat:50.464579,lng:30.522939},
		zoom:17,
		scrollwheel:false,
	});
	var image='/images/icon_pin.png';
	var marker=new google.maps.Marker({
		position:{lat:50.464579,lng:30.522939},
		map:map,
		icon:image,
		title:'Адрес',
	});
	var infowindow=new google.maps.InfoWindow({
		content:'Название компании<br/>Адрес',
	});
	marker.addListener('click',function(){
		infowindow.open(map,marker);
	});
	var styledMapType=new google.maps.StyledMapType(
		[
			{
				"elementType":"geometry",
				"stylers":[
					{
						"color":"#f5f5f5"
					}
				]
			},
			{
				"elementType":"labels.icon",
				"stylers":[
					{
						"visibility":"off"
					}
				]
			},
			{
				"elementType":"labels.text.fill",
				"stylers":[
					{
						"color":"#616161"
					}
				]
			},
			{
				"elementType":"labels.text.stroke",
				"stylers":[
					{
						"color":"#f5f5f5"
					}
				]
			},
			{
				"featureType":"administrative.land_parcel",
				"elementType":"labels.text.fill",
				"stylers":[
					{
						"color":"#bdbdbd"
					}
				]
			},
			{
				"featureType":"poi",
				"elementType":"geometry",
				"stylers":[
					{
						"color":"#eeeeee"
					}
				]
			},
			{
				"featureType":"poi",
				"elementType":"labels.text.fill",
				"stylers":[
					{
						"color":"#757575"
					}
				]
			},
			{
				"featureType":"poi.park",
				"elementType":"geometry",
				"stylers":[
					{
						"color":"#e5e5e5"
					}
				]
			},
			{
				"featureType":"poi.park",
				"elementType":"labels.text.fill",
				"stylers":[
					{
						"color":"#9e9e9e"
					}
				]
			},
			{
				"featureType":"road",
				"elementType":"geometry",
				"stylers":[
					{
						"color":"#ffffff"
					}
				]
			},
			{
				"featureType":"road.arterial",
				"elementType":"labels.text.fill",
				"stylers":[
					{
						"color":"#757575"
					}
				]
			},
			{
				"featureType":"road.highway",
				"elementType":"geometry",
				"stylers":[
					{
						"color":"#dadada"
					}
				]
			},
			{
				"featureType":"road.highway",
				"elementType":"labels.text.fill",
				"stylers":[
					{
						"color":"#616161"
					}
				]
			},
			{
				"featureType":"road.local",
				"elementType":"labels.text.fill",
				"stylers":[
					{
						"color":"#9e9e9e"
					}
				]
			},
			{
				"featureType":"transit.line",
				"elementType":"geometry",
				"stylers":[
					{
						"color":"#e5e5e5"
					}
				]
			},
			{
				"featureType":"transit.station",
				"elementType":"geometry",
				"stylers":[
					{
						"color":"#eeeeee"
					}
				]
			},
			{
				"featureType":"water",
				"elementType":"geometry",
				"stylers":[
					{
						"color":"#c9c9c9"
					}
				]
			},
			{
				"featureType":"water",
				"elementType":"labels.text.fill",
				"stylers":[
					{
						"color":"#9e9e9e"
					}
				]
			}
		],
		{name:'Styled Map'}
	);
	map.mapTypes.set('styled_map',styledMapType);
	map.setMapTypeId('styled_map');
}

CSS:

#map{
	width:570px;
	height:530px;
}

Подробнее: https://developers.google.com/maps/documentation/javascript/
Google Maps APIs Styling Wizard для быстрого создания объекта стиля JSON: https://mapstyle.withgoogle.com/

Categories: Web Tags: