Архивы WEB - Страница 4 из 55

Текущая дата в input

03.05.2024 Павел Грибов WEB

Задача: Необходимо чтобы при отображении на HTML странице поля input с типом дата, автоматически подставлялась определенная дата (заполнение текущей датой поля input). Ну например текущая+14 дней.

Решение: собственно без javascript тут не обойтись (ну если исключить вариант, что html генерируется на сервере, и соответственно заполняется поле value. Но это не наш метод (с)

HTML:

    <div class="formbuilder-date form-group field-date_start">
        <label for="date_start" class="formbuilder-date-label">Дата начала отпуска
            <br>
        </label>
        <input type="date" class="form-control" name="date_start" access="false" id="date_start">
    </div>

<label for="date_start" class="formbuilder-date-label">Дата начала отпуска

<br>

</label>

</div>

JavaScript:

<script>
    var date = new Date(Date.now());
    date.setDate(date.getDate() + 14);    
    date_start.value=date.toISOString().split("T")[0];
</script>

var date = new Date(Date.now());

date.setDate(date.getDate() + 14);

date_start.value=date.toISOString().split("T")[0];

</script>

Что тут интересного? Ну фактически мы пользуемся тем, что value у тега input с типом даты обязательно должно быть в формате гггг-мм-дд, т.е. ISO формат, а в ISO формат мы можем пере конвертировать дату полученную при помощи функции Date. Время нам не нужно, поэтому отсекаем его, разделив дату по разделителю «Т», и взяв первый элемент массива.

Оставить комментарий input, текущая дата

Дата истечения сертификата

10.04.2024 Павел Грибов WEB

Неожиданно задался вопросом как проверить дату истечения сертификата сайта (дата истечения сертификата сайта), если нет возможности воспользоваться для этого онлайн-сервисами, а еще коварный AVP Kaspersky на ПК в браузере подменяет сертификат на свой. В самих файлах *.key *.crt визуально даты не наблюдаются.. Остаётся несколько вариантов: посмотреть по дате создания файла, и прибавить год ;). Ну так себе вариант. Второй, правильный — воспользоваться утилитой командной строки openssl. Примерно так:

openssl x509 -enddate -noout -in wiiudhioweu_2023.crt

1	openssl x509 -enddate -noout -in wiiudhioweu_2023.crt

Ну или если используете letsencrypt,то файл с расширением pem:

openssl x509 -enddate -noout -in fullchain3.pem

1	openssl x509 -enddate -noout -in fullchain3.pem

На выходе будет примерно так:

Оставить комментарий дата истечения сертификата

Will-change потребляет слишком много памяти

08.04.2024 Павел Грибов WEB

На днях на одном из сайтов, столкнулся с интересной ошибкой, которая выводится в консоли браузера Firefox:

Will-change потребляет слишком много памяти. Лимитом бюджета является площадь поверхности документа умноженная на 3 (510230 пикселей). Вхождения will-change, превышающие бюджет, будут проигнорированы

Проведя небольшое расследование, понял что проблема кроется в коде галереи WordPress, которая выводит картинки на страницы в слишком хорошем качестве (читай в оригинальном). И когда картинок становится на странице больше чем несколько, соответственно и происходит данная оказия. Исправил, покопавшись в исходном коде. А именно заменил функцию wp_get_attachment_metadata(), которая выдает url оригинального файла, на wp_get_attachment_image_src, которая может выдавать URL уже нужного размера. При использовании стандартной медиабиблиотеки в wordpress, она при загрузке автоматически режет файл на наиболее востребованные размеры.

Will-change потребляет слишком много памяти

Другие статьи по wordpress

Оставить комментарий Will-change, wordpress, память

Картинка из base64

03.04.2024 Павел Грибов WEB

Довольно типичная задача — нужда чтобы изображение полученное в виде данных при помощи например запроса ajax (картинка из base64), отобразилась на веб странице. Решение простое, и даже не требует никаких перекодировок, так как, движёк браузера уже позволяет отображать такие картинки, достаточно указать ему формат данных источника. Например так:

var image = new Image();
image.src = 'data:image/png;base64,iVBORw0K...';
document.body.appendChild(image);

var image = new Image();

image.src = 'data:image/png;base64,iVBORw0K...';

document.body.appendChild(image);

Ну а если задачу рассматривать в комплексном виде (картинка из base64), то готовый код с запросом данных для отображения картинки может выглядеть так:

<img id='base64image'>
<script>       
        $.ajax({
            type: 'POST',
            url: '/getdata.php',
            success: function(data){
               document.getElementById('base64image').src = `data:image/png;base64,${data.image.content}`;
            },
            dataType: 'json',
        });
</script>

$.ajax({

type: 'POST',

url: '/getdata.php',

success: function(data){

document.getElementById('base64image').src = `data:image/png;base64,${data.image.content}`;

dataType: 'json',

});

</script>

Оставить комментарий base64, картинка

Затененный задний фон для модального окна

28.03.2024 Павел Грибов WEB

Довольно часто встречающаяся задача: затененный задний фон модального окна или элемента веб страницы.Решается задача довольно просто, с использованием псевдоэлементов :before и :after. Обращаю внимание, что их можно использовать только в парных тегах вида <div></div>, и соответственно нельзя в тегах вида input (т.е. не парных). Еще одним нюансом является то, что значение свойства display может быть только: block, inline, none, list-item. Все остальные значения будут трактоваться как block.

Например задача получить страницу вида:

Решается примерно так: сначала определим стили CSS:

.application:before {
   content: '';
  position: fixed;
  z-index: 2;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
   background: url(http://ultraimg.com/images/Ho6hQWs.jpg) center no-repeat;
  background-size: cover;
    filter: blur(2px);
}

.application:after {
  content: '';
  position: fixed;
  z-index: 2;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,.5);
}
.select_area_color_lent_tag{
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 250px;
  height: 250px;
  background-color: white;
  border: 1px solid black;
  padding: 20px;
  display: flex;
  flex-wrap: wrap;
  text-align: center;
  justify-content: space-around;
  z-index: 20;    
}

.application:before {

content: '';

position: fixed;

z-index: 2;

top: 0;

left: 0;

right: 0;

bottom: 0;

background: url(http://ultraimg.com/images/Ho6hQWs.jpg) center no-repeat;

background-size: cover;

filter: blur(2px);

}

.application:after {

content: '';

position: fixed;

z-index: 2;

top: 0;

left: 0;

right: 0;

bottom: 0;

background: rgba(0,0,0,.5);

}

.select_area_color_lent_tag{

position: fixed;

top: 50%;

left: 50%;

transform: translate(-50%, -50%);

width: 250px;

height: 250px;

background-color: white;

border: 1px solid black;

padding: 20px;

display: flex;

flex-wrap: wrap;

text-align: center;

justify-content: space-around;

z-index: 20;

}

HTML для этих стилей может выглядеть таким:

        <div class="application" style="display: none">            <div class="select_area_color_lent_tag">            </div>        </div>

1	<div class="application" style="display: none"> <div class="select_area_color_lent_tag"> </div> </div>

В нужный момент достаточно показать блок application, и получим картинку как на скриншоте выше,а именно затененный задний фон модального окна:

$(".application").show()

1	$(".application").show()

А здесь можно посмотреть еще много советов по работе с CSS

Оставить комментарий css, html, затененный задний фон

« 1 2 3 4 5 6 … 55 »

Пн	Вт	Ср	Чт	Пт	Сб	Вс
					1	2
3	4	5	6	7	8	9
10	11	12	13	14	15	16
17	18	19	20	21	22	23
24	25	26	27	28	29	30