Заметки Программиста HTML CSS JS PHP

JavaScript (jQuery) подсчет символов в input или textarea формы.

Посчитаем текущее количество символов в полях формы (в тегах input и textarea), а также динамически отобразим их количество при изменении данных. HTML: <input class="counted" value="Some test string. Hi!" > <br> <input class="counted" value="Some test string. Goodby!" > <br> <textarea class="counted">Another test</textarea> CSS: .counted + span { margin-left:10px; } JavaScript (jQuery): $(document).ready(function() { $('.counted').eac

February 3

HTML список в несколько колонок с помощью CSS - простой способ

Для того чтобы вывести стандартный список <ul><li></li>....</ul> - маркированный или <ol><li></li>....</ol> - нумерованный список в несколько колонок достаточно прописать к нему в CSS стили: ul { list-style-position: inside; -moz-column-count: 3; -webkit-column-count: 3; column-count: 3; } До: Пункт списка 1 Пункт списка 2 Пункт списка 3 Пункт списка 4 Пункт списка 5 Пункт списка 6 Пун

February 3

Как с помощью js добавить html код в div. HTML в Div через JavaScript или jQuery.

Добавить можно, естественно, не только в DIV элемент на сайте, но и совершенно в любую другую конструкцию вашего HTML сайта. В примере будет рассмотрено 2 варианта вставки текста в html с помощью javascript и дополнительно вариант вставки кода через функцию, которая запускается по нажатию на кнопку. 1. На чистом JavaScript без jQuery Пример HTML - текст будет добавлен в тег <div> с классом demo <div id="description_id"> <div class="demo"></div> <

February 3

jQuery плавно показать скрыть блок div

Скрываем содержимое блока div или другого элемента html и реализовываем плавное разворачивание и сворачивание блока по нажатию на ссылку, кнопку или любой другой элемент. Пример HTML верстки <div class="full__desc"> <a href="#">Показать полное описание!</a> <div class="hide">Спрятанный текст. Спрятанный текст. Спрятанный текст. Спрятанный текст. Спрятанный текст. Спрятанный текст. Спрятанный текст. Спрятанный текст.</div> </div> Код JavaScript

February 3

JavaScript - cумма чисел в столбце HTML таблицы.

Посчитаем сумму чисел в конкретном столбце HTML таблицы на чистом JavaScript: HTML <div> <table id="pricelist"> <tr> <th>Название</th> <th>Цена</th> </tr> <tr> <td>Шарф</td> <td class="quantity">250</td> </tr> <tr> <td>Перчатки</td> <td class="quantity">1300</td> </tr> <tr> <td>Кепка</td> <td class="quantity"&g

Печенег in Веб-разработка

February 3

Joomla

VirtueMart 3 добавить дополнительное поле и поиск с сортировкой по новому полю в админке.

1. Выполнить SQL запрос в БД: ALTER TABLE `jos_virtuemart_products` ADD `new_pole` TEXT CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL AFTER `product_sku` Где: 'jos_virtuemart_products' - таблица в которую добавляем столбец (колонку); 'new_pole' - название добавляемой новой колонки (столбца); 'product_sku' - добавить после указанной колонки; TEXT - тип данных. Более подробно о всех типах данных можно ознакомиться по ссылке -> типы данных mysql 2. Добавляе

Печенег in Joomla

January 17

Веб-разработка

CODEPEN

CodePen - популярный онлайн-сервис для написания и быстрой отладки кода на HTML, CSS, JavaScript.

January 16

Как сделать так, чтобы ссылка внутри div заполняла всё пространство внутри div?

HTML: <div> <div class="box"> <a class="link" href="">Ссылка помещенная в div</a> </div> </div> CSS: .box { width: 250px; height: 70px; border: 1px solid #000; } .link { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }

December 9, 2022

Хаки

WordPress редактор режет iFrame - решено!

В сети можно найти полно решений этого вопроса..., но в моём случаи именно в этот раз ни один не сработал, редактор WP категорически отказывался принимать тег iFrame. Бился я над этим вопросом 1 день в итоге почти "плюнул" и был готов уже смотреть в сторону wp плагинов iFrame, коих я стараюсь избегать, но это уже другая история.... В общем и тут вспомнил что мне попадался коротенький php код который прописывается в functions.php, собственно он ниже: add_shortcode( 'iframe' , 'mycustom_

Печенег in Хаки

July 14, 2022

Хаки

Удалить все записи со стены ВК. Массовое удаление постов со стены ВКонтакте.

Для того чтобы удалить разом большое количество записей со стены сообщества вам потребуется пролистать стену вниз, чтобы открылось допустим 50-100 записей, у меня за раз удалялось и больше 200, затем открыть консоль разработчика и разместить скрипт: (function () { 'use strict'; if (!confirm('Удалить все записи со стены?')) return; var deletePostLink = document.body.querySelectorAll('a.ui_actions_menu_item[onclick^="wall.deletePost"]'); for (var i = 0; i < deletePostLink.length; i++) { del

Печенег in Хаки

January 4, 2022

Убрать браузерную обводку по клику на кнопке <button>, <input>, <a> или на <textarea>.

:focus { outline: none !important; } ::-moz-focus-outer, ::-moz-focus-inner { border: 0px !important; padding: 0; } a:focus, a:active, button:focus { outline: 0!important; outline-color: transparent!important; outline-width: 0!important; outline-style: none!important; box-shadow: 0 0 0 0 rgba(0,123,255,0)!important; } input, textarea, input:active, textarea:active { outline:none; } input[type="checkbox"]:focus, input[type="radio"]:focus { visibility: hidden; }

December 29, 2021

Псевдоклассы nth-child и nth-last-child варианты использования в CSS.

https://snipp.ru/html-css/nth-child#link-posledniy-element

Печенег in Веб-разработка

December 28, 2021

Веб-разработка

W3Schools - онлайн тестирование кода -> PHP, HTML, CSS, JavaScript, SQL, Python и др.

Образовательный веб-сайт Freemium для онлайн - обучения кодированию. Разработанный в 1998 году, он получил свое название от Всемирной паутины. Хорошо организованные и простые для понимания руководства по созданию веб-сайтов с множеством примеров использования HTML, CSS, JavaScript, SQL, Python, PHP, Bootstrap, Java, XML и др. https://www.w3schools.com/php/phptryit.asp?filename=tryphp_func_array_sum

December 25, 2021

SQL

Найти столбец таблицы по имени в phpMyAdmin, SQL запрос.

Выполнить: SELECT table_name FROM information_schema.columns WHERE column_name = 'имя_столбца'

Печенег in SQL

December 23, 2021

Картинки (изображения) в строке (ряду) одной высоты css используя object-fit.

Есть 4 картинки разного размера: HTML <div class="row img-gallery"> <div class="col-md-3 col-12"> <img src="img-1.webp" alt="Картинка 1" /> </div> <div class="col-md-3 col-12"> <img src="img-2.webp" alt="Картинка 2" /> </div> <div class="col-md-3 col-12"> <img src="img-3.webp" alt="Картинка 3" /> </div> <div class="col-md-3 col-12"> <im

December 22, 2021

Поменять местами div блоки вертикально. Flexbox CSS.

Краткая заметка по вертикальной смене порядка блоков <div> и других элементов документа html: Поддержка браузерами HTML <div class="group_block"> <div class="block_1">1й элемент</div> <div class="block_2">2й элемент</div> <div class="block_3">3й элемент</div> </div> CSS .group_block { display: flex; flex-direction: column; /* flex-direction: column-reverse; /* Включает обратный порядок */