HTML полезности

Различные любопытные штуки HTML, которые могут когда-либо пригодиться.

Обновление браузера

Обновление сайта через каждые 30 сек, вставлять в head

<meta http-equiv="Refresh" content="30" />

Обновление с редиректом (html)

<meta http-equiv="refresh" content="10; url=http://site.ru/">

Перенаправление (php, jquery)

Простое перенаправление:

<?php header('Location:http://site.ru/');
exit; ?>

Перенаправление с задержкой, в данном случае в 10 сек.:

<?php header('Refresh: 10; URL=http://site.ru/');
echo 'Данная страница переехала на новое место, через 10 сек. вы автоматически будете перенаправлены на нее.';
exit; ?>

Перенаправление jquery

<script type="text/javascript">
setTimeout('location.replace("http://site.ru/")', 10000);
</script>

Перенаправление с задержкой на чистом JS, без подключения библиотек:

<script>
function saygoodbuy() { window.location.href = '/'; }
setTimeout(saygoodbuy, 4000);
</script>

Перенаправление с 404 на Главую

Чтобы при ошибке 404 работало перенаправление на Главную страницу, нужно в шаблон 404.php прописать такой код:

<?php
header("HTTP/1.1 301 Moved Permanently");
header("Location: ".get_bloginfo('url'));
exit();
?>

Бегущая строка

<marquee direction="right" scrollamount='2'>Бегущая строка на WordPress</marquee>

Blockquote

<blockquote>
<p>As my fellow HTML5 Doctor, Oli Studholme has showed, people seldom quote exactly – so sacrosanctity of the quoted text isn’t a useful ideal – and in print etc, citations almost always appear as part of the quotation – it’s highly conventional.</p>
<span>— <cite><a href="http://www.brucelawson.co.uk/2013/on-citing-quotations-again/">Bruce Lawson</a></cite></span>
</blockquote>

css

blockquote {
    float: left;
    width: 46%;
    margin-left: 4%;
    border-left: 4px solid #5AB8DB;
    background-color: #fff;
    color: #555;
    margin-bottom: 25px;
    padding: 20px 30px;
    box-sizing: border-box;
}

blockquote:before {
    display: block;
    height: 0;
    content: "“";
    margin-left: -17%;
    font: italic 400%/1 Cochin,Georgia,"Times New Roman", serif;
    color: #999;
}
	
blockquote span {
    float: right;
    width: 100%;
    text-align: right;
}

As my fellow HTML5 Doctor, Oli Studholme has showed, people seldom quote exactly – so sacrosanctity of the quoted text isn’t a useful ideal – and in print etc, citations almost always appear as part of the quotation – it’s highly conventional.

— Bruce Lawson

Bruce Lawson

Кнопка скопировать в буфер обмена

Иногда для удобства требуется сделать кнопки копирования.

Верстка

<div id="mail"><a class="js-emaillink" href="mailto:<?php echo get_theme_mod( 'true_email' ); ?>"><i class="fa fa-envelope"></i><?php echo get_theme_mod( 'true_email' ); ?></a><button  title="Копировать" class="js-emailcopybtn"><i class="fa fa-files-o" aria-hidden="true"></i></button></div>

Скрипт

var copyEmailBtn = document.querySelector('.js-emailcopybtn');  
copyEmailBtn.addEventListener('click', function(event) {

	// Выборка ссылки с электронной почтой 
	var emailLink = document.querySelector('.js-emaillink');  
	var range = document.createRange();  
	range.selectNode(emailLink);  
	window.getSelection().addRange(range);  

	try {  
		// Теперь, когда мы выбрали текст ссылки, выполним команду копирования
		var successful = document.execCommand('copy');  
		var msg = successful ? 'successful' : 'unsuccessful';  
		console.log('Copy email command was ' + msg);  
	} catch(err) {  
		console.log('Oops, unable to copy');  
	}  

	// Снятие выделения - ВНИМАНИЕ: вы должны использовать
	// removeRange(range) когда это возможно
	window.getSelection().removeAllRanges();
	
});

Стиль кнопки «Копировать»

.js-emailcopybtn, .js-emailcopybtn:active {
border: none;
background: none;
margin-left: 5px;
cursor: pointer;
outline: none;
}

Копирование ссылки из input

Верстка

<p>Реферальная ссылка: 
	<input type="text" id="ref-link" value="https://site.ru/registry/?aff=123456789987654321" onclick="myFunction()">
</p>

Скрипт

// Скопировать ссылку в буфер обмена
function myFunction() {
	var copyText = document.getElementById('ref-link');

	/* Select the text field */
	copyText.select();

	/* Copy the text inside the text field */
	document.execCommand("copy");
	
	jQuery(copyText).after( '<small class="copied">Ссылка скопирована</small>' );
	setTimeout(function () { jQuery('.copied').remove(); }, 2000);
}

Стили

input#ref-link {width: 100%;}
.copied {position: absolute; background: #4CAF50; padding: 3px 15px; color: #fff; display: block;}