/ Сайтостроение / Адаптивность / HTML полезности

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>

Перенаправление с 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

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

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

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

Поделится информацией с друзьями

  • Комментарии
  • Вложения

Добавить комментарий

Пока нет комментариев. Будь первым!

HTML полезности
Изменить стиль карты Google Map
Рекомендации для васИзменить стиль карты Google MapOpttour.ru
Спасибо! Наш менеджер свяжется с Вами в течении 5 минут.