Архив

Архив раздела ‘Javascript’
25 августа 2015 Нет комментариев

Открыть хинт нажатием по ссылке вне карты:
Полный рабочий пример:

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
	var markers=[];
	function initialize(){
		var hLatlng=new google.maps.LatLng(59.939095,30.315868);
		var hOptions={
			zoom:10,
			center:hLatlng,
			panControl:false,
			zoomControl:true,
			scalecontrol:true,
			scrollwheel:false,
			mapTypeId:google.maps.MapTypeId.ROADMAP
		}
		var map=new google.maps.Map(document.getElementById("map_canvas"),hOptions); 
		var contentString='<div class="info_content" id="info_content_1"><p>Адрес 1</p></div>';
		var iLatlng=new google.maps.LatLng(59.939095,30.315868);
		var infowindow_1=new google.maps.InfoWindow({
			content:contentString
		});
		var marker_1=new google.maps.Marker({
			position:iLatlng,
			map:map,
			title:'Адрес 1'
		});
		markers.push(marker_1);
		google.maps.event.addListener(marker_1,'click',function(){
			infowindow_2.close();
			infowindow_1.open(map,marker_1);
		});
		var contentString='<div class="info_content" id="info_content_2"><p>Адрес 2</p></div>';
		var iLatlng=new google.maps.LatLng(59.90825,30.362823);
		var infowindow_2=new google.maps.InfoWindow({
			content:contentString
		});
		var marker_2=new google.maps.Marker({
			position:iLatlng,
			map:map,
			title:'Адрес 2'
		});
		markers.push(marker_2);
		google.maps.event.addListener(marker_2,'click',function(){
			infowindow_1.close();
			infowindow_2.open(map,marker_2);
		});
	}
	$(window).load(function(){
		initialize();
	})
</script>
<div class="addr_item">
	<p>Адрес 1 <a href="javascript:google.maps.event.trigger(markers[0],'click');">Показать на карте</a></p>
</div>
<div class="addr_item">
	<p>Адрес 2 <a href="javascript:google.maps.event.trigger(markers[1],'click');">Показать на карте</a></p>
</div>
<div id="map_canvas" style="width:640px;height:480px;"></div>

Для дополнительного функционала добавлено:
var markers=[];
markers.push(marker_1);
javascript:google.maps.event.trigger(markers[0],'click');
Предполагается, что адреса внутри foreach и порядок их инициализации на карте, и порядок ссылок совпадает.
infowindow_1.close(); — здесь нужно закрыть все остальные infowindow — также foreach тот же массив

Categories: Javascript Tags:
28 июля 2015 14 комментариев

(Disable mouse scroll wheel zoom on embedded Google Maps)
При прокрутке страницы колесиком мышки, когда курсор попадает на карту, вместо прокрутки далее страницы вниз происходит увеличение карты (особенно если карта на всю ширину страницы).
Как убрать?
Перед iframe добавляем div:

<div class="overlay" onClick="style.pointerEvents='none'"></div>
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d1998.5192766409587!2d30.2653292!3d59.940118700000006!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x469631284de3a6fb%3A0x17f2808218507f5a!2zMTYt0Y8g0LvQuNC90LjRjywg0KHQsNC90LrRgi3Qn9C10YLQtdGA0LHRg9GA0LM!5e0!3m2!1sru!2sru!4v1438004309074" width="100%" height="550" frameborder="0" style="border:0" allowfullscreen></iframe>

Стиль:

.overlay {
	background:transparent; 
	position:relative; 
	width:100%;
	height:550px;
	top:550px;
	margin-top:-550px;
}

И если пользователь все-таки решил работать с картой — при клике на блок, который появился поверх карты — убираем его:

$(document).ready(function(){
	$('.overlay').click(function() {
		$(this).remove();
	});
});

Правильнее всего конечно для этого случая рисовать карту через API с параметром scrollwheel:false, но, бывает, нужно решение именно для фрейма.

Categories: Javascript Tags:
var http='http://newdomain.ru';
var uri=location.pathname+location.search;
window.location.href=http+uri;
Categories: Javascript Tags:
function horoscope(){
	var zodiac=[
		[1,'','',''],
		[19,'Козерог (22.12–19.1)','Земля','Сатурн'],
		[18,'Водолей (20.1–18.2)','Воздух','Сатурн, Уран'],
		[20,'Рыбы (19.2–20.3)','Вода','Юпитер, Нептун'],
		[19,'Овен (21.3–19.4)','Огонь','Марс'],
		[20,'Телец (20.4–20.5)','Земля','Венера'],
		[21,'Близнецы (21.5–21.6)','Воздух','Меркурий'],
		[22,'Рак (22.6–22.7)','Вода','Луна'],
		[22,'Лев (23.7–22.8)','Огонь','Солнце'],
		[22,'Дева (23.8–22.9)','Земля','Меркурий'],
		[22,'Весы (23.9–22.10)','Воздух','Венера'],
		[22,'Скорпион (23.10–22.11)','Вода','Марс, Плутон'],
		[21,'Стрелец (23.11–21.12)','Огонь','Юпитер']
	];
	var d=document.getElementById('dd').value*1;
	var m=document.getElementById('mm').value*1;
	if (d<1||d>31) {
		m=0;
		d=0;
	}
	if (m<1||m>12) {
		m=0;
		d=0;
	}
	if (d>zodiac[m][0]) m+=1;
	if (m>12) m=1;
	if (zodiac[m][1]!='') {
		$('.choise_form_res').html(zodiac[m][1]+', '+zodiac[m][2]+', '+zodiac[m][3]);
		$('.choise_form_res').show();
	}
	else {
		$('.choise_form_res').html('');
		$('.choise_form_res').hide();
	}
}
$(document).ready(function(){
	$('.choise_form_inps input').change(function(){
		horoscope();
	});
});
<div class="choise_form_inps">
	<input type="text" name="dd" id="dd" value="" placeholder="день" />
	<input type="text" name="mm" id="mm" value="" placeholder="месяц" />
	<input type="text" name="yyyy" id="yyyy" value="" placeholder="год" />
</div>
<div class="choise_form_res" style="display:none"></div>

На основе: http://www.cyberforum.ru/javascript/thread430480.html
http://www.zodiack.ru/

Categories: Javascript Tags:
28 апреля 2015 1 комментарий
beforeShowDay:function(date){return[date.getDay()==6,""]},

Т.е. чтобы были активны только определенные дни недели, 6 заменить на порядковый номер дня, начиная с 0 — воскресенье.

Categories: Javascript Tags:
17 марта 2015 Нет комментариев

Может происходить смещение к верхней части страницы при нажатии по ссылке, если в стилях используется

html,body{
	height:100%;
}

Если стили все же необходимо сохранить, то:

$('.popup').fancybox({
	helpers:{
		overlay:{
			locked:false
		}
	},
});
Categories: Javascript Tags:
18 февраля 2015 Нет комментариев
setInterval("$('.carousel-stage').jcarousel('scroll','+=1')",5000);
Categories: Javascript Tags: