Архив

2019 год

Всего: 49 записей

textarea scrollbar color

19 февраля 2019CSSНет комментариев

Пример для 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%);
}

css

js — модальное окно при закрытии страницы

13 февраля 2019JavascriptНет комментариев

Модальное окно будет показано при наведении курсора на верхнюю часть документа. Высота в примере 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>

javascript jquery

Добавлять класс при прокрутке

8 февраля 2019CSS, JavascriptНет комментариев

$(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;
		}
	}
}

css javascript jquery less

intl-tel-input + jquery.maskedinput

8 февраля 2019JavascriptНет комментариев

Подключение плагинов:
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();
});

javascript

Текст обрезается при сохранении, mysql, смайлы

8 февраля 2019MySQLНет комментариев

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

mysql

get first array key — первый ключ ассоциативного массива

23 января 2019PHPНет комментариев

if(count($_GET['f'])>0){
	reset($_GET['f']);
	$first_f=key($_GET['f']);
	echo $first_f;
}

PHP

css — attribute in content

11 января 2019CSSНет комментариев

Чтобы в свойство css content автоматически подставлялось значение атрибута data-name тега.
Пример на less:

div{
	&:after{
		content:~"attr(data-name)";
	}
}

html:

<div data-name="test"></div>

css less