Быстрый поиск
Введите фрагмент названия статьи для поиска
Раскрытие текста при нажатии на ссылку
13.08.2019 | Категория: Web-мастеру и не только | Автор: ManHunter
Раскрывающиеся блоки текста бывают очень удобны, когда требуется разместить на странице достаточно объемные текстовые и/или графические материалы второстепенной важности. Это могут быть какие-то пояснительные тексты к основному материалу, объемные цитаты и другая информация, которая может быть полезной для пользователя, но при этом не должна отвлекать от чтения. Сегодня я расскажу, как это можно сделать максимально просто с минимальным использованием скриптов и стилей.Начнем с верстки. У нас есть блок текста, который будет раскрываться, и ссылка, при нажатии на которую это должно происходить. Все самое обычное, никаких нестандартных приемов верстки.
Code (HTML) : Убрать нумерацию
- <div class="textbox" id="mytext">
- Тут находится большой текст, который мы должны показать при нажатии на ссылку
- </div>
- <div>
- <a href="#" onclick="document.getElementById('mytext').classList.add('opened');
- return false;">Посмотреть весь текст</a>
- </div>
Code: Убрать нумерацию
- <style type="text/css">
- .textbox {
- overflow: hidden;
- height: 100px;
- border: 1px dashed #A0A0A0;
- }
- .opened {
- overflow: auto;
- height: auto;
- }
- .opened+div {
- display: none;
- }
- </style>
Читать статью целиком »
Просмотров: 10279 | Комментариев: 9
Получение всех функций JavaScript на странице
21.07.2019 | Категория: Web-мастеру и не только | Автор: ManHunter
Иногда в процессе разработки появляются странные задачи. Вот и на этот раз возникла необходимость узнать все пользовательские функции JavaScript, которые задействованы на странице. Немного колдунства и получился вот такой код:Code (JavaScript) : Убрать нумерацию
- (function() {
- var source;
- for (var method in window) {
- if (typeof window[method]=="function" && window.hasOwnProperty(method)) {
- // Текст функции
- source=Function.prototype.toString.call(eval(method));
- // Пропускаем нативные функции
- if ((/\{\s*\[native code\]\s*\}/).test(source)) { continue; }
- // Вывести название и текст функции
- document.write('<pre>');
- document.write('<div><b>'+method+'</b>:</div>');
- document.write(source);
- document.write('</pre>');
- }
- }
- }());
Просмотров: 1229 | Комментариев: 0
Исследование защиты программы 1st JavaScript Editor
09.01.2019 | Категория: Темная сторона Силы | Автор: ManHunter
Скриншот программы 1st JavaScript Editor
1st JavaScript Editor - редактор для начинающих и профессиональных web-разработчиков, поддерживающий синтаксис JavaScript, HTML, CSS, VBScript, PHP и ASP. Перечислять все его возможности я не буду, вы можете посмотреть их на офсайте, скажу только, что они весьма обширны. Без регистрации редактор работает три недели, после чего придется обратиться в ближайшую кассу. Или придется прочитать эту статью.
Читать статью целиком »
Просмотров: 2343 | Комментариев: 10
Сортировка строк HTML-таблицы на JavaScript
05.12.2018 | Категория: Web-мастеру и не только | Автор: ManHunter
Понадобился скрипт для сортировки строчек HTML-таблицы в зависимости от значений столбцов. В этих ваших интернетах есть немало готовых решений, но, как часто случается на моей работе, постановка задачи включает в себя кучу дополнительных условий. Например, в ячейке таблицы может быть не просто текст, а несколько HTML-тегов, сортируемое значение может быть отформатировано особым образом или к нему могут быть дописаны какие-нибудь дополнительные данные, а то и вовсе отображаемое текстовое значение в ячейке соответствует какому-то внутреннему индексу в системе и сортировать надо именно по этому индексу. Короче, отображаемое содержимое ячеек таблицы не влияет на ожидаемый порядок их сортировки.Разнобой со значениями, влияющими на сортировку, решается добавлением к каждой строке таблицы набора data-атрибутов, введенных в HTML5. Вкратце, чтобы не грузить вас теорией, data-атрибуты позволяют хранить нужную вам дополнительную информацию в стандартных элементах HTML без применения хаков вроде нестандартных атрибутов, лишних DOM-свойств и т.п. Например:
Code (HTML) : Убрать нумерацию
- <tr data-price="10" data-ident="4" data-area="32" data-dev="СуперСтрой">
- <td>менее 10 млн.</td>
- <td>без отделки</td>
- <td>32 м<sup>2</sup></td>
- <td>ООО СуперСтрой</td>
- </tr>
- <tr data-price="50" data-ident="3" data-area="62.7" data-dev="ПИК">
- <td>50.000.000</td>
- <td>черновая</td>
- <td>62.7 м<sup>2</sup></td>
- <td>ГК "ПИК"</td>
- </tr>
Читать статью целиком »
Просмотров: 4859 | Комментариев: 7
Отмена AJAX-запроса
07.05.2018 | Категория: Web-мастеру и не только | Автор: ManHunter
Отмена AJAX-запроса
Вряд ли кто-то будет спорить, что технология AJAX для передачи данных - это очень удобно. В дополнение к предыдущим статьям я расскажу, как можно отменить AJAX-запрос. Зачем это надо? Пример из практики: есть карта, на видимую часть которой асинхронно подгружаются объекты. Пользователь перетаскивает карту, соответственно, на каждый новый видимый участок запрашивается новый список объектов. Иногда получается так, что запрос выполняется дольше, чем пользователь перемещает карту. Накапливается очередь из запросов на сервер, в свою очередь приводящая к очереди на отображение данных на клиентской стороне. Хотя правильно было бы показывать только результаты самого последнего запроса, а остальные запросы просто подавлять.
Читать статью целиком »
Просмотров: 2092 | Комментариев: 0
Материалы, опубликованные на этом сайте, не рекомендуются к просмотру лицам в возрасте до 16 лет без присутствия взрослых.
Вам помог этот сайт?
Поблагодарили 34,317 раз
Поблагодарили 34,317 раз
 |
2024 - АПРЕЛЬ |  |
||||
| Пн | Вт | Ср | Чт | Пт | Сб | Вс |
| 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 | |||||
День российской полиграфии
День юридической службы Министерства внутренних дел России
День принятия Крыма, Тамани и Кубани в состав Российской империи
День подснежника
Буду очень благодарен, если размеcтите мою кнопочку:
 |
Яндекс ИКС: 380 |
 |
 |