Евгений Петров
Миром правят маленькие с#@&ки
-
вклад
-
0вопросов
-
950ответов
-
63%решений
-
Как задать положение фиксированного блока в зависимости от размера другого?
По умолчанию свойства позиционирования равны auto, что означает расположение элемента по месту его появления. Достаточно вложить второй блок в первый, расположить его после контента и не трогать у него top.
HTML<div class="f1"> <div class="f1-content"></div> <div class="f2"> <div class="f2-content"></div> </div> </div>
CSS.f1, .f2 { position: fixed; left: 0; right: 0; } .f1 { top: 0; } .f1-content { height: 100px; //может меняться в любой момент background: rgba(102, 153, 204, .7); } .f2-content { height: 100px; background: rgba(51, 102, 153, .7); }
Пример (кликать на верхнем блоке)
Хотя не понимаю, зачем вам такой геморрой, если можно второй блок сделать обычным. Если оба блока лежат в фиксированном, то и управлять ими легче. -
Что будет с профессией html верстальщика в будущем через 3-5-10 лет?
И вот как приход компонентов убьёт необходимость знать HTML и CSS?
Предположим, что через 5 лет совместными усилиями появится конструктор, с помощью которого будет собираться всё на свете. А сборку и настройку компонентов кто будет проводить? А кастомизацию?
Да просто написать что-то своё, уникальное. Браузеры точно так же будут разбирать компоненты на то, что входит в эти самые HTML и CSS.
Вон — плагинов jQuery пруд пруди, но что-то вопросов меньше не становится. И знание нативного Javascript это не отменяет. -
Кастомные селекты, баг с выпадающим списком за html, body, вьюпорт. Объясните пожалуйста, как это происходит?
Вам следует почитать про flow root, containing block и stacking context.
Так называемый flow root с overflow, отличным от visible, обязан учитывать все внутренние контексты, для которых предоставляет containing block.
Пример -
Как прикрутить счетчик комментариев от Disqus к топикам на сайте?
Написано же:On the index or home page, append #disqus_thread to the end of each article URL which appears inside the href tag for the article comments link
Вот пример для первого же из топиков<footer class="topic-footer"> <ul class="list-unstyled list-inline small topic-info"> <li class="topic-info-author"> <a href="http://geekninja.ru/profile/romanstrukov/"><img src="http://geekninja.ru/uploads/images/00/00/35/2015/03/20/avatar_24x24.jpg?165946" alt="romanstrukov" class="avatar"></a> <a rel="author" href="http://geekninja.ru/profile/romanstrukov/">Роман Струков</a> </li> <li class="topic-info-date"> <time datetime="2015-04-23T11:30:52+03:00" title="23 апреля 2015, 11:30" class="text-muted"> 23.04.2015 </time> </li> <!-- Вот этот кусок для счётчика --> <li class="topic-info-comment"> <a href="http://geekninja.ru/podcasts/227#disqus_thread" class="topic-comment"></a> </li> </ul> </footer> -
Как избавится от полоски в сайдбаре?
У вас формируется пустой блок<div class="panel panel-default block" id="block_blogs"></div>
Или избавьтесь от генерации блока-пустышки (что правильно по сути), либо (ведь зачем-то этот id нужен?)#block_blogs { border: 0; } -
Как методом querySelector() продублировать ответ?
var elems = document.querySelectorAll('.test'); for (var i = elems.length; i--;) { elems[i].style.backgroundColor = '#69c'; } -
Запрет одной из кнопок на выполнение form action. Как?
Для решения вашей задачи следует, прежде всего, однозначно определять тип кнопок. Для отправки формы submit, для выполнения кода button. Не нужно кнопке, не связанной с отправкой формы, задавать тип submit.
Отдельно обрабатывать отправку формы (которая может случиться и не при клике на кнопку), отдельно click на кнопке с типом button.
Пример -
Круговое появление картинок?
Как уже сказал Максим Тимофеев, анимация строится через CSS (для старья можно писать небольшой полифилл с вычислением координат при круговом движении). Для запуска анимации достаточно управлять классом.
Пример (для переключения достаточно покликать на документе) -
Как правильно сделать разметку?
Тут задача обратная — центрировать разное количество строк по отношению к фиксированной высоте иконки.
Реализуется вот так
Чаще всего иконки задаются с помощью псевдоэлемента. Тогда всё будет примерно так (хотя чаще встречается абсолютное позиционирование :before, и в этом случае выравнивать требуется только элемент с текстом):
HTML<div class="item"><span class="item-text">...</span></div>
CSS.item { height: 60px; line-height: 60px; //вот правило, примерно центрирующее символ по высоте } .item:before, .item-text { display: inline-block; vertical-align: middle; } .item:before { content: ""; //или вставляем картинку width: 40px; height: 40px; margin-right: 10px; border-radius: 50%; background: #369; } .item-text { line-height: normal; //не забываем вернуть высоту линии в норму }
Вариант с использованием псевдоэлемента. -
Как исправить ошибку с неправильным положением текста?
Вроде, очевидно.left_menu_content_book_title { padding: 0 0 0 64px; }
Update: Было проще поправить код. Получилось вот так. -
Почему не работает overlay картинки на hover в ИЕ8?
Стоило бы, для начала, выяснить, что поддерживается в IE8, и, в частности, opacity и background-size (неожиданно, правда?).
А потом допилить свой пример до нужной кондиции, выделив background-size из описания фона и добавив в нужные местаfilter: alpha(opacity=...);
Вот только мешать такие правила с нормальными — не дело. Для старых IE подключайте свои файлы с помощью conditional comments. -
Как сделать, что бы скрипт с jquery отрабатывал?
Зачем вам нужна обязательно ссылка?
Если же вы хотите её оставить, то где-то в скрипте требуется$(document).on('click', '[data-dialog]', function (e) { e.preventDefault(); });
Update: Не нужно ничего никуда вставлять. Просто замените функцию в самом документе$(function () { var trigger = $('[data-dialog]'), type = trigger.data('dialog'), dialog = new DialogFx(type); trigger.on('click', function (e) { e.preventDefault(); dialog.toggle.bind(dialog); }); })();
И не забудьте про z-index чудовищной величины в .dropdown-menu. -
Как написать обработчик6 анализирующий данные (jQuery)?
Инструкция try/catch предназначена для обработки исключений, а не проверки значений на соответствие неким логическим условиям.
И да — вам нужны инструкции if/else или switch. -
Можно ли сверстать такое адаптивно?
Не нужно никаких колонок — берём и делаем, применяя transform и media queries.
Да и margin никакой нам не нужен, если хотим делать адаптивное меню.
Вот так оно выглядит -
Как выделить ссылку в тексте?
В Javascript такs.replace(/(https?:\/\/)([\w-]+(\.[\w-]+)+)/g, '<a href="$1$2">$2</a>');
Update: После справедливого замечания Сергей Семенко про регистр слегка дописал код. Наверняка, вЯпонии такое уже придумалиPHP такое реализуется.s.replace(/(https?:\/\/([\w-]+(\.[\w-]+)+))/ig, function () { return '<a href="' + arguments[1].toLowerCase() + '">' + arguments[2].toLowerCase() + '</a>'; });
Пример