Архив

Архив раздела ‘Web’
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_URI} ^(.+)/$
RewriteRule ^(.+)/$ /$1 [R=301,L]
Categories: Web Tags:
RewriteRule ^(.*)\.html$ https://%{HTTP_HOST}/$1 [R=301,L]
Categories: Web Tags:

Когда шрифты с https://fonts.google.com/ нужно сохранить и использовать локально.
Для загрузки шрифтов и генерации css воспользоваться сервисом:
https://google-webfonts-helper.herokuapp.com/

Categories: Web Tags:
23 ноября 2017 Нет комментариев

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

$(document).ready(function(){
	$("article table").wrapAll('<div class="contenttable"></div>');
});
article .contenttable{
	overflow-y:auto;
}
Categories: Web 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:
6 сентября 2017 Нет комментариев
<object data="/files/file.pdf" type="application/pdf" width="100%" height="450px">
	<a href="/files/file.pdf">Download PDF file</a>
</object>

или

<iframe src="https://docs.google.com/viewer?url=http://site.ru/files/file.pdf&embedded=true" 
style="width:100%;height:450px;" frameborder="0">Ваш браузер не поддерживает фреймы</iframe>
Categories: Web Tags:
11 января 2017 Нет комментариев

HTML:

<script src="https://api-maps.yandex.ru/2.1/?lang=ru_RU" type="text/javascript"></script>
<div id="map"></div>

Javascript:

ymaps.ready(init);
function init(){
	var myMap=new ymaps.Map("map",{
		center:[59.974504,30.550266],
		zoom:11,
		controls:['zoomControl']
	}),
	Placemark1=new ymaps.Placemark([60.002148,30.272623],{
		balloonContent:'Балун 1',
		hintContent:'Стандартный значок метки 1',
	},{
		preset:'islands#redDotIcon'
	}),
	Placemark2=new ymaps.Placemark([59.935935,30.363452],{
		balloonContent:'Балун 2',
		hintContent:'Стандартный значок метки 2',
	},{
		preset:'islands#redDotIcon'
	});
	myMap.geoObjects.add(Placemark1).add(Placemark2);
	myMap.behaviors.disable('scrollZoom');
}

CSS:

#map{
	height:390px;
}
[class*="ymaps-2"][class*="-ground-pane"]{
	filter:url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
	-webkit-filter:grayscale(100%);
}

На основе: http://jsfiddle.net/9aj8j/76/

Categories: Web Tags: ,