KRYLOVblog

Архив

2021 год

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

css точки между текстом в таблице

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

less:

.pricedesc{
	width:100%;
	margin-bottom:20px;
	&>div{
		display:flex;
		justify-content:space-between;
		&>div{
			text-align:left;
			font-size:14px;
			line-height:20px;
			font-weight:700;
			padding:2px 0;
			&:nth-child(2){
				flex:1 0;
				border-bottom:1px dotted #d2d2d2;
				height:1em;
				margin:0 .4em;
			}
		}
	}
}

html:

<div class="pricedesc">
	<div>
		<div>Взнос в КФ ВВ</div>
		<div></div>
		<div>0 ₽</div>
	</div>
	<div>
		<div>Взнос в КФ ОДО</div>
		<div></div>
		<div>0 ₽</div>
	</div>
	<div>
		<div>Страхование</div>
		<div></div>
		<div>0 ₽</div>
	</div>
	<div>
		<div>Вступительный взнос</div>
		<div></div>
		<div>0 ₽</div>
	</div>
	<div>
		<div>Членские взносы</div>
		<div></div>
		<div>0 ₽</div>
	</div>
</div>

No ‘Access-Control-Allow-Origin’ header is present on the requested resource

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

При ошибке

Access to XMLHttpRequest at 'https://site1.ru/api.php' from origin 'https://site2.ru' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

добавить на отдающий данные сайт (в примере site1.ru) заголовок

header('Access-Control-Allow-Origin: *');

js copy

JavascriptНет комментариев

В примере по клику на i в блоке .link скопировать ссылку внутри этого блока

function copyToClipboard(textToCopy){
	if(navigator.clipboard&&window.isSecureContext){
		return navigator.clipboard.writeText(textToCopy);
	}
	else{
		let textArea=document.createElement("textarea");
		textArea.value=textToCopy;
		textArea.style.position="fixed";
		textArea.style.left="-999999px";
		textArea.style.top="-999999px";
		document.body.appendChild(textArea);
		textArea.focus();
		textArea.select();
		return new Promise((res,rej)=>{
			document.execCommand('copy')?res():rej();
			textArea.remove();
		});
	}
}
$(document).ready(function(){
	$('.link i').on('click',function(){
		var link=$(this).closest('.link').find('a').attr('href');
		copyToClipboard(link).then(()=>console.log('copied')).catch(()=>console.log('not copied'));
	});
});

php get key min value array

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

Массив:

print_r($result_price);
Array
(
    [econom_mag] => 1800
    [econom] => 510
    [def] => 870
)

Ищем ключ минимального значения массива:

$min_key=array_keys($result_price,min($result_price));
print_r($min_key);
Array
(
    [0] => econom
)

input focus увеличение iphone

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

убрать автоматическое масштабирование при активном input,textarea,select
css:

@media screen and (-webkit-min-device-pixel-ratio:0){
	select,
	textarea,
	input{
		font-size:16px;
	}
}

или запретить масштабирование в принципе:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>

images justify css

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

less:

.justify{
	text-align:justify;
	img{
		display:inline-block;
	}
	&:after{
		content:"";
		display:inline-block;
		width:100%;
		height:0;
	}
}

html:

<p class="justify">
	<img alt="" src="/upload/image/about.jpg" />
	<img alt="" src="/upload/image/about.jpg" />
	<img alt="" src="/upload/image/about.jpg" />
	<img alt="" src="/upload/image/about.jpg" />
</p>

фон webp

Javascript, PHPНет комментариев

javascript:

function canUseWebp(){
	let elem=document.createElement('canvas');
	if(!!(elem.getContext&&elem.getContext('2d'))){
		return elem.toDataURL('image/webp').indexOf('data:image/webp')==0;
	}
	return false;
}
window.onload=function(){
	let images=document.querySelectorAll('[data-bg]');
	for(let i=0;i<images.length;i++){
		let image=images[i].getAttribute('data-bg');
		images[i].style.backgroundImage='url('+image+')';
	}
	let isitFirefox=window.navigator.userAgent.match(/Firefox\/([0-9]+)\./);
	let firefoxVer=isitFirefox?parseInt(isitFirefox[1]):0;
	if(canUseWebp()||firefoxVer>=65){
		let imagesWebp=document.querySelectorAll('[data-bg-webp]');
		for(let i=0;i<imagesWebp.length;i++){
			let imageWebp=imagesWebp[i].getAttribute('data-bg-webp');
			imagesWebp[i].style.backgroundImage='url('+imageWebp+')';
		}
	}
};

html:

<div class="item" style="background-image:url('/img/banners/banner2.webp');" data-bg="/img/banners/banner2.jpg" data-bg-webp="/img/banners/banner2.webp"></div>

пример программного вывода:

function attr_background_image($image,$dir,$add=''){
	$html='';
	$image_path=ROOT_HTTP.$dir.$image;
	$image_pathinfo=pathinfo($image_path);
	$ext=($image_pathinfo['extension']=='jpg')?'jpeg':$image_pathinfo['extension'];
	if(USE_WEBP==1&&$ext!='svg'&&file_exists(ROOT_DIR.$dir.$image_pathinfo['filename'].'.webp')){
		$html.=' style="background-image:url(\''.ROOT_HTTP.$dir.$image_pathinfo['filename'].'.webp\');" data-bg="'.ROOT_HTTP.$dir.$image.'" data-bg-webp="'.ROOT_HTTP.$dir.$image_pathinfo['filename'].'.webp"';
	}
	else{
		$html.=' style="background-image:url(\''.ROOT_HTTP.$dir.$image.'\');'.$add.'"';
	}
	return $html;
}
$block_bg='';
if($block['photo']||$block['bgcolor']){
	if($block['photo']){
		$bgcolor='';
		if($block['bgcolor']){
			$bgcolor.='background-color:'.$block['bgcolor'].';';
		}
		$block_bg=attr_background_image($block["photo"],IMAGES_BLOCKS_DIR,$bgcolor);
	}
	elseif($block['bgcolor']){
		$block_bg.=' style="';
		$block_bg.='background-color:'.$block['bgcolor'].';';
		$block_bg.='"';
	}
}

или

<div class="item"<?=attr_background_image($item["photo"],IMAGES_BANNERS_DIR)?>>

https://webinmind.ru/javascript/webp-to-background-image