Архив

Архив раздела ‘Javascript’
13 апреля 2022 1 комментарий

Вместо iframe

<iframe width="640" height="360" src="https://www.youtube.com/embed/<?=$item['youtube_id']?>?autoplay=0" allowfullscreen></iframe>

отображаем div

<div class="youtube" id="<?=$item['youtube_id']?>"></div>

css:

.youtube{
	background-position:center;
	background-repeat:no-repeat;
	position:relative;
	display:inline-block;
	overflow:hidden;
	transition:all 200ms ease-out;
	cursor:pointer;
	height:360px;
}
.youtube .play{
	background:url('../images/youtube-play-btn.png') no-repeat;
	background-position:0 -50px;
	-webkit-background-size:100% auto;
	background-size:100% auto;
	position:absolute;
	height:50px;
	width:69px;
	transition:none;
	top:0;
	left:0;
	right:0;
	bottom:0;
	margin:auto;
	cursor:pointer;
}
.youtube:hover .play{
	background-position:0 0;
}

javascript:

'use strict';
function r(f){/in/.test(document.readyState)?setTimeout('r('+f+')',9):f()}
r(function(){
	if(!document.getElementsByClassName){
		var getElementsByClassName=function(node, classname){
			var a=[];
			var re=new RegExp('(^| )'+classname+'( |$)');
			var els=node.getElementsByTagName("*");
			for(var i=0,j=els.length;i<j;i++)
				if(re.test(els[i].className))a.push(els[i]);
			return a;
		}
		var videos=getElementsByClassName(document.body,"youtube");
	}
	else{
		var videos=document.getElementsByClassName("youtube");
	}
	var nb_videos=videos.length;
	for (var i=0;i<nb_videos;i++){
		videos[i].style.backgroundImage='url(https://i.ytimg.com/vi/'+videos[i].id+'/sddefault.jpg)';
		var play=document.createElement("div");
		play.setAttribute("class","play");
		videos[i].appendChild(play);
		videos[i].onclick=function(){
			var iframe=document.createElement("iframe");
			var iframe_url="https://www.youtube.com/embed/"+this.id+"?autoplay=1&autohide=1";
			if(this.getAttribute("data-params"))iframe_url+='&'+this.getAttribute("data-params");
			iframe.setAttribute("src",iframe_url);
			iframe.setAttribute("frameborder",'0');
			iframe.style.width=this.style.width;
			iframe.style.height=this.style.height;
			this.parentNode.replaceChild(iframe,this);
		}
	}
});

Картинка: youtube-play-btn.zip
На основе: https://sitehere.ru/uskorit-zagruzku-stranic-sajta

Categories: CSS, Javascript Tags: ,
9 декабря 2021 Нет комментариев
$.fn.stickyfloat=function(options,lockBottom){
	var $obj=this;
	var parentPaddingTop=parseInt($obj.parent().css('padding-top'));
	var startOffset=$obj.parent().offset().top;
	var opts=$.extend({startOffset:startOffset,offsetY:parentPaddingTop,duration:200,lockBottom:true},options);
	$obj.css({position:'absolute'});
	if(opts.lockBottom){
		var bottomPos=$obj.parent().height()-$obj.height()+parentPaddingTop;
		if(bottomPos<0)
			bottomPos=0;
	}
	$(window).scroll(function(){
		$obj.stop();
		var pastStartOffset=$(document).scrollTop()>opts.startOffset;
		var objFartherThanTopPos=$obj.offset().top>startOffset;
		var objBiggerThanWindow=$obj.outerHeight()<$(window).height();
		if((pastStartOffset||objFartherThanTopPos)&&objBiggerThanWindow){
			var newpos=($(document).scrollTop()-startOffset+opts.offsetY);
			if(newpos>bottomPos)
				newpos=bottomPos;
			if($(document).scrollTop()<opts.startOffset)
				newpos=parentPaddingTop;
			$obj.animate({top:newpos},opts.duration);
		}
	});
};

Пример использования:

$(document).ready(function(){
	setTimeout(function(){
		$('#main .left').css('min-height',$('#main').height());
		$('#main .inner').stickyfloat({duration:500});
	},2000);
});
<div id="main">
	<div class="left">
		<div class="inner">content</div>
	</div>
	<div class="right"></div>
	<div class="clear"></div>
</div>
.left,.right{
	width:50%;
}
.left{
	position:relative;
	float:left;
}
.right{
	float:right;
}
.clear{
	clear:both;
}

Источник: https://ruseller.com/lessons.php?id=999&rub=32

Categories: Javascript Tags:
9 декабря 2021 Нет комментариев
$.fn.setCursorPosition=function(pos){
	if($(this).get(0).setSelectionRange){
		$(this).get(0).setSelectionRange(pos,pos);
	}
	else if($(this).get(0).createTextRange){
		var range=$(this).get(0).createTextRange();
		range.collapse(true);
		range.moveEnd('character',pos);
		range.moveStart('character',pos);
		range.select();
	}
};
function set_mask_cursor(){
	$('input[name="phone"]').on('click',function(){
		$(this).setCursorPosition(4);
	});
	$('input[name="code"]').on('click',function(){
		$(this).setCursorPosition(0);
	});
}
$(document).ready(function(){
	$("input[name=phone]").mask("+7 (999) 999-99-99");
	$("input[name=code]").mask("9999");
	set_mask_cursor();
});
Categories: Javascript Tags:
28 сентября 2021 Нет комментариев
new Date(1632822057*1000).toLocaleDateString("ru-RU")
Categories: Javascript Tags:
16 сентября 2021 Нет комментариев

Без циклической прокрутки:

var owl_catalog_item=$('.owl_catalog_item');
owl_catalog_item.owlCarousel({
	items:1,
	loop:false,
	margin:0,
	autoplay:true,
	autoplayTimeout:1000,
	autoplayHoverPause:false,
	dots:false,
	nav:false,
	navText:['<i class="fa fa-angle-left"></i>','<i class="fa fa-angle-right"></i>'],
	responsive:{
		0:{
		},
		480:{
		},
		768:{
		}
	}
});
owl_catalog_item.trigger('stop.owl.autoplay');
$('.catalog .item').on('mouseenter',function(){
	if($(this).find('.owl_catalog_item a').length>1){
		$(this).find('.owl_catalog_item').trigger('play.owl.autoplay',[1000]);
	}
});
$('.catalog .item').on('mouseleave',function(){
	$(this).find('.owl_catalog_item').trigger('stop.owl.autoplay');
	$(this).find('.owl_catalog_item').trigger('to.owl.carousel',0);
});

С циклической прокруткой:

var owl_catalog_item=$('.owl_catalog_item');
owl_catalog_item.owlCarousel({
	items:1,
	loop:true,
	margin:0,
	autoplay:true,
	autoplayTimeout:1000,
	autoplayHoverPause:false,
	dots:false,
	nav:false,
	navText:['<i class="fa fa-angle-left"></i>','<i class="fa fa-angle-right"></i>'],
	responsive:{
		0:{
		},
		480:{
		},
		768:{
		}
	}
});
owl_catalog_item.trigger('stop.owl.autoplay');
$('.catalog .item').on('mouseenter',function(){
	$(this).find('.owl_catalog_item').trigger('play.owl.autoplay',[1000]);
})
$('.catalog .item').on('mouseleave',function(){
	$(this).find('.owl_catalog_item').trigger('stop.owl.autoplay');
});
Categories: Javascript Tags:
5 августа 2021 Нет комментариев

В примере по клику на 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'));
	});
});
Categories: Javascript Tags:

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

Categories: Javascript, PHP Tags: , ,