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:
21 февраля 2019 Нет комментариев

Используя переменные, определяем какой шрифт использовать, первый — локальный, второй с google fonts.

@font_gotham:true;
@font_opensans:false;
.set_fonts() when (@font_gotham=true){
	@import '../css/GothamPro.css';
	@font_base:GothamProRegular;
	@font_base_it:GothamProItalic;
	@font_300:GothamProLight;
	@font_300_it:GothamProLightItalic;
	@font_500:GothamProMedium;
	@font_500_it:GothamProMediumItalic;
	@font_700:GothamProBold;
	@font_700_it:GothamProBoldItalic;
	@font_900:GothamProBlack;
	@font_900_it:GothamProBlackItalic;
	.font_it{
		font-family:@font_base_it;
	}
	.font_300{
		font-family:@font_300;
	}
	.font_300_it{
		font-family:@font_300_it;
	}
	.font_500{
		font-family:@font_500;
	}
	.font_500_it{
		font-family:@font_500_it;
	}
	.font_700{
		font-family:@font_700;
	}
	.font_700_it{
		font-family:@font_700_it;
	}
	.font_900{
		font-family:@font_700;
	}
	.font_900_it{
		font-family:@font_900_it;
	}
};
.set_fonts() when (@font_opensans=true){
	@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i&subset=cyrillic,cyrillic-ext,greek,greek-ext,latin-ext,vietnamese');
	@font_base:'Open Sans',sans-serif;
	.font_it{
		font-style:italic;
	}
	.font_300{
		font-weight:300;
	}
	.font_300_it{
		font-weight:300;
		font-style:italic;
	}
	.font_500{
		font-weight:600;
	}
	.font_500_it{
		font-weight:600;
		font-style:italic;
	}
	.font_700{
		font-weight:700;
	}
	.font_700_it{
		font-weight:700;
		font-style:italic;
	}
	.font_900{
		font-weight:800;
	}
	.font_900_it{
		font-weight:800;
		font-style:italic;
	}
};
.set_fonts();

Использование:

body{
	font-family:@font_base;
}
.ex{
	.font_500();
	font-size:12px;
	& when (@font_opensans=true){
		font-size:14px;
	}
}
Categories: CSS Tags:
19 февраля 2019 Нет комментариев

Пример для less:

textarea{
	padding:15px;
	resize:none;
	scrollbar-color:fade(@color_link,80%) fade(@color_link,10%);
	scrollbar-width:thin;
}
textarea::-webkit-scrollbar{
	width:10px;
}
textarea::-webkit-scrollbar-track{
	background-color:fade(@color_link,10%);
}
textarea::-webkit-scrollbar-thumb{
	background-color:fade(@color_link,80%);
}
Categories: CSS Tags:
13 февраля 2019 Нет комментариев

Модальное окно будет показано при наведении курсора на верхнюю часть документа. Высота в примере 20px. Модальное окно в примере открывается с использованием fancybox.

$(document).ready(function(){
	var close_confirm=0;
	$(document).mousemove(function(e){
		if(e.pageY<=20&&!close_confirm){
			$("#close_confirm").fancybox().trigger('click');
			close_confirm++;
		}
	});
});
<a href="/link.html" class="popup fancybox.ajax" id="close_confirm"></a>
Categories: Javascript Tags: ,
8 февраля 2019 Нет комментариев
$(window).scroll(function(){
	if($(window).scrollTop()>130){
		$('header .top').addClass('fixed');
	}
	else{
		$('header .top').removeClass('fixed');
	}
});
header{
	.top{
		color:@color_white;
		background:@color_text;
		padding:10px 0;
		&.fixed{
			position:fixed;
			top:0;
			left:0;
			width:100%;
			z-index:10000;
		}
	}
}
Categories: CSS, Javascript Tags: , , ,
8 февраля 2019 Нет комментариев

Подключение плагинов:
https://github.com/jackocnr/intl-tel-input (https://intl-tel-input.com/)
https://github.com/digitalBush/jquery.maskedinput

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

<script src="/assets/js/jquery.maskedinput.min.js"></script>
<script src="/assets/js/intl-tel-input/js/intlTelInput-jquery.min.js"></script>

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

@import '../js/intl-tel-input/css/intlTelInput.min.css';

JS:

function phone_mask(){
	$.mask.definitions['9']='';
	$.mask.definitions['d']='[0-9]';
	$("input[name=phone],input.phone").mask("+7 ddd ddd-dd-dd");
	$("input[name=phone],input.phone").intlTelInput({
		autoHideDialCode:false,
		autoPlaceholder:"aggressive",
		placeholderNumberType:"MOBILE",
		preferredCountries:['ru','th'],
		separateDialCode:true,
		utilsScript:"/assets/js/intl-tel-input/js/utils.js",
		customPlaceholder:function(selectedCountryPlaceholder,selectedCountryData){
			return '+'+selectedCountryData.dialCode+' '+selectedCountryPlaceholder.replace(/[0-9]/g,'_');
		},
		//allowDropdown:false,
		//dropdownContainer:document.body,
		//excludeCountries:["us"],
		//formatOnDisplay:false,
		//geoIpLookup:function(callback){
		//	$.get("http://ipinfo.io",function(){},"jsonp").always(function(resp){
		//		var countryCode =(resp&&resp.country)?resp.country:"";
		//		callback(countryCode);
		//	});
		//},
		//hiddenInput:"full_number",
		//initialCountry:"auto",
		//localizedCountries:{'de':'Deutschland'},
		//nationalMode:false,
		//onlyCountries:['us','gb','ch','ca','do'],
	});
	$("input[name=phone],input.phone").on("close:countrydropdown",function(e,countryData){
		$(this).val('');
		//var mask=$(this).closest('.intl-tel-input').find('.selected-dial-code').html()+' '+$(this).attr('placeholder').replace(/[0-9]/g,'d');
		$(this).mask($(this).attr('placeholder').replace(/[_]/g,'d'));
	});
}
$(document).ready(function(){
	//example with fancybox
	$('.popup').fancybox({
		helpers:{title:null},
		padding:'0',
		width:'800',
		beforeShow:function(){
			phone_mask();
		}
	});
	//init
	phone_mask();
});
Categories: Javascript Tags:
8 февраля 2019 Нет комментариев

Когда текст обрезается после первого смайла (эмодзи).
Использовать кодировку utf8mb4_general_ci вместо utf8_general_ci

Categories: MySQL Tags: