Архив

Архив раздела ‘Javascript’
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:
24 августа 2018 Нет комментариев

При наведении на ссылку .link показываем блок .block, когда указатель мыши находится вне этого блока и вне ссылки — скрываем.

$(document).ready(function(){
	$('.link').hover(function(){
		$('.block').addClass('visible');
	});
	$(window).mousemove(function(event){
		if($(event.target).closest(".block").length||$(event.target).closest(".link").length)return;
		$('.block').removeClass('visible');
	});
});
.block{
	display:none;
}
.block.visible{
	display:block;
}
Categories: Javascript Tags:

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:

В случае, когда возникает ошибка Uncaught TypeError: a.indexOf is not a function при использовании последних версий Jquery, например в этом случае:

$(window).load(function(){
});

использовать:

$(window).on('load',function(){
});
Categories: Javascript Tags:
var win=window.open('https://google.com/','_blank');
win.focus();
Categories: Javascript Tags: